Make the examples into a sort of playground-style page #32
Description
Context
The examples are currently preset and editing them in a reasonable manner requires one to run them locally.
Why?
The current situation is cumbersome for prospective users; having a playground to allow anyone to try out the library before committing can, and I have no doubts will, help improve user acquisition rate.
What? & How?
We can take example on the numerous playgrounds already out there, which nearly always follow the same style no matter the nature of the project :
- Rust
- TypeScript
- Pest (bottom of the page)
- MDN
- etc...
I surmise that simply using the left of the screen as an editor with the embedded result on the right, similar to the current setup with the navigation panel, would work well. The examples could be selectable "templates" from a dropdown with a short description.
Unless I am mistaken, this setup would work perfectly fine in a static website: the examples' code is fairly light data to send over once compressed. Only a tiny bit of JS would be needed:
- reset a timeout every time the text inside the textbox changes
- when the timeout resolves normally or the user presses either a dedicated button or a shortcut like Ctrl+Enter, replace the content of the
iframewith the textbox's content, either completely (full HTML in editor) or partly (just the script), though the latter seems more reasonable to me
We could even allow code sharing with sufficient protections for users, for example by forcing the user to acknowledge the code before "running" it in the iframe for the first time. A query parameter containing a base64-encoded version of the code, generated on button press, would allow all of this to work.