https://builderjs.local/examples/ The latest BuilderJS buyer-package examples — basic, backend, cookbook, events, api, extensions, flows. en-us Sat, 09 May 2026 18:02:53 GMT scripts/demo/regenerate-sitemap.php https://builderjs.local/examples/basic/1-quickstart/ Five lines of HTML + JS — your users get a full drag-drop builder in under a minute. Basic https://builderjs.local/examples-rss/basic/1-quickstart Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/basic/2-hello-world/ Click Save and watch JSON round-trip to disk. Same builder as Quick Start, plus a 30-line PSR-12 backend that you can swap for any database. Basic https://builderjs.local/examples-rss/basic/2-hello-world Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/basic/3-custom-theme/ The directory layout BuilderJS reads. Fork themes/default/, change the brand block, edit one or two templates — every page across your product picks it up. Basic https://builderjs.local/examples-rss/basic/3-custom-theme Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/basic/4-dark-mode/ One cookie shared across host page + builder canvas. Buyers get a system-preference default, a manual toggle, and a builder canvas that follows for free via CSS cascade — no JS bridge. Basic https://builderjs.local/examples-rss/basic/4-dark-mode Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/basic/5-multi-page/ Drop multiple Builder instances on one host page — header, body, footer side-by-side. Each carries its own JSON state; events stay scoped to the instance that emitted them. Basic https://builderjs.local/examples-rss/basic/5-multi-page Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/backend/1-mysql/ PDO + prepared statements with a SQLite fallback so it boots zero-config. One driver swap and the same handler talks to MySQL, MariaDB, or PostgreSQL. Backend https://builderjs.local/examples-rss/backend/1-mysql Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/backend/2-s3/ Stream uploaded images to any S3-compatible store. Ships with a one-command MinIO docker-compose so dev runs without an AWS account. Backend https://builderjs.local/examples-rss/backend/2-s3 Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/backend/3-auth/ Multi-user save flow scoped per session. Defaults to a flat users.json driver — swap one line for PDO when you go to production. Backend https://builderjs.local/examples-rss/backend/3-auth Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/backend/4-realtime/ Multi-tab live sync over a tiny PHP polling endpoint. Swap one function for Pusher / Ably / WebSocket without touching the save side. Backend https://builderjs.local/examples-rss/backend/4-realtime Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/cookbook/1-minimal/ No widgets palette, no settings sidebar — just a 36 px header strip for a title or a Save button, and the editing canvas. Pick this when your host app already supplies the chrome. Cookbook https://builderjs.local/examples-rss/cookbook/1-minimal Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/cookbook/2-compact-2col/ Read-mostly editor: text and colours come from the right-side Settings panel; no widgets palette. Pick this when content is authored elsewhere (CMS, AI, copy team) and the buyer's job is just polish. Cookbook https://builderjs.local/examples-rss/cookbook/2-compact-2col Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/cookbook/3-compact-3col/ Classic app-chrome at 1024 px+. Drag from the left widget palette, edit on the canvas, polish on the right Settings panel. Tighter than the full demo builder — narrower 200 px / 240 px sidebars leave more canvas room for embed in a denser host app. Cookbook https://builderjs.local/examples-rss/cookbook/3-compact-3col Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/cookbook/4-rich-3col-header/ Three sub-systems wired (widgets · canvas · settings) plus an in-wrapper 48 px header strip carrying Save / Undo / Redo / Export / Preview. First cookbook entry where action buttons live INSIDE the engine's wrapper, not in a host toolbar above it. Pick this when your host app delegates the whole top-of-editor area to BuilderJS. Cookbook https://builderjs.local/examples-rss/cookbook/4-rich-3col-header Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/cookbook/5-sidebar-only/ Canvas takes the full wrapper; Settings floats absolutely top-right with shadow + rounded corners. No widgets palette, no inline sidebar — "edit in place" feel for host pages where the canvas is primarily a viewer and edits are occasional. Click any canvas element → settings appear in the floating panel; click another → settings re-render. Same engine, different chrome silhouette. Cookbook https://builderjs.local/examples-rss/cookbook/5-sidebar-only Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/cookbook/6-canvas-only/ No widgets palette. No settings panel. No header. The wrapper has no border, no radius, no background — just the canvas. Every action — selection, mode toggle, save — comes from a method on builder. Pick this when your host app drives mutations programmatically (server-side AI generator, headless test rig, integration suite) or when the host already paints its own chrome around the canvas. Cookbook https://builderjs.local/examples-rss/cookbook/6-canvas-only Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/cookbook/7-mobile/ Phone-friendly chrome: a top tab strip swaps which sub-system fills the body. All three sub-systems are mounted (no null args) — only ONE is visible at a time, driven by the wrapper's data-mobile-tab attribute. Pick this when canvas + sidebars don't fit side-by-side at narrow viewports (375 px – 600 px), or when buyers prefer a tap-one-at-a-time flow over juggling 3 columns. Same engine, same API, different chrome geometry. Cookbook https://builderjs.local/examples-rss/cookbook/7-mobile Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/cookbook/8-card/ Builder embedded as a small card alongside other dashboard widgets. Fixed 360 × 420 footprint + rounded corners + drop shadow — the only cookbook variant with explicit pixel dimensions. DOUBLE null-arg pattern (no widgets palette, no settings sidebar): the card has room for a 40-px header + canvas only. Pick this when the Builder is one of N tiles on a dashboard, not the page-defining feature. Cookbook https://builderjs.local/examples-rss/cookbook/8-card Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/events/1-document-changed/ Subscribe to the engine's `document:changed` event and update a host-side pill on every edit. The bus debounces internally at 120 ms — one host-visible signal per typing burst, not per keystroke. Events https://builderjs.local/examples-rss/events/1-document-changed Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/events/2-element-added-removed/ Subscribe to both element:added and element:removed on the same bus, render a bounded list of the last N mutations. Each event carries { elementUid, elementType } — enough to identify what changed without serializing the page tree. Events https://builderjs.local/examples-rss/events/2-element-added-removed Sat, 09 May 2026 16:38:11 GMT https://builderjs.local/examples/events/3-history-change/ Subscribe to history:change and drive your own Undo/Redo buttons OUTSIDE the engine chrome. The payload carries { canUndo, canRedo, size, currentIndex } — enough to drive button state and a "step N of M" pill from a single signal. Events https://builderjs.local/examples-rss/events/3-history-change Sat, 09 May 2026 16:38:11 GMT