Jonathan T. Neal

The HTML5 Invoice

written by jonathantneal on June 25, 2012 in CSS and JavaScript with 49 comments

← older posts newer posts →

One of my favorite developers to follow is Chris Coyier. His posts and tutorials at CSS-Tricks are a delight to read. Of his many innovations, one of my favorite is the handy, lightweight HTML Invoice. After using it myself, I thought I would share my own tribute to his work.

So here it is, HTML5 Invoice, a tool that helps you create invoices on the fly, anywhere, without any additional software. Pages are printed perfectly to 8.5×11 standard sheets.

Invoice

The output is precise. The CSS -webkit-print-color-adjust property is used to ensure the print is exactly what one would expect. The @page rule is used to normalize margins across printers. The markup is short and sweet. Validators, lifeless or living can appreciate the semantic usage of old and new HTML elements. The page is easily and fully customizable. Content editable is employed to update labels and values as the balance calculations refresh and beautify themselves through JavaScript. Branding can be modified with a click on the picture, or my simply dragging and dropping a new one onto the existing image.

Use it now, or download the source to give it a new style.

The HTML5 Invoice

Polyfills and Prototypes

http://www.paulwallas.com Paul Wallas

Perfect! This is exactly what I need at this moment in time, saves the use of Dropbox and changing page set up for UK/US clients.

Thanks
- Mark Wyman
  
  Is it possible and or easy to make defaults like $ into £ so they don’t have to be changed every time ?
http://www.future-proofwebdesign.com Julia

Thank you to Mr. Coyier for the HTML5 Invoice. As a freelancer just transitioning from an agency setting, I need all the free tools I can get! An invoicing system was on my to-do list for the week. Perfect timing! Thanks again.
http://kodington.com Peter

Thank you for this useful tool!

Can strings “Invoice #”, “Date”, “Amount Due”, “Total”, “Amount Paid”, “Balance Due” also be made editable? That would make your invoice tool international.
- jonathantneal
  
  Great suggestion, thank you. I’ll do you better. Now you can edit all of the meta and balance fields, and you can use your keyboard arrows and mousewheel to adjust values and prices.
http://www.woutertinbergen.nl wouter tinbergen

thanks for taking it even further into HTML.

I love the details you included for printing !

Thanks!
Wouter
http://bitlucid.com Roy

Usually I use google docs and a spreadsheet and print to PDF to avoid the inevitable formatting problems and so that I can send the invoice from anywhere. HTML version might be useful if one were able to email it well? I guess printing to PDF is what you’d have to do there.
Pingback: Des pixels et du code #16 - Stéphanie Walter : Webdesign - intégration web
Erwin Okken

It would be great if the template will be saved, so you don’t have to rewrite everything!
http://www.mte90.net/ Mte90

*.*
i will try to create a flat file system to manipulate the invoice!
Thanks for the share!
http://www.webbymatt.co.uk Matt

seems pretty simple, nice to get somebody started on freelancing but not robust enough for busier freelancers/teams. I wonder how much this idea can be developed (I’m thinking appcaching etc to create a loaded online suite, lol)
Andrew Barringer

Please add a license header/file? Hopefully MIT or something similar?

I’m hoping to borrow snippets from it but it has to pass our OSS code audits.

Thanks,
Andy
- jonathantneal
  
  Done. Line 7. I hope this will suffice. Let me know, otherwise.
  - Andrew Barringer
    
    Thanks for the license that will work.
    
    Andy
http://streetlights.dk/ Dan

And to think that I’ve used Excel on a daily basis for almost a year now. Oh, the joy.. I love how simple and user-friendly this system is (even more so now that you’ve added the option of using arrow keys and/or mousewheel) and I can’t thank you enough!
http://www.gleenk.com/portfolio/ Davide De Maestri

Please make $ symbol editable, we need €!
- jonathantneal
  
  Good news, it is! Click or tab to the $ next to “Amount Due”.
