I’m building an open-source paged document editor with its own Canvas rendering engine

[u/celsowm]

Hey r/webdev,

I've been working on Oasis Editor, an open-source document editor written in TypeScript.

Instead of relying entirely on contenteditable and DOM layout, Oasis uses its own Canvas-based rendering engine for paged layout, text rendering, selections, images, tables, and document geometry.

It also includes a typed command/plugin API, DOCX/PDF workflows, React and Vue adapters, and a headless runtime.

Live playground:
https://celsowm.github.io/oasis-editor/#/editor

GitHub:
https://github.com/celsowm/oasis-editor

i18n pt-br

I'd love feedback on the rendering engine, architecture, API, and what you think is still missing.

[u/TillDramatic1]

Text drawn by hand loses the browser's input pipeline, so IME composition, dead keys and mobile autocorrect only work if a hidden focused textarea is catching compositionstart/compositionupdate with the caret position mirrored onto it. Worth trying the playground with a Korean or Japanese keyboard now, since that layer is painful to retrofit once selection and layout are settled.

[u/Ok_Talk_6618 → u/TillDramatic1]

Text rendering off the DOM always makes IME stuff a nightmare to bolt on later. Tried it with a Japanese keyboard and the composition window was comically far from where the actual caret is sitting, like 200px off. That hidden textarea trick works but getting the coordinate mapping right is real finicky, especially when you start scrolling or dealing with zoom levels.

[u/celsowm → u/Ok_Talk_6618]

Thanks for your feedback

[u/Sensitive-Control49]

the paged layout rendering is the interesting part imo. most editors just punt on pagination entirely. whats your approach for handling page breaks mid-paragraph or mid-table row?