# Erstellen Sie Ihr erstes PDF

Rendern Sie ein PDF aus einer vorhandenen HTML/CSS-Vorlage: Testen Sie die Daten, veröffentlichen Sie die Ausgabe und laden Sie sie herunter.

## Bevor Sie beginnen
Um Ihnen den Einstieg in Tembuilder zu erleichtern, führen wir Sie durch die Erstellung Ihres ersten PDF aus einer vorhandenen Rechnungsvorlage. Sie werden versuchen, den Inhalt zu bearbeiten, die Daten zu ändern und eine Vorschau des Ergebnisses anzuzeigen, bevor Sie ein PDF generieren – alles innerhalb der App.

Bevor Sie beginnen, melden Sie sich an und gehen Sie zum Dashboard **Vorlagen**. Sie können Ihrem Projekt mit einer der folgenden Methoden eine Vorlage hinzufügen.

## 1. Wählen Sie eine Vorlage aus und öffnen Sie sie
Verwenden Sie eine vorhandene ZIP-Datei oder wählen Sie eine Vorlage von Gallery.

### Methode 1: Importieren Sie eine ZIP-Datei

[Laden Sie die Rechnungsvorlage (.zip)](/docs/examples/invoice-template.zip) herunter, klicken Sie unter **Vorlagen** auf **Importieren** und wählen Sie die heruntergeladene Datei aus. Geben Sie einen Namen und einen Slug für die Vorlage ein und warten Sie, bis der Import abgeschlossen ist.

<figure class="doc-sim" aria-label="Importieren Sie die ZIP-Datei und öffnen Sie dann die neue Vorlage unter „Vorlagen“.">
<div class="sim-location"><span>Vorlagen</span><span>TEMBUILDER</span></div>
<div class="sim-stage"><div class="sim-template-head"><strong>Vorlagen</strong><div class="sim-actions"><span class="sim-control sim-focus">↥  Importieren</span><span class="sim-control sim-dark">＋   Neue Vorlage</span></div></div><div class="sim-template-card"><span class="sim-file">▤</span><div><strong>Meine erste Rechnung</strong><small>meine erste Rechnung</small></div><span class="sim-badge">Entwurf</span><span class="sim-arrow">↗</span></div></div>
<figcaption>Vorlagen · Importieren</figcaption>
</figure>

### Methode 2: Wählen Sie eine Vorlage aus Gallery

Öffnen Sie **Gallery**, wählen Sie eine Rechnungsvorlage aus und zeigen Sie eine Vorschau des Designs an. Fügen Sie es Ihrem Projekt hinzu, geben Sie einen Namen und einen Slug ein und warten Sie, bis es fertig ist.

<figure class="doc-sim" aria-label="Sehen Sie sich eine Gallery-Vorlage in der Vorschau an und wählen Sie Vorlage verwenden, um sie Ihrem Projekt hinzuzufügen.">
<div class="sim-stage"><div class="sim-gallery-dialog"><div class="sim-gallery-heading"><div><strong>Monochrome Servicerechnung</strong><small>Gallery · Rechnung</small></div><span aria-hidden="true">×</span></div><div class="sim-gallery-preview"><div class="sim-paper"><div class="sim-paper-brand">Tembuilder</div><div class="sim-invoice-title">RECHNUNG <small>TB-2026-0042</small></div><div class="sim-bill"><small>RECHNUNG AN</small><b>Tembuilder</b></div><div class="sim-paper-lines"><i></i><i></i><i></i></div><div class="sim-total"><small>GESAMTFÄLLIGKEIT</small><b>$597.20</b></div></div></div><div class="sim-gallery-footer"><small>A4 · 1 Seite</small><span class="sim-control sim-dark sim-focus">Vorlage verwenden</span></div></div></div>
<figcaption>Gallery → Vorlage verwenden</figcaption>
</figure>

### Öffnen Sie die Vorlage im Editor

Nachdem Sie eine Vorlage mit einer der beiden Methoden hinzugefügt haben, öffnen Sie sie in **Vorlagen**, um mit der Bearbeitung zu beginnen.

