Open Source · MIT License

UI block builder for React

A composable UI builder component. Design beautiful block-based layouts visually — then export HTML with one function call.

Get started GitHub

npm install block-based

Everything you need

A full-featured UI block builder in a single React component.

Block-based editing

Build UIs from composable blocks — headings, paragraphs, buttons, images, menus, dividers, spacers, and raw HTML.

Visual inspector

Click any block to inspect and edit its properties: typography, colours, padding, margins, borders, and alignment.

Multi-column layouts

Arrange blocks in 1–4 column grids with flexible width ratios. Drag to reorder sections and blocks.

Clean HTML output

Renders clean, production-ready HTML from your block layout — ready for any platform or use case.

Drag & drop

Reorder blocks and sections with fluid drag-and-drop powered by dnd-kit. Move blocks between columns effortlessly.

Zero config install

One package, zero required configuration. Drop the EmailBlockEditor component into any React project.

Up and running in minutes

Install from npm, drop the component in, and start building.

import { EmailBlockEditor, renderEmailDocument, createEmptyDocument } from 'block-based';
import { useState } from 'react';

export function App() {
  const [doc, setDoc] = useState(createEmptyDocument);

  return (
    <>
      <EmailBlockEditor value={doc} onChange={setDoc} height="600px" />
      <button onClick={() => console.log(renderEmailDocument(doc))}>
        Export HTML
      </button>
    </>
  );
}

Read the docs