Package Exports

@notectl/core
@notectl/core/fonts
@notectl/core/full
@notectl/core/html
@notectl/core/plugins/alignment
@notectl/core/plugins/blockquote
@notectl/core/plugins/caret-navigation
@notectl/core/plugins/code-block
@notectl/core/plugins/font
@notectl/core/plugins/font-size
@notectl/core/plugins/gap-cursor
@notectl/core/plugins/hard-break
@notectl/core/plugins/heading
@notectl/core/plugins/highlight
@notectl/core/plugins/horizontal-rule
@notectl/core/plugins/image
@notectl/core/plugins/link
@notectl/core/plugins/list
@notectl/core/plugins/print
@notectl/core/plugins/shared
@notectl/core/plugins/smart-paste
@notectl/core/plugins/strikethrough
@notectl/core/plugins/super-sub
@notectl/core/plugins/table
@notectl/core/plugins/text-color
@notectl/core/plugins/text-direction
@notectl/core/plugins/text-direction-advanced
@notectl/core/plugins/text-formatting
@notectl/core/plugins/toolbar
@notectl/core/presets
@notectl/core/presets/full
@notectl/core/presets/minimal

Readme

notectl

Drop one tag. Get a full editor.

<notectl-editor> — the rich text editor that works everywhere.
React, Vue, Angular, Svelte, or plain HTML. Zero config, full power.

Try the Playground · Documentation · npm

Quick Start

npm install @notectl/core

Preset — full editor in 5 lines

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

const editor = await createEditor({
  ...createFullPreset({ font: { fonts: STARTER_FONTS } }),
  theme: ThemePreset.Light,
  placeholder: 'Start typing...',
});

document.body.appendChild(editor);

All standard plugins, toolbar groups, and keyboard shortcuts — ready to go.

Custom — pick exactly what you need

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

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);

Why notectl

CSP-compliant — zero inline styles

The only editor with a built-in CSP-safe rendering pipeline. All styles go through adoptedStyleSheets with reference-counted token management. Works with style-src 'self' — no unsafe-inline needed. ProseMirror, TipTap, Slate, Lexical, Quill all write inline styles.

One dependency

The entire editor — state engine, reconciler, plugin system, toolbar, undo/redo, selection sync — is built from scratch with a single production dependency (DOMPurify for HTML sanitization). Tree-shakeable plugin architecture: bundle only what you use.

True Web Component

Shadow DOM encapsulation, reactive attributes, framework-agnostic by design. One <notectl-editor> tag works in React, Vue, Angular, Svelte, or plain HTML. No wrappers, no adapters, no version lock-in.

Plugin system with full lifecycle

Dependency-resolved initialization (topological sort), per-plugin teardown tracking, type-safe inter-plugin services via ServiceKey<T>, priority-ordered middleware, error isolation. Plugins can't crash the editor or leak memory.

Plugin Ecosystem

Every capability is a plugin. Compose exactly the editor you need.

Plugin	What you get
TextFormattingPlugin	Bold, italic, underline
StrikethroughPlugin	~~Strikethrough~~ text
SuperSubPlugin	Superscript and subscript
HeadingPlugin	H1 – H6 headings with block type picker
BlockquotePlugin	Block quotes
ListPlugin	Bullet, ordered, and checklists
LinkPlugin	Hyperlink insertion and editing
TablePlugin	Full table support with row/column controls
CodeBlockPlugin	Code blocks with syntax highlighting
ImagePlugin	Image upload, resize, and drag-and-drop
TextColorPlugin	Text color picker
HighlightPlugin	Text highlighting / background color
AlignmentPlugin	Left, center, right, justify
FontPlugin	Font family selection with custom web fonts
FontSizePlugin	Configurable font sizes
HorizontalRulePlugin	Horizontal dividers
PrintPlugin	Print editor content with configurable paper sizes

See the plugin documentation for configuration and examples.

Built-in Features

Themes — Dark and Light presets, or create fully custom themes
i18n — 9 languages: English, German, Spanish, French, Chinese, Russian, Arabic, Hindi, Portuguese + auto-detect via Locale.BROWSER
Paper sizes — DIN A4, DIN A5, US Letter, US Legal for WYSIWYG page layout
CSP-compliant — Style delivery via adoptedStyleSheets, no inline styles required
Markdown shortcuts — # → H1, ## → H2, - → bullet list, 1. → ordered list, > → blockquote
Syntax highlighting — Pluggable highlighter for code blocks

Content API

Read and write content in any format:

await editor.getContentHTML();                               // export as HTML
await editor.setContentHTML('<p>Hello <strong>world</strong></p>'); // import HTML
editor.getJSON();                                            // structured JSON
editor.setJSON(doc);                                         // import JSON
editor.getText();                                            // plain text
editor.isEmpty();                                            // check if empty

Works with your stack

	Framework	How
Any	Vanilla JS, React, Vue, Svelte	`<notectl-editor>` Web Component
Angular	Angular 21+	`@notectl/angular` native integration

See examples/vanillajs and examples/angular for full working demos.

Contributing

git clone https://github.com/Samyssmile/notectl.git
cd notectl && pnpm install
pnpm build            # build all packages
pnpm test             # run unit tests
pnpm test:e2e         # run e2e tests
pnpm lint             # lint

Get started · Open the playground · View on npm

MIT License