https://github.com/htmujahid/shadcn-editor
Lexical base rich text editor using shadcn/ui components
https://github.com/htmujahid/shadcn-editor
editor lexical rich-text rich-text-editor shadcn shadcn-editor shadcn-lexical wysiwyg
Last synced: 5 days ago
JSON representation
Lexical base rich text editor using shadcn/ui components
- Host: GitHub
- URL: https://github.com/htmujahid/shadcn-editor
- Owner: htmujahid
- Created: 2024-11-04T07:28:06.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-03-29T10:58:05.000Z (18 days ago)
- Last Synced: 2025-04-03T05:13:07.703Z (14 days ago)
- Topics: editor, lexical, rich-text, rich-text-editor, shadcn, shadcn-editor, shadcn-lexical, wysiwyg
- Language: TypeScript
- Homepage: https://shadcn-editor.vercel.app
- Size: 5.41 MB
- Stars: 523
- Watchers: 3
- Forks: 31
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcn-ui - Link - 11-08 | (Libs and Components)
- awesome-shadcn-ui - shadcn-editor - Lexical editor using shadcn theme and components. (Libs and Components)
- awesome-shadcn-ui - shadcn-editor - Lexical editor using shadcn theme and components. (Libs and Components)
README
# Shadcn Editor
## Usage
1. Run this command to setup batteries included editor.
```bash
npx shadcn@latest add https://shadcn-editor.vercel.app/r/editor-x.json
```
2. Use the `Editor` component in your project.
```tsx
'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(initialValue)
return (
setEditorState(value)}
/>
)
}
```
## Start History
[](https://star-history.com/#bytebase/star-history&Date)