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.
First, you'll need to install the prosekit package. You can use your preferred package manager:
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 {
html,
LitElement,
type PropertyDeclaration,
type PropertyValues,
} from 'lit'
import {
createRef,
ref,
type Ref,
} from 'lit/directives/ref.js'
import { defineBasicExtension } from 'prosekit/basic'
import type { Editor } from 'prosekit/core'
import { createEditor } from 'prosekit/core'
export class LitEditor extends LitElement {
static override properties = {
editor: { state: true, attribute: false } satisfies PropertyDeclaration<Editor>,
}
private editor: Editor
private ref: Ref<HTMLDivElement>
constructor() {
super()
const extension = defineBasicExtension()
this.editor = createEditor({ extension })
this.ref = createRef<HTMLDivElement>()
}
override createRenderRoot() {
return this
}
override updated(changedProperties: PropertyValues) {
super.updated(changedProperties)
this.editor.mount(this.ref.value)
}
override render() {
return html`<div class="outline-solid p-4" ${ref(this.ref)}></div>`
}
}
export function registerLitEditor() {
if (customElements.get('lit-editor-example-minimal')) return
customElements.define('lit-editor-example-minimal', LitEditor)
}
declare global {
interface HTMLElementTagNameMap {
'lit-editor-example-minimal': LitEditor
}
}
export {
LitEditor as ExampleEditor,
registerLitEditor,
} from './editor'
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'
import { useMemo } from 'preact/hooks'
import { defineBasicExtension } from 'prosekit/basic'
import { createEditor } from 'prosekit/core'
import { ProseKit } from 'prosekit/preact'
export default function Editor() {
const editor = useMemo(() => {
const extension = defineBasicExtension()
return createEditor({ extension })
}, [])
return (
<ProseKit editor={editor}>
<div ref={editor.mount} className="outline-solid p-4"></div>
</ProseKit>
)
}
export { default as ExampleEditor } from './editor'
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="outline-solid p-4"></div>
</ProseKit>
)
}
'use client'
export { default as ExampleEditor } from './editor'
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'
import type { JSX } from 'solid-js'
export default function Editor(): JSX.Element {
const extension = defineBasicExtension()
const editor = createEditor({ extension })
return (
<ProseKit editor={editor}>
<div ref={editor.mount} class="outline-solid p-4"></div>
</ProseKit>
)
}
export { default as ExampleEditor } from './editor'
<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 {@attach editor.mount} class="outline-solid p-4"></div>
</ProseKit>
export { default as ExampleEditor } from './editor.svelte'
import 'prosekit/basic/style.css'
import 'prosekit/basic/typography.css'
import { defineBasicExtension } from 'prosekit/basic'
import { createEditor } from 'prosekit/core'
export function setupVanillaEditor() {
const extension = defineBasicExtension()
const editor = createEditor({ extension })
return {
render: () => {
const element = document.createElement('div')
element.className = 'outline-solid p-4'
editor.mount(element)
return element
},
destroy: () => {
editor.unmount()
},
}
}
export { setupVanillaEditor } from './editor'
<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="outline-solid p-4" />
</ProseKit>
</template>
export { default as ExampleEditor } from './editor.vue'
This code does the following:
- Creates
extension by calling defineBasicExtension(). This extension provides basic text editing features like paragraphs, headings, bold, italic, etc. - Creates
editor by calling createEditor(). The extension created in the previous step is passed to the editor. - Creates a
<ProseKit> component. This component acts as a provider for the children and doesn't render anything to the DOM directly. - Creates a
<div> element that mounts the editor. The editor.mount() method is used to attach the editor to this <div> element.
Congratulations! You've successfully created your first ProseKit editor. Now you can explore the following topics: