InvoiceSnap

Een factuur maken is een taak die miljoenen mensen een paar keer per maand hebben en die niemand leuk vindt. De zoekvraag erachter is bijna altijd hetzelfde: iemand wil nu een net document, met de juiste regels en het juiste totaal, en daarna weer verder. Het is een afgebakend probleem met een duidelijk eindpunt.

De bestaande tools in die niche behandelen dat eindpunt als een probleem. Ze vragen eerst een e-mailadres, zetten een watermerk op de gratis export, of bewaren de factuur achter een account zodat je terugkomt. De PDF wordt vaak op een server gebouwd, wat betekent dat je klantnaam, adres en bedragen naar een derde partij stuurt voor iets wat een browser zelf ook kan.

Wij zagen daar een simpele keuze: de tool wél af maken. InvoiceSnap heeft geen account, geen proefperiode en geen watermerk, omdat er niets achter zit dat verkocht moet worden. De belofte in de codebase is dezelfde als die op de site staat: een gratis factuurgenerator die in je eigen browser draait, zonder registratie en zonder uploads.

InvoiceSnap heeft een eigen designsysteem, geen template en geen CSS-framework. De stijl staat in één stylesheet, opgebouwd rond CSS-variabelen: een rustige lichte achtergrond, inktzwarte tekst, en indigo als het dragende accent. Inter is het lettertype, geladen via next/font zodat er tijdens het bezoek geen extern verzoek nodig is om de tekst te laten staan zoals hij bedoeld is.

De visuele keuze komt voort uit het onderwerp. Een factuur is een document, geen app-scherm. Daarom is het live voorbeeld op de generator geen abstracte samenvatting maar een herkenbaar vel papier: een gekleurde kopband met het documenttype en het nummer, adresblokken links en rechts, een gelinieerde regeltabel en een totalenblok rechtsonder. Je ziet het document groeien terwijl je typt, in de vorm waarin het straks bij je klant belandt.

Die kleurband is meteen het scharnier van het hele systeem. De zes templatestijlen laten de indeling ongemoeid en wisselen het accent: indigo voor de neutrale standaard, teal voor freelancers, amber voor ramingen en offertes, violet voor bedrijven die btw of sales tax op een eigen regel willen, karmijn voor vakmensen die arbeid en materiaal factureren, en blauw voor producten per stuk. De amberen stijl is de enige die in de offertegenerator opent in plaats van de factuurgenerator, waardoor de kop een offerte leest en de vervaldatum een geldig-tot-datum wordt. Omdat de stijlen één indeling delen, belooft een templatepagina niets wat de generator niet levert.

De site draait op Next.js 16 met de App Router, React 19 en TypeScript in strict-modus. Buiten Next en React staat er één afhankelijkheid in de package.json: jsPDF. Het configuratiebestand van Next is leeg gebleven. Alles wat de site kan, kan hij met de standaardmiddelen van het framework, en dat is een bewuste rem op complexiteit die we later zouden moeten onderhouden.

Er is geen backend en geen database. In de codebase staat geen route handler en geen server action, dus wat je met de generator doet, gebeurt in je eigen browser. Je vult het formulier in, React houdt de state bij, en de PDF wordt met jsPDF opgebouwd op A4-formaat: de kopband in de gekozen accentkleur, de regels met een eigen paginabreuk als de lijst lang wordt, en een footerregel met je opmerkingen. Het concept wordt gedebounced weggeschreven naar de local storage van het apparaat, zodat je morgen verder kunt waar je gebleven was, zonder dat er iets is geüpload. De enige plek op de site die een verzoek naar buiten doet is het contactformulier, dat een bericht naar een extern endpoint post. Dat staat los van de tool zelf.

Het voorbeeld en de PDF zijn twee aparte tekeningen: het ene is HTML in Inter, het andere wordt punt voor punt opgebouwd in jsPDF. Wat ze delen is wat ertoe doet. De accentkleur komt uit dezelfde catalogus die ook de templatepagina's vult, met een indigo terugval als de hex niet deugt, en de rekenlogica komt uit één functie die beide voedt. Subtotaal, korting, belastinggrondslag, belasting en totaal worden op één plek berekend en elk apart op twee decimalen afgerond, dus op de cent. Bij een factuur is dat geen nette-code-argument maar een correctheidseis. Voor de bezoeker vertaalt zich dat in drie dingen: de pagina is er direct, de tool werkt zonder te wachten op een server, en de gegevens van zijn klant blijven op zijn eigen apparaat.

