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.

When to use

Choose StarterKit when you need:

• A fully featured editor in one import (27 extensions wired up)
• A sensible default for new projects without manually configuring core nodes/marks
• The ability to disable individual extensions via StarterKit.configure({ bold: false })

Skip it if:

• You need a smaller bundle and only a subset of features (import each extension individually)
• You want non-default options on a sub-extension (configure via StarterKit.configure({ history: { depth: 200 } }))
• You need extensions not bundled here (e.g. Table, Image, Emoji); add them separately alongside StarterKit

Live Playground

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

Themed

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

Click to try it out

Headless

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

Click to try it out

Usage

Vanilla

import { StarterKit } from '@domternal/core';
import { DomternalEditor, DomternalToolbar } from '@domternal/vanilla';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;
const toolbarEl = document.createElement('div');
editorEl.before(toolbarEl);

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

new DomternalToolbar(toolbarEl, { editor: dm.editor });

DomternalToolbar auto-discovers all StarterKit toolbar items (bold/italic/underline marks, headings dropdown, lists, code blocks, history, etc.) and wires active/disabled state automatically.

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.

Vue

<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { StarterKit } from '@domternal/core';

const extensions = [StarterKit];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>Hello world</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
  </Domternal>
</template>

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.

One disable is required rather than optional: collaborative editors must run with history: false, because the Pro Collaboration extension replaces History with collaboration-aware undo/redo.

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

One more behavior extension ships with StarterKit but is off by default: List Indent. Enable it with StarterKit.configure({ listIndent: true }). It adds Tab/Shift-Tab at the boundary between a top-level block and an adjacent list. It stays off by default because Tab on a paragraph that merely follows a list would otherwise pull that paragraph into the list instead of moving focus to the next field, which is a surprise in embedded / form usage. StarterKit registers it after ListKeymap, and that order is load-bearing: collected keymaps run later-first, so ListIndent gets the first look and defers to ListKeymap for in-list Tab/Shift-Tab.

Note

Extensions not in StarterKit: TextStyle, TextColor, FontFamily, FontSize, LineHeight, Highlight, TextAlign, Subscript, Superscript, Typography, Placeholder, CharacterCount, BubbleMenu, FloatingMenu, Focus, UniqueID, Selection, InvisibleChars, ClearFormatting, BlockColor, NotionColorPicker, Print, 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>;
  listIndent?: boolean; // opt-in, off by default; set to true to enable
  linkPopover?: false | Partial<LinkPopoverOptions>;
  selectionDecoration?: false;
}

Tip

document, text, gapcursor, and selectionDecoration only accept false because they have no configurable options. listIndent is the inverse case: it is the only key that takes true rather than false, because ListIndent is the one bundled extension that is off unless you opt in.

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 inside a task item, otherwise insert a hard break	Task Item / Hard Break

Both TaskItem and Hard Break bind Mod-Enter. Collected keymaps run later-first, so TaskItem gets the first look and returns false outside a task item, which lets the binding fall through to setHardBreak.

Editing

Shortcut	Command	Extension
Mod-Z	Undo	History
Mod-Shift-Z	Redo	History
Mod-Y	Redo	History
Shift-Enter	Insert hard break	Hard Break
Mod-Shift-Space	Insert non-breaking space	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

See also

• Configuration - editor and extension configuration
• Editor Api - editor API: commands, chains, state, view
• Base Keymap - baseline ProseMirror keymap
• History - undo/redo with grouping delay
• List Indent - opt-in Tab/Shift-Tab at list boundaries