uframeBlock-based page builder

Drop a full page editor into any app over a tiny client — no framework lock-in in your host.

Embed in any stack

Run the editor as a standalone iframe app and drive it from React, Vue, Svelte, or plain HTML — your host never imports the editor.

Tiny host client

@dremchee/uframe/embed is a few kilobytes of DOM + postMessage. No Vue, no Tailwind, nothing heavy in your bundle.

Fully isolated

Styles and scripts are sandboxed inside the iframe — zero CSS clashes, clean upgrades behind the frame boundary.

Your data, your backend

Pass a document in, receive change / save callbacks out. Persist wherever you like.

Live

Try the real editor, right here

This is the actual editor running in an iframe, driven by the embed client — exactly the integration shown in the docs.

Tiny host client

A few lines to drop it in

No editor code in your bundle — just an iframe and a typed postMessage client.

host.ts

import { createUframeEditor } from '@dremchee/uframe/embed'

const editor = createUframeEditor({
  target: document.querySelector('#editor'),
  src: '/uframe/index.html',
  document: page,
  onSave: doc => persist(doc),
})

Drive it fromReactVueSvelteSolidVanilla JS

Who it's for

An editor engine, not a website builder

uframe is the editor you embed in your own app — you own the data, the backend, and the experience around it.

Product teams

Add an in-app page/content builder to a SaaS, CMS, or landing tool — embed it over the tiny client and host on any stack.

Vue teams

Extend the editor with your own blocks, plugins, toolbar buttons, and sidebar panels by importing the Vue component.

Platforms & agencies

Offer white-label editing — rebrand the chrome with theme tokens, kept isolated behind the iframe boundary.

How it works

Three moving parts

An isolated iframe, a typed message channel, and plain JSON out.

Mount the iframe

createUframeEditor() drops an isolated editor app into any element — vanilla JS, no framework required on the host.

Drive it over postMessage

Pass a document, theme and readonly in; a tiny typed protocol keeps the host and the editor in sync both ways.

Own the data

Receive change / save callbacks carrying a plain PageDocument JSON. Persist it to any backend you like.

Integrate your way

Two ways to integrate

Embed-first, but not embed-only — pick the path that fits your host.

uframe/embed

Embed client

Mount an iframe and drive it over a tiny typed postMessage protocol. Any host stack, full isolation, nothing heavy in your bundle.

Any framework
Iframe sandbox
A few KB on the host

Get started →<PageEditor>

Vue component

Import the editor directly when you need to register custom blocks, plugins, and panels. Pulls Vue into your bundle.

Custom blocks
Plugins & panels
In-app integration

Extend the editor →

Dynamic content

Bring your own CMS

Design templates that bind to collection fields, then resolve them to static JSON on your server.

Design a template

Build the page visually with blocks — once, then reuse it across every record.

Bind CMS fields

Point blocks at collection fields with Data List / Data Item. The document stays pure design + bindings — no content baked in.

Ship plain JSON

resolveDocument() merges your data on the server. Bring Directus, Strapi, Payload — or any source.

Drop a real editor into your app

Embed it over a tiny client, keep your stack, own your data.

Get started Live demo