Title: JavaScript API
Published: July 15, 2026
Last modified: July 16, 2026

---

# JavaScript API

## In this article

 * [Quick start](https://developer.wordpress.org/playground/developers/apis/javascript-api/?output_format=md#quick-start)
 * [Controlling the website](https://developer.wordpress.org/playground/developers/apis/javascript-api/?output_format=md#controlling-the-website)
 * [Debugging and testing](https://developer.wordpress.org/playground/developers/apis/javascript-api/?output_format=md#debugging-and-testing)

[ Back to top](https://developer.wordpress.org/playground/developers/apis/javascript-api/?output_format=md#wp--skip-link--target)

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](https://developer.wordpress.org/playground/developers/apis/javascript-api/?output_format=md#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:

    ```html
    <iframe id="wp" style="width: 100%; height: 300px; border: 1px solid #000;"></iframe>
    <script type="module">
        // Use unpkg for convenience

        const client = await startPlaygroundWeb({
            iframe: document.getElementById('wp'),
            remoteUrl: `https://playground.wordpress.net/remote.html`,
        });
        // Let's wait until Playground is fully loaded
        await client.isReady();
    </script>
    ```

**/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](https://developer.wordpress.org/playground/developers/apis/javascript-api/-html-vs-remote-html).

## 󠀁[Controlling the website](https://developer.wordpress.org/playground/developers/apis/javascript-api/?output_format=md#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:

 * [Playground API Client](https://developer.wordpress.org/playground/developers/apis/javascript-api/playground-api-client)
 * [Blueprint JSON](https://developer.wordpress.org/playground/developers/apis/javascript-api/blueprint-json-in-api-client)
 * [Blueprint functions](https://developer.wordpress.org/playground/developers/apis/javascript-api/blueprint-functions-in-api-client)

## 󠀁[Debugging and testing](https://developer.wordpress.org/playground/developers/apis/javascript-api/?output_format=md#debugging-and-testing)󠁿

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

    ```javascript
    > 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.

First published

July 15, 2026

Last updated

July 16, 2026

Edit article

[ Improve it on GitHub: JavaScript API ](https://raw.githubusercontent.com/WordPress/wordpress-playground/trunk/packages/docs/site/docs/developers/06-apis/javascript-api/01-index.md)

Changelog

[ See list of changes: JavaScript API ](https://developer.wordpress.org/playground/developers/apis/javascript-api/?output_format=md#)

[  Previous: Sites API](https://developer.wordpress.org/playground/developers/apis/sites-api/)

[  Next: `remote.html` vs `index.html`](https://developer.wordpress.org/playground/developers/apis/javascript-api/index-html-vs-remote-html/)