Barocss Editor
A powerful document editor with DSL-based rendering, built for extensibility and performance.
Features
🎨 Declarative DSL
Define templates using functional DSL (element, data, when, component). Pure functions that make rendering predictable and testable.
📦 Model-First Architecture
All editing operations work on the model, not the DOM. This ensures consistency and makes undo/redo, collaboration, and testing easier.
🔧 Extensible
Create custom extensions and decorators easily. Plugin-based architecture allows you to add new commands and features without modifying core code.
🛡️ Type-Safe
Full TypeScript support with schema validation. Catch errors at compile time and get excellent IDE autocomplete.
⚡ Fast Rendering
Efficient reconciliation with minimal DOM updates. Only changed parts are updated, similar to React's diffing algorithm.
🌐 Framework Agnostic
Core logic independent of UI frameworks. Use with React, Vue, or vanilla JavaScript. Render to any target you need.
Try It Out
Edit the text below to see Barocss Editor in action. Try formatting with bold and italic text!
Quick Start
Get started with Barocss Editor in minutes. Install the core packages and create your first editor instance.
pnpm add @barocss/editor-core @barocss/editor-view-dom @barocss/schema
Simple Example
Here's a simple example showing how to create a basic editor with a paragraph node.
1. Define Schema
import { createSchema } from '@barocss/schema';
const schema = createSchema('my-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. Define Templates
import { define, element, data, slot } from '@barocss/dsl';
define('paragraph', element('p', {
className: 'paragraph'
}, [slot('content')]));
define('inline-text', element('span', {
className: 'text'
}, [data('text', '')]));
3. Create DataStore
import { DataStore } from '@barocss/datastore';
const dataStore = new DataStore(undefined, schema);
4. Create 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()
});
const view = new EditorViewDOM(editor, container);
view.mount();
Architecture
Model-first architecture with declarative DSL. All operations work on the model, ensuring consistency and testability.
Rendering Pipeline
How data flows from Model to DOM through DSL templates and efficient reconciliation.