Search

Introduction

tiptap is a friendly wrapper around ProseMirror. Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the ProseMirror Guide for advanced usage.

Structure

ProseMirror works with a strict Schema, which defines the allowed structure of a document. A document is a tree of headings, paragraphs and others elements, so called nodes. Marks can be attached to a node, e. g. to emphasize part of it. Commands change that document programmatically.

Content

The document is stored in a state. All changes are applied as transactions to the state. The state has details about the current content, cursor position and selection. You can hook into a few different events, for example to alter transactions before they get applied.

Extensions

Extensions add nodes, marks and/or functionalities to the editor. A lot of those extensions bound their commands to common keyboard shortcuts.

Vocabulary

ProseMirror has its own vocabulary and you’ll stumble upon all those words now and then. Here is a short overview of the most common words we use in the documentation.

WordDescription
SchemaConfigures the structure your content can have.
DocumentThe actual content in your editor.
StateEverything to describe the current content and selection of your editor.
TransactionA change to the state (updated selection, content, …)
ExtensionRegisteres new functionality.
NodeA type of content, for example a heading or a paragraph.
MarkCan be applied to nodes, for example for inline formatting.
CommandExecute an action inside the editor, that somehow changes the state.
DecorationStyling on top of the document, for example to highlight mistakes.