Guide · Open source

How to use Lexical: install, set up a React editor and tips

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Lexical is an open-source, MIT-licensed text editor framework from Meta, written in TypeScript. It is a toolkit for building editing experiences inside your own web application rather than a finished editor you install and open. This guide shows how to install it, set up a basic React editor, and decide whether it fits your project.

Lexicalmeta/lexical · ★ 24k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure Node.js and npm or pnpm are installed, and that your target browsers are in the supported list.
2Install the packages. Run npm install lexical @lexical/react in your React project.
3Create the config. Define an initialConfig object with a namespace and an onError handler.
4Wrap the editor. Place PlainTextPlugin, ContentEditable and HistoryPlugin inside LexicalComposer.
5Compare with examples. Open the plain text or rich text StackBlitz examples to check the behaviour you expect.
6Add features. Extend the editor with plugins for features like lists, tables and code blocks as your project requires.

What Lexical is and who it is for

Lexical is an extensible framework for building text editors. The README describes it as providing reliability, accessibility and performance, and says it works with any UI framework while offering official React bindings.

It is aimed at developers who want to add a rich text editor to a web app. It is not a standalone word processor: the README does not describe an end-user application.

Good fit: developers adding editing to a web app, React teams wanting official bindings, projects needing real-time collaboration via Yjs, teams wanting JSON, Markdown or HTML import/export.
Poor fit: non-developers looking for a ready-made word processor, or projects that must support very old browsers.

Check the prerequisites and browser support

You need Node.js and either npm or pnpm. The README lists supported browsers as Chrome 86+, Firefox 115+, Safari 15+ and Edge 86+.

If your users run older browsers, check this list before you commit to Lexical.

Node.js
npm or pnpm
Chrome 86+, Firefox 115+, Safari 15+, Edge 86+

Install Lexical with React bindings

For a React application, install the core package together with the React bindings using npm. The README also gives a pnpm command for working on the Lexical repository itself.

Lexical's Vanilla JS quick start is the route for framework-agnostic use.

npm install lexical @lexical/react

Build a basic editor in React

The React quick start wraps your editor in LexicalComposer, which takes an initialConfig object with a namespace and an onError handler. Inside it you place a content area and plugins.

PlainTextPlugin with ContentEditable and LexicalErrorBoundary gives you a plain text editor, and HistoryPlugin adds undo and redo. The README's example uses these imports from @lexical/react.

namespace: a name for your editor instance
onError: a handler for errors, such as console.error
HistoryPlugin: adds undo/redo support

const initialConfig = {
  namespace: 'MyEditor',
  onError: (error) => console.error(error),
};

function Editor() {
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <PlainTextPlugin
        contentEditable={<ContentEditable />}
        ErrorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
    </LexicalComposer>
  );
}

Try the official examples before building your own

The README links two StackBlitz examples: a plain text example and a rich text example. Open them in a browser to see the behaviour before you write code.

The Lexical documentation, API reference and Playground are linked from the README for deeper reference.

Plain Text Example (react-plain-text)
Rich Text Example (react-rich)
Documentation at lexical.dev/docs/intro
API reference at lexical.dev/docs/api

Work on Lexical itself from source

If you want to contribute or run the Lexical repository, the README lists pnpm commands for installing dependencies, starting the playground dev server, running tests and running checks.

The README points to CONTRIBUTING.md for development guidelines.

pnpm install
pnpm run start
pnpm run test-unit
pnpm run ci-check

What people use it for

Adding a rich text editor to a web application built with React
Building a plain text input with undo and redo support
Adding real-time collaboration through Yjs integration
Importing and exporting editor content as JSON, Markdown or HTML

Frequently asked questions

Is Lexical free to use?

Yes. Lexical is released under the MIT licence, as stated in the README. The licence file is linked from the project's README.

What do I need to install Lexical?

The README lists Node.js and npm or pnpm as prerequisites. For React, install lexical and @lexical/react with npm.

Is Lexical a ready-made word processor?

No. Lexical is a framework for building editors inside your own app. The README does not describe a standalone end-user application.

Which browsers does Lexical support?

The README lists Chrome 86+, Firefox 115+, Safari 15+ and Edge 86+. Projects needing older browsers should not assume support.

How does Lexical compare to other editor frameworks?

The README names ProseMirror, Slate, TipTap and Quill as comparable projects. Compare them on the features and browser support you need, since this guide does not benchmark them.

Where can I get help if something breaks?

The README points to the Discord server for questions and discussions, and to GitHub Issues for bug reports and feature requests.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Lexical suits developers building a rich text editor into a web app, especially React teams that want official bindings and a documented quick start. If you need a ready-made word processor or must support very old browsers, pick a different tool. Among the comparable projects the README names, choose based on your features and browser needs.

Install options & downloads