Live Playground Blocks

Use MDX live blocks for interactive examples.

Live Editor

function CounterDemo() {
  const [count, setCount] = React.useState(0);
  return (
    <button className="button button--primary" onClick={() => setCount((v) => v + 1)}>
      Clicked {count} times
    </button>
  );
}

Result

Loading...

Collapsible setup notes

• Keep live examples focused.
• Avoid heavy dependencies in live snippets.
• Prefer deterministic snippets for docs stability.