Skip to main content
This guide will walk you through the fastest way to get a ProseKit editor up and running in your project.
If you’re using shadcn/ui, you can install a complete, production-ready editor with a single command.
The quickest way to get started with ProseKit is to install a pre-built example that includes a full-featured editor with toolbar, inline menu, slash commands, and more: 
npx shadcn@latest add @prosekit/react-example-full
This will add a fully-featured editor component to your project that includes:
  • Rich text formatting (bold, italic, underline, strike-through)
  • Headings, lists, blockquotes, and code blocks
  • Tables and images
  • Inline formatting menu
  • Slash commands for quick actions
  • Block drag handles
  • And much more!
Then simply import and use the editor in your app: 
import Editor from '@/components/editor'

export default function App() {
  return <Editor />
}

​
Option 2: Manual Installation

If you prefer to build from scratch or aren’t using shadcn/ui, you can install ProseKit manually:
1
Install the package
2
Install ProseKit using your preferred package manager:
3
npm
npm install prosekit
yarn
yarn add prosekit
pnpm
pnpm add prosekit
bun
bun add prosekit
4
Create a basic editor
5
Create a new component file for your editor. Here’s a minimal example that includes basic formatting features:
6
React
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} className="editor-content" />
    </ProseKit>
  )
}
Vue
<script setup lang="ts">
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

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

const extension = defineBasicExtension()
const editor = createEditor({ extension })
</script>

<template>
  <ProseKit :editor="editor">
    <div :ref="(el) => editor.mount(el as HTMLElement | null)" class="editor-content" />
  </ProseKit>
</template>
Svelte
<script lang="ts">
  import 'prosekit/basic/style.css'
  import 'prosekit/basic/typography.css'

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

  const extension = defineBasicExtension()
  const editor = createEditor({ extension })
</script>

<ProseKit {editor}>
  <div bind:this={editor.mount} class="editor-content" />
</ProseKit>
Preact
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

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

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

  return (
    <ProseKit editor={editor}>
      <div ref={editor.mount} className="editor-content" />
    </ProseKit>
  )
}
Solid
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

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

export default function Editor() {
  const extension = defineBasicExtension()
  const editor = createEditor({ extension })

  return (
    <ProseKit editor={editor}>
      <div ref={editor.mount} class="editor-content" />
    </ProseKit>
  )
}
7
Add basic styling
8
Add some basic CSS to make your editor look good:
9
.editor-content {
  box-sizing: border-box;
  min-height: 200px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  outline: none;
}

.editor-content:focus {
  border-color: #3b82f6;
}

​
Understanding the Code

Let’s break down what’s happening in the minimal editor example:
  1. Import styles: The basic styles (prosekit/basic/style.css) are required for the editor to function. The typography styles (prosekit/basic/typography.css) provide beautiful default styling for your content.
  2. Create extension: defineBasicExtension() provides a complete set of common editing features including:
    • Text nodes and paragraphs
    • Headings (h1-h6)
    • Bold, italic, underline, strike-through formatting
    • Lists (ordered and unordered)
    • Blockquotes and code blocks
    • Links, images, and tables
    • Keyboard shortcuts and undo/redo
  3. Create editor: createEditor() initializes the editor with your extension configuration.
  4. Mount the editor: The <ProseKit> component provides context, and the editor.mount ref attaches the editor to a DOM element.

​
What You Get Out of the Box

With defineBasicExtension(), your editor supports:
  • Text Formatting: Bold (Cmd+B), Italic (Cmd+I), Underline (Cmd+U)
  • Headings: # for H1, ## for H2, etc.
  • Lists: Type - for bullet lists, 1. for ordered lists
  • Code: Inline code with backticks, code blocks with triple backticks
  • Links: Cmd+K to insert links
  • Undo/Redo: Cmd+Z and Cmd+Shift+Z
  • And more: Blockquotes, tables, images, horizontal rules

​
Next Steps

Now that you have a working editor, explore these guides to learn more:

First Editor Tutorial

Step-by-step tutorial building an editor from scratch

Installation Guide

Detailed installation options and framework-specific setup

Styling

Learn how to customize the appearance of your editor

Extensions

Explore available extensions and learn to create your own
The examples above use defineBasicExtension() which includes many features. In the First Editor Tutorial, you’ll learn how to compose your own custom extension from individual pieces.