A lightweight, embeddable page builder using Web Components. No frameworks, no dependencies. Works with any backend.
Standard Custom Elements with Shadow DOM. Works in any framework or plain HTML — no build step required.
No React, no Vue, no jQuery. Just native browser APIs. The full bundle is under 35KB gzipped.
English, Spanish and French out of the box. Set the language via
the lang attribute.
Clean public API with DOM CustomEvents:
builder:ready, builder:save,
builder:content-changed.
Heading, text, image, button, table, list, video, divider, spacer and raw HTML. Drag to reorder.
Built-in HTML sanitizer strips dangerous tags and attributes. Safe by default for user content.
Two ways to use the builder: standalone with your own backend, or with the built-in page manager.
<!-- Your PHP/HTML page --> <page-builder page-id="42" lang="es"></page-builder> <script type="module"> import "./dist/page-builder.js"; const builder = document.querySelector("page-builder"); // Load data when ready builder.addEventListener("builder:ready", () => { builder.setPageData(pageDataFromServer); }); // Handle save builder.addEventListener("builder:save", async (e) => { await fetch(`/api/pages/${e.detail.pageId}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(e.detail.data) }); }); </script>
<!-- Built-in page manager with localStorage --> <page-manager lang="es"></page-manager> <script type="module"> import "./dist/page-builder.js"; </script> <!-- That's it. Pages are stored in localStorage. --> <!-- Or connect to an API: --> <page-manager lang="en" api-endpoint="https://api.example.com/pages" api-key="your-key" mode="hybrid" ></page-manager>
Try the interactive demos to see the builder in action.