Getting Started

block-based is a composable, block-based UI builder component for React. It lets you design block layouts visually and export them as HTML with a single function call.

Installation

npm install block-based

Peer dependencies — make sure these are already in your project:

npm install react react-dom lucide-react

Quick Start

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

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

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

That's it — you have a fully functional block builder. The doc state is a plain JSON object that you can persist to any database, and renderEmailDocument() converts it to clean, production-ready HTML.

What's Included

Feature	Description
8 block types	Heading, Paragraph, Button, Image, Divider, Spacer, Menu, HTML
Multi-column layouts	1–4 column sections with flexible width ratios
Drag & drop	Reorder blocks and sections via dnd-kit
Visual inspector	Edit typography, colors, padding, margins, borders
Responsive preview	Desktop, tablet, and mobile view modes
HTML export	Clean, production-ready HTML output
Color palette	Semantic color system with custom color support
Templates	Pre-built section templates (hero, CTA, two-column)

Next Steps

EmailBlockEditor — editor component props and configuration
Rendering HTML — exporting HTML output
Document Model — understanding the JSON document structure
Block Types — available blocks and their properties
Customization — custom blocks, tabs, templates, and feature flags
API Reference — full API listing