Getting Started

Pick your setup: Vanilla JS/TS for a themed editor with toolbar and bubble menu out of the box, Angular, React, or Vue for ready-made components with auto-rendered toolbar and menus, or Headless for a bare editor you style yourself.

Vanilla JS/TS

Click to try it out

1. Installation

   pnpm

   pnpm add @domternal/core @domternal/theme

   npm

   npm install @domternal/core @domternal/theme

   yarn

   yarn add @domternal/core @domternal/theme

2. Create Your First Editor

   TS

   import { Editor, StarterKit, defaultIcons } from '@domternal/core';
   import '@domternal/theme';
   
   const editorEl = document.getElementById('editor')!;
   
   // Toolbar
   const toolbar = document.createElement('div');
   toolbar.className = 'dm-toolbar';
   toolbar.innerHTML = `<div class="dm-toolbar-group">
     <button class="dm-toolbar-button" data-mark="bold">${defaultIcons.textB}</button>
     <button class="dm-toolbar-button" data-mark="italic">${defaultIcons.textItalic}</button>
     <button class="dm-toolbar-button" data-mark="underline">${defaultIcons.textUnderline}</button>
   </div>`;
   editorEl.before(toolbar);
   
   // Editor
   const editor = new Editor({
     element: editorEl,
     extensions: [StarterKit],
     content: '<p>Hello world</p>',
   });
   
   // Toggle marks on click (event delegation)
   toolbar.addEventListener('click', (e) => {
     const btn = (e.target as Element).closest<HTMLButtonElement>('[data-mark]');
     if (!btn) return;
     editor.chain().focus().toggleMark(btn.dataset.mark!).run();
   });
   
   // Active state sync
   editor.on('transaction', () => {
     toolbar.querySelectorAll<HTMLButtonElement>('[data-mark]').forEach((btn) => {
       btn.classList.toggle('dm-toolbar-button--active', editor.isActive(btn.dataset.mark!));
     });
   });

   HTML

   <div id="editor" class="dm-editor"></div>

   StarterKit provides paragraphs, headings, lists, blockquotes, code blocks, task lists, inline formatting, keyboard shortcuts, and undo/redo. The @domternal/theme package adds editor styles, a toolbar layout, and 45 built-in icons via defaultIcons.

   For full control, skip StarterKit and import only the extensions you need.

StarterKit Contents

Every extension in the kit can be disabled with false or configured with options:

StarterKit.configure({
  codeBlock: false,                     // disable an extension
  heading: { levels: [1, 2, 3, 4] },   // limit heading levels
  history: { depth: 50 },               // configure undo stack
  link: { openOnClick: false },         // keep links non-clickable while editing
  linkPopover: false,                   // disable the built-in link popover
})

The full list of bundled extensions:

Category	Included
Nodes	Document, Text, Paragraph, Heading, Blockquote, CodeBlock, BulletList, OrderedList, ListItem, TaskList, TaskItem, HorizontalRule, HardBreak
Marks	Bold, Italic, Underline, Strike, Code, Link
Behaviors	BaseKeymap, History, Dropcursor, Gapcursor, TrailingNode, ListKeymap, LinkPopover, SelectionDecoration

Next Steps

Now that your editor is running, explore the rest of the toolkit:

• StarterKit - see above for the full list of bundled extensions and how to configure them
• Extensions - add tables, images, emoji, mentions, and syntax-highlighted code blocks via standalone packages
• Theming - customize colors, spacing, and fonts with 70+ CSS custom properties on .dm-editor
• Editor API - chain commands, listen to events, and read or update content programmatically
• StackBlitz Example - a full working vanilla editor with all extensions you can edit in the browser

Angular

Click to try it out

Vanilla JS preview · Angular components produce the same output

1. Installation

   pnpm

   pnpm add @domternal/core @domternal/theme @domternal/angular

   npm

   npm install @domternal/core @domternal/theme @domternal/angular

   yarn

   yarn add @domternal/core @domternal/theme @domternal/angular

2. Create Your First Editor

   TS

   import { Component, signal } from '@angular/core';
   import {
     DomternalEditorComponent,
     DomternalToolbarComponent,
     DomternalBubbleMenuComponent,
   } from '@domternal/angular';
   import { Editor, StarterKit, BubbleMenu } from '@domternal/core';
   
   @Component({
     selector: 'app-editor',
     imports: [DomternalEditorComponent, DomternalToolbarComponent, DomternalBubbleMenuComponent],
     templateUrl: './editor.html',
   })
   export class EditorComponent {
     editor = signal<Editor | null>(null);
     extensions = [StarterKit, BubbleMenu];
     content = '<p>Hello from Angular!</p>';
   }

   HTML

   @if (editor(); as ed) {
     <domternal-toolbar [editor]="ed" />
   }
   <domternal-editor
     [extensions]="extensions"
     [content]="content"
     (editorCreated)="editor.set($event)"
   />
   @if (editor(); as ed) {
     <domternal-bubble-menu [editor]="ed" />
   }

