notectl
Rich text editing as a Web Component
FreeUI LibraryCodeVisual editing2 impressionslaunches Nov 61 comment
notectl is a lightweight, framework-agnostic rich-text editor delivered as a Web Component.
- for
- Web developers needing a customizable editor for any JavaScript framework
- license
- MIT
Key features
- Zero-wrapper integration — Drop a <notectl-editor> tag into React, Vue, Angular, Svelte or plain HTML without adapters.
- Plugin-based architecture — Choose from 28 built-in plugins or create custom ones to keep bundles lean.
- Immutable state & undo/redo — Unidirectional data flow with atomic transactions provides predictable updates and reliable undo.
- Declarative toolbar — Configure toolbar layout with a simple array; no DOM manipulation required.
- Markdown-style shortcuts — Type #, -, 1., >, etc., for headings, lists, blockquotes and more.
- Accessible video embeds — Privacy-first YouTube/Vimeo embeds with keyboard-operable controls and WCAG compliance.
Use cases
- Add a rich-text editor to a React dashboard with minimal setup
- Create a custom content authoring tool that only includes needed plugins
- Build a multi-framework documentation site that shares the same editor component
notectl FAQ
Do I need a framework-specific wrapper to use notectl?+
No, notectl is a native custom element; you can use it directly in any framework or plain HTML.
How can I limit the editor size?+
Only import the plugins you need; each feature is a separate plugin, keeping the bundle lean.
Is the editor state immutable?+
Yes, notectl uses immutable EditorState and atomic transactions for predictable undo/redo.
Can I customize the toolbar?+
Yes, the toolbar is configured declaratively via an array of plugin instances.
Does notectl support video embeds?+
Yes, it includes a video plugin that embeds YouTube, Vimeo and Dailymotion with privacy-first, accessible controls.
Summarized by DevHunt from samyssmile.github.io · Sep 30, 2026. Details may change; check the official site.