jot

A headless ProseMirror editor that stores markdown. Built for Jottit but designed to be reusable by any project.

Install

npm install @jottit/jot

Usage

import { Jot } from '@jottit/jot'

const editor = new Jot(document.getElementById('editor'), {
  initialValue: '# Hello\n\nStart writing...',
  onChange: (markdown) => console.log(markdown)
})

editor.getValue()        // returns current content as markdown string
editor.setValue('# Hi')  // sets content from markdown string
editor.destroy()         // removes editor and cleans up

Bubble menu (opt-in)

An optional floating toolbar that appears when the user selects text. Supports bold, italic, links, headings, and blockquotes.

import '@jottit/jot/dist/jot.css'

const editor = new Jot(document.getElementById('editor'), {
  initialValue: '# Hello',
  onChange: (markdown) => console.log(markdown),
  ui: {
    bubbleMenu: true
  }
})

Supported markdown

Nodes: paragraphs, headings (h1--h6), blockquotes, code blocks, bullet lists, ordered lists, list items, images, hard breaks

Marks: bold, italic, inline code, links

API

| Method | Description | |---|---| | new Jot(element, options) | Create an editor instance | | editor.getValue() | Get content as a markdown string | | editor.setValue(markdown) | Set content from a markdown string | | editor.destroy() | Remove the editor and clean up |

Options

| Option | Type | Description | |---|---|---| | initialValue | string | Initial markdown content (default: '') | | onChange | (markdown: string) => void | Called whenever the document changes | | ui.bubbleMenu | boolean | Show a floating toolbar on text selection |

Keyboard shortcuts

| Shortcut | Action | |---|---| | Mod-z | Undo | | Mod-y / Mod-Shift-z | Redo | | Mod-b | Toggle bold | | Mod-i | Toggle italic |

Credits

Built with the assistance of Claude (Anthropic).

License

MIT