Back to ProjectsCase Study

Document Generator

Web tool for generating PDF/DOCX files with a VS Code-like editor, live preview, and autosave.

Source Code

Role

Side Project

Duration

2025

Stack

Next.jsTypeScriptTailwind CSSMonaco EditorjsPDFdocxReact Markdown

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.

Overview

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

Lessons Learned

PDF rendering libraries have significant cross-browser differences that need testing
Debouncing is essential for real-time preview — without it, typing lags noticeably

Technologies

Next.jsTypeScriptTailwind CSSMonaco EditorjsPDFdocxReact Markdown

Gallery