Starter Kit

StarterKit is a convenience extension that bundles the most commonly used nodes, marks, and behavior extensions into a single import. It gives you a fully featured editor with one line of configuration.

Live Playground

A fully featured editor powered by StarterKit alone. Try formatting, headings, lists, code blocks, links, keyboard shortcuts, and Markdown input rules.

Vanilla JS/TS

With the default theme enabled. All toolbar items registered by StarterKit extensions are shown.

Click to try it out

Angular

Click to try it out

Vanilla JS preview - Angular components produce the same output

React

Click to try it out

Vanilla JS preview - React components produce the same output

Headless

Plain editor without the theme. The buttons above call commands directly.

Click to try it out

Usage

Vanilla JS/TS

import { Editor, StarterKit, defaultIcons } from '@domternal/core';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;

// Build a simple toolbar with bold, italic, underline buttons
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);

const editor = new Editor({
  element: editorEl,
  extensions: [StarterKit],
  content: '<p>Hello world</p>',
});

// Toggle marks on click
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();
});

// Sync active states
editor.on('transaction', () => {
  toolbar.querySelectorAll<HTMLButtonElement>('[data-mark]').forEach((btn) => {
    btn.classList.toggle('dm-toolbar-button--active', editor.isActive(btn.dataset.mark!));
  });
});

This is the manual approach. For a full toolbar with all StarterKit items (headings dropdown, lists, code blocks, history), use ToolbarController which auto-discovers toolbar items from extensions. See the Getting Started guide for the complete pattern.

Angular

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, StarterKit } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent, DomternalToolbarComponent],
  templateUrl: './editor.html',
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [StarterKit];
  content = '<p>Hello world</p>';
}

editor.html

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

The <domternal-toolbar> component automatically renders all toolbar items registered by StarterKit extensions - headings dropdown, formatting buttons, lists, code blocks, link, history, and more.

React

import { Domternal } from '@domternal/react';
import { StarterKit } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[StarterKit]}
      content="<p>Hello world</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

The <Domternal.Toolbar /> component automatically renders all toolbar items registered by StarterKit extensions - headings dropdown, formatting buttons, lists, code blocks, link, history, and more.

Headless

import { Editor, StarterKit } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [StarterKit],
  content: '<p>Hello world</p>',
});

// All 27 extensions are active - use commands directly
editor.chain().focus().toggleBold().run();
editor.chain().focus().toggleHeading({ level: 2 }).run();
editor.chain().focus().toggleBulletList().run();
editor.commands.undo();

Without a theme or toolbar, all keyboard shortcuts and input rules still work: Mod-B for bold, # for heading, - for bullet list, Mod-Z for undo, etc.

This single extension provides 27 extensions out of the box: rich text formatting, lists, code blocks, links with autolink and popover, undo/redo, keyboard shortcuts, and more.

Configuring individual extensions

Pass an options object to StarterKit.configure() to customize any bundled extension:

const editor = new Editor({
  extensions: [
    StarterKit.configure({
      heading: { levels: [1, 2, 3] },
      history: { depth: 50 },
      link: { openOnClick: false },
    }),
  ],
});

Disabling extensions

Set any extension to false to exclude it from the bundle:

const editor = new Editor({
  extensions: [
    StarterKit.configure({
      codeBlock: false,
      strike: false,
      horizontalRule: false,
    }),
  ],
});

Caution

Disabling document, text, or paragraph will break the editor unless you provide your own replacements, since ProseMirror requires a document schema with at least these three node types.

Replacing a bundled extension

To swap a bundled extension for a custom version, disable it in StarterKit and add the replacement separately:

import { Editor, StarterKit } from '@domternal/core';
import { CodeBlockLowlight } from '@domternal/extension-code-block-lowlight';
import { common, createLowlight } from 'lowlight';

const editor = new Editor({
  extensions: [
    StarterKit.configure({ codeBlock: false }),
    CodeBlockLowlight.configure({ lowlight: createLowlight(common) }),
  ],
});

