Examples
Each demo runs the real nuforge runtime in your browser. Interact with the Preview, read the DSL, then open the React tab to see the clean code @nuforge/codegen generates from it.
Mini page builder
Built with the @nuforge/editor SDK: a layers tree (drag rows to reorder), a clipboard (copy / cut / paste / duplicate, undoable), and a schema-driven inspector (PropFields) — all mutating one live runtime. Switch to the Code tab to read the full implementation.
Prefer to build it step by step? Follow the guide →
Welcome
Pick a row, edit it on the right, drag to reorder, copy / paste.
Select a layer to edit it.
Counter — fine-grained reactivity
Edit the DSL tab and watch Preview + React update live. Click the buttons: only the count re-renders.
List & conditionals — @each / @if
Render a collection with @each and toggle a node with @if. The React tab shows the generated .map() and guard.
Steps
- Design
- Build
- Ship
That's the plan.
Two-way binding
Type in the input — the bound state updates and everything reading it follows. The React tab shows value/onChange.
Hello,
nuforgeComponents & composition
Define a reusable component with props and instantiate it. The React tab shows it compiled to two functions.
Reactive
Only what changes re-renders.
Secure
AST allow-list and property guards.
Globals & local state
Top-level `val` globals are shared across components; component-local `val` is private state.
nuforge
ship real code
Externals — host state, functions & components
The DSL reads host state ($user), calls a host function ($shout), and renders a host React component (<$Badge/>). Host state is read-only to expressions; only the host can update it.
ADA LOVELACE
Current plan: Pro
Use it in your project
Install the packages and render nuforge in your own app. The @nuforge/editor SDK lets you build a full visual page builder (selection, drag-drop, blocks, undo/redo) on top of the runtime.