Project case study
Glyft
A predictable canvas architecture for a lightweight, local-first graphics editor.
- Role
- Frontend Developer, Product Designer & Open-Source Maintainer
- Status / year
- Active · 2026
Overview
Glyft is built for developers who need polished visual assets without moving between several design tools. It supports common outputs such as Open Graph images, social cards, web graphics, and reusable templates directly in the browser.
The product remains private and account-free by storing project data locally in IndexedDB. This makes the core workflow fast while keeping user files on their device.
The canvas problem
A browser editor must keep object positioning predictable while selection, snapping, zooming, panning, history, and exports all change around it. Mixing screen coordinates with document coordinates would make these systems increasingly difficult to reason about.
A stable coordinate model
Glyft keeps the artboard fixed at document coordinate (0,0) and stores every object in document coordinates. Pan and zoom are applied only through Fabric.js viewport transforms, so editor navigation never changes the underlying document.
Exports use an offscreen StaticCanvas. The generated file therefore depends on the document itself rather than the user's current zoom level or viewport position.
- Document coordinates remain the source of truth.
- Viewport transforms handle navigation without mutating content.
- Offscreen rendering keeps exports deterministic.
Reducing controller complexity
As the editor grew, its original canvas controller accumulated too many responsibilities. I separated serialization, object creation, viewport management, image handling, selection, snapping, layers, and history into focused services.
That refactor reduced coupling and made it safer to add editor features without repeatedly changing the core canvas lifecycle.
What the project demonstrates
Glyft demonstrates product design and frontend engineering beyond conventional forms and dashboards: stateful canvas interaction, coordinate systems, local persistence, deterministic exports, and maintainable feature boundaries in an open-source product.
Technology
- React
- TypeScript
- Vite
- Fabric.js
- Zustand
- Dexie
- Tailwind CSS