@clearluv/editor

An open-source WYSIWYG editor

Live Demo · How to use · API · Setting Up Locally · Tech Stack · License

Live Demo

https://clearluv-editor.vercel.app

How to use

pnpm add @clearluv/editor

API

Property	Description	Type	Default
classNames	Semantic DOM class	{ root?: string; toolbar?: string; editor?: string }	/
styles	Semantic DOM style	{ root?: React.CSSProperties; toolbar?: React.CSSProperties; editor?: React.CSSProperties }	/
content	editor content	string	""
autofocus	editor focus postion or type	"start" / "end" / "all" / number / boolean / null	/
hiddenToast	is hidden toast	boolean	false
onUploadFile	transform upload file, callback base64/upload url	({type: "image", data: File}) => Promise	void
onUpdate	get editor content when editor update	({json, html, text}: {json: JSONContent; text: string; html: string; isEmpty: boolean;}) => void;	void

Setting Up Locally

To run the app locally, you can run the following commands:

pnpm i
pnpm run build:cmp
pnpm run dev

Tech Stack

@clearluv/editor is built on the following stack:

• React.js – Framework
• Tiptap – Text editor
• Shadcn – UI
• RsBuild – Page build framework
• Tsup – Editor build framework
• Vercel – Deployments
• TailwindCSS – Styles

License

Licensed under the AGPL license.