README.md
</picture></a>
</p> <p align="center"> An extensible text editor framework that provides excellent reliability, accessibility and performance. </p> <p align="center"> <a href="https://www.npmjs.com/package/lexical"></a> <a href="https://www.npmjs.com/package/lexical"></a> <a href="https://github.com/facebook/lexical/actions/workflows/tests.yml"></a> <a href="https://discord.gg/KmG4wQnnD9"></a> </p> <p align="center"> <a href="https://lexical.dev/docs/intro">Documentation</a> | <a href="https://lexical.dev/docs/getting-started/quick-start">Getting Started</a> | <a href="https://playground.lexical.dev">Playground</a> | <a href="https://lexical.dev/gallery">Gallery</a> </p>npm install lexical @lexical/react
import { $getRoot, $getSelection } from 'lexical';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
const initialConfig = {
namespace: 'MyEditor',
onError: (error) => console.error(error),
};
function Editor() {
return (
<LexicalComposer initialConfig={initialConfig}>
<PlainTextPlugin
contentEditable={<ContentEditable />}
ErrorBoundary={LexicalErrorBoundary}
/>
<HistoryPlugin />
</LexicalComposer>
);
}
Try it yourself:
# Install dependencies
pnpm install
# Start playground dev server
pnpm run start
# Run tests
pnpm run test-unit
pnpm run test-e2e-chromium
# Lint and type check
pnpm run ci-check
See CONTRIBUTING.md for detailed development guidelines.
| Browser | Version |
|---|---|
| Chrome | 86+ |
| Firefox | 115+ |
| Safari | 15+ |
| Edge | 86+ |
We welcome contributions! Please read our Contributing Guide to learn about our development process and how to propose bugfixes and improvements.
<a href="https://github.com/facebook/lexical/graphs/contributors"></a>
MIT License © Meta Platforms, Inc.