Document
Generator
Web tool for generating PDF/DOCX files with a VS Code-like editor, live preview, and autosave.
Role
Side Project
Duration
2025
Context
Personal project born from the frustration of switching between Word and web-based tools. Built to explore document manipulation libraries (jsPDF, html2canvas, docx) and deliver a polished, self-contained writing tool.
Focus
Next.js
The Challenge
A professional document generation tool that provides a VS Code-like editing experience via Monaco Editor. Supports dual editor modes (Markdown and TSX), real-time preview rendering, and client-side export to both PDF and Word (DOCX) formats. Includes a template library with pre-built formats for proposals, invoices, and reports, plus keyboard shortcuts, toast notifications, error boundaries, and local auto-save persistence.
Key Outcomes
Integrated Monaco Editor for a VS Code-like editing experience with syntax highlighting
Built dual editor modes supporting both Markdown and TSX input with live preview
Engineered client-side export functionality for PDF (jsPDF + html2canvas) and DOCX (docx + file-saver) formats
Created a template library with pre-built formats for proposals, invoices, and reports
Added keyboard shortcuts (Ctrl+Enter, Ctrl+S, Ctrl+Shift+P/W), autosave, and error boundaries
Added quality checks for editor and export flows to reduce regression risk
Technical Stack
Visual Documentation
