Skip to content

htmujahid/shadcn-editor

Repository files navigation

Shadcn Editor

Sponsor

If you find this project useful, please consider sponsoring its development. Your support helps maintain and improve this open-source project.

For sponsorship inquiries, contact: htmujahid@gmail.com

Usage

  1. Run this command to setup batteries included editor.
npx shadcn@latest add @shadcn-editor/editor-x
  1. Use the Editor component in your project.
'use client' import { useState } from 'react' import { SerializedEditorState } from 'lexical' import { Editor } from '@/components/blocks/editor-x/editor' 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 function EditorDemo() { const [editorState, setEditorState] = useState<SerializedEditorState>(initialValue) return ( <Editor editorSerializedState={editorState} onSerializedChange={(value) => setEditorState(value)} /> ) }

Start History

Star History Chart