Lexical 0.24 with Vanilla JS: Getting started

Summary Lexical is a modern JavaScript (JS) text editor framework designed for extensibility and high performance. They adopt reactive state model, which ensures optimized updates and predictable behavior, and also have nodes as flexible data model. Lexical is an open source project and considered the successor of Draft.js. It is primarily developed by Meta, licensed under MIT. It is not restricted to React, but supports Vanilla JS, too. The flexibility enables us to integrate it with other JS libraries such as Svelte and Vue. This post shows how to embed the editor in a Bun-powered Vite project handled by Vanilla JS. Environment Web Editor: Lexical 0.24 Builder / Bundler: Vite 6.1.0 JavaScript runtime: Bun 1.2.2 OS: CathyOS (Linux distribution) Tutorial 1. Create a Vite project First, run: $ bun run create vite lexical-example Some questions will be asked. Here are my responses as an example: ✔ Select a framework: › Vanilla ✔ Select a variant: › TypeScript Scaffolding project in /(...)/lexical-example... Done. Now run: cd lexical-example bun install bun run dev Let's come in: $ cd lexical-example 2. Install the editor framework First of all, add the dependency: $ bun add lexical It printed out installed lexical@0.24.0. 3. Embed it into app Rewrite src/main.ts as below: import { createEditor, LexicalEditor } from 'lexical' document.querySelector('#app')!.innerHTML = ` ` let editor: LexicalEditor document.addEventListener('DOMContentLoaded', () => { const editorElement = document.getElementById('myeditor') editor = createEditor() editor.setRootElement(editorElement) }) There are three points: Prepare which is contenteidtable. Create LexicalEditor. Set the as root element in the editor. 4. Test it to fail Open http://localhost:5173/ with your web browser. Typing in it must not bring any update...

Feb 9, 2025 - 09:13

Lexical 0.24 with Vanilla JS: Getting started

Summary

Lexical is a modern JavaScript (JS) text editor framework designed for extensibility and high performance.
They adopt reactive state model, which ensures optimized updates and predictable behavior, and also have nodes as flexible data model.

Lexical is an open source project and considered the successor of Draft.js.
It is primarily developed by Meta, licensed under MIT.
It is not restricted to React, but supports Vanilla JS, too.
The flexibility enables us to integrate it with other JS libraries such as Svelte and Vue.

This post shows how to embed the editor in a Bun-powered Vite project handled by Vanilla JS.

Environment

Web Editor: Lexical 0.24
Builder / Bundler: Vite 6.1.0
JavaScript runtime: Bun 1.2.2
OS: CathyOS (Linux distribution)

Tutorial

1. Create a Vite project

First, run:

$ bun run create vite lexical-example

Some questions will be asked. Here are my responses as an example:

✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in /(...)/lexical-example...

Done. Now run:

  cd lexical-example
  bun install
  bun run dev

Let's come in:

$ cd lexical-example

2. Install the editor framework

First of all, add the dependency:

$ bun add lexical

It printed out installed lexical@0.24.0.

3. Embed it into app

Rewrite src/main.ts as below:

import { createEditor, LexicalEditor } from 'lexical'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  
`

let editor: LexicalEditor

document.addEventListener('DOMContentLoaded', () => {
  const editorElement = document.getElementById('myeditor')
  editor = createEditor()
  editor.setRootElement(editorElement)
})

There are three points:

Prepare
which is contenteidtable.
Create LexicalEditor.
Set the
as root element in the editor.

4. Test it to fail

Open http://localhost:5173/ with your web browser.
Typing in it must not bring any update...