PATHS

Outcomes, not just examples.

Pick a path. Each one is an ordered run of 3–5 examples — by the end of the path, you've shipped a concrete outcome, not a stack of unread tabs.

Path 1 ~20 min 3 steps

Get Builder running in 5 minutes

From npm-less zero to a working Save round-trip — three steps, ~20 minutes including coffee. By the end you have a live canvas posting JSON + HTML to your own endpoint.

  1. BASIC

    Quick Start

    Boot the engine with the default theme + a mediaUrl — five lines of init, zero backend.

  2. BASIC

    Hello World

    Wire a Save button on top of the boot — getHtml() + getData() + a single alert(), no server yet.

  3. BACKEND

    Save to MySQL

    Swap the alert for a real POST /save to MySQL — schema, prepared statements, error handling.

Outcome A live Builder canvas posting to your own Save endpoint.

Path 2 ~30 min 4 steps

Match the Builder to your app's UI

Eight cookbook chrome variants are pre-built. Pick the one that fits your shell, copy four files, ship. Each cookbook entry is fully self-contained — index.php · style.css · init.js · README.md.

  1. COOKBOOK

    Minimal — canvas + thin top strip

    Smallest footprint — canvas + thin top strip with a Save button. Double-null constructor pattern.

  2. COOKBOOK

    Compact 3-col — widgets + canvas + settings

    Classic 3-column SaaS shell — widgets palette · canvas · settings panel inline. All three sub-systems wired.

  3. COOKBOOK

    Rich 3-col + header — full SaaS chrome

    Add an in-wrapper 48 px header carrying Save · Undo · Redo · Export · Preview buttons. Reactive mode:changed + history:change consumers.

  4. COOKBOOK

    Mobile — tab-based chrome (Widgets / Canvas / Settings)

    Tab-based phone chrome — same engine, single-column with data-mobile-tab driving slot visibility. WAI-ARIA tablist baked in.

Outcome A chrome variant copy-pasted into your own host page.

Path 3 ~half a day 4 steps

Add custom widgets, elements, and controls

The extension surface — ship a new block class with its own Settings panel, register it via the engine API, render it into the canvas. Every step lands a fully-typed extension that survives getData() ↔ load() round-trip.

  1. EXTENSIONS

    Custom Widget — subclass BaseWidget, register, ship

    Subclass BaseWidget, register via widgetsBox.addWidget, drop a custom block in the palette.

  2. EXTENSIONS

    Custom Element — extend BaseElement, register, save/load round-trip

    Subclass BaseElement, register via Builder.registerElement, ship a custom EJS template + parse() round-trip.

  3. EXTENSIONS

    Custom Control — extend ColorPickerControl with brand swatches, wire via getControls()

    Subclass ColorPickerControl, append brand swatches, wire via getControls() so the Settings panel renders it.

  4. EXTENSIONS

    i18n Locale Pack — I18n.init() + locale switcher with builder re-render

    Add multi-locale messages via I18n.init() and re-render the canvas + palette on locale switch.

Outcome A custom block class with its own Settings panel rendering inside your Builder.

Path 4 ~one to two days 5 steps

Multi-tenant + auth + storage — production stack

The full SaaS shape: tenant identity from auth, asset storage on S3, doc state in MySQL, realtime sync on a WebSocket channel, multi-instance isolation by closure-captured tenantId. The engine stays tenant-naive — multi-tenant is a host concern.

  1. BACKEND

    Save to MySQL

    Persist doc JSON + rendered HTML in a real database — one row per page id.

  2. BACKEND

    Save Assets to S3

    Move asset uploads off the local filesystem onto S3 (or MinIO) — signed URLs, scalable storage.

  3. BACKEND

    Session Auth

    Wrap save + asset upload in session auth — only the owner mutates their docs, identity flows through every endpoint.

  4. BACKEND

    Realtime Sync

    Broadcast document:changed over a WebSocket channel — collab + tab-sync without polling.

  5. EXTENSIONS

    Multi-tenant SaaS — closure-captured tenantId per Builder

    Closure-capture tenantId per Builder constructor — engine bundle stays tenant-naive, isolation is pure host concern.

Outcome A multi-tenant Builder with auth-protected save, S3 uploads, and per-tenant isolation.