Title: npm install playground-step-library
Author: Alex Kirk
Published: September 5, 2025
Last modified: September 8, 2025

---

# npm install playground-step-library

September 5, 2025

I have updated [my Playground Step Library](https://github.com/akirk/playground-step-library/)(
[which I had written about before](https://alex.kirk.at/2024/07/11/wordpress-playground-step-library/))–
the tool that allows you to use [more advanced steps](https://github.com/akirk/playground-step-library/tree/main/docs)
in [WordPress Playground](https://playground.wordpress.net/)–so that it can now 
also be used programmatically: It is now an npm package: [playground-step-library](https://www.npmjs.com/package/playground-step-library).

Behind the scenes this actually [dominoed into](https://github.com/akirk/playground-step-library/pull/5)
migrating it to TypeScript and restructuring the code so that it now both powers
the [Web UI](https://akirk.github.io/playground-step-library/) and the npm package.

Having those custom steps available now makes even more sense that the [Playground CLI](https://www.npmjs.com/package/@wp-playground/cli)
is production ready and you can use it for things like testing your WordPress plugin
with Playwright, see this presentation [Building Automated Tests with WordPress Playground](https://wordpress.tv/2025/06/07/building-automated-tests-with-wordpress-playground/)
from WordCamp Europe 2025 by my colleague [Berislav “Bero” Grigicak](https://github.com/bgrgicak/).

In this example you can see a blueprint JSON that contains steps `setSiteName` and`
addPage` that [don’t exist in the library of steps of Playground](https://wordpress.github.io/wordpress-playground/blueprints/steps/#).
At the time of writing there are [36 custom steps](https://github.com/akirk/playground-step-library/tree/main/docs#custom-steps)
with the goal of making it easier to do things that can be done with a blueprint
already but need some complexity. See in the example below how creating a page can
be done with `runPHP` and `wp_insert_post` but it’s visually easier with a step `
addPage`.

    ```wp-block-preformatted
    import PlaygroundStepLibrary from 'playground-step-library';const compiler = new PlaygroundStepLibrary();const blueprint = {    steps: [        {            step: 'setSiteName',            sitename: 'My Site',            tagline: 'A WordPress Playground demo'        },        {            step: 'addPage',            title: 'Welcome',            content: '<p>Welcome to my site!</p>'        }    ]};const compiledBlueprint = compiler.compile(blueprint);console.log(compiledBlueprint);
    ```

Which turns this into a valid blueprint:

    ```wp-block-preformatted
    {  "steps": [    {      "step": "setSiteOptions",      "options": {        "blogname": "My Site",        "blogdescription": "A WordPress Playground demo"      }    },    {      "step": "runPHP",      "code": "\n<?php require_once '/wordpress/wp-load.php';\n$page_args = array(\n\t'post_type'    => 'page',\n\t'post_status'  => 'publish',\n\t'post_title'   => 'Welcome',\n\t'post_content' => '<p>Welcome to my site!</p>',\n);\n$page_id = wp_insert_post( $page_args );"    }  ]}
    ```

You can then pass this blueprint to playground CLI to run it ([see other demos](https://github.com/fellyph/playwright-testing-plugin/tree/main/demos)
by my colleague [Fellyph](https://blog.fellyph.com.br/)):

    ```wp-block-code
    import { runCLI, RunCLIServer } from '@wp-playground/cli';
    await runCLI({
      command: 'server',
      login: true,
      blueprint: compiledBlueprint
    });
    ```

You can also [conveniently try it out in WordPress Playground with this link](https://playground.wordpress.net/?blueprint-url=data:application/json;base64,eyJzdGVwcyI6W3sic3RlcCI6InNldFNpdGVPcHRpb25zIiwib3B0aW9ucyI6eyJibG9nbmFtZSI6Ik15IFNpdGUiLCJibG9nZGVzY3JpcHRpb24iOiJBIFdvcmRQcmVzcyBzaXRlIn19LHsic3RlcCI6InJ1blBIUCIsImNvZGUiOiI8P3BocCByZXF1aXJlX29uY2UgJy93b3JkcHJlc3Mvd3AtbG9hZC5waHAnO1xuJHBhZ2VfYXJncyA9IGFycmF5KFxuJ3Bvc3RfdHlwZScgICAgPT4gJ3BhZ2UnLFxuJ3Bvc3Rfc3RhdHVzJyAgPT4gJ3B1Ymxpc2gnLFxuJ3Bvc3RfdGl0bGUnICAgPT4gJ1dlbGNvbWUnLFxuJ3Bvc3RfY29udGVudCcgPT4gJzxwPldlbGNvbWUgdG8gbXkgc2l0ZSE8L3A%2BJyxcbik7XG4kcGFnZV9pZCA9IHdwX2luc2VydF9wb3N0KCAkcGFnZV9hcmdzICk7dXBkYXRlX29wdGlvbiggJ3BhZ2Vfb25fZnJvbnQnLCAkcGFnZV9pZCApO3VwZGF0ZV9vcHRpb24oICdzaG93X29uX2Zyb250JywgJ3BhZ2UnICk7In1dfQ%3D%3D)(
and also [view in the Step Library UI](https://akirk.github.io/playground-step-library/#eyJzdGVwcyI6W3sic3RlcCI6InNldFNpdGVOYW1lIiwidmFycyI6eyJzaXRlbmFtZSI6Ik15IFNpdGUiLCJ0YWdsaW5lIjoiQSBXb3JkUHJlc3Mgc2l0ZSJ9fSx7InN0ZXAiOiJhZGRQYWdlIiwidmFycyI6eyJwb3N0VGl0bGUiOiJXZWxjb21lIiwicG9zdENvbnRlbnQiOiI8cD5XZWxjb21lIHRvIG15IHNpdGUhPC9wPiIsImhvbWVwYWdlIjp0cnVlfX1dfQ==)).

Finally, in the repo there are [a number of examples](https://github.com/akirk/playground-step-library/tree/main/examples)
that you can browse and I created a little screen recording of a few of them:

![](https://alex.kirk.at/wp-content/uploads/sites/2/2025/09/playground-step-library-
examples.gif)

Happy coding!

###### Fediverse Reactions

 *  [ ⌊Chuck Grimmett⌉ ](https://cagrimmett.com/likes/5407876ea4/)

[Code](https://alex.kirk.at/category/code/), [Playground](https://alex.kirk.at/category/wordpress/playground/)

Read this next

[Can’t Follow You!](https://alex.kirk.at/2025/06/19/cant-follow-you/)

## One response to “npm install playground-step-library”

 1. [Courtney Robertson](https://courtneyr.dev/author/courtneyr/)
 2. [September 9, 2025](https://alex.kirk.at/2025/09/05/npm-install-playground-step-library/comment-page-1/#comment-88065)
 3. 🎙️ Tech Troubles & WordPress Wins — My Take on “This Week in WordPress” #347 The
    episode opened with classic live-show gremlins—glitchy audio, misbehaving embeds,
    and post-WordCamp brain fog. The chaos set an oddly perfect tone: WordPress work
    is messy in real life, yet progress continues to happen. The links below point 
    to the original […]
 4. [Log in to Reply](https://alex.kirk.at/wp-login.php?redirect_to=https%3A%2F%2Falex.kirk.at%2F2025%2F09%2F05%2Fnpm-install-playground-step-library%2F)

### Leave a Reply 󠀁[Cancel reply](https://alex.kirk.at/2025/09/05/npm-install-playground-step-library/comment-page-1/?output_format=md#respond)󠁿

Only people in [my network](https://alex.kirk.at/friends/) can comment.

This site uses Akismet to reduce spam. [Learn how your comment data is processed.](https://akismet.com/privacy/)