Adding extensions not in StarterKit

Extensions not included in StarterKit are added alongside it in the extensions array:

import { Editor, StarterKit, TextStyle, TextColor, Subscript } from '@domternal/core';
import { Table } from '@domternal/extension-table';

const editor = new Editor({
  extensions: [StarterKit, TextStyle, TextColor, Subscript, Table],
});

Bundled extensions

StarterKit includes 27 extensions organized into three categories.

Nodes (13)

Extension	ProseMirror name	Option key	Description
Document	doc	document	Top-level document container
Text	text	text	Inline text content
Paragraph	paragraph	paragraph	Block-level paragraph
Heading	heading	heading	Headings h1 through h4
Blockquote	blockquote	blockquote	Block-level quotation
Code Block	codeBlock	codeBlock	Fenced code block
Bullet List	bulletList	bulletList	Unordered list
Ordered List	orderedList	orderedList	Numbered list
List Item	listItem	listItem	List item inside bullet/ordered lists
Task List	taskList	taskList	Checkbox list
Task Item	taskItem	taskItem	Checkbox list item
Horizontal Rule	horizontalRule	horizontalRule	Horizontal separator line
Hard Break	hardBreak	hardBreak	Line break within a block

Marks (6)

Extension	ProseMirror name	Option key	Description
Bold	bold	bold	Bold text formatting
Italic	italic	italic	Italic text formatting
Underline	underline	underline	Underlined text
Strike	strike	strike	Strikethrough text
Code	code	code	Inline code
Link	link	link	Hyperlink

Behavior extensions (8)

Extension	Option key	Description
Base Keymap	baseKeymap	Standard ProseMirror key bindings (Enter, Backspace, etc.)
History	history	Undo/redo with Mod-Z / Mod-Shift-Z
Dropcursor	dropcursor	Visual indicator when dragging content
Gapcursor	gapcursor	Cursor placement in positions that don’t allow text (e.g. before/after tables)
Trailing Node	trailingNode	Ensures a paragraph exists at the end of the document
List Keymap	listKeymap	Tab/Shift-Tab indent/outdent and Backspace lift for list items
Link Popover	linkPopover	URL input popover triggered by Mod-K or the link toolbar button
Selection Decoration	selectionDecoration	Collapses range selections to a cursor on blur, preventing ghost selections

Note

Extensions not in StarterKit: TextStyle, TextColor, FontFamily, FontSize, LineHeight, Highlight, TextAlign, Subscript, Superscript, Typography, Placeholder, CharacterCount, BubbleMenu, FloatingMenu, Focus, UniqueID, Selection, InvisibleChars, ClearFormatting, and all extension packages (Table, Image, Emoji, Mention, Details, CodeBlockLowlight).

Options

Every bundled extension has a corresponding option key. Each accepts either false (to disable) or an options object (to configure).

interface StarterKitOptions {
  // Nodes
  document?: false;
  text?: false;
  paragraph?: false | Partial<ParagraphOptions>;
  heading?: false | Partial<HeadingOptions>;
  blockquote?: false | Partial<BlockquoteOptions>;
  codeBlock?: false | Partial<CodeBlockOptions>;
  bulletList?: false | Partial<BulletListOptions>;
  orderedList?: false | Partial<OrderedListOptions>;
  listItem?: false | Partial<ListItemOptions>;
  horizontalRule?: false | Partial<HorizontalRuleOptions>;
  hardBreak?: false | Partial<HardBreakOptions>;
  taskList?: false | Partial<TaskListOptions>;
  taskItem?: false | Partial<TaskItemOptions>;

  // Marks
  bold?: false | Partial<BoldOptions>;
  italic?: false | Partial<ItalicOptions>;
  underline?: false | Partial<UnderlineOptions>;
  strike?: false | Partial<StrikeOptions>;
  code?: false | Partial<CodeOptions>;
  link?: false | Partial<LinkOptions>;

