CPress Editor
A single-page visual editor where cheque and print templates are designed by dragging components on a print-sized canvas — while the dynamic Twig fields behind them are resolved and previewed live, never flattened.
Frontend engineer — Vue SPA
Where it started.
Cheques are unforgiving documents. Every field — the payee, the amount, the date, the bank logo, the MICR line along the bottom — has to land in an exact spot, measured in millimeters, or the print is wrong. Editing those templates by hand, as raw markup, is slow and easy to get wrong, and you can't really see what you're doing until it prints.
The harder part is that most of the values aren't static. They're dynamic Twig expressions — the customer name, the amount, the date — filled in at print time from the backend. So an editor faces a dilemma: show the raw expressions and you can't judge the layout; flatten them to sample values and you destroy the template logic.
They needed a real visual design surface for these templates — something that felt like a design tool — without losing the dynamic, data-driven nature of what was being edited.
How I thought about it.
I built a single-page Vue editor that loads a template from the existing PHP print backend and renders every component on a true print-sized canvas, converting millimeters to pixels with zoom — so what you drag is what prints. Text, images, lines, barcodes, MICR, and grouped multiline blocks are all first-class components you position and resize directly.
The core trick is the dynamic bridge: the editor recursively pulls every Twig expression out of the template, resolves them through the backend once, and caches the results. The canvas then renders the resolved values — real names, amounts, positions — while the source expressions stay intact underneath. You design against live data and the template logic is never touched; edits post back as JSON for save / save-as, and the backend returns a PDF proof.
The thing itself.
- Print-sized visual canvasRenders page-sized cheque/print layouts from template JSON with millimeter-to-pixel conversion and zoom — what you place is what prints.
- Drag & resize componentsPosition and resize text, image, line, barcode, MICR, and grouped multiline components directly on the page.
- Live dynamic-field previewTwig expressions are extracted, resolved through the backend, and cached — the canvas shows real resolved values while the source expressions stay intact.
- Property inspectorEdit a component's name, ID, millimeter position and size, value (with Twig highlighting), zoom, and ordered multiline rows.
- Formatting toolbarFont, size, style, alignment, z-index, fill/text colors, borders, drag-lock, hidden-element visibility, page navigation, and add-component actions.
- Save / Save As + PDF proofingPosts edited template JSON back to the print backend (with override mode), and previews the returned PDF proof before anything is saved.
What changed.
Cheque and print templates are edited on a visual canvas — fields placed by eye to the millimeter — instead of hand-tuned as raw markup.
The dynamic Twig fields stay editable and are previewed with their real resolved values, so you design against live data without flattening the template.
A PDF proof can be generated and reviewed before saving, so layout mistakes are caught before they ever print.
Everything — page navigation, component creation, formatting, visibility, and proofing — lives on one screen.
Outcomes are qualitative — no client metrics shown.
Under the hood.
Got a process that
should run itself?
Tell me where the work piles up. I'll show you what a calmer, quieter version of it looks like — built around how your team already works.