Skip to main content
This guide covers everything you need to know about installing ProseKit in your project, including framework-specific instructions and configuration.

​
Requirements

Before installing ProseKit, ensure your project meets these requirements:
  • Node.js: Version 16.0 or higher
  • Package Manager: npm, yarn, pnpm, or bun
  • Framework (optional): React 18.2+, Vue 3.0+, Svelte 5.0+, Preact 10.11+, or Solid 1.7+

​
Installation Methods

​
Quick Install with shadcn/ui

This is the fastest way to get a production-ready editor in your project.
If you’re using shadcn/ui, you can install a complete editor component with a single command: 
npx shadcn@latest add @prosekit/react-example-full
This installs a fully-featured editor component with:
  • Toolbar with formatting controls
  • Inline formatting menu
  • Slash commands
  • Block handles for drag-and-drop
  • Table controls
  • And all the styling pre-configured

​
Manual Installation

For more control over your setup, install ProseKit manually: 
npm install prosekit

​
Framework Setup

​
React

ProseKit works with React 18.2 and higher.
1
Install ProseKit
2
npm install prosekit
3
Import the framework bindings
4
import { ProseKit } from 'prosekit/react'
5
Create your editor component
6
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" />
    </ProseKit>
  )
}
ProseKit works with both React Client Components and Server Components. The editor itself must be a Client Component (use 'use client' directive in Next.js).

​
Vue

ProseKit works with Vue 3.0 and higher.
1
Install ProseKit
2
npm install prosekit
3
Import the framework bindings
4
import { ProseKit } from 'prosekit/vue'
5
Create your editor component
6
<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" />
  </ProseKit>
</template>

​
Svelte

ProseKit works with Svelte 5.0 and higher.
1
Install ProseKit
2
npm install prosekit
3
Import the framework bindings
4
import { ProseKit } from 'prosekit/svelte'
5
Create your editor component
6
<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" />
</ProseKit>

​
Preact

ProseKit works with Preact 10.11 and higher.
1
Install ProseKit
2
npm install prosekit
3
Import the framework bindings
4
import { ProseKit } from 'prosekit/preact'
5
Create your editor component
6
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" />
    </ProseKit>
  )
}

​
Solid

ProseKit works with Solid 1.7 and higher.
1
Install ProseKit
2
npm install prosekit
3
Import the framework bindings
4
import { ProseKit } from 'prosekit/solid'
5
Create your editor component
6
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" />
    </ProseKit>
  )
}

​
Vanilla JavaScript

ProseKit can be used without any framework: 
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'

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

const extension = defineBasicExtension()
const editor = createEditor({ extension })

const editorElement = document.getElementById('editor')
if (editorElement) {
  editor.mount(editorElement)
}

​
Required Styles

Always import the basic styles for ProseKit to function correctly.
ProseKit requires some CSS to work properly. At minimum, import the base styles: 
import 'prosekit/basic/style.css'
For beautiful default typography, also import: 
import 'prosekit/basic/typography.css'

​
Additional Extension Styles

Some extensions require their own stylesheets: 
// For lists
import 'prosekit/extensions/list/style.css'

// For tables
import 'prosekit/extensions/table/style.css'

// For placeholders
import 'prosekit/extensions/placeholder/style.css'

// For collaborative editing with Yjs
import 'prosekit/extensions/yjs/style.css'

// For collaborative editing with Loro
import 'prosekit/extensions/loro/style.css'

​
Optional Peer Dependencies

​
For Collaborative Editing

If you’re using collaborative editing features: 
npm install yjs y-prosemirror

​
For Math Equations

If you’re using the math extension: 
npm install katex

​
TypeScript Configuration

ProseKit is built with TypeScript and provides full type definitions. No additional configuration is needed, but ensure your tsconfig.json has: 
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"]
  }
}

​
Build Configuration

​
Vite

ProseKit works out of the box with Vite. No special configuration needed.

​
Next.js

For Next.js, ensure your editor component uses the 'use client' directive: 
'use client'

import { ProseKit } from 'prosekit/react'
// ... rest of your component

​
webpack

ProseKit works with webpack 5+. No special configuration needed for basic usage.

​
Troubleshooting

​
Module not found errors

If you see errors like Cannot find module 'prosekit/react', ensure:
  1. ProseKit is installed: npm install prosekit
  2. Your bundler supports package.json exports field
  3. You’re using the correct import path (e.g., prosekit/react, not prosekit/dist/react)

​
Style not applied

If styles aren’t working:
  1. Ensure you’ve imported prosekit/basic/style.css
  2. Check that your bundler can process CSS imports
  3. Verify CSS files are being included in your build

​
TypeScript errors

If you see TypeScript errors:
  1. Ensure you have @types/node installed if needed
  2. Check your tsconfig.json has moduleResolution: "bundler" or "node16"
  3. Restart your TypeScript server

​
Next Steps

Now that ProseKit is installed, you’re ready to build your first editor:

Quick Start

Get up and running with a basic editor in minutes

First Editor Tutorial

Step-by-step guide to building your first editor

Extensions

Learn about the available extensions

Styling

Customize the appearance of your editor