Wählen Sie im Editor einen Abschnitt in **Structure** aus. Die verfügbaren Registerkarten HTML, CSS, Props und Config hängen von Ihrer Auswahl ab. Versuchen Sie, eine Beschriftung in Props zu ändern, wenn die Vorlage dieses Feld bereitstellt, und überprüfen Sie dann die Vorschau.

<figure class="doc-sim" aria-label="Wählen Sie Rechnungsparteien in Structure aus → öffnen Sie Props → bearbeiten Sie den fromLabel-Wert.">
<div class="sim-location"><span>Editor / Structure → Props</span><span>TEMBUILDER</span></div>
<div class="sim-stage"><div class="sim-editor"><div class="sim-tree"><div class="sim-panel-title">▦   STRUKTUR <span>＋</span></div><div class="sim-tree-row">⌄   Global</div><div class="sim-tree-child sim-muted">▤   Fußzeile</div><div class="sim-tree-row">⌄   01 Rechnung <small>5</small></div><div class="sim-tree-child sim-muted">▤  Masthead der Rechnung</div><div class="sim-tree-child sim-selected">▤  Rechnungsparteien <small>4p</small></div><div class="sim-tree-child sim-muted">▤   Rechnungspositionen</div></div><div class="sim-properties"><div class="sim-tabs"><span>HTML</span><span>CSS</span><span class="sim-active">{} Props</span><span>Config</span></div><div class="sim-prop-body"><small class="sim-label">ABSCHNITT</small><strong>Rechnungsparteien</strong><div class="sim-prop-card"><div class="sim-prop-name"><b>fromLabel</b><small>Text <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></small></div><div class="sim-prop-value"><small class="sim-label">WERT</small><span class="sim-input sim-focus">VON TEMBUILDER</span><div class="sim-embed">{{ props.fromLabel }}</div></div></div></div></div></div></div>
<figcaption>Structure → Props</figcaption>
</figure>

## 2. Testen Sie die Daten und zeigen Sie eine Vorschau an
Öffnen Sie **Parameters → Schema**, um Feldnamen und Standardeinstellungen zu überprüfen. Namen unverändert lassen. **Layout** zeigt Ihre aktuellen Designänderungen.

**Speichern** Sie die Vorlage, bevor Sie **PDF** öffnen. Die PDF-Vorschau verwendet gespeicherte Vorlageninhalte und die Parameterwerte des Editors, die ursprünglich aus Defaults ausgefüllt wurden. Nachdem Sie eine weitere Änderung gespeichert haben, generieren Sie PDF neu, um sie anzuzeigen. Die vorherige Vorschau wird nicht automatisch aktualisiert. Die Vorschau verbraucht kein Renderkontingent.

Die Eingaben in **Run** sind von der PDF-Vorschau getrennt. Um neue Run-Werte zu testen, rendern und überprüfen Sie das Ergebnis dieses Jobs in den Schritten 3–4.

<figure class="doc-sim" aria-label="Parameters zeigt die Datenstruktur. Die PDF-Vorschau zeigt das PDF-Layout.">
<div class="sim-location"><span>Editor / Parameters → PDF Vorschau</span><span>TEMBUILDER</span></div>
<div class="sim-stage"><div class="sim-preview-layout"><div class="sim-data"><div class="sim-tabs"><span class="sim-active">Parameters <small>11</small></span></div><div class="sim-schema-tabs"><span>⚙ Schema</span><span>{} Payload</span></div><div class="sim-fields"><div><b>Rechnungsnummer</b><small>Text</small></div><span class="sim-input">TB-2026-0042</span><div><b>Kunde</b><small>Objekt</small></div><div class="sim-nested"><b>Unternehmen</b><span class="sim-input">Tembuilder</span></div><div><b>Werbebuchungen</b><small>Array</small></div></div></div><div class="sim-preview"><div class="sim-tabs"><span>Layout</span><span class="sim-active">PDF</span></div><div class="sim-paper"><div class="sim-paper-brand">Tembuilder</div><div class="sim-invoice-title">RECHNUNG <small>TB-2026-0042</small></div><div class="sim-bill"><small>RECHNUNG AN</small><b>Tembuilder</b></div><div class="sim-paper-lines"><i></i><i></i><i></i></div><div class="sim-total"><small>GESAMTFÄLLIGKEIT</small><b>$597.20</b></div></div></div></div></div>
<figcaption>Parameters · Schema → PDF</figcaption>
</figure>

