A modern rich text editor built as a Web Component with plugin architecture, immutable state, and zero-config framework-agnostic deployment.
notectl is a modern rich text editor built as a Web Component, offering a plugin-based architecture and immutable state management. It solves the problem of framework lock-in by providing a single editor runtime that works seamlessly across React, Vue, Svelte, Angular, and plain HTML environments.
Frontend developers and teams building web applications that require a rich text editor without being tied to a specific JavaScript framework.
Developers choose notectl for its framework-agnostic design, which eliminates the need for framework-specific editor runtimes, and its predictable immutable state management combined with a flexible plugin system for customization.
notectl is a modern rich text editor designed as a Web Component, enabling seamless integration across any JavaScript framework or plain HTML. It provides a robust plugin system and immutable state management, making it a predictable and flexible choice for web applications.
<notectl-editor>) and works with React, Vue, Svelte, Angular, or vanilla JS.adoptedStyleSheets for Content Security Policy compatibility without inline styles.notectl prioritizes developer flexibility by providing a strong default setup for rapid integration while maintaining fine-grained control over plugins and behavior, all within a framework-agnostic architecture.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Works as a Web Component (`<notectl-editor>`) that integrates seamlessly with React, Vue, Svelte, Angular, or vanilla JS, eliminating framework lock-in as demonstrated in the multi-framework examples.
Uses immutable editor state and transaction-based updates for predictable behavior and easier testing, a key feature highlighted in the philosophy section.
Offers a plugin system with presets for quick setup (like createFullPreset) and granular control over features such as headings, lists, and tables, allowing tailored editor configurations.
Leverages `adoptedStyleSheets` for styling, ensuring compatibility with Content Security Policies without inline styles, as explicitly mentioned in the key features.
Requires browsers with Custom Elements support, excluding legacy browsers like Internet Explorer, as stated in the requirements for modern browser support.
Editor creation is asynchronous (`await createEditor`), adding overhead to component lifecycle management compared to synchronous alternatives, evident in the React and Angular setup examples.
Lacks out-of-the-box support for real-time collaboration or other advanced capabilities like track changes, requiring custom implementation beyond the core plugin set.