notectl

The rich text editor that gets out of your way.

A modular, accessible rich text editor — shipped as a Web Component. Use what you need, nothing more.

Documentation • Playground • npm

Try it live — Open the playground (no install required)

Why notectl?

• Web Component — drop <notectl-editor> into React, Vue, Svelte, Angular, or plain HTML
• Plugin architecture — every feature is a plugin; add only what you need
• Accessible by default — full keyboard navigation, ARIA roles and labels, screen reader support
• Immutable state — predictable updates, time-travel undo/redo, zero mutation bugs
• Native Angular integration — available as @notectl/angular
• Lightweight — bundle size of notectl core is 29kb
• Single dependency — only DOMPurify at runtime

Quick Start

npm install @notectl/core

import {
  createEditor,
  ThemePreset,
  TextFormattingPlugin,
  HeadingPlugin,
  ListPlugin,
  LinkPlugin,
  TablePlugin,
} from '@notectl/core';

const editor = await createEditor({
  theme: ThemePreset.Light,
  toolbar: [
    [new TextFormattingPlugin({ bold: true, italic: true, underline: true })],
    [new HeadingPlugin()],
    [new ListPlugin()],
    [new LinkPlugin(), new TablePlugin()],
  ],
  placeholder: 'Start typing...',
  autofocus: true,
});

document.body.appendChild(editor);

A full-featured editor in 16 lines.

Accessibility

notectl is built with accessibility as a first-class concern, not an afterthought.

• Full keyboard navigation — every feature reachable without a mouse
• Semantic ARIA roles and labels on all interactive elements
• Proper focus management across toolbar, dialogs, and editor content
• Screen reader friendly — announces formatting changes and editor state
• High-contrast compatible with ThemePreset.Light and ThemePreset.Dark

Plugins

Every capability is a plugin. Compose exactly the editor you need. See the plugin documentation for configuration details and examples.

Full Working Examples

See notectl in action with every plugin, custom fonts, and the complete API:

• examples/vanillajs — Vanilla JavaScript
• examples/angular — Angular with @notectl/angular

git clone https://github.com/Samyssmile/notectl.git
cd notectl && pnpm install && pnpm dev

Content API

editor.getHTML();                                        // read HTML
editor.setHTML('<p>Hello <strong>world</strong></p>');    // write HTML
editor.getJSON();                                        // read JSON
editor.getText();                                        // read plain text
editor.isEmpty();                                        // check if empty

Documentation

Full guides, API reference, and plugin docs are available at samyssmile.github.io/notectl.

Contributing

pnpm install          # install dependencies
pnpm build            # build all packages
pnpm test             # run unit tests
pnpm test:e2e         # run e2e tests
pnpm lint             # lint

License

MIT