Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
code-playground
A live HTML, CSS, and JavaScript editor with a sandboxed preview iframe, runtime console output, CodePen export, and theme-aware styling that fits naturally inside a Vanilla Breeze page.
Where to find it
- npm:
@profpowell/code-playground - GitHub: ProfPowell/code-playground
- Live demo: profpowell.github.io/code-playground
- License: MIT
Install
BASH
npm install @profpowell/code-playgroundJAVASCRIPT
import '@profpowell/code-playground';Or via CDN ESM:
HTML
<script type="module" src="https://unpkg.com/@profpowell/code-playground"></script>Demo
The editor pane chrome, tab bar, and console adopt VB design tokens. Edit the code and the preview iframe re-renders live; the console below mirrors any console.log calls.
Quick reference
| Feature | Attribute / Slot |
|---|---|
| HTML / CSS / JS panes | <textarea slot="html">, slot="css", slot="js" |
| Inherit page theme | inherit-theme |
| Persist edits in localStorage | persist="key-name" |
| External sources | html-src, css-src, js-src attributes |
| Console output | Built-in; toggle visibility with show-console / no-console. |
| Open in CodePen | One-click export button. |
See the README for the full reference.
Usage
HTML
<code-playground inherit-theme persist="intro-demo"> <textarea slot="html"> <h1>Hello</h1> <p>Edit me.</p> </textarea> <textarea slot="css"> h1 { color: tomato; } </textarea> <textarea slot="js"> console.log('ready'); </textarea></code-playground>