Skip to main content

JavaScript API

WordPress Playground comes with a JavaScript API client that grants you full control over your WordPress.

API here doesn't mean "REST API"

WordPress Playground is a browser-based application. The term API here refers to a set of functions you can call inside JavaScript. This is not a network-based REST API.

Quick start

To use the JavaScript API, you'll need:

  • An <iframe> element
  • The @wp-playground/client package (from npm or a CDN)

Here's the shortest example of how to use the JavaScript API in a HTML page:

style="width: 100%; height: 300px; border: 1px solid #000;"
<script type="module">
// Use unpkg for convenience
import { startPlaygroundWeb } from '';

const client = await startPlaygroundWeb({
iframe: document.getElementById('wp'),
remoteUrl: ``,
// Let's wait until Playground is fully loaded
await client.isReady();
/remote.html is a special URL

/remote.html is a special URL that loads the Playground API endpoint instead of the demo app with the browser UI. Read more about the difference between / and /remote.html and on this page.

Controlling the website

Now that you have a client object, you can use it to control the website inside the iframe. There are three ways to do that:

Debugging and testing

For quick testing and debugging, the JavaScript API client is exposed as window.playground by both index.html and remote.html.

> await playground.listFiles("/")
(6) ['tmp', 'home', 'dev', 'proc', 'internal', 'wordpress']

Note that in index.html, playground is a Proxy object and you won't get any autocompletion from the browser. In remote.html, however, playground is a class instance and you will benefit from browser's autocompletion.