Show HN: A graph paper generator that renders vector PDFs in the browser

by lam_hg94 • 20 days ago

107 25 20 days ago

lam_hg94• 20 days ago

I got tired of graph-paper sites that print at the wrong scale, hide the PDF behind a signup, or slap a watermark on it. So I built one that's free, has no login, and prints true-to-scale.

The interesting part for me was the architecture: a single pure function buildPaper(config) emits geometric primitives (lines / circles / text), and everything is derived from it - the on-screen SVG preview, the in-browser PDF, and the build-time PDF and OG-image generation. No drawing logic is duplicated across output formats, so adding a new paper style is one renderer function plus about five one-line registrations, and it automatically gets a live preview, a downloadable PDF, an OG image, and SEO pages across every paper size.

Everything is true-to-scale: the SVG viewBox and the PDF are both in millimetres, so a 5 mm grid measures exactly 5 mm on paper when you print at 100%.

It's fully static - no backend, no database, no runtime. About 1,900 pages are prerendered to HTML, ~1,700 PDFs are pre-generated at build time (reusing the exact same draw logic as the browser), and it all deploys to a CDN as plain files.

Tech stack:

- Nuxt 4 / Vue 3 (script setup, TypeScript), Nitro static generation (nuxt generate) - Tailwind CSS v4 plus scoped CSS with a small design-token system - Paper engine: one pure buildPaper() -> primitives; one renderer per style. Single source of truth for preview + PDF + images - Preview: pure renderPaperSvg() -> inline SVG baked into the prerendered HTML, so previews render with zero client JS - PDF: jsPDF (dynamic import) for arbitrary custom configs in the browser; a Bun script reuses the same primitives to pre-build the static PDFs - Social images: SVG -> PNG at build time with @resvg/resvg-js (1200x630 OG per style + full A4 sheets) - Data-driven pSEO: ~40 styles across the full ISO A/B/C and US/Imperial sizes -> ~1,900 pages generated from one data table; JSON-LD (WebSite/HowTo/FAQ/Breadcrumb); selective noindex on low-demand size combos so thin pages don't dilute the site - Tooling: Bun (package manager + native-TS runner for all the generators) - Hosting: Cloudflare Pages, pure static (no worker)

There's also a custom editor (tweak spacing, color and margins, then export) and a virtual graph-paper canvas you can draw on, where the logical drawing space is decoupled from the pixel buffer so it stays crisp on any DPR.

One war story: because Cloudflare Pages serves pages at trailing-slash URLs, the client router saw /foo/ while my lookup table keyed on /foo - so pages rendered correctly server-side, then hydrated straight into a 404. Classic "works with JS off, breaks with JS on."

Happy to answer anything about the rendering pipeline or the static-generation setup.

genewitch2• 20 days ago

is there a way to export the .svg so i can load them into a plotter to make the graph paper? Since you've expended all the effort to ensure proper sizing and whatnot. It even looks like it has the same margins as my plotter!

genewitch2• 19 days ago

one can load the pdf into inkscape and presumably get an .svg out that will load into cricut's nonsense. however it scales the svg, so i don't get the accuracy. i am 95% sure this is on the cricut "slicer" and not inkscape or the OP. Anyhow, it works well enough. i'm plotting a hex sheet right now.

indianmouse• 20 days ago

Very nice implementation.

Really appreciate it.

Solves a lot of issues with the other sites. Though I haven't used it much or need it, it could be useful to students who need it and one PDF of it solves the issue.

Just keep it running. Have you considered open sourcing it at some point?

Theodores• 20 days ago

DRY applies, even in SVG. Draw one horizontal line and then reuse it for the other horizontal lines. Same for the vertical lines. The advantage of this technique is that you can clone the master lines without having to repeat yourself with the stroke-width and other attributes. You can also specify just the x or just the y of the cloned line, thereby needing to specify x1, x2, y1 and y2 just once per master line, with x (or y) in the use elements being just the offset.

Why bother? DRY. That is it.

If you put the master lines in a 'defs' as symbols, then they can inherit some attributes from a 'g' (group), therefore enabling you to specify stroke-width just once. Non-scaling stroke widths can also be specified, meaning that you can scale up an A4 to an A0 without having fat lines.

Since you want to make graph paper accessible to all, you can put a few words together in the 'desc' for that, and give the paper a 'title' specifying what it is, e.g. A4, 5mm spacing, with your URL.

Nobody will ever care for these small changes, however, if you branch out into making paper for composers or other specialist use cases, these techniques might come in hand.

rpdillon• 20 days ago

Well done! Nice design, good utility, and you kept it simple. Thanks for the writeup on the technical approach.

NetOpWibby• 20 days ago

This is incredible, thanks for building this!

eg312• 20 days ago

Nice work! I’ve built something… similar: https://github.com/alexadam/printable-mockups & https://www.printablemockups.com It’s free, open source, no backend needed and you can use it in the browser. I plan to add more widgets and support full page templates, like yours.

chrisweekly• 20 days ago

Cool! Thanks for creating and sharing this!

ChrisMarshallNY2• 20 days ago

Very cool.

However, on Safari, in the Mac, I don't see any graph on the first two (standard North-South/East-West graph).

I do see the isometric and hexagonal ones, though. Maybe the lines are too thin/light.

ChrisMarshallNY2• 20 days ago

It is because of the faintness of the lines. If you zoom the page, you can see it.

It's a really nicely-done utility.

Thanks!

smalltorch• 20 days ago

This is a nice sharply pointed tool. Thanks for the nice supply of pre configured styles!

Topology1• 20 days ago

Any chance that a pentagon pattern could be added?

jagged-chisel2• 20 days ago

You can't tile regular pentagons. How will you specify the space be filled?

There's other pentagon tiling though: https://en.wikipedia.org/wiki/Pentagonal_tiling

bakul• 20 days ago

Penrose tiling with kites and darts would be neat!

fortran77• 20 days ago

Nice, but I'd love more log options, and a log-linear. And a Smith chart.

setnone• 20 days ago

very well done, never knew i needed this. thanks for sharing!

stegveil• 20 days ago

Never thought about it, but it looks very useful.

jagged-chisel2• 20 days ago

Bug in the "Draw on Graph Paper"/virtual graph paper? Change the grid to hexagon and make sure "snap to grid" is checked. Still snaps to the original square grid.

asibahi• 20 days ago

I love this. Any chance of having this be a downloadable application somehow?

analog8374• 20 days ago

I have used this a lot. A very valuable resource.

relium• 20 days ago

Nice. I remember writing a PostScript graph paper generator when we got our first LaserWriters back in 1985.

riponcm• 20 days ago

I have checked your app. The idea is great, but I feel the log-log plots and some scientific and engineering sheets will be helpful. By the way great work.

timpark• 20 days ago

Although I don't personally use graph paper much, this project looks great. I find many of the example pattern previews very hard to see, though. I'd darken and/or thicken the lines. The descriptions underneath are good, but there are a lot of patterns that are unfamiliar to me that I'd like to be able to preview better, like Cross Stitch and Knitting.

versuchai• 19 days ago

Woah what a very niche cool concept.

Show HN: A graph paper generator that renders vector PDFs in the browser

Related Stories