Title: How to load and run Blueprints
Published: July 15, 2026
Last modified: July 16, 2026

---

# How to load and run Blueprints

## In this article

 * [Playground Dock](https://developer.wordpress.org/playground/blueprints/tutorial/how-to-load-run/?output_format=md#playground-dock)
 * [URL fragment](https://developer.wordpress.org/playground/blueprints/tutorial/how-to-load-run/?output_format=md#url-fragment)
    - [Encoded Blueprint fragments](https://developer.wordpress.org/playground/blueprints/tutorial/how-to-load-run/?output_format=md#encoded-blueprint-fragments)
    - [Load Blueprint from a URL](https://developer.wordpress.org/playground/blueprints/tutorial/how-to-load-run/?output_format=md#load-blueprint-from-a-url)

[ Back to top](https://developer.wordpress.org/playground/blueprints/tutorial/how-to-load-run/?output_format=md#wp--skip-link--target)

## 󠀁[Playground Dock](https://developer.wordpress.org/playground/blueprints/tutorial/how-to-load-run/?output_format=md#playground-dock)󠁿

The easiest way to run a Blueprint from the website is through the Dock:

 * Open **New  Blueprint gallery** to choose an example.
 * Open **New  Blueprint URL** to run a public Blueprint JSON or ZIP bundle URL.
 * Open **New  Write a Blueprint** to write a Blueprint in the browser.
 * Open **Blueprint** to inspect or edit the current Playground’s Blueprint.

See [Using Blueprints](https://developer.wordpress.org/playground/blueprints/using-blueprints)
for the full list of UI paths.

![The New Playground pane with the Blueprint gallery selected](https://i0.wp.com/
raw.githubusercontent.com/WordPress/wordpress-playground/refs/heads/trunk/packages/
docs/site/static/img/dock/dock-new-playground.webp?ssl=1)

## 󠀁[URL fragment](https://developer.wordpress.org/playground/blueprints/tutorial/how-to-load-run/?output_format=md#url-fragment)󠁿

For links and automation, you can paste a Blueprint into the URL “fragment” of a
WordPress Playground website. Just add a `#` after the `.net/`.

Let’s say you want to create a Playground with specific versions of WordPress and
PHP using the following Blueprint:

    ```language-json
    {
        "$schema": "https://playground.wordpress.net/blueprint-schema.json",
        "preferredVersions": {
            "php": "8.3",
            "wp": "5.9"
        }
    }
    ```

To run it, go to `https://playground.wordpress.net/#{"preferredVersions": {"php":"
8.3", "wp":"5.9"}}`. You can also use the button below:

[Run Blueprint](https://playground.wordpress.net/#{"preferredVersions":{"php":"8.3","wp":"5.9"}})

Use this method to run the example code in the next chapter, [**Build your first Blueprint**](https://developer.wordpress.org/playground/blueprints/tutorial/build-your-first-blueprint).

### 󠀁[Encoded Blueprint fragments](https://developer.wordpress.org/playground/blueprints/tutorial/how-to-load-run/?output_format=md#encoded-blueprint-fragments)󠁿

When you build a Playground link from JavaScript or an automation tool, encode the
Blueprint JSON once with `encodeURIComponent(JSON.stringify(blueprint))` and append
it after `#`.

Playground also supports [Base64-encoded Blueprints](https://www.base64encode.org),
which are useful when a platform modifies JSON fragments or when you want a compact,
copyable link. For example, that’s the above Blueprint in Base64 format: `eyJwcmVmZXJyZWRWZXJzaW9ucyI6IHsicGhwIjoiNy40IiwgIndwIjoiNS45In19`.

To run it, go to [https://playground.wordpress.net/#eyJwcmVmZXJyZWRWZXJzaW9ucyI6IHsicGhwIjoiNy40IiwgIndwIjoiNS45In19](https://playground.wordpress.net/#eyJwcmVmZXJyZWRWZXJzaW9ucyI6IHsicGhwIjoiNy40IiwgIndwIjoiNS45In19)

### 󠀁[Load Blueprint from a URL](https://developer.wordpress.org/playground/blueprints/tutorial/how-to-load-run/?output_format=md#load-blueprint-from-a-url)󠁿

When your Blueprint gets too wieldy, you can load it via the `?blueprint-url` query
parameter in the URL, like this:

[https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/latest-gutenberg/blueprint.json](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/latest-gutenberg/blueprint.json)

Note that the Blueprint must be publicly accessible and served with [the correct `Access-Control-Allow-Origin` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Origin):

    ```
    Access-Control-Allow-Origin: *
    ```

First published

July 15, 2026

Last updated

July 16, 2026

Edit article

[ Improve it on GitHub: How to load and run Blueprints ](https://raw.githubusercontent.com/WordPress/wordpress-playground/trunk/packages/docs/site/docs/blueprints/tutorial/02-how-to-load-run-blueprints.md)

Changelog

[ See list of changes: How to load and run Blueprints ](https://developer.wordpress.org/playground/blueprints/tutorial/how-to-load-run/?output_format=md#)

[  Previous: What are Blueprints, and what can you do with them?](https://developer.wordpress.org/playground/blueprints/tutorial/what-are-blueprints/)

[  Next: Build your first Blueprint](https://developer.wordpress.org/playground/blueprints/tutorial/build-your-first/)