Creating a CV should be about presenting your experience clearly, not spending hours adjusting margins, fixing page breaks, or fighting with document formatting.
That frustration led me to build Resume Craft, an open-source, browser-based CV editor combining Markdown, structured forms, and live document previews.
What started as an editing tool turned into an interesting engineering challenge: how do you keep multiple editing interfaces synchronized, maintain predictable page layouts, and persist data without requiring a backend?
Here are some of the lessons from building it.
- Synchronizing Markdown and structured forms
One of the biggest design challenges was supporting two different ways of editing the same document.
Some users prefer filling out structured fields. Others prefer writing Markdown directly.
Resume Craft's actual Markdown editor with live document preview.
I wanted both workflows to remain connected.
Resume Craft uses a Markdown parsing and structured-document synchronization layer to keep three views aligned:
Form editor: Edit individual fields and sections.
Markdown editor: Work directly with the source content.
Live preview: See the resulting document immediately.
The important lesson is that synchronization is more than updating a text field. Changes to document structure, section ordering, and content must remain consistent across editing modes.
A useful design principle here is to keep document transformations separate from UI rendering. That makes it easier to reason about changes and test how the same content behaves in different views.
- Making document layout predictable
Web interfaces are responsive, but printed documents have fixed dimensions.
That creates an interesting problem when building a CV editor.
A document that looks fine on screen may overflow when printed or exported.
Resume Craft supports A4 and US Letter layouts, page boundary indicators, and an automatic fitting feature that adjusts layout parameters to help content fit within the selected page.
The important realization was that document layout needs to be treated as part of the product's core logic, not just visual styling.
Font metrics, margins, line heights, and browser differences all matter.
Even with careful measurements, perfect rendering consistency across every operating system and browser cannot be assumed.
- Building around local-first storage
I wanted people to start editing without creating an account.
For a tool handling personal career information, keeping the main editing workflow local also seemed like a reasonable design choice.
Resume Craft uses:
IndexedDB with Dexie for CV content, profiles, drafts, and related document data.
localStorage for lightweight interface preferences.
Zustand for reactive application state.
This approach avoids requiring an application backend to store users' CV documents.
However, local-first design introduces its own challenges.
Data must be restored in the correct order when the app loads. Browser storage can be cleared, and users need to understand that local data isn't automatically synchronized across devices.
Persistence, migration, and recovery deserve as much attention as the editing interface.
- Treating PDF export as a separate engineering problem
A good-looking browser preview doesn't automatically guarantee a good PDF.
Resume Craft provides different export approaches, including a browser-print workflow intended for text-friendly output and an image-based quick export option.
These approaches involve different trade-offs.
Text-based PDF output is generally more appropriate when selectable text and machine readability matter.
Image-based output can preserve the visual appearance, but it isn't equivalent to a text-based document.
The editor also includes formatting checks and job-description keyword matching. These are useful signals, but they cannot guarantee how a particular applicant tracking system will evaluate a CV.
- The current stack
The project currently uses:
React and TypeScript
Vite
Tailwind CSS
Zustand
Dexie and IndexedDB
react-markdown and remark-gfm
PDF.js, jsPDF, and browser printing
Playwright and Vitest for testing
The application also supports multiple CV profiles, English and Chinese interfaces, and configurable document layouts.
- What I'd improve next
The next challenge is less about adding features and more about understanding how people actually use the editor.
I'm especially interested in three questions:
Is switching between form and Markdown editing intuitive?
Does the page fitting workflow feel predictable?
Are the PDF export options clear enough for first-time users?
Instead of immediately building more features, I'd like to use real feedback to decide what needs improvement.
Try the project
Live app: https://kunlong-luo.github.io/resume-craft/
Source code: https://github.com/kunlong-luo/resume-craft
The project is open-source, and contributions and feedback are welcome.
If you've built an editor, a document-generation tool, or another local-first application, I'd love to hear about the architectural decisions you found most challenging.
Thanks for reading!
Top comments (0)