How To Build A Text Editor With Lexical and React
Lexical is a new framework for building rich text editors. Let’s build a simple WYSIWYG editor with it.
In April 2022, Meta open-sourced Lexical — “an extensible text editor framework”.
Given that it powers some of the most popular web apps in the world, it especially focuses on accessibility and performance. Among other things, by its native support for React 18.
This caught my eye since a lot of text editing experiences are inherently inaccessible and struggle performance-wise as things get more complicated. Furthermore, Lexical adopted a lot of paradigms of React which makes it fairly easy to pick it up as a React developer (although it is framework agnostic).
So, I decided to give it a try and build a simple WYSIWYG editor with it.
How To Setup Lexical with React
Lexical can be used with any framework of your choice — or without a framework at all. It even offers a @lexical/headless package which lets you run the editor in a Node.js environment. This can come in handy sometimes (e.g. running Lexical on the server)!
