Code Playground
A live editor and preview, dropped inline into a note.
Most code snippets are read-only. Sometimes you want the reader to
change a value and watch it move. The playground below renders a
button whose label and color are defined in App.js — edit either
and the preview reflows instantly.
The component accepts three props worth knowing:
files— a map from path to source. The first file is shown by default; pass an object like{ code, active: true }to override.title— header label. Defaults to Code Playground.template—react(default),vanilla,vue,svelte, orstatic.showPreview— set tofalseto hide the right pane and ship just the editor.