3. Add the Theme

   Add the theme to your global stylesheet to load editor and toolbar styles:

   styles.scss

   @use '@domternal/theme';

   The toolbar and bubble menu components auto-render buttons based on the extensions you provide. No manual button wiring needed.

What You Get Out of the Box

The Angular components handle everything automatically:

• <domternal-toolbar> renders buttons based on the extensions you provide, with active and disabled states
• <domternal-bubble-menu> appears on text selection with contextual formatting options
• Signals drive reactivity, no manual subscription management needed
• Both toolbar and bubble menu support custom layouts so you can choose which buttons to show and in what order

StarterKit Contents

Every extension in the kit can be disabled with false or configured with options:

StarterKit.configure({
  codeBlock: false,                     // disable an extension
  heading: { levels: [1, 2, 3, 4] },   // limit heading levels
  history: { depth: 50 },               // configure undo stack
  link: { openOnClick: false },         // keep links non-clickable while editing
  linkPopover: false,                   // disable the built-in link popover
})

The full list of bundled extensions:

Category	Included
Nodes	Document, Text, Paragraph, Heading, Blockquote, CodeBlock, BulletList, OrderedList, ListItem, TaskList, TaskItem, HorizontalRule, HardBreak
Marks	Bold, Italic, Underline, Strike, Code, Link
Behaviors	BaseKeymap, History, Dropcursor, Gapcursor, TrailingNode, ListKeymap, LinkPopover, SelectionDecoration

Next Steps

Now that your editor is running, explore the rest of the toolkit:

• StarterKit - see above for the full list of bundled extensions and how to configure them
• Extensions - add tables, images, emoji, mentions, and syntax-highlighted code blocks via standalone packages
• Theming - customize the look with 70+ CSS custom properties
• Reactive Forms - bind editor content with formControlName or ngModel
• Editor API - chain commands, listen to events, and read or update content programmatically
• StackBlitz Example - a full working Angular editor with all extensions you can edit in the browser

React

Click to try it out

Vanilla JS preview · React components produce the same output

1. Installation

   pnpm

   pnpm add @domternal/core @domternal/theme @domternal/react

   npm

   npm install @domternal/core @domternal/theme @domternal/react

   yarn

   yarn add @domternal/core @domternal/theme @domternal/react

2. Create Your First Editor

   import { Domternal } from '@domternal/react';
   import { StarterKit, BubbleMenu } from '@domternal/core';
   
   export default function Editor() {
     return (
       <Domternal
         extensions={[StarterKit, BubbleMenu]}
         content="<p>Hello from React!</p>"
       >
         <Domternal.Toolbar />
         <Domternal.Content />
         <Domternal.BubbleMenu />
       </Domternal>
     );
   }

   Domternal wraps your editor with a context provider. The subcomponents (Toolbar, Content, BubbleMenu) automatically connect to the editor instance. No manual wiring needed.

3. Add the Theme

   Import the theme in your root CSS or entry file to load editor and toolbar styles:

   index.css

   @import '@domternal/theme';

   The toolbar and bubble menu components auto-render buttons based on the extensions you provide. No manual button wiring needed.

What You Get Out of the Box

The React components handle everything automatically:

• <Domternal.Toolbar /> renders buttons based on the extensions you provide, with active and disabled states
• <Domternal.BubbleMenu /> appears on text selection with contextual formatting options
• useEditor hook for lower-level control when you need custom behavior
• useEditorState hook with selector support for granular re-renders
• Both toolbar and bubble menu support custom layouts so you can choose which buttons to show and in what order

Tree-shaking

Importing Domternal includes all subcomponents (Toolbar, BubbleMenu, etc.) in your bundle. For a smaller bundle, import only what you need:

import { useEditor, DomternalToolbar, EditorContent } from '@domternal/react';

See Packages & Bundle Size for details.

StarterKit Contents

Every extension in the kit can be disabled with false or configured with options:

StarterKit.configure({
  codeBlock: false,                     // disable an extension
  heading: { levels: [1, 2, 3, 4] },   // limit heading levels
  history: { depth: 50 },               // configure undo stack
  link: { openOnClick: false },         // keep links non-clickable while editing
  linkPopover: false,                   // disable the built-in link popover
})

The full list of bundled extensions:

Category	Included
Nodes	Document, Text, Paragraph, Heading, Blockquote, CodeBlock, BulletList, OrderedList, ListItem, TaskList, TaskItem, HorizontalRule, HardBreak
Marks	Bold, Italic, Underline, Strike, Code, Link
Behaviors	BaseKeymap, History, Dropcursor, Gapcursor, TrailingNode, ListKeymap, LinkPopover, SelectionDecoration

Next Steps

Now that your editor is running, explore the rest of the toolkit:

