FreeGraphPaper: A Browser-Based Vector PDF Graph Paper Generator
FreeGraphPaper: A Browser-Based Vector PDF Graph Paper Generator
FreeGraphPaper provides true-to-scale, printable vector PDFs
FreeGraphPaper is a browser-based utility that allows users to generate and download print-ready graph paper PDFs without requiring a login, sign-up, or watermarks. The tool ensures that grids are true-to-scale (e.g., a 5 mm grid measures exactly 5 mm on paper) provided the user prints at 100% scale with "fit to page" disabled.
Supported Grid Types and Templates
The platform offers a variety of pre-configured templates and a custom maker for specific needs:
- Standard Grids: Square grids (e.g., 5 mm, 1 cm, 1/4 inch).
- Specialized Grids: Dot grids, isometric, hexagon, and lined paper.
- Academic Layouts: Cornell notes paper.
- Customization: Users can adjust spacing, color, and margins via a custom editor.
Comprehensive Paper Size Support
FreeGraphPaper supports a vast array of international and regional paper standards, ensuring compatibility across the full ISO and US/Imperial series:
| Standard | Supported Sizes |
|---|---|
| US / Imperial | US Letter, US Legal, Tabloid, Executive, Junior Legal, Half Letter, ANSI C/D/E, Arch A/B/C/D/E |
| ISO A Series | A0 through A10 |
| ISO B Series | B0 through B10 |
| ISO C Series | C0 through C10 |
Technical Architecture: Single Source of Truth for Rendering
FreeGraphPaper is built as a fully static site with no backend, database, or runtime, deploying as plain files to a CDN via Cloudflare Pages. The core of the system is a functional rendering pipeline designed to eliminate duplication across different output formats.
The Rendering Pipeline
The architecture relies on a single pure function, buildPaper(config), which emits geometric primitives (lines, circles, and text). This single source of truth is then consumed by different renderers:
- SVG Preview: The
renderPaperSvg()function converts primitives into an inline SVG baked into the prerendered HTML, allowing previews to load with zero client-side JavaScript. - Browser PDF: The
jsPDFlibrary is dynamically imported to generate PDFs for arbitrary custom configurations directly in the browser. - Static PDFs: A Bun script reuses the same
buildPaperprimitives to pre-generate approximately 1,700 PDFs at build time. - Social Images: The
@resvg/resvg-jslibrary converts SVGs to PNGs at build time to create Open Graph (OG) images for every style.
Tech Stack
- Framework: Nuxt 4 / Vue 3 (script setup, TypeScript) using Nitro static generation (
nuxt generate). - Styling: Tailwind CSS v4 and a scoped CSS design-token system.
- Tooling: Bun is used as the package manager and native TypeScript runner for all generators.
- Hosting: Cloudflare Pages (pure static).
Implementation Insights and User Feedback
Programmatic SEO (pSEO)
The developer utilized a data-driven approach to generate approximately 1,900 pages from a single data table. This includes JSON-LD for WebSite, HowTo, FAQ, and Breadcrumb schemas. To prevent thin content from diluting the site's SEO, selective noindex tags were applied to low-demand size combinations.
Development Challenges
The developer noted a specific issue with Cloudflare Pages' trailing-slash URLs. The client-side router interpreted URLs as /foo/, while the lookup table used /foo, causing pages to render correctly on the server but trigger a 404 during hydration when JavaScript was enabled.
Community Feedback and Bug Reports
Users have highlighted several areas for improvement and reported technical issues:
- Rendering Bugs: One user reported that standard North-South/East-West graphs do not appear on Safari for Mac, suggesting the lines may be too thin.
- Functional Bugs: A user reported that the "snap to grid" feature in the virtual graph paper canvas does not correctly switch to a hexagonal grid, remaining snapped to a square grid instead.
- Feature Requests: Users have requested the addition of pentagon patterns, log-log plots, log-linear plots, and Smith charts for scientific and engineering applications.