De 19 pagina's zijn statisch voorgerenderd. Titel, beschrijving, h1, canonical, OG-tekst en sitemap-prioriteit komen per pagina uit één centraal contentmodel, dat tegelijk de navigatie, de footerlinks, de JSON-LD en de sitemap voedt. Een titel aanpassen betekent dus niet dat je daarna de footer en de sitemap nog moet nalopen, en op een site die langzaam groeit is dat meer waard dan een eenmalige optimalisatieslag. De zes templatepagina's worden programmatisch gegenereerd uit dezelfde catalogus die de generator gebruikt, elk met eigen tekst over voor wie de stijl bedoeld is.

De social-kaart is er één voor de hele site, via next/og gerenderd op de indigo gradient, waar de pagina's met hun eigen titel en beschrijving naar verwijzen. Gestructureerde data zit op de vijftien inhoudelijke pagina's: de home, de twee generatoren, de templategalerij met haar zes stijlpagina's, en de vijf gidsen. Daar staat steeds een FAQ-blok en een breadcrumb, en op de vijf gidsen daarnaast een Article-markering. De vier sitepagina's over, privacy, voorwaarden en contact krijgen bewust geen JSON-LD, omdat daar niets te markeren valt wat een zoekmachine verder helpt. Wat er ook bewust níet in zit, is een SoftwareApplication-node: Google wil daar een beoordelingsscore bij, en die verzinnen we niet. De node weglaten is dan eerlijker dan hem invullen.

Ook de kleine dingen zijn met opzet gedaan. De sitemap draagt een vaste inhoudsdatum in plaats van de builddatum, want wie bij elke deploy alle URL's als gewijzigd stempelt, leert crawlers juist om dat signaal te negeren. Er is een llms.txt voor AI-antwoordmachines en een script dat na een deploy de URL's uit de sitemap bij IndexNow aanmeldt. De advertentieslots en de consentbanner staan als inerte placeholders in de code, achter een omgevingsvariabele die uit staat: ze renderen vandaag niets, zodat er niets meelift op de bezoeker zolang er nog geen netwerk gekozen is.

Een generator alleen beantwoordt maar een deel van de vraag. Rond de twee tools voor facturen en offertes staat daarom een set gidspagina's over de dingen waar mensen op vastlopen: hoe je een factuur opbouwt die betaald wordt, welk factuurnummerformaat je kiest, wanneer je een proforma stuurt in plaats van een offerte, en hoe je vaste klanten periodiek factureert.

Die gidsen zijn geen vulling. Op de pagina over factuurnummers staat een klein hulpje dat je je volgende vier nummers laat zien op basis van je prefix, je startnummer en of je het jaartal meeneemt. Het is dezelfde filosofie als de generator zelf: laat het antwoord zien in plaats van het te beschrijven. En omdat ook dat in de browser rekent, zit er geen wachttijd tussen de tekst lezen en het antwoord krijgen.

De voorbeelddata in de generator is bewust fictief, en dat staat ook zwart op wit op de over-pagina. Acme Studio factureert Globex Ltd voor een huisstijl, wat uren aan een landingspagina en een paar illustratielicenties. Wie de tool opent, ziet meteen een ingevulde factuur met drie regels en een belastingpercentage, zodat duidelijk is wat het ding doet voordat je zelf iets hoeft te typen. Dat is de snelste route van een zoekresultaat naar een begrepen tool.

De eerste commit dateert van 3 juli 2026 en de site staat live op invoicesnap.net. Hij is een van de 28 organische tool-sites die we zelf bouwen, publiceren en blijven bijstellen. Het domein is jong, dus de vindbaarheid moet zich nog opbouwen, en dat is precies waarom de fundamenten nu al goed staan in plaats van later: statische pagina's, één contentbron, en structured data die niets claimt wat er niet is.

Voor ons is InvoiceSnap het bewijs van iets specifieks. Niet dat we een pagina kunnen opleveren, maar dat we een niche kunnen kiezen, er een merk en een designsysteem voor kunnen bouwen zonder framework of template, de techniek zo kunnen inrichten dat privacy een gevolg van de architectuur is in plaats van een belofte in een tekst, en het geheel zo kunnen structureren dat het gevonden wordt. Van strategie tot CSS tot sitemap, in eigen huis.