Two ways to embed Boceto

The <boceto-edit> custom element is a canvas editor for hand-drawn wireframes — drag, resize, multi-select, undo. Use it standalone, or drop it into a rich-text editor via @boceto/tiptap for literate-component docs where one fenced block defines a component and another uses it.

Try it:

Add elements: click on the canvas first, then press ⌘+K to open the floating palette (search 83 element types, click or drag onto the canvas).
Edit properties: select an element → the inspector floats in on the right with the right inputs for its type (table headers, navbar items, alert color, etc.).
Click an element → drag to move, or grab a handle to resize.
Shift / ⌘-click to multi-select. Drag on empty canvas for a rubber-band.
Right-click for a context menu: Bring to Front · Forward · Send Backward · to Back · Duplicate · Delete.
Drag the bottom-right corner of the editor pane to make the canvas bigger.
⌘+] bring forward · ⌘+⇧+] to front · ⌘+[ send backward · ⌘+⇧+[ to back.
Backspace deletes · ⌘+D duplicates · ⌘+Z / ⌘+⇧+Z undo / redo · double-click to rename.

1 · <boceto-edit> — standalone canvas editor drag · resize · undo

2 · @boceto/tiptap — live TipTap editor with cross-block component context click a block to edit · ⌘K palette

Stable API

The custom element wraps a framework-agnostic BocetoEditor controller you can drive directly:

<boceto-edit code='element box 0 0 100 50 "Hello"' width="600" height="400"></boceto-edit>

const el = document.querySelector('boceto-edit')
el.addEventListener('change', e => console.log(e.detail.code))

// Power users — same API, no DOM required:
import { BocetoEditor } from '@boceto/edit'
const ed = new BocetoEditor({ code: '...' })
ed.on('change', ({ code }) => save(code))
ed.addElement('button', 200, 100, { label: 'Save' })
ed.undo()