Tasfer:一个在二维画布上绘制的文本编辑器
Tasfer: a text editor drawn on a 2D canvas

原始链接: https://www.hamza.se/blog/tasfer

Tasfer 是一个基于画布的富文本编辑器,通过自行渲染所有文本、光标、选区和布局来避免 contentEditable 的浏览器不一致性。隐藏输入框负责输入和输入法。作者最初尝试使用 WebGL/WebGPU 渲染文本,但发现 2D 画布已足够。LLM 后来加速了开发。Tasfer 采用本地优先:文档保存在设备上,无需注册或云端副本。协作使用 CRDT 和加密的点对点 WebRTC,信令最少,并可选加密中继。它从笔记扩展到包含数学、代码块、表格和日历,并支持 web、macOS、Windows、Linux、iOS 和 Android。应用为 AGPL 许可,可复用编辑器引擎为 MIT 许可。可在 tasfer.app 试用,或在 github.com/tasferlabs/tasfer 查看代码。

Tasfer 的 Show HN 帖子(一个画布渲染的文本编辑器)获得 8 分和 4 条评论。一位开发写作工具的评论者表示希望改进双向文本处理,并分享了 Enso/sonnet 项目。另一位称赞其富文本 LaTeX 编辑器,但指出平板上文本选择体验不佳。第三位喜欢其注重隐私的设计,但表示 iOS 自动纠错功能有缺陷,并怀疑网站是 LLM 生成的。一条回复确认了 iOS 光标 bug,并认为如果是人类主导的 LLM 辅助网站则更宽容。总体反馈积极,但突出了移动端/输入问题。
相关文章

原文

When you type into a text editor on the web, chances are you are typing into something called contentEditable. It is an old browser API that lets you mark a piece of the page as editable, and then the browser takes over. Almost every rich text editor out there is built on top of it, one way or another.

If you have ever tried to build an editor with it, you know. It is not only hard to work with, it is full of quirks. The browser decides what the HTML looks like after you press Enter. Every browser decides a little differently. Selection jumps around. Pasting brings in garbage. And you spend most of your time fixing what the browser did instead of building what you wanted.

So I did something a bit crazy. I threw it away and drew everything myself on an HTML5 canvas.

In Tasfer, the browser never decides what is on the screen. The editor does. Every letter, the cursor, the selection, line breaking, right-to-left text for Arabic, all of it is measured and painted onto a 2D canvas by code I wrote.

The keyboard is the one thing I could not replace. Typing, autocorrect, and the Arabic or Chinese input methods only work if the browser thinks you are typing into a real text field. So there is a small hidden input that receives the keystrokes, and the editor takes it from there. The browser listens, but it does not get to draw.

That sounds like a lot of work, and it is. But it also means the editor looks and behaves the same in every browser, on desktop and on phone, because nobody else is in charge of the pixels.

Here is the part I do not usually mention. I did not start with canvas. I started with WebGL and WebGPU, because I thought I would render text on the GPU like a game engine.

I spent a lot of time parsing TrueType font files by hand, trying to turn glyph outlines into something a GPU could draw. I learned a lot. I also did not ship much. At some point I accepted that the 2D canvas was good enough, and fast enough, and moved on.

Then, during the Christmas break at the end of 2025, I discovered how good Claude and the other LLMs had gotten. Not "write me a function" good. Actually useful for a big, messy project like this one.

So I used them, intensively, and the speed changed completely. Things I had put on a "maybe one day" list started to happen in a week.

I have always hated how people blindly hand everything they write to some company's server, without thinking about it. Notes, plans, private stuff. So when I had to choose between turning Tasfer into a business or keeping it honest, I dropped the commercial ideas pretty quickly.

Instead, Tasfer is local-first. Your documents live on your device. There is no sign-up and no cloud copy.

That made collaboration the hard part. If there is no server holding the "real" document, how do two people edit the same page at the same time? The answer is a CRDT, a data structure where every edit is an operation that can be merged in any order and still end up with the same result on every device. I implemented that logic myself, and peers send their edits directly to each other over WebRTC, encrypted.

To be fully clear, a small server does help two devices find each other, and it keeps nothing. After that, peers talk directly. Only as a fallback, when a network blocks the direct connection, does the traffic go through a relay, and it is encrypted, so the relay passes along data it cannot read. Your document never lives on a server.

It started as a text editor. Then it needed math, so I wrote a LaTeX renderer that draws on the canvas too. Then code blocks with syntax highlighting. Then tables. Then a calendar, because I wanted my tasks next to my notes. It now runs on the web, macOS, Windows, Linux, iOS and Android.

I use it every day for my own work, mostly for writing equations. That is the best test I know of. If something annoys me, it gets fixed.

Lecture notes in Tasfer. The equations, the checkboxes and every letter are drawn on the canvas.

Tasfer is open source now, under two licenses:

  • The app is copyleft, under AGPL. If you fork it or host it, you share your changes.
  • The editor engine is MIT. You can use it in your own product, commercial or not, with no strings attached.

The engine is a separate package with its own SDK, so if you want a canvas editor in your own app, you do not have to go through what I went through. The docs are at tasfer.app/docs and the code is at github.com/tasferlabs/tasfer.

You can try it in your browser at tasfer.app, nothing to install. And if you have ever fought contentEditable and lost, I would love to hear about it.

联系我们 contact @ memedata.com