nnuforgeDocs
ENID
Examples

Getting Started

nuforge is a fast, secure, fine-grained reactive runtime for no-code visual page builders. You describe a page in a small DSL; nuforge parses it into a reactive AST, renders it with React, and can export it to a clean React component.

Install

You have two options. One install — the nuforge umbrella package gives you everything through subpaths:

npm install nuforge        # or: pnpm add nuforge / bun add nuforge / yarn add nuforge

import { Nu, Parser, t } from 'nuforge';
import { NuProvider, NuFrame } from 'nuforge/react';
import { createEditor } from 'nuforge/editor';
import { toReact, toHtml, toVue } from 'nuforge/codegen';

Or stay granular — install only the @nuforge/* packages you need (smallest bundles, most explicit graph):

npm install @nuforge/core @nuforge/parser @nuforge/types @nuforge/react

import { Nu } from '@nuforge/core';
import { NuFrame } from '@nuforge/react';

Optional add-ons (kept separate so you only pull their heavier deps when needed):

  • @nuforge/codegen — export a page to React / HTML / Vue (also at nuforge/codegen).
  • @nuforge/editor — an SDK for building your own visual page editor (also at nuforge/editor).
  • @nuforge/react-code-editor — CodeMirror DSL editor (autocomplete + lint).
  • @nuforge/collaboration — real-time sync via the Loro CRDT.
  • @nuforge/mcp — a Model Context Protocol server for AI assistants.

Requirements: React 18 or 19. Packages are ESM-first and ship dual ESM + CJS builds with type declarations. In Next.js, add nuforge (or the @nuforge/* packages) to transpilePackages.

Quick start

A page is a Nu runtime loaded with a parsed program, rendered by <NuFrame>.

'use client';

import { Nu } from '@nuforge/core';
import { Parser } from '@nuforge/parser';
import { NuFrame, NuProvider } from '@nuforge/react';
import * as t from '@nuforge/types';
import { useState } from 'react';

const SOURCE = `component App() {
  val count = 0;
} => (
  <div>
    <h1>{"Counter"}</h1>
    <button onClick={() => count = count + 1}>{count}</button>
  </div>
)`;

export function Page() {
  const [{ nu, frame }] = useState(() => {
    const nu = Nu.create();
    nu.load(t.state({ program: Parser.parseProgram(SOURCE) }));
    return { nu, frame: nu.createFrame({ component: { name: 'App' } }) };
  });

  return (
    <NuProvider nu={nu}>
      <NuFrame frame={frame} />
    </NuProvider>
  );
}

Clicking the button updates the reactive state and re-renders only what depends on it. See the live examples for @each, @if, and two-way binding.

Export to React

Turn any page into a standalone React component — no nuforge at runtime:

import { toReact } from '@nuforge/codegen';

const tsx = toReact(nu.state.program);
// → import { useState } from 'react';
//   export function App() { ... }

That's everything you need to get started.

IntroductionThe DSL Language