Building a rich text editor with Svelte 5
summary
A compact rich-text editor called Svedit reproduces block-aware editing (container cursor, block selection, up/down arrow navigation) by mapping DOM selection to an internal model and rendering with Svelte 5, claiming a ProseMirror-like API in under 1,000 lines; it already supports undo/redo, deletion, and dynamic live sites backed by SQLite, was built in a few hundred hours, and will be published as a 1–2k line template (cut/paste support pending).
AI-written summary · about
chapters (8)
- 0:00Introduction and background
- 2:15Editable websites concept
- 4:23Limitations of content editable
- 6:11Minimal rich text editor goals
- 7:18Block-based editing demo
- 9:26Svelte 5 advantages
- 10:51Selection mapping magic
- 11:11Release and future plans
related talks
08mDraft.js, Editor.js, Slate.js: Choosing Text Editor
04h 48mBuilding Our Own Text Editor
05mBuilding Editors in the Browser
24mYet Another Text Web Editor and What's Wrong with contenteditable?
35mBuilding a Block Based Editor in Phoenix LiveView
18mBuilding Editors in the Browser
53mSvelte, cybernetically enhanced web apps
40mSvelte, cybernetically enhanced web apps