Content

The editor's document is a ProseMirror Node. ProseKit's content helpers convert between that and the two formats you'll actually persist: JSON and HTML.

Reading the current document

const jsonconst json: NodeJSON = editorconst editor: Editor<BasicExtension>.getDocJSONEditor<BasicExtension>.getDocJSON: () => NodeJSONReturn a JSON object representing the editor's current document.()
const htmlconst html: string = editorconst editor: Editor<BasicExtension>.getDocHTMLEditor<BasicExtension>.getDocHTML: (options?: getDocHTMLOptions) => stringReturn an HTML string representing the editor's current document.()

getDocJSON() returns a NodeJSON, a plain object that's safe to JSON.stringify. getDocHTML() returns a string of standard HTML.

Loading initial content

createEditor accepts defaultContent directly. ProseKit detects the type:

import { defineBasicExtensionfunction defineBasicExtension(): BasicExtensionDefine a basic extension that includes some common functionality. You can
copy this function and customize it to your needs.

It's a combination of the following extension functions:

- 
{@link 
defineDoc
}

- 
{@link 
defineText
}

- 
{@link 
defineParagraph
}

- 
{@link 
defineHeading
}

- 
{@link 
defineList
}

- 
{@link 
defineBlockquote
}

- 
{@link 
defineImage
}

- 
{@link 
defineHorizontalRule
}

- 
{@link 
defineHardBreak
}

- 
{@link 
defineTable
}

- 
{@link 
defineCodeBlock
}

- 
{@link 
defineItalic
}

- 
{@link 
defineBold
}

- 
{@link 
defineUnderline
}

- 
{@link 
defineStrike
}

- 
{@link 
defineCode
}

- 
{@link 
defineLink
}

- 
{@link 
defineBaseKeymap
}

- 
{@link 
defineBaseCommands
}

- 
{@link 
defineHistory
}

- 
{@link 
defineGapCursor
}

- 
{@link 
defineVirtualSelection
}

- 
{@link 
defineModClickPrevention
}
@public } from 'prosekit/basic'
import { createEditorfunction createEditor<E extends Extension>(options: EditorOptions<E>): Editor<E>@public, type NodeJSON } from 'prosekit/core'

const extensionconst extension: BasicExtension = defineBasicExtensionfunction defineBasicExtension(): BasicExtensionDefine a basic extension that includes some common functionality. You can
copy this function and customize it to your needs.

It's a combination of the following extension functions:

- 
{@link 
defineDoc
}

- 
{@link 
defineText
}

- 
{@link 
defineParagraph
}

- 
{@link 
defineHeading
}

- 
{@link 
defineList
}

- 
{@link 
defineBlockquote
}

- 
{@link 
defineImage
}

- 
{@link 
defineHorizontalRule
}

- 
{@link 
defineHardBreak
}

- 
{@link 
defineTable
}

- 
{@link 
defineCodeBlock
}

- 
{@link 
defineItalic
}

- 
{@link 
defineBold
}

- 
{@link 
defineUnderline
}

- 
{@link 
defineStrike
}

- 
{@link 
defineCode
}

- 
{@link 
defineLink
}

- 
{@link 
defineBaseKeymap
}

- 
{@link 
defineBaseCommands
}

- 
{@link 
defineHistory
}

- 
{@link 
defineGapCursor
}

- 
{@link 
defineVirtualSelection
}

- 
{@link 
defineModClickPrevention
}
@public()

// JSON object → treated as a NodeJSON.
const fromJsonconst fromJson: NodeJSON: NodeJSON = {
  typeNodeJSON.type: string: 'doc',
  contentNodeJSON.content?: NodeJSON[] | undefined: [{ typeNodeJSON.type: string: 'paragraph', contentNodeJSON.content?: NodeJSON[] | undefined: [{ typeNodeJSON.type: string: 'text', textNodeJSON.text?: string | undefined: 'Hello' }] }],
}
const aconst a: Editor<BasicExtension> = createEditorcreateEditor<BasicExtension>(options: EditorOptions<BasicExtension>): Editor<BasicExtension>@public({ extensionEditorOptions<BasicExtension>.extension: BasicExtensionThe extension to use when creating the editor., defaultContentEditorOptions<E extends Extension>.defaultContent?: string | NodeJSON | Element | undefinedThe starting document to use when creating the editor. It can be a
ProseMirror node JSON object, an HTML string, or a DOM element instance.: fromJsonconst fromJson: NodeJSON })

// String → treated as HTML.
const bconst b: Editor<BasicExtension> = createEditorcreateEditor<BasicExtension>(options: EditorOptions<BasicExtension>): Editor<BasicExtension>@public({ extensionEditorOptions<BasicExtension>.extension: BasicExtensionThe extension to use when creating the editor., defaultContentEditorOptions<E extends Extension>.defaultContent?: string | NodeJSON | Element | undefinedThe starting document to use when creating the editor. It can be a
ProseMirror node JSON object, an HTML string, or a DOM element instance.: '<p>Hello</p>' })

