Build a real editor in plain HTML, React, Vue, Svelte, or Angular without locking yourself into a framework-specific editor runtime.

Documentation  ·  Playground  ·  npm: @notectl/core  ·  npm: @notectl/angular

What you get

In a team collaboration app

Install

npm install @notectl/core

Quick start

1. Add a host element

<div id="app"></div>

2. Create the editor

import { createEditor } from '@notectl/core';
import { createMinimalPreset } from '@notectl/core/presets/minimal';

const editor = await createEditor({
  ...createMinimalPreset(),
  placeholder: 'Start typing...',
  autofocus: true,
});

document.getElementById('app')!.appendChild(editor);

import { ThemePreset, createEditor } from '@notectl/core';
import { STARTER_FONTS } from '@notectl/core/fonts/starter';
import { ToolbarOverflowBehavior } from '@notectl/core/plugins/toolbar';
import { createFullPreset } from '@notectl/core/presets/full';

const preset = createFullPreset({
  font: { fonts: STARTER_FONTS },
});

const editor = await createEditor({
  ...preset,
  toolbar: {
    groups: preset.toolbar,
    overflow: ToolbarOverflowBehavior.Flow,
  },
  theme: ThemePreset.Light,
  placeholder: 'Start typing...',
  autofocus: true,
});

document.getElementById('app')!.appendChild(editor);

Add notectl to your app

Plain HTML / Vite / Vanilla JS

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My editor</title>
    <style>
      #app {
        max-width: 800px;
        margin: 2rem auto;
      }

      notectl-editor {
        --notectl-content-min-height: 320px;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>

    <script type="module">
      import { createEditor } from '@notectl/core';
      import { createMinimalPreset } from '@notectl/core/presets/minimal';

      const editor = await createEditor({
        ...createMinimalPreset(),
        placeholder: 'Write something...',
        autofocus: true,
      });

      document.getElementById('app').appendChild(editor);
    </script>
  </body>
</html>

React

import { useEffect, useRef } from 'react';
import { createEditor, type NotectlEditor } from '@notectl/core';

export function Editor() {
  const containerRef = useRef<HTMLDivElement>(null);
  const editorRef = useRef<NotectlEditor | null>(null);

  useEffect(() => {
    let mounted = true;

    createEditor({
      placeholder: 'Start typing...',
      autofocus: true,
    }).then((editor) => {
      if (!mounted || !containerRef.current) return;
      containerRef.current.appendChild(editor);
      editorRef.current = editor;
    });

    return () => {
      mounted = false;
      void editorRef.current?.destroy();
    };
  }, []);

  return <div ref={containerRef} />;
}

Angular

npm install @notectl/core @notectl/angular

// app.config.ts
import { type ApplicationConfig } from '@angular/core';
import { provideNotectl } from '@notectl/angular';

export const appConfig: ApplicationConfig = {
  providers: [provideNotectl()],
};

// editor.component.ts
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import {
  NotectlEditorComponent,
  type Plugin,
  HeadingPlugin,
  LinkPlugin,
  ListPlugin,
  TextFormattingPlugin,
  ThemePreset,
} from '@notectl/angular';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [NotectlEditorComponent],
  template: `
    <ntl-editor
      [toolbar]="toolbar"
      [theme]="theme()"
      [autofocus]="true"
    />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EditorComponent {
  protected readonly theme = signal<ThemePreset>(ThemePreset.Light);

  protected readonly toolbar: ReadonlyArray<ReadonlyArray<Plugin>> = [
    [new TextFormattingPlugin({ bold: true, italic: true, underline: true })],
    [new HeadingPlugin()],
    [new ListPlugin()],
    [new LinkPlugin()],
  ];
}

Build your own toolbar

import { ThemePreset, createEditor } 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,
});

Read and write content

await editor.setContentHTML('<p>Hello <strong>world</strong></p>');

const html = await editor.getContentHTML();
const json = editor.getJSON();
const text = editor.getText();
const empty = editor.isEmpty();

editor.on('ready', () => {
  console.log('Editor is ready');
});

editor.on('stateChange', ({ newState }) => {
  console.log('Document changed:', newState.doc);
});

Built-in plugins

Why teams pick notectl

Examples

Documentation

Development

pnpm install
pnpm build
pnpm test
pnpm test:e2e
pnpm lint
pnpm typecheck

License