
How to Migrate from Draft.js to Lexical in 2026 (Complete Guide)
Draft.js is archived. No maintenance, no security patches, 820K weekly downloads running on momentum. Meta says use Lexical, but never shipped a migration path — issues #1641 and #2197 have been open since 2022. I built draft-to-lexical because I needed it and it didn't exist. The problem Draft.js content (RawDraftContentState) is a flat list of blocks with style ranges and an entity map. Lexical (SerializedEditorState) is a nested node tree. You can't rename a few fields and call it done — the structures are incompatible. Draft.js: { "blocks": [ { "text": "Hello bold world", "type": "unstyled", "inlineStyleRanges": [ { "offset": 6, "length": 4, "style": "BOLD" } ] } ], "entityMap": {} } Lexical: { "root": { "type": "root", "children": [ { "type": "paragraph", "children": [ { "type": "text", "text": "Hello ", "format": 0 }, { "type": "text", "text": "bold", "format": 1 }, { "type": "text", "text": " world", "format": 0 } ] } ] } } The differences that matter: Flat vs. nested: Draft.js
Continue reading on Dev.to Tutorial
Opens in a new tab




