notectl

v2.0.3

Build editors, not workarounds

Most rich text editors force you into their world. notectl works in yours. Ship a <notectl-editor> Web Component that drops into React, Vue, Angular, Svelte, or plain HTML with zero adapters, zero wrappers, and zero compromises.

One tag. Any framework.

<notectl-editor> is a native custom element. No React bindings, no Vue wrappers needed. Framework-agnostic core with optional Angular bindings via @notectl/angular. Import it, drop it in, done. Framework upgrades never break your editor.

Only ship what you use

Every feature is a plugin. Bold, tables, fonts, checklists — compose exactly the editor you need. Your bundle stays lean, your users stay happy.

State you can trust

Immutable state, atomic transactions, invertible steps. Every change is predictable, every change is undoable. No more “how did the DOM get into this state?” debugging.

Toolbar in one line

Configure your toolbar with a simple array. Group plugins visually, reorder freely, add separators — all declarative, zero DOM manipulation.

See it in action

Minimal Setup

import { createEditor } from '@notectl/core';

const editor = await createEditor({
  placeholder: 'Start typing...',
});
document.getElementById('editor')!.appendChild(editor);

Full Preset

import { createEditor, ThemePreset } from '@notectl/core';
import { createFullPreset } from '@notectl/core/presets';

const editor = await createEditor({
  ...createFullPreset(),
  theme: ThemePreset.Light,
  placeholder: 'Start typing...',
});
document.getElementById('editor')!.appendChild(editor);

Custom Toolbar

import { createEditor } from '@notectl/core';
import { TextFormattingPlugin } from '@notectl/core/plugins/text-formatting';
import { HeadingPlugin } from '@notectl/core/plugins/heading';
import { ListPlugin } from '@notectl/core/plugins/list';
import { LinkPlugin } from '@notectl/core/plugins/link';
import { TablePlugin } from '@notectl/core/plugins/table';

const editor = await createEditor({
  toolbar: [
    [new TextFormattingPlugin()],
    [new HeadingPlugin()],
    [new ListPlugin()],
    [new LinkPlugin(), new TablePlugin()],
  ],
});
document.getElementById('editor')!.appendChild(editor);

Read Content

// Get content as JSON, HTML, or plain text
const json = editor.getJSON();
const html = await editor.getContentHTML();
const text = editor.getText();

// Set content programmatically
await editor.setContentHTML('<h1>Hello</h1><p>World</p>');
editor.setJSON(savedDocument);

// Listen for changes
editor.on('stateChange', ({ newState }) => {
  save(newState.doc);
});

Why teams choose notectl

23 built-in plugins

Text formatting, headings, lists, tables, links, code blocks, images, fonts, font sizes, text colors, alignment, blockquotes, strikethrough, superscript/subscript, highlight, horizontal rules, hard breaks, a declarative toolbar, platform-aware caret navigation, and gap cursor for void-block boundaries. Every plugin ships with keyboard shortcuts, input rules, and accessible toolbar items.

Markdown-style shortcuts

Type # for headings, - for bullet lists, 1. for numbered lists, > for blockquotes, --- for horizontal rules, [ ] for checklists. Your power users will feel right at home.

Tables that actually work

Full grid picker for insertion, multi-cell selection, row/column operations, keyboard navigation between cells. Not a bolted-on afterthought.

Custom fonts made easy

Pass a FontDefinition with WOFF2/TTF/OTF sources. notectl injects @font-face rules automatically. Bundle starter fonts (Fira Sans, Fira Code) or bring your own.

Architecture that scales

notectl follows a strict unidirectional data flow. Every user action creates a Transaction with atomic, invertible Steps. Transactions pass through a priority-ordered middleware chain, produce a new immutable EditorState, and the view layer patches only the changed DOM blocks.

Input → Transaction (Steps) → Middleware → New State → DOM Reconciliation

This gives you predictable updates, built-in undo/redo, plugin interception points, and state transitions that are pure functions — easy to test, easy to reason about.

Layer	What it does
Model	Immutable Document, BlockNode, TextNode, InlineNode, Mark, Selection
State	EditorState container, Transaction builder, History with step inversion
View	Block-level DOM reconciliation, selection sync, input handling
Commands	toggleMark, splitBlock, deleteBackward, insertTable, and more
Plugins	Self-contained feature modules with schema, commands, keymaps, toolbar items

Get started

Installation npm install, one import, and you have a working editor. Takes under 2 minutes.

Plugin Reference Browse all 23 built-in plugins with their APIs, commands, keyboard shortcuts, and screenshots.

Write Your Own Plugin Full guide to building custom plugins with the PluginContext API.

Architecture Deep Dive Understand the layered architecture and unidirectional data flow.