ProseMirror Dev Tools

Table of Content

• Quick Start
• Features
  • State
  • History
  • Plugins
  • Schema
  • Structure
• Demo
• Contributing
• License

Quick Start

NPM Way

Install prosemirror-dev-tools package from npm:

npm install --save-dev prosemirror-dev-tools

Wrap EditorView instance in applyDevTools method:

import applyDevTools from "prosemirror-dev-tools";

const view = new EditorView(/*...*/);

applyDevTools(view);

CDN way

Add script tag to your html file:

<script src="https://unpkg.com/prosemirror-dev-tools@1.1.1/dist/umd/prosemirror-dev-tools.min.js"></script>

Wrap EditorView instance in applyDevTools method:

const view = new EditorView(/*...*/);

ProseMirrorDevTools.applyDevTools(view);

Features

State

• Inspect document – all nodes and marks
• Inspect selection – position, head, anchor and etc.
• See document stats – size, child count

History

• Inspect document changes over time
• Time travel between states
• See selection content for particular state in time

Plugins

Inspect state of each plugin inside prosemirror.

Schema

Inspect current document schema with nodes and marks.

Structure

Visual representation of current document tree.

Demo

• Demo of prosemirror-dev-tools on codepen.io.
• Example Setup

Contributing

Contributions are highly welcome! This repo is commitizen friendly — please read about it here.

License

• MIT : http://opensource.org/licenses/MIT