Get a full editor running in under a minute.
One React component. Pass your save/load callbacks and you're done. Full editor with drag-and-drop, theming, and responsive preview.
SSR note: In Next.js, wrap with dynamic(() => import('./Builder'), { ssr: false })
import { PageHubEditor } from "@pagehub/sdk"; import "@pagehub/sdk/editor.css"; export default function Builder() { return ( <PageHubEditor callbacks={{ onLoad: async () => { const res = await fetch("/api/pages/home"); return res.ok ? res.json() : null; }, onSave: async (pageData) => { await fetch("/api/pages/home", { method: "PUT", body: JSON.stringify(pageData), }); }, }}} theme={{ primaryColor: "#2563eb" }} /> ); }
A complete page builder, not a toy widget.
Full drag-and-drop editing with real-time preview. No iframe, no shadow DOM — just React.
Text, Image, Button, Form, Video, Nav, Footer, and more — all responsive out of the box.
Switch between desktop, tablet, and mobile views. Components adapt automatically.
Full palette control, Google Fonts, CSS variables, dark/light mode. White-label ready.
Render pages to HTML on the server. No React, no browser. Works in Node and edge workers.
Built-in AI content generation and editing. Powered by PageHub Cloud.
Separate viewer bundle for published pages. Smaller than the editor, zero editing UI.
JSON import/export for page data. Programmatic save, load, and manipulation.
Drag-and-drop form elements with validation, submission handling, and custom fields.
18 drag-and-drop components out of the box. Add your own via the resolver.
+ ImageList, ButtonList, ContainerGroup, Audio, Embed, Background, FormElement, Nav
Programmatic control when you need it.
const editor = PageHub.init({ ... }); // Save & load editor.save({ isDraft: true }); editor.load("page-id"); editor.getPageData(); // { content, html, classes } // HTML export editor.getHTML(); editor.exportJSON(); editor.importJSON(json); // Runtime updates editor.setReadOnly(true); editor.setTheme({ primaryColor: "#e11d48" }); // Events const off = editor.on("save", (data) => {}); editor.destroy();
readyEditor mounted and readysaveUser or programmatic saveloadPage loadedchangeEditor state changed (debounced)errorSomething went wrongmodeChangeRead-only toggledNot a proprietary system — just CSS variables and Tailwind utilities. Your design system, your rules.
Compiled in the browser with @tailwindcss/browser. Arbitrary values, zero config.
Standard semantic variables (--primary, --background, --muted, …). Drop in a TweakCN export or theme file and the whole editor follows.
CSS variable swapping. No class duplication, no JS toggling required.
/* One file. Every component updates. */ :root { --primary: hsl(220 57% 59%); --primary-foreground: hsl(0 0% 100%); --secondary: hsl(210 40% 96%); --accent: hsl(210 40% 96%); --background: hsl(0 0% 100%); --foreground: hsl(0 0% 6%); --muted: hsl(210 31% 95%); --border: hsl(214 32% 91%); --radius: 0.5rem; --font-sans: "Inter", system-ui, sans-serif; } .dark { --background: hsl(0 0% 20%); --foreground: hsl(0 0% 91%); /* ... all vars swap automatically */ }
One CSS file swaps the entire look. Compatible with shadcn/ui and TweakCN.
Heading + body font pairs injected automatically. 1,500+ fonts available.
Per-tenant theme injection. Each client gets their own design system.
Render pages to HTML on the server. No React, no browser required. Works in Node.js and edge workers.
import { renderToHTML } from "@pagehub/sdk/static-renderer"; // From compressed content (what onSave gives you) const { html, classes, fontUrls } = renderToHTML(savedContent); // Full standalone document const { html } = renderToHTML(savedContent, { document: true, title: "My Page", });
The core editor works standalone. Cloud features are optional.
One install. One component. Full page builder.