@diy-website-builder/sdk

Framework-agnostic v3 visual website builder editor. Mounts into any HTMLElement.

Get an API key

1. Create an account or sign in at diy-website-builder.com.
2. Open Developers and enable the developer product for your account (free to start).
3. Go to API keys in the developer dashboard.
4. Create a key. Copy the full key when it is shown. You will only see the complete value at create or rotate time.
5. Optional: add allowed domains on the key so it only works from those hosts (exact hosts or *.example.com wildcards). Leave empty to allow any domain.

Use that key as apiKey in the examples below.

Install

npm install @diy-website-builder/sdk

Framework examples

Runnable starters: diy-website-builder/sdk-examples. Docs overview: Framework examples.

| Example | Stack | Path | | --- | --- | --- | | Vanilla | Vite + TypeScript | vanilla | | CDN | Plain HTML + jsDelivr | cdn | | React | Vite + React | react | | Vue | Vite + Vue 3 | vue | | Angular | Angular 19 standalone | angular | | Next.js | App Router | next |

git clone https://github.com/diy-website-builder/sdk-examples.git
cd sdk-examples/react   # or vanilla / cdn / vue / angular / next
cp .env.example .env    # next: .env.local · angular: edit src/env.ts · cdn: edit index.html
npm install             # skip for cdn
npm run dev             # cdn: npx serve -p 5177

Each example shows how to pass apiKey, map a stable shortId to your user, and call editor.destroy() on teardown. React and Next keep the mount logic in a client component so SSR never touches the editor DOM APIs.

Styles and host apps

Importing @diy-website-builder/sdk does not inject CSS. Styles are applied only when you construct Builder, and are removed in destroy().

The SDK only inserts and removes its own tags (#dwb-editor-bundle-styles, #dwb-tailwind-theme, #dwb-site-loading-style). It does not rewrite host <style> / <link> tags or observe document.head for host CSS.

The bundle sheet is built for host coexistence:

• Utilities scoped under .dwb-editor / portals
• Tailwind @layer properties, @property --tw-*, and :root theme tokens stripped at build time
• Cascade layers renamed to dwb.*

Optional explicit CSS entry (editor route only):

import "@diy-website-builder/sdk/styles.css";

If you import styles.css yourself, prefer not also relying on auto-inject, or you may duplicate the sheet.

Usage

Hosted publish (default)

import DIYWebsiteBuilderEditor from "@diy-website-builder/sdk";

const editor = new DIYWebsiteBuilderEditor.Builder({
  apiKey: "YOUR_API_KEY",
  shortId: "my-site",
  container: document.getElementById("editor")!,
  exitURL: "/dashboard",
  onPublish: (url) => console.log("published", url),
});

// later
editor.destroy();

Export HTML to your host

Paid developer plans can export compiled HTML instead of publishing to DIY hosting. Media (images, videos, fonts) stays on the DIY CDN.

import DIYWebsiteBuilderEditor from "@diy-website-builder/sdk";

const editor = new DIYWebsiteBuilderEditor.Builder({
  apiKey: "YOUR_API_KEY",
  shortId: "my-site",
  container: document.getElementById("editor")!,
  publishMode: "export",
  onExport: async (site) => {
    // site.pages[].html is ready to host. Asset URLs point at the DIY CDN.
    await fetch("/api/sites/import", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(site),
    });
  },
  onExportProgress: ({ phase, current, total }) => {
    console.log(phase, current, total);
  },
  onPaidFeatureClick: (event) => {
    if (event === "websiteExportRestricted") {
      window.location.href = "https://diy-website-builder.com/developers#pricing";
    }
  },
});

// Or trigger export from your own UI:
// const site = await editor.exportSite();

Site export requires a paid developer plan (devBasic and above). Free plans can still download a single page from the editor menu when allowed.

CSP

If your host sets a Content-Security-Policy, allow DIY CDN media:

Content-Security-Policy: img-src 'self' https://cdn.diy-website-builder.com; media-src 'self' https://cdn.diy-website-builder.com; font-src 'self' https://cdn.diy-website-builder.com https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://cdn.diy-website-builder.com https://cdn.jsdelivr.net; script-src 'self' https://cdn.diy-website-builder.com;

Deleting assets or the DIY project can break exported sites that still reference those CDN URLs.

CDN

Load the UMD bundle from a CDN, then use the global DIYWebsiteBuilderEditor. Full file: examples/cdn.

<div id="editor"></div>
<script src="https://cdn.jsdelivr.net/npm/@diy-website-builder/[email protected]/dist/diy-website-builder-editor.js"></script>
<script>
  const editor = new DIYWebsiteBuilderEditor.Builder({
    apiKey: "YOUR_API_KEY",
    shortId: "my-site",
    container: document.getElementById("editor"),
    exitURL: "/dashboard",
    onPublish: (url) => console.log("published", url),
  });
</script>

Alternatives:

• jsDelivr: https://cdn.jsdelivr.net/npm/@diy-website-builder/[email protected]/dist/diy-website-builder-editor.js
• unpkg: https://unpkg.com/@diy-website-builder/[email protected]/dist/diy-website-builder-editor.js

Pin a version in production (shown above).

API

| Option | Type | Required | Notes | | --- | --- | --- | --- | | apiKey | string | yes | From API keys | | shortId | string | yes | Project short id | | container | HTMLElement | yes | Mount node | | language | "en" \| "fr" \| "de" \| "es" | no | UI language (default "en") | | exitURL | string | no | Exit / back navigation | | publishMode | "hosted" \| "export" | no | Default "hosted". "export" compiles HTML and calls onExport | | onPublish | (url?: string) => void | no | After DIY hosted publish | | onSnapshotChanged | (thumbnails: ProjectSnapshots) => void | no | After project preview snapshots are saved | | onExport | (site: SiteExport) => void \| Promise<void> | no | Required when publishMode is "export" | | onExportProgress | (progress) => void | no | Save/compile progress for site export | | onPaidFeatureClick | (event) => void | no | Upgrade / paywall hooks | | showMessage | (message, type, options?) => void | no | Toast host |

Methods

| Method | Notes | | --- | --- | | exportSite() | Full-site HTML package (paid developer). Calls onExport when set. | | exportPage(pageId?) | Single page HTML (uses page-download entitlement). | | destroy() | Unmount and clean up |

Styles are injected by the bundle (injectStyles).