Zum Inhalt springen
nullish

Rechnungsvorlagen

nullish bringt eine schlichte Standardvorlage auf Englisch, Deutsch, Französisch und Italienisch mit. Sollen deine Rechnungen nach dir aussehen, gestalte deine eigene: Die ganze Seite gehört dir, nicht bloss Logo und eine Textzeile.

Vorlagen baust du mit dem Projekt nullish templates. Es zeigt deine Rechnung live mit Beispieldaten, so siehst du jede Änderung sofort. Die Arbeit kann eine KI für dich erledigen, oder du legst selbst Hand an.

Das Projekt holen

Abschnitt betitelt „Das Projekt holen“

  1. Willst du deine Vorlagen in einem eigenen Repository haben, forke usenullish/templates auf GitHub. Dann klone es:

    Terminal-Fenster
    git clone https://github.com/usenullish/templates.git
    cd templates
    npm install

  2. Starte die Vorschau und öffne localhost:4321:

    Terminal-Fenster
    npm run dev

Mit einer KI gestalten

Abschnitt betitelt „Mit einer KI gestalten“

Öffne das Projekt in einem Coding-Assistenten wie Claude Code, Cursor oder Copilot und beschreib, was du willst:

  • «Verwende mein Logo aus logo.svg oben links und unsere Markenfarbe #1d4ed8 für die Titel.»
  • «Setze unsere Adresse in die Fusszeile und die Bankangaben neben die Totale.»
  • «Mach es ähnlich wie dieses PDF» (mit einer alten Rechnung im Anhang).

Das Projekt beschreibt alle Rechnungsdaten, der Assistent weiss also, womit er arbeiten kann. Lass die Vorschau daneben offen und feile weiter, bis es passt.

Oder selbst bearbeiten

Abschnitt betitelt „Oder selbst bearbeiten“

Die Rechnungsvorlage liegt unter src/templates/invoices/:

  • Invoice.astro ist das Layout: was auf der Seite steht, und wo.
  • i18n.json enthält die Texte auf Englisch, Französisch, Deutsch und Italienisch.

Gestalte sie mit normalem CSS oder Tailwind-Klassen. Grössen gibst du in Millimetern an, wie auf Papier. Alle Rechnungsdaten und die Vorlagensyntax findest du im README des Projekts.

In nullish hochladen

Abschnitt betitelt „In nullish hochladen“

  1. Baue die Vorlage:

    Terminal-Fenster
    npm run build

    Du bekommst pro Sprache eine Datei in templates/invoices/: en.html, fr.html, de.html und it.html.

  2. Geh in nullish zu Einstellungen → Rechnungsstellung → Dokumentvorlagen und erstelle eine Vorlage. Gib ihr einen Name.

  3. Wähle für jede Sprache, in der du Rechnungen stellst, Inhalt hinzufügen: Sprache wählen und die passende Datei hochladen, z. B. fr.html für Französisch.

Beim Generieren eines Rechnungs-PDF wählst du deine Vorlage unter Dokumentvorlage. Du kannst mehrere haben, etwa eine pro Marke.