Live Demo Examples

This is a internal reference doc

This page now uses a custom VitePress component instead of Sandpack.

Hello Preset

Console

No logs yet.

Counter Preset

const btn = document.getElementById('btn');
let count = 0;
btn.addEventListener('click', () => {
  count += 1;
  btn.textContent = `Clicked ${count} times`;
});

const btn = document.getElementById('btn'); let count = 0; btn.addEventListener('click', () => { count += 1; btn.textContent = `Clicked ${count} times`; });

Console

No logs yet.

Use It In Any Doc Page

<LiveCodeDemo preset="hello" :previewHeight="240" />

<LiveCodeDemo preset="counter" :readOnly="true" :showHtml="false" :showCss="true" :showJs="true" />

<LiveCodeDemo
  preset="counter"
  :showConsole="true"
  :showHighlight="true"
/>

<LiveCodeDemo
  preset="utilitiesClass"
  deps="@briklab/lib:3.0.0"
  :showHtml="false"
/>

Notes:

• preset supports hello and counter.
• You can edit HTML/CSS/JS in place and preview updates immediately.
• readOnly locks editor input.
• showHtml, showCss, showJs control which tabs are visible.
• showConsole toggles runtime logs/errors panel.
• showHighlight toggles syntax-highlighted view for the active tab.
• deps lets JS import npm packages via esm.sh.