I built a Markdown resume builder for the AI-paste workflow — here's everything that broke

In a world where job-seekers are increasingly relying on AI-generated resume bullets, a new workflow has emerged: ask an AI like ChatGPT, Claude, or Gemini to craft the content, and then spend hours tweaking it to fit Word or drag-and-drop resume builders. This process is frustrating, as the AI already speaks Markdown, a clean and structured format that could save time and effort.

To address this issue, the author developed ResumeMD, a split-pane editor that allows users to paste Markdown on the left, preview a typeset resume on the right, select a template, and download a PDF—all without signing up.

The core of ResumeMD's design is the idea that Markdown should be the source of truth for resumes. Rather than storing resumes as proprietary JSON blobs, the product opts for portable text, making the tool universally accessible. The rendering process involves sections (h2) and sub-sections (h3), with templates handling decorative styling, such as uppercase formatting, borders, and background colors. A sidebar template splits the document using an HTML comment as a marker, ensuring valid Markdown throughout.

To facilitate offline functionality, the application employs localStorage as the primary storage method. This approach allows users to edit and export resumes without needing an account or backend services, ensuring a seamless experience from the start. An optional cloud sync layer is available for those who prefer cloud-based editing, providing a five-second debounce for changes, offline queuing, and conflict resolution for multi-device editing.

One unexpected challenge arose when trying to implement template-specific styling, particularly with Tailwind v4's Lightning CSS. This CSS processor aggressively optimizes selectors, sometimes generating unintended styles that conflicted with the intended design. The author addressed this issue in three stages: first, moving template-specific h2 and h3 styling to inline style props; second, rendering decorative elements as actual React elements rather than CSS pseudo-elements; and third, employing a <style> tag in the server layout to strip unwanted pseudo-elements from the rendered output.

This solution, while effective, required a deep dive into the CSS processing pipeline to ensure precise typography.

Another significant hurdle was font support for multilingual resumes. The PDF generation process required embedding fonts for all glyphs, which quickly became cumbersome when accommodating multiple languages like Chinese, Arabic, and Devanagari. The solution involved a script-detection module to identify the language of a resume, mapping it to the appropriate font and applying it consistently across all export formats (PDF, DOCX, HTML).

This process added complexity, but it ensures that resumes display correctly regardless of the language or script used.

Finally, the author tackled color space management, a challenge that required careful consideration to ensure consistent color rendering across different export formats. By deleting redundant color definitions and streamlining the color management workflow, the author was able to achieve a more reliable and visually consistent final product.

Throughout the development process, the author encountered various bugs and challenges, from stale subscription callbacks in Supabase real-time to race conditions during account creation. By employing React's ref mechanism and carefully managing dependencies, the author was able to resolve these issues, ensuring a smoother user experience.

In summary, ResumeMD simplifies the resume-building process by leveraging Markdown, a format already supported by AI-powered tools. The application's offline-first design, rich template support, and offline sync capabilities make it a valuable resource for job-seekers seeking a hassle-free way to create professional resumes.