Parsing Utilities

Utilities for converting between different document formats in ProseKit

Overview

ProseKit provides a comprehensive set of utilities for converting between ProseMirror documents, JSON, HTML, and DOM elements. These utilities make it easy to serialize and deserialize editor content.

JSON ↔ State

jsonFromState()

Converts an editor state to a JSON representation.

function jsonFromState(state: EditorState): StateJSON

Parameters

state · EditorState · required

The editor state to convert

Return Value

json · StateJSON

A JSON object representing the editor state, including document and selection

Example

import { jsonFromState } from 'prosekit/core'

const state = editor.state
const json = jsonFromState(state)

console.log(json)
// {
//   doc: { type: 'doc', content: [...] },
//   selection: { type: 'text', anchor: 1, head: 1 }
// }

stateFromJSON()

Parses a JSON object to create a ProseMirror editor state.

function stateFromJSON(
  json: StateJSON,
  options: JSONParserOptions
): EditorState

Parameters

json · StateJSON · required

The JSON object representing the state

options · JSONParserOptions · required

options.schema · Schema · required

The editor schema to use for parsing

Return Value

state · EditorState

A ProseMirror editor state

Example

import { stateFromJSON } from 'prosekit/core'

const json = {
  doc: { type: 'doc', content: [{ type: 'paragraph' }] },
  selection: { type: 'text', anchor: 1, head: 1 }
}

const state = stateFromJSON(json, { schema: editor.schema })

JSON ↔ Node

jsonFromNode()

Converts a ProseMirror node to a JSON representation.

function jsonFromNode(node: ProseMirrorNode): NodeJSON

Parameters

node · ProseMirrorNode · required

The ProseMirror node to convert

Return Value

json · NodeJSON

A JSON object representing the node

Example

import { jsonFromNode } from 'prosekit/core'

const node = editor.state.doc
const json = jsonFromNode(node)

console.log(json)
// { type: 'doc', content: [...] }

nodeFromJSON()

Parses a JSON object to create a ProseMirror node.

function nodeFromJSON(
  json: NodeJSON,
  options: JSONParserOptions
): ProseMirrorNode

Parameters

json · NodeJSON · required

The JSON object representing the node

options · JSONParserOptions · required

options.schema · Schema · required

The editor schema to use

Return Value

node · ProseMirrorNode

A ProseMirror node

Example

import { nodeFromJSON } from 'prosekit/core'

const json = { 
  type: 'doc', 
  content: [{ type: 'paragraph' }] 
}

const node = nodeFromJSON(json, { schema: editor.schema })

Node ↔ HTML

htmlFromNode()

Serializes a ProseMirror node to an HTML string.

function htmlFromNode(
  node: ProseMirrorNode,
  options?: DOMSerializerOptions & DOMDocumentOptions
): string

Parameters

node · ProseMirrorNode · required

The node to serialize

options · DOMSerializerOptions & DOMDocumentOptions

options.DOMSerializer · { fromSchema: typeof DOMSerializer.fromSchema }

Custom DOM serializer

options.document · Document

Custom Document object (useful for server-side rendering)

Return Value

html · string

An HTML string representing the node

Example

import { htmlFromNode } from 'prosekit/core'

const node = editor.state.doc
const html = htmlFromNode(node)

console.log(html)
// '<p>Hello, world!</p>'

nodeFromHTML()

Parses an HTML string to create a ProseMirror node.

function nodeFromHTML(
  html: string,
  options: DOMParserOptions & JSONParserOptions & DOMDocumentOptions
): ProseMirrorNode

Parameters

html · string · required

The HTML string to parse

options · DOMParserOptions & JSONParserOptions & DOMDocumentOptions · required

options.schema · Schema · required

The editor schema to use

options.DOMParser · typeof DOMParser

Custom DOM parser

options.document · Document

Custom Document object

Return Value

node · ProseMirrorNode

A ProseMirror node

Example

import { nodeFromHTML } from 'prosekit/core'

const html = '<p>Hello, world!</p>'
const node = nodeFromHTML(html, { schema: editor.schema })

Node ↔ Element

elementFromNode()

Serializes a ProseMirror node to an HTML element.

