Open Source Document Editor

Build powerful editors with model-first architecture

Barocss Editor provides a declarative DSL, efficient reconciliation, and extensible plugin system — supporting both DOM and React rendering targets.

Get Started Installation GitHub

pnpm add @barocss/editor-core @barocss/editor-view-dom @barocss/schema @barocss/dsl @barocss/extensions

Why Barocss Editor

Declarative DSL

Define templates with pure functions — element, data, slot, when. Predictable, testable, and composable across templates, marks, and decorators.

Model-First

All editing operations work on the model, not the DOM. Enables reliable undo/redo, real-time collaboration, and deterministic testing.

Dual Renderer

Same DSL templates render to both DOM (VNode reconciliation) and React (direct ReactNode). Choose the rendering target that fits your stack.

Extensible

30+ built-in extensions for formatting, tables, code blocks, math, and more. Create custom commands, keybindings, and decorators with a clean API.

Type-Safe

Full TypeScript support with schema validation. Catch structural errors at compile time with strongly typed props for blocks and marks.

Collaboration Ready

Built-in adapters for Yjs and Liveblocks. AwarenessManager for cursors, ConflictResolver for concurrent edits, BaseAdapter for custom backends.

Try It Out

Edit the text below to see the editor in action.

Simple Setup

Four steps to a working editor — schema, templates, store, and view.

1 — Schema

import { createSchema } from '@barocss/schema';

const schema = createSchema('doc', {
  topNode: 'document',
  nodes: {
    document: { name: 'document', group: 'document', content: 'block+' },
    paragraph: { name: 'paragraph', group: 'block', content: 'inline*' },
    'inline-text': { name: 'inline-text', group: 'inline' },
  },
});

2 — Templates

import { define, element, data, slot } from '@barocss/dsl';

define('paragraph', element('p', { className: 'paragraph' }, [slot('content')]));
define('inline-text', element('span', {}, [data('text', '')]));

3 — DataStore

import { DataStore } from '@barocss/datastore';

const dataStore = new DataStore(undefined, schema);

4 — Editor

import { Editor } from '@barocss/editor-core';
import { EditorViewDOM } from '@barocss/editor-view-dom';
import { createCoreExtensions } from '@barocss/extensions';

const editor = new Editor({ dataStore, schema, extensions: createCoreExtensions() });
new EditorViewDOM(editor, container).mount();

Full Quick Start Guide

Architecture

Model-first architecture with dual rendering targets. Same DSL templates power both DOM and React outputs.

Rendering Pipeline

Shared template layer fans out to DOM reconciliation or direct React element construction.

Architecture Deep Dive

Packages

Modular monorepo — use only what you need.

@barocss/schemaDocument structure and validation

@barocss/datastoreTransactional node store with overlay/COW

@barocss/modelOperations, transactions, undo/redo

@barocss/dslDeclarative template builders

@barocss/renderer-domVNode reconciliation to DOM

@barocss/renderer-reactDirect React element output

@barocss/editor-coreCommands, selection, extensions, history

@barocss/editor-view-domDOM input, selection sync, decorators

@barocss/editor-view-reactReact view layer with hooks

@barocss/extensions30+ built-in extensions

@barocss/collaborationCRDT/OT base adapter

@barocss/converterHTML/Markdown/LaTeX/PDF conversion

Documentation

IntroductionWhy Barocss Editor and how it differs from other editors InstallationInstall core and optional packages with your package manager Quick StartEnd-to-end example: schema to a working editor in 5 minutes RenderingHow DSL templates become DOM and React elements Extension DesignCreate commands, keybindings, and decorators API ReferenceComplete API docs for every package