An invoice generator using the browser’s built-in print-as-pdf. Edit the templates and style to your liking. 🪄 A tooltip for markup, hyperlinks, highlighting 🌈 Upload custom logos ✨ The total is automatically calculated 🗑️ Remove and restore elements

Hey everyone. I made this app as I wanted to learn something about some tech I didn't know yet, so I looked into generating PDF's in the browser. Tldr; browsers are already very good at doing this through Print as PDF, better than I could ever do myself. Invoicer thus allows you to edit and style an invoice in an easy and fun way, and relies on the work of smarter devs behind WebKit/Blink/Gecko to export it as PDF. Note: each browser 'prints' a bit differently. In print settings, make sure to: 1. enable background graphics, 2. remove footer and header, 3. margins to none/zero, 4. scale to 1, 5. paper size A4

@viktor_renkema Upvoted! We would be glad to have your support on our launch as well.

@viktor_renkema Kudos on creating Invoicer! Your approach to learning by delving into the tech behind generating PDFs in the browser is both impressive and practical. It's refreshing to see a project born out of a genuine desire to explore and understand new technologies.

Hey, congratulations! Genuinely curious — which tech did you use? Especially considering PDF creation and editing features.

@panphilov Thanks!! It's built on React using NextJS, and animations come from vanilla css combined with Framer Motion. Re: the editor/pdf creation: Tooltip The tooltip uses react context, I set the x and y coordinates on mouse-down and some other stuff in a tooltip provider. I also made some utils to help calculate how much the tooltip should be offset of the mouse click, cause it should be centered above your cursor, not to the top-left. Anchor links This was trickier to implement cause the editor updates the DOM live, so if you insert an anchor link around e.g. a , you actually make the span clickable in the preview. So instead once you add a url, i add your url's and the id of the DOM element to a state, and only once you hit export, I quickly loop over all those DOM elements that you added an anchor link to and actually attach the href. After exporting, I remove them again. That way you get them clickable in the pdf, but not in the live editor. PDF generation I implemented various libraries and wrote up a bunch of 'findings' in a Notion doc, and ultimately ripped it all out and just use the browser's print feature as all major browsers can print as pdf. So now its just a window.print(); call (with a bunch trickery around it, e.g. css to hide everything but the preview, and javascript trickery stuff, like the anchor links described). The research I did into libraries like jsPDF and pdfMake summarized: 1. some libraries worked well, but they convert the DOM to a png, which isnt great as you cant do anchor links/have text selectable in the pdf reader. 2. the better options for turning HTML into non-image PDF is jsPDF. Second would be pdfMake, but all of the layouts have to be done in JSON objects and there is no real way I have found to convert an HTML page layout using this library.”

@viktor_renkema Thank you very much for such a detailed description, it is very valuable for me, because I have always been interested in creating such products. I wish you great luck in your research.

@viktor_renkema By the way, using the browser feature of printing as PDF is a brilliant idea, which, however, can lead to problems if you want to add additional methods for working with the file, for example, sending by email

@panphilov Yeah fair point, ideally I also wouldn't rely on it, so who knows, if the app takes off I may refactor everything to custom parsing of the DOM to JSON that can be exported as pdf

Was just looking for something like this, nice and simple!

Invoicer Studio

Easily create invoices from a live editor

Easily create invoices from a live editor

Invoicer Studio

Easily create invoices from a live editor

Easily create invoices from a live editor

Similar Products

Do you use Invoicer Studio?

Do you use Invoicer Studio?

You might also like