Document
Generator
Web tool for generating PDF/DOCX files with a VS Code-like editor, live preview, and autosave.
- My role
- Side Project
- Build window
- 2025
- Proof signal
- Project record
- Primary stack
- 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 Evidence
