Docs
Installation

Installation

How to install dependencies and structure your app.

First you need to initialize your project with shadcn/ui.

Editor Initialization

Use the following command to add the editor to your project.

pnpm dlx shadcn@latest add https://shadcn-editor.vercel.app/r/editor.json

This will add the core dependencies and the structure for the editor.

Usage

Here is how you can use the editor in your project.

'use client'
 
import { useState } from 'react'
 
import { SerializedEditorState } from 'lexical'
 
import { Editor } from '@/components/blocks/editor-00'
 
const initialValue = {
  root: {
    children: [
      {
        children: [
          {
            detail: 0,
            format: 0,
            mode: 'normal',
            style: '',
            text: 'Hello World 🚀',
            type: 'text',
            version: 1,
          },
        ],
        direction: 'ltr',
        format: '',
        indent: 0,
        type: 'paragraph',
        version: 1,
      },
    ],
    direction: 'ltr',
    format: '',
    indent: 0,
    type: 'root',
    version: 1,
  },
} as unknown as SerializedEditorState
 
export default function EditorDemo() {
  const [editorState, setEditorState] =
    useState<SerializedEditorState>(initialValue)
 
  return (
    <div>
      <Editor
        editorSerializedState={editorState}
        onSerializedChange={(value) => setEditorState(value)}
      />
    </div>
  )
}

You can extend the editor with plugins. See the plugins section for more information.

IntroductionPlugins