// DOM element → parsed as HTML.
declare const elconst el: HTMLElement: HTMLElement
const cconst c: Editor<BasicExtension> = createEditorcreateEditor<BasicExtension>(options: EditorOptions<BasicExtension>): Editor<BasicExtension>@public({ extensionEditorOptions<BasicExtension>.extension: BasicExtensionThe extension to use when creating the editor., defaultContentEditorOptions<E extends Extension>.defaultContent?: string | NodeJSON | Element | undefinedThe starting document to use when creating the editor. It can be a
ProseMirror node JSON object, an HTML string, or a DOM element instance.: elconst el: HTMLElement })

You can also pair defaultContent with defaultSelection to position the cursor on load.

Replacing the document at runtime

setContent accepts the same shapes:

editorconst editor: Editor<BasicExtension>.setContentEditor<BasicExtension>.setContent: (content: Node | NodeJSON | string | Element, selection?: SelectionJSON | Selection | "start" | "end") => voidUpdate the editor's document and selection.
@paramcontent - The new document to set. It can be one of the following:
- A ProseMirror node instance
- A ProseMirror node JSON object
- An HTML string
- A DOM element instance@paramselection - Optional. Specifies the new selection. It can be one of the following:
- A ProseMirror selection instance
- A ProseMirror selection JSON object
- The string "start" (to set selection at the beginning, default value)
- The string "end" (to set selection at the end)('<p>Replaced</p>', 'end')
editorconst editor: Editor<BasicExtension>.setContentEditor<BasicExtension>.setContent: (content: Node | NodeJSON | string | Element, selection?: SelectionJSON | Selection | "start" | "end") => voidUpdate the editor's document and selection.
@paramcontent - The new document to set. It can be one of the following:
- A ProseMirror node instance
- A ProseMirror node JSON object
- An HTML string
- A DOM element instance@paramselection - Optional. Specifies the new selection. It can be one of the following:
- A ProseMirror selection instance
- A ProseMirror selection JSON object
- The string "start" (to set selection at the beginning, default value)
- The string "end" (to set selection at the end)({ typetype: string: 'doc', contentcontent: never[]: [] }, 'start')

The optional second argument selects where the cursor lands: 'start', 'end', or a SelectionJSON.

Conversion utilities

Sometimes you want to serialize content from outside the editor (e.g. on a server, or while preparing initial content). prosekit/core exposes pure functions you can call:

Function	Input	Output
`jsonFromNode`	`ProseMirrorNode`	`NodeJSON`
`nodeFromJSON`	`NodeJSON`	`ProseMirrorNode`
`jsonFromHTML`	`string`	`NodeJSON`
`htmlFromJSON`	`NodeJSON`	`string`
`nodeFromHTML`	`string`	`ProseMirrorNode`
`htmlFromNode`	`ProseMirrorNode`	`string`

import { htmlFromJSONfunction htmlFromJSON(json: NodeJSON, options: JSONParserOptions & DOMSerializerOptions & DOMDocumentOptions): stringParse a ProseMirror document JSON object to an HTML string.
@public@example```ts
const json = { type: 'doc', content: [{ type: 'paragraph' }] }
const html = htmlFromJSON(json, { schema: editor.schema })
```, jsonFromHTMLfunction jsonFromHTML(html: string, options: DOMDocumentOptions & DOMParserOptions & JSONParserOptions): NodeJSONParse an HTML string to a ProseMirror document JSON object.
@public@example```ts
const html = '<p>Hello, world!</p>'
const json = jsonFromHTML(html, { schema: editor.schema })
``` } from 'prosekit/core'

const extensionconst extension: BasicExtension = defineMyEditorExtensionfunction defineMyEditorExtension(): BasicExtension()
const schemaconst schema: Schema<any, any> | null = extensionconst extension: BasicExtension.schemaExtension<{ Nodes: SimplifyDeeper<{ doc: Attrs; text: Attrs; paragraph: { readonly [x: string]: any; }; heading: { level: number; }; list: { kind?: "bullet" | "ordered" | "task" | "toggle" | undefined; order?: number | null | undefined; checked?: boolean | undefined; collapsed?: boolean | undefined; }; ... 8 more ...; codeBlock: { ...; }; }>; Marks: SimplifyDeeper<...>; Commands: { ...; }; }>.schema: Schema<any, any> | null@publicThe schema that this extension represents.
if (!schemaconst schema: Schema<any, any> | null) throw new Errorvar Error: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+1 overload)('Extension is missing a schema')
const jsonconst json: NodeJSON = jsonFromHTMLfunction jsonFromHTML(html: string, options: DOMDocumentOptions & DOMParserOptions & JSONParserOptions): NodeJSONParse an HTML string to a ProseMirror document JSON object.
@public@example```ts
const html = '<p>Hello, world!</p>'
const json = jsonFromHTML(html, { schema: editor.schema })
```('<p>Hello</p>', { schemaJSONParserOptions.schema: Schema<any, any>The editor schema to use. })
const htmlconst html: string = htmlFromJSONfunction htmlFromJSON(json: NodeJSON, options: JSONParserOptions & DOMSerializerOptions & DOMDocumentOptions): stringParse a ProseMirror document JSON object to an HTML string.
@public@example```ts
const json = { type: 'doc', content: [{ type: 'paragraph' }] }
const html = htmlFromJSON(json, { schema: editor.schema })
```(jsonconst json: NodeJSON, { schemaJSONParserOptions.schema: Schema<any, any>The editor schema to use. })

Content

Reading the current document

Loading initial content

Replacing the document at runtime

Conversion utilities

See also