Éditeur de templates PDF : vue d'ensemble

L’éditeur de templates est une interface visuelle, en glisser-déposer, pour construire vos templates PDF. Ce que vous voyez sur le canevas est exactement ce que contiendront vos PDF générés : ni HTML, ni code.

L’interface de l’éditeur est en anglais : les noms des boutons et des panneaux sont cités tels qu’ils apparaissent à l’écran.

La structure d’un template

Un template contient une ou plusieurs pages. Chaque page est fixe (Fixed) ou infinie (Infinite), indépendamment des autres, et les deux types se combinent librement dans un même template (par exemple, une couverture fixe suivie du corps d’une facture sur une page infinie).

Template
  ├── Page 1 : fixe, A4 portrait
  ├── Page 2 : infinie, A4 portrait
  └── Page 3 : fixe, Letter paysage

Chaque page a son propre en-tête, son propre pied de page et son propre contenu. Sur une page fixe, vous placez les éléments directement sur la page. Sur une page infinie, le contenu s’organise en sections : l’algorithme de découpage s’en sert pour répartir proprement le contenu sur plusieurs pages physiques.

La différence complète entre pages fixes et infinies est détaillée dans Pages.

L’interface de l’éditeur

L’éditeur a deux modes, accessibles depuis la barre du haut : Designer pour construire votre template, Preview pour voir le résultat final.

La vue Designer se divise en quatre zones :

1

2

3

4

1. Barre d’outils du haut

La barre d’outils court sur toute la largeur de l’éditeur et s’adapte à votre sélection : c’est là que se fait l’essentiel de la mise en forme. Sans sélection, elle est grisée ; dès que vous cliquez sur un élément, elle affiche les propriétés qui le concernent.

Pour un élément texte, la barre d’outils propose la police, la taille, la couleur du texte, le fond, gras / italique / souligné / barré, le lien, l’alignement, l’alignement vertical, les listes, l’espacement du texte, les bordures et la marge intérieure. Les autres types d’éléments proposent un ensemble équivalent, adapté à leur nature.

Au-dessus de la barre d’outils, une barre supérieure affiche les onglets de mode Designer / Preview, le nombre de pages, le nom du template, le zoom, ainsi qu’Annuler / Rétablir.

2. Panneau de gauche

Le panneau de gauche est le poste de pilotage de la page en cours d’édition. Une étiquette en haut (par exemple HEADER, TEXT) indique ce qui est sélectionné.

• Cases Header / Footer : activent l’en-tête ou le pied de page de la page en cours
• + New Section : sur une page infinie, ajoute une section pour structurer le contenu
• Palette d’éléments : Text, Image, Table, Barcode, QR Code, Line, Circle, Rectangle
• Calques (Layers) : vue hiérarchique des pages, sections et éléments. Glissez pour réordonner, cliquez pour sélectionner, double-cliquez pour renommer

La flèche du panneau le replie pour laisser plus de place au canevas.

3. Canevas (au centre)

Le canevas est votre zone de travail :

• il affiche la page sélectionnée à ses proportions réelles ;
• glissez un élément pour le déplacer, ou tirez sur ses bords pour le redimensionner ;
• cliquez sur un élément pour le sélectionner et afficher ses propriétés dans le panneau de droite ;
• le bouton + Add Page, sous le canevas, ajoute des pages au template.

4. Panneau de droite

L’essentiel de la mise en forme se trouve dans la barre d’outils du haut. Le panneau de droite ne garde que les propriétés avancées ou propres à la mise en page, qui n’y trouvent pas leur place.

• Dimensions : largeur, hauteur et position (W, H, X, Y)
• Content : pour un élément texte, un éditeur multiligne pour lire et modifier son contenu confortablement
• Typography : l’option Autoscale down, absente de la barre d’outils
• Safe Margins : quand une page est sélectionnée
• Background Image : quand une page fixe est sélectionnée

Le panneau est volontairement épuré : la barre d’outils du haut couvre la plupart des réglages, le panneau de droite regroupe les quelques réglages avancés qu’elle n’affiche pas.

Le mode aperçu

Cliquez sur l’onglet Preview de la barre du haut pour passer en mode aperçu. Vous y voyez le rendu final du PDF, avec vos données.

1

2

1. Aperçu du PDF

La partie gauche affiche le rendu complet du PDF, toutes les variables du template remplacées par des données réelles. Refresh Preview met l’aperçu à jour après vos modifications, Generate PDF télécharge le résultat.

2. Données du template

Le panneau de droite affiche les données JSON qui remplissent le template. Modifiez-les directement pour tester d’autres valeurs. Add missing key crée une entrée pour chaque variable du template qui n’en a pas encore.

Méthode de travail

Les étapes habituelles pour construire un template :

1. Ajoutez une première page : fixe ou infinie, format de papier, orientation
2. Structurez la page : des sections sur une page infinie, un placement libre sur une page fixe
3. Ajoutez le contenu : textes, images, tableaux, codes-barres, QR codes, formes
4. Insérez des variables dynamiques : des {{placeholders}} pour les champs alimentés par vos données
5. Prévisualisez : passez en mode Preview, saisissez des données de test, générez un PDF

Le template s’enregistre automatiquement pendant que vous travaillez.

Étapes suivantes

• Pages : pages fixes et infinies, marges, image de fond, découpage des pages
• Sections : structurez les pages infinies
• En-tête et pied de page : ajoutez un contenu répété sur chaque page
• Composants : le détail de chaque type d’élément

Une fois votre template prêt, branchez-le sur l’API ou sur un outil d’automatisation :

• Pour les développeurs : API REST, SDK et exemples de code
• Pour le no-code : Zapier, n8n, Airtable, MCP