Live Demo Examples

This is a internal reference doc

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

Hello Preset

Recommended to test it in your browser. The test here might not work properly

Console

No logs yet.

Counter Preset

Recommended to test it in your browser. The test here might not work properly

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.