Basic Setup

Next.js App Router

Components that use Inkstream must include the "use client" directive — ProseMirror interacts with browser APIs.

app/editor/page.tsx


"use client"
 
import { RichTextEditor } from '@inkstream/react-editor'
import { availablePlugins } from "@inkstream/starter-kit"
 
const PLUGINS = [availablePlugins.paragraph, availablePlugins.bold, availablePlugins.italic, availablePlugins.underline, availablePlugins.strike, availablePlugins.history]
 
export default function EditorPage() {
  return (
    <RichTextEditor
      plugins={PLUGINS}
      toolbarLayout={['bold', 'italic', 'underline', 'strikethrough', '|', 'history']}
      onChange={(html) => console.log(html)}
    />
  )
}

Next.js Pages Router

No directive needed. Same import pattern, usable directly in any page or component.