3 ms·
If you ever want to add a client-side-only playground to your own site, have a look at the Playground Elements project: https://github.com/google/playground-ele
by spankalee 3y ago
If you ever want to add a client-side-only playground to your own site, have a look at the Playground Elements project: https://github.com/google/playground-elements https://github.com/google/playground-elements
It's a set of custom elements and a service worker that populate an iframe with the contents of the code editor with no server, but in a way that looks like real network requests to the iframe.
This means you get a root HTML page and all the right loading behavior and ordering as a real hosted web page. Inspect the iframe with devtools and you see exactly what you wrote, nothing added by the playground.
The elements also support Node-style import specifier resolution, pulling npm dependencies automatically from unpkg.com, TypeScript, and JSX.
And the elements are very configurable. You have drop in a tabbed-editor and preview combo element, or you can separate the preview and editors for each file - which lets you write prose around each.