Build a page builder, step by step
Each step adds one capability with the @nuforge/editor SDK. Try the Preview, then read the exact Code that powers it — together they compose into a full editor.
Layers tree
Walk the template with the editor's query API — getChildren + templateLabel — and track a selected id. No special tree structure; the AST is the tree.
Hello
A tiny page.
Iframe canvas, overlay & srcDoc
IframeCanvas portals the frame into a style-isolated <iframe>. The overlay is fully yours via renderBox — here: hover + select borders, a tag label, and Duplicate / Delete actions. srcDoc controls the iframe head, so you can load web fonts or a CDN.
The overlay is built entirely in renderBox— borders, a tag label, and live action buttons. The iframe's head comes from srcDoc (here, the Inter web font from a CDN).
Drag-and-drop in the layers
dropPositionFromPointer turns the pointer Y into before / after; editor.moveNode commits the reorder. Every move is one undoable change.
Drag the rows
Reorder me
Drag-and-drop onto the canvas
A palette of draggable blocks + IframeCanvas onDropOnNode, which hands you the target id and position. editor.insertBlockAt drops the block exactly there, with a live drop indicator.
Schema-driven inspector
A node yields a small schema (PropSchemaField[]); PropFields renders a control per field and onChange wires to editor.setProp / setText. No hand-written form per element.
Edit me
Select a layer, change its Class or Text.
Select a layer.
Clipboard & history
copyNode / pasteNode / duplicateNode / removeNode plus nu.undo / redo — node-level editing, all transactional and reversible.
Copy / paste me
Select, then use the buttons. Undo works too.
Put it together
Combine these pieces — tree, canvas, DnD, inspector, clipboard — into one shell and you have a working visual builder.