Layout Studio
A browser-based document layout tool with grid-snapped components, millimeter-based pages, brand checks, and PDF or print output with bleed and crop marks.
What I built
Implemented: I designed and built this experiment.
Problem
Explore how editorial and print-layout ideas could work in an interactive browser tool.
Constraints
- Physical units have to work in the browser without making the editing controls hard to understand.
- Pages, grids, layers, brand checks, and print settings all need to stay in sync.
Key decisions
- Model page geometry in millimeters, with selectable page formats and frames sized in grid units.
- Keep the document as local JSON and support pointer, keyboard, history, layer, and template workflows.
- Show individual brand checks and use a dedicated print sheet. The overall brand score remains an experimental guide.
Tradeoffs
- Editing is disabled on narrow screens because the workspace depends on dense spatial controls.
- RGB browser printing depends on browser and printer settings, and local storage provides no collaboration or version history.
Implementation
The React and TypeScript workspace supports snapping, pan and zoom, drag and resize, keyboard shortcuts, undo and redo, layers, templates, image upload, local autosave, JSON import and export, and print CSS.
Result
The working prototype can compose layouts and produce browser PDF or print output. It is an experiment, not validated prepress software.
Screenshots
