Architecting a Serverless Resume Builder: The Iframe Firewall Pattern
Building a static, privacy-first CV creator requires a unique architectural approach. By decoupling the editor UI from the preview engine using an 'Iframe Firewall', we ensure pixel-perfect print layouts without sacrificing a modern React developer experience.
- #react
- #architecture
- #local-first
The Challenge: Application UI vs. Document Layout
Building a web-based resume creator presents a distinct technical conflict: the styles required for a rich application interface (sidebars, form inputs, dark mode) are fundamentally at odds with the strict requirements of a printable A4 document. Mixing Tailwind utility classes with print-specific CSS often results in 'style bleed,' where application styles inadvertently break the document layout.
The Solution: The Iframe Firewall
To resolve this separation of concerns, I implemented the Iframe Firewall pattern. This architecture splits the application into two isolated environments:
- The Host (Editor): A standard React 18 application using Tailwind CSS and Zustand. It handles state, validation, and user input.
- The Guest (Preview): A sandboxed
<iframe>containing only raw HTML and CSS. It operates independently of the React lifecycle and Tailwind context.
Templates as Data
Rather than rendering the resume as a React component tree, I opted for Mustache.js logic-less templates. The app treats the resume template as a raw string of HTML. When state changes, the 'Host' renders the string with the new data and injects it directly into the 'Guest' iframe's srcDoc. This guarantees that the preview is a pixel-perfect representation of the final PDF output.
Zero-Backend Persistence
Consistent with the 'Local-First' philosophy, the app requires no backend. All state is persisted via localStorage, and PDF generation relies on the browser's native print engine. This architecture reduces hosting costs to zero and eliminates data privacy liabilities.
If you want to test the site yourself: Free CV Creator
