Gutenberg Playground

This is an Exploration to see how an interactive sandbox to explain Gutenberg concepts with live editor access could look. The hot module reloading currently works very well for changing something inside the JSX returned from the edit.js file. It is no where near perfect and the initial load of the editor is very slow but as a proof of concept this hopefully shows how this could work.

The editor itself is persistent through localstorage. Ideal it should get cleared when the sandbox is manually refreshed.

<GutenbergSandbox 
  initialBlocks={[['example/block']]}
  files={[
      name: "blocks/index.js",
      active: true,
      code: "console.log( 'Hello World' )"
  ]]} />

How does this work?