Drag & Drop

Live.Dnd lets you build UIs visually. At wider sizes, drag a component from the left palette onto the canvas, then edit its properties from the panel on the right; below Live.Dnd's own responsive breakpoint, the palette and panel move into a drawer instead, and a tap adds the section (there's nothing visible to drag onto once the canvas is stacked behind the drawer). Powered by @dnd-kit.

import { useState } from 'react';

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

export default function DragAndDrop() {
  const [value, setValue] = useState('');

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

• value / onChange hold the generated source — drops and property edits are applied through the same AST pipeline, so the code stays canonical.
• frame configures the preview surface (see Preview Modes).
• Use items to customize the palette's available sections, and children to replace the built-in UI — a region of it (<Live.Dnd.Layout panel={...} />) or the whole arrangement, driven from the useDndPalette() / useDndPanel() / useDndLayout() hooks — see Custom Palette & Panel.

The embedded demo above runs the real Live.Dnd component, isolated with shadow mode inside a sandboxed iframe (see Preview Modes).