  // Behavior
  baseKeymap?: false | Partial<BaseKeymapOptions>;
  history?: false | Partial<HistoryOptions>;
  dropcursor?: false | Partial<DropcursorOptions>;
  gapcursor?: false;
  trailingNode?: false | Partial<TrailingNodeOptions>;
  listKeymap?: false | Partial<ListKeymapOptions>;
  linkPopover?: false | Partial<LinkPopoverOptions>;
  selectionDecoration?: false;
}

Tip

document, text, gapcursor, and selectionDecoration only accept false because they have no configurable options.

Commands

StarterKit itself does not register any commands. All commands come from the individual bundled extensions. See each extension’s documentation page for its commands.

Keyboard shortcuts

StarterKit itself does not register any keyboard shortcuts. All shortcuts come from the bundled extensions. Here is a summary:

Text formatting

Shortcut	Command	Extension
Mod-B	Toggle bold	Bold
Mod-I	Toggle italic	Italic
Mod-U	Toggle underline	Underline
Mod-Shift-S	Toggle strikethrough	Strike
Mod-E	Toggle inline code	Code
Mod-K	Open link popover	Link

Blocks

Shortcut	Command	Extension
Mod-Alt-0	Set paragraph	Paragraph
Mod-Alt-1 to Mod-Alt-4	Set heading level	Heading
Mod-Shift-B	Toggle blockquote	Blockquote
Mod-Alt-C	Toggle code block	Code Block
Mod-Shift-8	Toggle bullet list	Bullet List
Mod-Shift-7	Toggle ordered list	Ordered List
Mod-Shift-9	Toggle task list	Task List
Mod-Enter	Toggle task checked	Task Item

Editing

Shortcut	Command	Extension
Mod-Z	Undo	History
Mod-Shift-Z	Redo	History
Mod-Y	Redo	History
Shift-Enter	Insert hard break	Hard Break
Tab	Indent list item	List Keymap
Shift-Tab	Outdent list item	List Keymap

Input rules

All input rules come from the bundled extensions:

Input	Result	Extension
**text**	Bold	Bold
__text__	Bold	Bold
*text*	Italic	Italic
_text_	Italic	Italic
`text`	Inline code	Code
~~text~~	Strikethrough	Strike
# to ####	Heading level 1-4	Heading
>	Blockquote	Blockquote
```	Code block	Code Block
- , * , +	Bullet list	Bullet List
1.	Ordered list	Ordered List
[ ] , [x]	Task list	Task List
---, ___, ***	Horizontal rule	Horizontal Rule

Toolbar items

StarterKit itself does not register toolbar items. All toolbar items come from the bundled extensions. When using a toolbar controller, the following items are available:

Item	Type	Group	Extension
bold	button	format	Bold
italic	button	format	Italic
underline	button	format	Underline
strike	button	format	Strike
code	button	format	Code
link	button	format	Link
heading	dropdown	blocks	Heading
blockquote	button	blocks	Blockquote
codeBlock	button	blocks	Code Block
bulletList	button	lists	Bullet List
orderedList	button	lists	Ordered List
taskList	button	lists	Task List
horizontalRule	button	blocks	Horizontal Rule
hardBreak	button	insert	Hard Break
undo	button	history	History
redo	button	history	History

How it works

StarterKit uses the addExtensions() hook to return an array of sub-extensions. Internally, a maybeAdd helper checks each option:

1. If the option is false, the extension is skipped entirely
2. If the option is an object with keys, the extension is added with .configure(options)
3. Otherwise (undefined or empty object), the extension is added with its defaults

This means StarterKit with no configuration is equivalent to adding all 27 extensions individually with their default options.

Exports

import { StarterKit } from '@domternal/core';
import type { StarterKitOptions } from '@domternal/core';

Export	Type	Description
StarterKit	Extension	The starter kit bundle extension
StarterKitOptions	TypeScript type	Options for StarterKit.configure()

Source

@domternal/core - StarterKit.ts