03/Manga translation web editor · not deployed
Lettrink
Detect, translate, clean and re-letter a manga page in a Photoshop-like editor.
- Role
- Design, front-end and back-end development, solo
- Period
- Apr – Sep 2026
- Status
- Video demo on request
Private code — demo on request. The repository is private. I am happy to demo the app on a call or in an interview.
Ask for a demo- raster tools
- 27
- keyboard shortcuts
- 46
- front-end lines
- ~90 k
- commits
- 993
Context
Translating a manga chapter takes four jobs: cleaning the page, reading the Japanese, translating, re-lettering. The usual tools are general-purpose desktop software.
The problem
Keep an editor smooth with high-resolution pages, dozens of bubbles, layers and an undo history that stays consistent across three state models (bubbles, canvas, zones), while the server analyses the page in the background.
What I did
- Canvas editor, bubbles panel, command palette.
- FastAPI back end and AI pipeline (OCR, translation, inpainting).
- Authentication (OAuth, TOTP), Stripe payments, FR/EN i18n.
Architecture & technical choices
- 01
A full canvas editor
Layers, 27 raster tools, 46 shortcuts and a command palette with fuzzy search. Undo/redo stays in sync across bubbles, canvas and zones through a dedicated hook.
- 02
Real time over SSE
Analysis progress is streamed by FastAPI as Server-Sent Events and read on the client with fetch and a ReadableStream.
- 03
A pixel-accurate preview
The client re-implements the Python text best-fit algorithm (binary search) so the editor preview matches the final render exactly.
- 04
A server-side AI pipeline
ONNX Runtime for detection, manga-ocr for reading, LaMa for inpainting, and DeepL, Google or Claude for translation.
Highlights
- Per-bubble workflow: draft, translated, lettered, approved.
- Stats and a yearly heatmap in hand-built SVG.
- FR/EN internationalisation across 12 files, with a key-consistency test.
Stack
- React 19
- Vite
- JavaScript (JSX)
- Canvas 2D
- IndexedDB
- motion
- react-window
- Vitest
- Python 3.11
- FastAPI
- SQLite
- ONNX Runtime
- manga-ocr
- LaMa / Real-ESRGAN
- DeepL · Google · Claude
- Stripe
- Sentry
Gallery (3)
Select an image to enlarge it.