Quick Start

This guide will walk you through the process of setting up your first ProseKit editor. We’ll create a basic editor with some common formatting options.

Installation

First, you’ll need to install the prosekit package. You can use your preferred package manager:

pnpm add prosekit

npm install prosekit

yarn add prosekit

bun add prosekit

A minimal editor

Now, let’s create a basic editor component. Open your project and add a component file, then replace its content with the following code based on your UI framework:

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

import { defineBasicExtension } from 'prosekit/basic'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/react'
import { useMemo } from 'react'

export default function Editor() {
  const editor = useMemo(() => {
    const extension = defineBasicExtension()
    return createEditor({ extension })
  }, [])

  return (
    <ProseKit editor={editor}>
      <div ref={editor.mount} style={{ outline: 'auto', padding: '1rem' }}></div>
    </ProseKit>
  )
}

This code does the following:

1. Creates extension by calling defineBasicExtension(). This extension provides basic text editing features like paragraphs, headings, bold, italic, etc.
2. Creates editor by calling createEditor(). The extension created in the previous step is passed to the editor.
3. Creates a <ProseKit> component. This component acts as a provider for the children and doesn’t render anything to the DOM directly.
4. Creates a <div> element that mounts the editor. The editor.mount() method is used to attach the editor to this <div> element.

What’s next?

Congratulations! You’ve successfully created your first ProseKit editor. Now you can explore the following topics: