# Créez votre premier PDF

Créez un PDF à partir d'un modèle HTML/CSS existant : testez les données, publiez et téléchargez la sortie.

## Avant de commencer
Pour vous aider à vous familiariser avec Tembuilder, nous vous guiderons dans la création de votre premier PDF à partir d'un modèle de facture existant. Vous essaierez de modifier le contenu, de modifier les données et de prévisualiser le résultat avant de générer un PDF, le tout dans l'application.

Avant de commencer, connectez-vous et accédez au tableau de bord **Modèles**. Vous pouvez ajouter un modèle à votre projet en utilisant l'une des méthodes ci-dessous.

## 1. Choisissez et ouvrez un modèle
Utilisez un fichier ZIP existant ou choisissez un modèle parmi Gallery.

### Méthode 1 : Importer un fichier ZIP

[Téléchargez le modèle de facture (.zip)](/docs/examples/invoice-template.zip), cliquez sur **Importer** dans **Modèles** et sélectionnez le fichier téléchargé. Entrez un nom et un slug pour le modèle, puis attendez la fin de l'importation.

<figure class="doc-sim" aria-label="Importez le ZIP, puis ouvrez le nouveau modèle dans Modèles.">
<div class="sim-location"><span>Modèles</span><span>CONSTRUCTEUR DE TEM</span></div>
<div class="sim-stage"><div class="sim-template-head"><strong>Modèles</strong><div class="sim-actions"><span class="sim-control sim-focus">↥   Importer</span><span class="sim-control sim-dark">＋   Nouveau modèle</span></div></div><div class="sim-template-card"><span class="sim-file">▤</span><div><strong>Ma première facture</strong><small>ma-première-facture</small></div><span class="sim-badge">Brouillon</span><span class="sim-arrow">↗</span></div></div>
<figcaption>Modèles · Importer</figcaption>
</figure>

### Méthode 2 : Choisissez un modèle parmi Gallery

Ouvrez **Gallery**, sélectionnez un modèle de facture et prévisualisez le design. Ajoutez-le à votre projet, entrez un nom et un slug, et attendez la fin.

<figure class="doc-sim" aria-label="Prévisualisez un modèle Gallery et sélectionnez Utiliser le modèle pour l'ajouter à votre projet.">
<div class="sim-stage"><div class="sim-gallery-dialog"><div class="sim-gallery-heading"><div><strong>Facture de service monochrome</strong><small>Gallery · Facture</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">FACTURE <small>TB-2026-0042</small></div><div class="sim-bill"><small>FACTURE À</small><b>Tembuilder</b></div><div class="sim-paper-lines"><i></i><i></i><i></i></div><div class="sim-total"><small>TOTAL DÛ</small><b>$597.20</b></div></div></div><div class="sim-gallery-footer"><small>A4 · 1 page</small><span class="sim-control sim-dark sim-focus">Utiliser le modèle</span></div></div></div>
<figcaption>Gallery → Utiliser le modèle</figcaption>
</figure>

### Ouvrez le modèle dans l'éditeur

Après avoir ajouté un modèle en utilisant l'une ou l'autre méthode, ouvrez-le dans **Modèles** pour commencer l'édition.

Dans l'éditeur, sélectionnez une section dans **Structure**. Les onglets HTML, CSS, Props et Config disponibles dépendent de votre sélection. Essayez de modifier une étiquette dans Props si le modèle fournit ce champ, puis vérifiez l'aperçu.

<figure class="doc-sim" aria-label="Sélectionnez les parties de facturation dans Structure → ouvrez Props → modifiez la valeur fromLabel.">
<div class="sim-location"><span>Éditeur / Structure → Props</span><span>CONSTRUCTEUR DE TEM</span></div>
<div class="sim-stage"><div class="sim-editor"><div class="sim-tree"><div class="sim-panel-title">▦  STRUCTURE <span>＋</span></div><div class="sim-tree-row">⌄   Global</div><div class="sim-tree-child sim-muted">▤   Pied de page</div><div class="sim-tree-row">⌄   01 Facture <small>5</small></div><div class="sim-tree-child sim-muted">▤   En-tête de facture</div><div class="sim-tree-child sim-selected">▤   Parties de facturation <small>4p</small></div><div class="sim-tree-child sim-muted">▤   Articles de facture</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">SECTION</small><strong>Parties de facturation</strong><div class="sim-prop-card"><div class="sim-prop-name"><b>fromLabel</b><small>Texte <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">VALEUR</small><span class="sim-input sim-focus">DE TEMBUILDER</span><div class="sim-embed">{{ props.fromLabel }}</div></div></div></div></div></div></div>
<figcaption>Structure → Props</figcaption>
</figure>

## 2. Essayez les données et prévisualisez
Ouvrez **Parameters → Schema** pour inspecter les noms de champs et les valeurs par défaut. Gardez les noms inchangés. **Mise en page** affiche vos modifications de conception actuelles.

**Enregistrez** le modèle avant d'ouvrir **PDF**. L'aperçu PDF utilise le contenu du modèle enregistré et les valeurs des paramètres de l'éditeur, initialement renseignés à partir de Defaults. Après avoir enregistré une autre modification, régénérez le PDF pour le voir ; l'aperçu précédent ne se met pas à jour automatiquement. L'aperçu ne consomme pas de quota de rendu.

Les entrées dans **Run** sont distinctes de l'aperçu PDF. Pour tester les nouvelles valeurs Run, effectuez le rendu et inspectez le résultat de cette tâche aux étapes 3 et 4.

<figure class="doc-sim" aria-label="Parameters affiche la structure des données. L'aperçu PDF montre la disposition PDF.">
<div class="sim-location"><span>Éditeur / Parameters → Aperçu PDF</span><span>CONSTRUCTEUR DE TEM</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>numéro de facture</b><small>Texte</small></div><span class="sim-input">TB-2026-0042</span><div><b>client</b><small>Objet</small></div><div class="sim-nested"><b>entreprise</b><span class="sim-input">Tembuilder</span></div><div><b>éléments de ligne
Logo</b><small>Tableau</small></div></div></div><div class="sim-preview"><div class="sim-tabs"><span>Disposition</span><span class="sim-active">PDF</span></div><div class="sim-paper"><div class="sim-paper-brand">Tembuilder</div><div class="sim-invoice-title">FACTURE <small>TB-2026-0042</small></div><div class="sim-bill"><small>FACTURE À</small><b>Tembuilder</b></div><div class="sim-paper-lines"><i></i><i></i><i></i></div><div class="sim-total"><small>TOTAL DÛ</small><b>$597.20</b></div></div></div></div></div>
<figcaption>Parameters · Schema → PDF</figcaption>
</figure>

L'[exemple JSON](/docs/examples/invoice-data.json) utilise `invoiceNumber`, `seller`, `customer` et `lineItems`, correspondant au ZIP ci-dessus. Pour les autres modèles, consultez leur propre Parameters. Lors de l'appel du API, placez l'objet de données dans `parameters`.

## 3. Enregistrez, publiez et générez
1. **Enregistrez** vos modifications, sélectionnez la bonne version et **publier**.
2. Créez une clé de projet API avec l'autorisation `template:render` si nécessaire.
3. Ouvrez **Run**, sélectionnez la clé, la version et la variante, puis saisissez les données.
4. Cliquez sur **Render** et attendez la fin.

<figure class="doc-sim" aria-label="Enregistrez et publiez la version → sélectionnez une clé, une version et une variante dans Run → Render.">
<div class="sim-location"><span>Éditeur / Publier → Run</span><span>CONSTRUCTEUR DE TEM</span></div>
<div class="sim-stage"><div class="sim-publish-bar"><div><strong>Ma première facture</strong><span class="sim-badge">v1</span></div><div class="sim-actions"><span class="sim-control">Enregistrer</span><span class="sim-control sim-dark sim-focus">Publier</span></div></div><div class="sim-run"><div class="sim-panel-title">ϟ   COURIR</div><div class="sim-run-body"><div class="sim-pickers"><div><small class="sim-label">CLÉ API</small><span class="sim-input">Clé de mon projet <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">Norme <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>  "client": {</span><span>    "entreprise": "Tembuilder"</span><span>  }, …</span><span>}</span></div><div class="sim-render-footer"><span class="sim-badge sim-success">● Publié</span><span class="sim-control sim-dark sim-focus">ϟ   Rendu</span></div></div></div></div>
<figcaption>Publier → Run → Rendu</figcaption>
</figure>

> Les rendus réels nécessitent une version publiée. Chaque rendu réussi consomme du quota ; un aperçu fonctionnel à lui seul ne signifie pas qu'un modèle est prêt à être rendu.

## 4. Téléchargez et vérifiez
Après succès, ouvrez le résultat et téléchargez le PDF. Vous pouvez également trouver le poste dans **Renders**. Vérifiez la première page, la dernière page et les lignes de données du fichier téléchargé.

<figure class="doc-sim" aria-label="Ouvrez un rendu terminé pour télécharger le PDF. Recherchez les résultats précédents dans Renders.">
<div class="sim-location"><span>Run / Historique · Renders</span><span>CONSTRUCTEUR DE TEM</span></div>
<div class="sim-stage"><div class="sim-result"><div class="sim-result-top"><span class="sim-success-mark">✓</span><div><strong>Ma première facture</strong><small>v1 · Norme</small></div><span class="sim-badge sim-success">Terminé</span></div><div class="sim-result-file"><span class="sim-file">PDF</span><div><strong>facture.pdf</strong><small>candidature/pdf</small></div><span class="sim-control sim-dark sim-focus">↓  Télécharger</span></div></div></div>
<figcaption>Renders → Télécharger</figcaption>
</figure>

En cas d'échec, lisez les détails de l'erreur avant de réessayer. Chaque clic de rendu peut créer un nouveau travail. Voir [erreurs courantes](/docs/fr/help/common-errors/) si vous ne parvenez pas à identifier la cause.