Noeuds HTML

Les Noeuds HTML convertissent des modeles HTML/CSS personnalises en images avec injection de donnees dynamiques. Creez des cartes de titre, des visuels pour les reseaux sociaux, des visualisations de donnees, des fiches produit ou tout autre visuel personnalise — puis utilisez-les comme entrees pour la generation video ou exportez-les directement.

Qu’est-ce qu’un Noeud HTML ?

Le Noeud HTML est un mini moteur de rendu web au sein de votre workflow. Ecrivez du HTML et du CSS (ou laissez l’IA les generer), injectez des donnees dynamiques depuis d’autres noeuds en utilisant des variables handlebar ({{nomVariable}}), et le noeud les convertit en image de sortie.

Entrees et Sorties

Port	Direction	Type	Description
input (mappe)	Entree	Texte	Variables dynamiques via `{{nomVar}}` — depuis Text, JSON Parser, List Selector, Fetch, Concatenator
output	Sortie	Image	HTML rendu en image → Scene, Upscaler, Canvas, Google Drive Export

Controles de l’Inspecteur

Editeur HTML/CSS

Ecrivez votre modele HTML avec du CSS inline. L’editeur prend en charge HTML5 et CSS3 standard.

Generation de Code IA

Decrivez ce que vous voulez en langage naturel, et l’IA genere le HTML/CSS pour vous.

Exemple de prompt : “Cree une carte de titre avec un fond degrade, un grand texte blanc centre et une ombre portee subtile”

Mappage de Variables

Chaque {{nomVariable}} dans votre HTML correspond a une connexion d’entree. Connectez des noeuds pour fournir des valeurs dynamiques.

Apercu en Direct

Visualisez le rendu en temps reel de votre modele pendant l’edition. Se met a jour automatiquement lorsque les donnees connectees changent.

Tag

Attribuez un tag comme @carte-titre pour referencer la sortie de ce noeud.

Syntaxe Handlebar

Utilisez des doubles accolades pour injecter du contenu dynamique :

<div class="card">
  <h1>{{title}}</h1>
  <p>{{description}}</p>
  <img src="{{imageUrl}}" alt="Product" />
  <span class="price">{{price}}</span>
</div>

Chaque {{variable}} devient un port d’entree. Connectez un Noeud Texte, JSON Parser ou une autre source de texte pour fournir la valeur a l’execution.

Comment l’Utiliser

Ajoutez un Noeud HTML au canvas
Ecrivez du HTML/CSS dans l’editeur, OU utilisez la generation de code IA
Ajoutez des espaces reserves {{nomVariable}} la ou vous voulez du contenu dynamique
Connectez des sources de texte aux ports d’entree des variables
Verifiez l’apercu en direct pour confirmer le rendu
Connectez la sortie a un Noeud Scene (pour la video) ou exportez

Exemples de Workflow

Cartes de Titre Dynamiques

Noeud Texte (“Episode 1 : Le Commencement”) → Noeud HTML avec modele :

<div style="background: linear-gradient(135deg, #667eea, #764ba2);
            width: 1920px; height: 1080px; display: flex;
            align-items: center; justify-content: center;">
  <h1 style="color: white; font-size: 80px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
    {{title}}
  </h1>
</div>

→ Noeud Scene (anime la carte de titre en intro video)

Fiche Produit depuis une API

Fetch (API produit) → JSON Parser (extraire nom, prix, imageUrl) → Noeud HTML (modele de fiche produit avec {{name}}, {{price}}, {{imageUrl}}) → Scene (video vitrine produit)

Conseils et Bonnes Pratiques

Definissez des dimensions explicites dans votre CSS (ex. width: 1920px; height: 1080px) pour une resolution de sortie coherente
Utilisez la generation de code IA pour les mises en page complexes — decrivez ce que vous voulez en langage naturel
Testez d’abord avec des donnees statiques : codez en dur les valeurs pour verifier le modele, puis remplacez par des {{variables}}
Les animations CSS ne sont PAS rendues — seule l’image statique est capturee
Polices web : Les polices systeme standard sont disponibles. Pour les polices personnalisees, utilisez @font-face inline en base64
Gardez les modeles simples et cibles — du JavaScript complexe ne s’executera pas dans le moteur de rendu

Depannage

Les variables ne s’affichent pas

Verifiez que le nom de la variable dans {{nomVar}} correspond exactement au libelle de la connexion d’entree (sensible a la casse).

Le CSS n’est pas applique

Assurez-vous que le CSS est soit inline (style="") soit dans un tag <style> a l’interieur du modele. Les feuilles de style externes ne sont pas chargees.

Problemes de qualite d’image

Definissez des dimensions en pixels explicites correspondant a votre cible (1920×1080 pour HD, 3840×2160 pour 4K). N’utilisez pas de dimensionnement base sur les pourcentages.

Le modele apparait vide

Verifiez les erreurs de syntaxe HTML. Essayez d’abord un modele minimal (<h1>Bonjour</h1>) et construisez a partir de la.

Voir Aussi

Noeuds Texte — Fournissez du texte dynamique pour les modeles
Noeuds Fetch — Importez des donnees d’API dans les modeles
Noeuds JSON Parser — Extrayez des champs specifiques pour les variables de modele
Scenes — Animez les modeles rendus en video