• StarterKit - see above for the full list of bundled extensions and how to configure them
• Extensions - add tables, images, emoji, mentions, and syntax-highlighted code blocks via standalone packages
• Theming - customize the look with 70+ CSS custom properties
• Hooks - use useEditor and useEditorState for full control over editor state
• Editor API - chain commands, listen to events, and read or update content programmatically
• StackBlitz Example - a full working React editor with all extensions you can edit in the browser

Vue

Click to try it out

Vanilla JS preview · Vue components produce the same output

1. Installation

   pnpm

   pnpm add @domternal/core @domternal/theme @domternal/vue

   npm

   npm install @domternal/core @domternal/theme @domternal/vue

   yarn

   yarn add @domternal/core @domternal/theme @domternal/vue

2. Create Your First Editor

   <script setup lang="ts">
   import { Domternal } from '@domternal/vue';
   import { StarterKit, BubbleMenu } from '@domternal/core';
   
   const extensions = [StarterKit, BubbleMenu];
   </script>
   
   <template>
     <Domternal :extensions="extensions" content="<p>Hello from Vue!</p>">
       <Domternal.Toolbar />
       <Domternal.Content />
       <Domternal.BubbleMenu />
     </Domternal>
   </template>

   Domternal wraps your editor with a provide/inject context. The subcomponents (Toolbar, Content, BubbleMenu) automatically connect to the editor instance. No manual wiring needed.

3. Add the Theme

   Import the theme in your main entry file or component to load editor and toolbar styles:

   main.ts

   import '@domternal/theme';

   The toolbar and bubble menu components auto-render buttons based on the extensions you provide. No manual button wiring needed.

What You Get Out of the Box

The Vue components handle everything automatically:

• <Domternal.Toolbar /> renders buttons based on the extensions you provide, with active and disabled states
• <Domternal.BubbleMenu /> appears on text selection with contextual formatting options
• useEditor composable for lower-level control when you need custom behavior
• useEditorState composable with selector support for granular reactivity
• Both toolbar and bubble menu support custom layouts so you can choose which buttons to show and in what order

Tree-shaking

Importing Domternal includes all subcomponents (Toolbar, BubbleMenu, etc.) in your bundle. For a smaller bundle, import only what you need:

import { useEditor, DomternalToolbar, EditorContent } from '@domternal/vue';

See Packages & Bundle Size for details.

StarterKit Contents

Every extension in the kit can be disabled with false or configured with options:

StarterKit.configure({
  codeBlock: false,                     // disable an extension
  heading: { levels: [1, 2, 3, 4] },   // limit heading levels
  history: { depth: 50 },               // configure undo stack
  link: { openOnClick: false },         // keep links non-clickable while editing
  linkPopover: false,                   // disable the built-in link popover
})

The full list of bundled extensions:

Category	Included
Nodes	Document, Text, Paragraph, Heading, Blockquote, CodeBlock, BulletList, OrderedList, ListItem, TaskList, TaskItem, HorizontalRule, HardBreak
Marks	Bold, Italic, Underline, Strike, Code, Link
Behaviors	BaseKeymap, History, Dropcursor, Gapcursor, TrailingNode, ListKeymap, LinkPopover, SelectionDecoration

Next Steps

Now that your editor is running, explore the rest of the toolkit:

• StarterKit - see above for the full list of bundled extensions and how to configure them
• Extensions - add tables, images, emoji, mentions, and syntax-highlighted code blocks via standalone packages
• Theming - customize the look with 70+ CSS custom properties
• Composables - use useEditor and useEditorState for full control over editor state
• Editor API - chain commands, listen to events, and read or update content programmatically
• StackBlitz Example - a full working Vue editor with all extensions you can edit in the browser

Headless

Select text and press Mod+B for bold, Mod+I for italic, or Mod+U for underline.

Click to try it out

1. Installation

   pnpm

   pnpm add @domternal/core

   npm

   npm install @domternal/core

   yarn

   yarn add @domternal/core

2. Create Your First Editor

   TS

   import {
     Editor, Document, Text, Paragraph,
     Bold, Italic, Underline,
   } from '@domternal/core';
   
   const editor = new Editor({
     element: document.getElementById('editor')!,
     extensions: [Document, Text, Paragraph, Bold, Italic, Underline],
     content: '<p>Hello <strong>Bold</strong>, <em>Italic</em> and <u>Underline</u>!</p>',
   });

   HTML

   <div id="editor"></div>

   Import only what you need for full control and zero bloat. Use StarterKit instead for a batteries-included setup with headings, lists, code blocks, history, and more.

Next Steps

Now that your editor is running, explore the rest of the toolkit:

• StarterKit - use StarterKit for a batteries-included setup with headings, lists, code blocks, history, and more
• Extensions - add tables, images, emoji, mentions, and syntax-highlighted code blocks via standalone packages
• Theming - style your editor with CSS or use the ready-made @domternal/theme
• Editor API - chain commands, listen to events, and read or update content programmatically