Editor Mode

Live.Editor and Live.Preview share code through Live's context — edit in the editor and the preview updates automatically. No manual wiring between them is needed. (The preview itself isn't an editing surface — only Live.Editor writes to the shared code.)

import { useState } from 'react';

import Live from '@jbpark/live-editor';

const SAMPLE = `
import * as ui from 'ui-kit';

const App = () => (
  <div className="p-6 space-y-2">
    <ui.Typography.Title level={3}>Hello from the editor</ui.Typography.Title>
    <ui.Button type="primary">Edit me</ui.Button>
  </div>
);

export default App;
`;

export default function EditorMode() {
  const [value, setValue] = useState(SAMPLE);

  return (
    <Live>
      <Live.Preview
        showError
        dynamicTailwind
        frame={{ mode: 'shadow', syncStyle: true }}
      />
      <Live.Editor value={value} onChange={setValue} />
    </Live>
  );
}

• Live.Editor is a controlled CodeMirror surface — pass value / onChange. It only pushes to the shared preview code debounce ms after you stop typing (default 1000) — a full second of lag is expected, not a bug. Pass debounce={0} for immediate updates.
• Live.Preview compiles the shared code and renders it; showError surfaces compile/runtime errors inline.
• dynamicTailwind compiles Tailwind classes from the rendered preview at runtime and injects them as a <style> tag — needed in shadow mode, which has no separate document to load a stylesheet into (see Preview Modes).

See Overview for the full prop list on both components.