function elementFromNode(
  node: ProseMirrorNode,
  options?: DOMSerializerOptions & DOMDocumentOptions
): HTMLElement

Example

import { elementFromNode } from 'prosekit/core'

const node = editor.state.doc
const element = elementFromNode(node)

document.body.appendChild(element)

nodeFromElement()

Parses a DOM element to create a ProseMirror node.

function nodeFromElement(
  element: DOMNode,
  options: DOMParserOptions & JSONParserOptions
): ProseMirrorNode

Example

import { nodeFromElement } from 'prosekit/core'

const element = document.getElementById('content')
const node = nodeFromElement(element, { schema: editor.schema })

JSON ↔ HTML

jsonFromHTML()

Parses an HTML string to a ProseMirror document JSON object.

function jsonFromHTML(
  html: string,
  options: DOMDocumentOptions & DOMParserOptions & JSONParserOptions
): NodeJSON

Example

import { jsonFromHTML } from 'prosekit/core'

const html = '<p>Hello, world!</p>'
const json = jsonFromHTML(html, { schema: editor.schema })

console.log(json)
// { type: 'doc', content: [{ type: 'paragraph', content: [...] }] }

htmlFromJSON()

Converts a ProseMirror document JSON object to an HTML string.

function htmlFromJSON(
  json: NodeJSON,
  options: JSONParserOptions & DOMSerializerOptions & DOMDocumentOptions
): string

Example

import { htmlFromJSON } from 'prosekit/core'

const json = { 
  type: 'doc', 
  content: [{ type: 'paragraph' }] 
}

const html = htmlFromJSON(json, { schema: editor.schema })

JSON ↔ Element

jsonFromElement()

Serializes an HTML element to a ProseMirror document JSON object.

function jsonFromElement(
  element: DOMNode,
  options: DOMParserOptions & JSONParserOptions
): NodeJSON

Example

import { jsonFromElement } from 'prosekit/core'

const element = document.getElementById('content')
const json = jsonFromElement(element, { schema: editor.schema })

elementFromJSON()

Parses a ProseMirror document JSON object to an HTML element.

function elementFromJSON(
  json: NodeJSON,
  options: JSONParserOptions & DOMSerializerOptions & DOMDocumentOptions
): HTMLElement

Example

import { elementFromJSON } from 'prosekit/core'

const json = { type: 'doc', content: [{ type: 'paragraph' }] }
const element = elementFromJSON(json, { schema: editor.schema })

Common Use Cases

Saving Editor Content

import { jsonFromNode } from 'prosekit/core'

function saveContent(editor) {
  const json = jsonFromNode(editor.state.doc)
  localStorage.setItem('editorContent', JSON.stringify(json))
}

Loading Editor Content

import { nodeFromJSON } from 'prosekit/core'

function loadContent(editor) {
  const jsonString = localStorage.getItem('editorContent')
  if (jsonString) {
    const json = JSON.parse(jsonString)
    const node = nodeFromJSON(json, { schema: editor.schema })
    editor.setContent(node)
  }
}

HTML Import/Export

import { htmlFromNode, nodeFromHTML } from 'prosekit/core'

// Export to HTML
function exportToHTML(editor): string {
  return htmlFromNode(editor.state.doc)
}

// Import from HTML
function importFromHTML(editor, html: string) {
  const node = nodeFromHTML(html, { schema: editor.schema })
  editor.setContent(node)
}

Server-Side Rendering

import { JSDOM } from 'jsdom'
import { htmlFromNode } from 'prosekit/core'

function renderOnServer(node: ProseMirrorNode): string {
  const dom = new JSDOM()
  return htmlFromNode(node, { document: dom.window.document })
}

Type Definitions

NodeJSON

interface NodeJSON {
  type: string
  content?: NodeJSON[]
  attrs?: Record<string, any>
  marks?: Array<{ type: string; attrs?: Record<string, any> }>
  text?: string
}

StateJSON

interface StateJSON {
  doc: NodeJSON
  selection: SelectionJSON
}

SelectionJSON

interface SelectionJSON {
  type: 'text' | 'node' | 'all'
  anchor?: number
  head?: number
  node?: number
}

See Also

• createEditor - Editor creation with content
• Type Checking Utilities - Validate node types
• Helper Utilities - Additional utility functions