Das [Beispiel JSON](/docs/examples/invoice-data.json) verwendet `invoiceNumber`, `seller`, `customer` und `lineItems`, passend zur obigen ZIP-Adresse. Weitere Vorlagen finden Sie im eigenen Parameters. Wenn Sie API aufrufen, fügen Sie das Datenobjekt in `parameters` ein.

## 3. Speichern, veröffentlichen und generieren
1. **Speichern** Sie Ihre Änderungen, wählen Sie die richtige Version aus und **veröffentlichen** Sie sie.
2. Erstellen Sie bei Bedarf einen Projektschlüssel API mit der Berechtigung `template:render`.
3. **Run** öffnen, Schlüssel, Version und Variante auswählen und Daten eingeben.
4. Klicken Sie auf **Rendern** und warten Sie auf den Abschluss.

<figure class="doc-sim" aria-label="Speichern und veröffentlichen Sie die Version → wählen Sie einen Schlüssel, eine Version und eine Variante in Run → Rendern aus.">
<div class="sim-location"><span>Editor / Veröffentlichen → Run</span><span>TEMBUILDER</span></div>
<div class="sim-stage"><div class="sim-publish-bar"><div><strong>Meine erste Rechnung</strong><span class="sim-badge">v1</span></div><div class="sim-actions"><span class="sim-control">Speichern</span><span class="sim-control sim-dark sim-focus">Veröffentlichen</span></div></div><div class="sim-run"><div class="sim-panel-title">ϟ   LAUFEN</div><div class="sim-run-body"><div class="sim-pickers"><div><small class="sim-label">API-TASTE</small><span class="sim-input">Mein Projektschlüssel <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div><small class="sim-label">VERSION</small><span class="sim-input">v1 <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div><small class="sim-label">VARIANTE</small><span class="sim-input">Standard <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div></div><div class="sim-code"><span>{</span><span>  „invoiceNumber“: „TB-2026-0042“,</span><span>  „Kunde“: {</span><span>    „Unternehmen“: „Tembuilder“</span><span>  }, …</span><span>}</span></div><div class="sim-render-footer"><span class="sim-badge sim-success">● Veröffentlicht</span><span class="sim-control sim-dark sim-focus">ϟ   Rendern</span></div></div></div></div>
<figcaption>Veröffentlichen → Run → Rendern</figcaption>
</figure>

> Für echte Renderings ist eine veröffentlichte Version erforderlich. Jedes erfolgreiche Rendern verbraucht Kontingent; Eine funktionierende Vorschau allein bedeutet nicht, dass eine Vorlage zum Rendern bereit ist.

## 4. Herunterladen und prüfen
Öffnen Sie nach Erfolg das Ergebnis und laden Sie PDF herunter. Sie finden den Job auch unter **Renders**. Überprüfen Sie die erste Seite, die letzte Seite und die Datenzeilen in der heruntergeladenen Datei.

<figure class="doc-sim" aria-label="Öffnen Sie ein fertiges Rendering, um PDF herunterzuladen. Finden Sie frühere Ergebnisse in Renders.">
<div class="sim-location"><span>Run / Geschichte · Renders</span><span>TEMBUILDER</span></div>
<div class="sim-stage"><div class="sim-result"><div class="sim-result-top"><span class="sim-success-mark">✓</span><div><strong>Meine erste Rechnung</strong><small>v1 · Standard</small></div><span class="sim-badge sim-success">Abgeschlossen</span></div><div class="sim-result-file"><span class="sim-file">PDF</span><div><strong>Rechnung.pdf</strong><small>Bewerbung/PDF</small></div><span class="sim-control sim-dark sim-focus">↓  Herunterladen</span></div></div></div>
<figcaption>Renders → Herunterladen</figcaption>
</figure>

Wenn dies fehlschlägt, lesen Sie die Fehlerdetails, bevor Sie es erneut versuchen. Mit jedem Render-Klick kann ein neuer Job erstellt werden. Siehe [häufige Fehler](/docs/de/help/common-errors/), wenn Sie die Ursache nicht identifizieren können.