Three lines. Working editor.

App.tsx

"use client"

import { createEmptyContent, createInitialState, Editor, EditorProvider } from "@/components/ui/rich-editor"

export default function MyEditor() {
  const initialState = createInitialState({
    id: "root",
    type: "container",
    children: createEmptyContent(),
    attributes: {}
  })

  return (
    <EditorProvider initialState={initialState}>
      <Editor />
    </EditorProvider>
  )
}

With custom image upload

App.tsx

<EditorProvider initialState={initialState}>
  <Editor
    onUploadImage={async (file) => {
      const formData = new FormData()
      formData.append("image", file)
      const res = await fetch("/api/upload", { method: "POST", body: formData })
      const { url } = await res.json()
      return url
    }}
  />
</EditorProvider>

Read-only mode

Viewer.tsx

<EditorProvider initialState={savedState}>
  <Editor readOnly />
</EditorProvider>

--All imports come from @/components/ui/rich-editor after installing via the shadcn registry.
--The EditorProvider sets up the Zustand store — all editor hooks must be used inside it.
--Pass readOnly to render content without editing capabilities — useful for display/preview pages.

Installation

AI Integration