The Visual Page Builder SDK

Drop a full drag-and-drop page editor into any web app. One component, zero config. React, Next.js, or Vanilla JS.

|| Docs

Quick Start

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 })

Builder.tsx
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" }}
    />
  );
}

Everything you need

A complete page builder, not a toy widget.

Visual Canvas

Full drag-and-drop editing with real-time preview. No iframe, no shadow DOM — just React.

Full Component Set

Text, Image, Button, Form, Video, Audio, Footer, and more — all responsive out of the box.

Responsive Preview

Switch between desktop, tablet, and mobile views. Components adapt automatically.

Theming

Full palette control, Google Fonts, CSS variables, dark/light mode. White-label ready.

Static HTML Export

Render pages to HTML on the server. No React, no browser. Works in Node and edge workers.

AI Assistant

Built-in AI content generation and editing. Powered by PageHub Cloud.

Lightweight Viewer

Separate viewer bundle for published pages. Smaller than the editor, zero editing UI.

Import / Export

JSON import/export for page data. Programmatic save, load, and manipulation.

Form Builder

Drag-and-drop form elements with validation, submission handling, and custom fields.

Built-in Components

18 drag-and-drop components out of the box. Add your own via the resolver.

ContainerFlex/grid layout wrapper
TextRich text with inline editing
ImageResponsive images
ButtonCTA with variants
FormForm container
VideoYouTube, Vimeo, self-hosted
HeaderPage header with nav
FooterPage footer

+ Embed, Background, FormElement

Instance API

Programmatic control when you need it.

api.ts
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();

Events

readyEditor mounted and ready
saveUser or programmatic save
loadPage loaded
changeEditor state changed (debounced)
errorSomething went wrong
modeChangeRead-only toggled

Tailwind-Native Theming

v4

Not a proprietary system — just CSS variables and Tailwind utilities. Your design system, your rules.

Tailwind v4 styling.

Browser runtime via @tailwindcss/browser plus static pre-rendering. Arbitrary values, zero config.

DaisyUI 5 tokens.

Standard semantic variables (--primary, --base-100, --neutral, …). Drop in a theme file and the whole editor follows.

Automatic dark mode.

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 */
}

Drop-in Themes

One CSS file swaps the entire look. DaisyUI 5-compatible tokens.

Google Fonts

Heading + body font pairs injected automatically. 1,500+ fonts available.

White-Label Ready

Per-tenant theme injection. Each client gets their own design system.

Built onTailwind CSS v4·CSS Custom Properties·Google Fonts·DaisyUI

Static HTML Renderer

Render pages to HTML on the server. No React, no browser required. Works in Node.js and edge workers.

render.ts
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",
});

Works offline. Scales with Cloud.

The core editor works standalone. Cloud features are optional.

Free
Drag-and-drop editorWorks standalone
Free
Viewer & static rendererWorks standalone
Free
Custom componentsPass via resolver
Free
Theming & white-labelFull CSS control
Cloud
AI content generationRequires PageHub account
Cloud
Image CDN & uploadsOr provide onMediaUpload

Developer Docs

90+ docs covering host integration, extensibility, the rendering pipeline, state system, and per-component reference. Lives alongside the source.

Host integration

PageHubConfig shape, feature flags, callbacks, locale, AI config.

Extensibility

registerBlocksProvider, registerComponentAllowlist, media handler, form handler, presets, modifiers, inspector properties.

Adding custom components

defineComponent, the resolver, props schema, toHTML, settings panels.

Constrained editor modes

Email mode, CSS allowlist, catalog filters, blocks provider injection.

State system & URL bridge

setState/getState, stateInputs, mountUrlQueryStateBridge, visibility entries.

Data bindings & repeaters

{{item.*}} interpolation, dataSource scope, client refetch via stateInputs.

Actions & handlers

link, show-hide, set-state, add-to-cart, conditions, handler chains.

Rendering pipeline

Editor vs viewer vs static-renderer — why three runtimes, what each ships.

Browse all SDK docs →

Start building

One install. One component. Full page builder.

Read the Docs