http://pluscreativity.com Chi

This is bloody awesome! Never really thought about using HTML to sort out my financials. very slick
Daniel Ruf

Do you plan to release the full sourcecode also on github? Would be great =)

Also a great solution: http://www.manager.io/ =)
- jonathantneal
  
  Here you go! https://github.com/jonathantneal/html5-invoice
Amit_t

Great tool, thanks for showing me the way to use HTML 5.
A suggestion : can you incorporate a calendar widget in the date field?
Pingback: pinboard July 5, 2012 — arghh.net
Pingback: What’s new for designers, July 2012 | Webdesigner Depot
Pingback: What’s new for designers, July 2012 | CSS Tips
Pingback: What’s new for designers, July 2012 | Indoor Digital Billboards
Pingback: What’s new for designers, July 2012
Pingback: What’s new for designers, July 2012 | Blue Sparrow Media
Pingback: What’s new for designers, July 2012 « design-iphone-apps
Pingback: UK Web Design Now! » Post Topic » What’s new for designers, July 2012
http://jasonlcurby.com Jason

This is a great little tool thanks, and the invoice it prints looks clean and professional. Love it.
Chris

Nice stuff! Thank you for sharing!
Too bad, it’s only for one-page invoices. If you have more content, the rest is simply cropped off.

A solution for this would be awesome!
Abhilash

Awesome code, works perfectly for invoicing.

I am also planning to use this for Purchase Order generation. Sometimes, the line item count in that goes beyond 15. In which case the rest of items and/or additional notes get hidden. Any idea how to handle this scenario?
http://www.mte90.net/ Mte90

github repo it’s possible?
http://www.mte90.net/ Mte90

i have made a github repo for an Invoice App that use this gui.
https://github.com/Mte90/Invoice-Manager
Yehuda

Great Invoice!!! If I wanted to use this format as a cover page for the invoice and then more pages afterwards how would I do this? When I add content to the bottom it gets cut off where the page ends. I want to be able to add more pages that are also in a printable friendly format.
PKP

How do you set the default page break when the data length is more than one page also page break conditionally
spirit_104

to anyone else who couldnt get the cut button to work in firefox add this to your css file

@-moz-document url-prefix() {
.cut {left: 19.2em; opacity 1s ease-in-out; transition: opacity 1s ease-in-out;}
}

you might have to change the left property a little but that should fix it
http://www.novastream.se Jonathan Lindgren

Great invoice!

Is there anyway to add taxes and subtotal ?

Best regards
santis

Thank you for sharing!
how can invoice # be automatic?
Ray

Great Job, but i need to save all items, descriptions, qty, price, total ….
Alya

Great job!
Just 1 question, how can I generate many invoices (multi-pages) ?
I’ve used css page-break-after, but didn’t work.

Thanks in advance!
john jones

Anyway to save off as a PDF after editing online? That would be sweet.
- jonathantneal
  
  Yea, in most browsers when you go to Print the page and the dialog comes up, you can change the destination to PDF.
jvboyle

This is one of the Best things i have ever found!!!!! great work…..I was tring to integrate a Paypal button to Use the total and check out. Do you think that would work ?
JacoSwarts

I built an app off your template to invoice completed asana (http://asana.com) tasks and keep data in mongodb. Made with meteor (http://meteor.com). Would love some feedback! Its still in Beta but available at http://invoicing.productive.me
Monique

For Firefox I used this to fix the error to remove the column

@-moz-document url-prefix() {
.cut {top: auto; opacity 1s ease-in-out; transition: opacity 1s ease-in-out;}
}
Sebastian

Great format, but i cant print multi pages
John T. Rollins

Seriously ugly and horrible typesetting. If you were a real pro you’d use LaTeX.
- http://namuol.github.com/ namuol
  
  If you’re planning on emailing PDFs to all your clients, go for it.

The HTML5 Invoice

Related Articles

The HTML5 Invoice

Polyfills and Prototypes