Example: minimal
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} style={{ outline: 'auto', padding: '1rem' }}></div> </ProseKit> ) }
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> ) }
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} style={{ outline: 'auto', padding: '1rem' }}></div> </ProseKit> ) }
<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 }) const mount = (element: HTMLElement) => { editor.mount(element) return { destroy: () => editor.unmount() } } </script> <ProseKit {editor}> <div use:mount style="outline: auto; padding: 1rem"></div> </ProseKit>
<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' import { ref, watchPostEffect, } from 'vue' const extension = defineBasicExtension() const editor = createEditor({ extension }) const editorRef = ref<HTMLDivElement | null>(null) watchPostEffect((onCleanup) => { editor.mount(editorRef.value) onCleanup(() => editor.unmount()) }) </script> <template> <ProseKit :editor="editor"> <div ref="editorRef" style="outline: auto; padding: 1rem" /> </ProseKit> </template>