Solid

ProseKit has first-class support for Solid via prosekit/solid.

Provider

<ProseKit editor={editor}> provides context to its descendants. The component itself does not render any DOM, it only forwards children. Always wrap any UI that calls useEditor() in this provider.

import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

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 } from 'prosekit/core'
import { ProseKitconst ProseKit: Component<ProseKitProps>The root component for a ProseKit editor.
@public } from 'prosekit/solid'
import type { JSX } from 'solid-js'

export default function Editorfunction Editor(): JSX.Element(): JSX.Elementtype JSX.Element = number | boolean | Node | JSX.ArrayElement | (string & {}) | null | undefined {
  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()
  const editorconst editor: Editor<BasicExtension> = createEditorcreateEditor<BasicExtension>(options: EditorOptions<BasicExtension>): Editor<BasicExtension>@public({ extensionEditorOptions<BasicExtension>.extension: BasicExtensionThe extension to use when creating the editor. })

  return (
    <ProseKitconst ProseKit: Component<ProseKitProps>The root component for a ProseKit editor.
@public editoreditor: Editor<any>={editorconst editor: Editor<BasicExtension>}>
      <divJSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>@urlhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/div@urlhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement refref?: HTMLDivElement | ((el: HTMLDivElement) => void) | undefined={editorconst editor: Editor<BasicExtension>.mountEditor<BasicExtension>.mount: (place: HTMLElement | null | undefined) => void | VoidFunctionMount the editor to the given HTML element. Pass `null` or `undefined` to
unmount the editor. When an element is passed, this method returns a
function to unmount the editor.} classJSX.DOMAttributes<HTMLDivElement>.class?: string | undefined="editor" />
    </ProseKitconst ProseKit: Component<ProseKitProps>The root component for a ProseKit editor.
@public>
  )
}

Hooks

`useEditor`

useEditor(options?: {
  update?: boolean
}): () => Editor

Returns an accessor () => Editor. Call it inside JSX or effects.

import { useEditor } from 'prosekit/solid'
import type { JSX } from 'solid-js'

export function BoldButton(): JSX.Element {
  const editor = useEditor()
  return (
    <button onClick={() => editor().commands.toggleBold()}>
      Bold
    </button>
  )
}

`useEditorDerivedValue`

useEditorDerivedValue(
  derive: (editor: Editor) => Derived,
  options?: { editor?: Editor },
): () => Derived

Returns an accessor that re-runs derive on every editor state change.

`useExtension`, `useKeymap`, `useDocChange`, `useStateUpdate`

Same options shape as React. All four return void and bind to the calling component's lifecycle.

Custom node and mark views

import { defineSolidNodeView, type SolidNodeViewProps } from 'prosekit/solid'
import type { JSX } from 'solid-js'

function ImageView(props: SolidNodeViewProps): JSX.Element {
  const src = () => String(props.node.attrs.src ?? '')
  return <img src={src()} alt={String(props.node.attrs.alt ?? '')} />
}

const extension = defineSolidNodeView({
  name: 'image',
  component: ImageView,
})

defineSolidMarkView is the mark equivalent.

Solid

Provider

Hooks

useEditor

useEditorDerivedValue

useExtension, useKeymap, useDocChange, useStateUpdate

Custom node and mark views

See also

`useEditor`

`useEditorDerivedValue`

`useExtension`, `useKeymap`, `useDocChange`, `useStateUpdate`