Package Exports

@notectl/core
@notectl/core/fonts
@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/strikethrough
@notectl/core/plugins/super-sub
@notectl/core/plugins/table
@notectl/core/plugins/text-color
@notectl/core/plugins/text-formatting
@notectl/core/plugins/toolbar

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

30 seconds to a full editor

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

That's it. A production-ready editor in 16 lines. No build step required.

Why teams choose notectl

Ship faster

One <notectl-editor> tag works in every framework. No wrapper libraries, no adapter boilerplate, no version lock-in.

Stay lean

34 KB core. One runtime dependency (DOMPurify). Every feature is a plugin — bundle only what you use.

Accessible out of the box

Full keyboard navigation, ARIA roles, screen reader announcements, focus management, high-contrast themes. Not an afterthought — it's the foundation.

Built for control

Immutable state, step-based transactions, time-travel undo/redo. Every change is traceable, testable, and invertible.

Plugin ecosystem

Every capability is a plugin. Compose exactly the editor you need — nothing more, nothing less.

Plugin	What you get
TextFormattingPlugin	Bold, italic, underline
StrikethroughPlugin	~~Strikethrough~~ text
HeadingPlugin	H1 – H6 headings
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
TextColorPlugin	Text color picker
HighlightPlugin	Text highlighting / background color
AlignmentPlugin	Left, center, right, justify
FontPlugin	Font family selection with custom fonts
FontSizePlugin	Configurable font sizes
HorizontalRulePlugin	Horizontal dividers
SuperSubPlugin	Superscript and subscript
PrintPlugin	Print editor content with configurable options

See the plugin documentation for configuration and examples.

Content API

Read and write content in any format:

editor.getContentHTML();                                        // export as HTML
editor.setContentHTML('<p>Hello <strong>world</strong></p>');    // import HTML
editor.getJSON();                                        // structured 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 17+	`@notectl/angular` native integration

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

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

Contributing

pnpm install          # install dependencies
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