Empezar
Empezar
Documentation Menu

Nodos HTML

Los Nodos HTML renderizan plantillas HTML/CSS personalizadas en imagenes con inyeccion de datos dinamicos. Crea tarjetas de titulo, graficos para redes sociales, visualizaciones de datos, tarjetas de producto o cualquier elemento visual personalizado — luego usalos como entrada para la generacion de video o exportalos directamente.

Que es un Nodo HTML?

El Nodo HTML es un mini renderizador web dentro de tu workflow. Escribe HTML y CSS (o deja que la IA lo genere), inyecta datos dinamicos desde otros nodos usando variables handlebar ({{nombreVariable}}), y el nodo lo renderiza como una imagen de salida.

Entradas y Salidas

PuertoDireccionTipoDescripcion
input (mapeado)EntradaTextoVariables dinamicas mediante {{nombreVar}} — desde Text, JSON Parser, List Selector, Fetch, Concatenator
outputSalidaImagenHTML renderizado como imagen → Escena, Upscaler, Canvas, Google Drive Export

Controles del Inspector

Editor HTML/CSS

Escribe tu plantilla HTML con CSS inline. El editor soporta HTML5 y CSS3 estandar.

Generacion de Codigo IA

Describe lo que quieres en lenguaje natural y la IA genera el HTML/CSS por ti.

  • Ejemplo de prompt: “Crea una tarjeta de titulo con fondo degradado, texto blanco grande centrado y una sombra sutil”

Mapeo de Variables

Cada {{nombreVariable}} en tu HTML corresponde a una conexion de entrada. Conecta nodos para proporcionar valores dinamicos.

Vista Previa en Vivo

Visualiza el renderizado en tiempo real de tu plantilla mientras la editas. Se actualiza automaticamente cuando cambian los datos conectados.

Tag

Asigna un tag como @tarjeta-titulo para referenciar la salida de este nodo.

Sintaxis Handlebar

Usa llaves dobles para inyectar contenido dinamico:

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

Cada {{variable}} se convierte en un puerto de entrada. Conecta un Nodo de Texto, JSON Parser u otra fuente de texto para proporcionar el valor en tiempo de ejecucion.

Como Usarlo

  1. Agrega un Nodo HTML al canvas
  2. Escribe HTML/CSS en el editor, O usa la generacion de codigo IA
  3. Agrega marcadores {{nombreVariable}} donde quieras contenido dinamico
  4. Conecta fuentes de texto a los puertos de entrada de variables
  5. Verifica la vista previa en vivo para confirmar el renderizado
  6. Conecta la salida a un Nodo de Escena (para video) o exporta

Ejemplos de Workflow

Tarjetas de Titulo Dinamicas

Nodo de Texto (“Episodio 1: El Comienzo”) → Nodo HTML con plantilla:

<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>

→ Nodo de Escena (anima la tarjeta de titulo en una intro de video)

Tarjeta de Producto desde API

Fetch (API de producto) → JSON Parser (extraer nombre, precio, imageUrl) → Nodo HTML (plantilla de tarjeta de producto con {{name}}, {{price}}, {{imageUrl}}) → Escena (video de muestra de producto)

Consejos y Mejores Practicas

  • Establece dimensiones explicitas en tu CSS (ej. width: 1920px; height: 1080px) para una resolucion de salida consistente
  • Usa la generacion de codigo IA para layouts complejos — describe lo que quieres en lenguaje natural
  • Prueba primero con datos estaticos: escribe valores fijos para verificar la plantilla, luego reemplazalos con {{variables}}
  • Las animaciones CSS NO se renderizan — solo el frame estatico se captura como imagen
  • Fuentes web: Las fuentes del sistema estandar estan disponibles. Para fuentes personalizadas, usa @font-face inline con base64
  • Manten las plantillas simples y enfocadas — JavaScript complejo no se ejecuta en el renderizador

Solucion de Problemas

Las variables no se renderizan

Verifica que el nombre de la variable en {{nombreVar}} coincida exactamente con la etiqueta de la conexion de entrada (sensible a mayusculas y minusculas).

El CSS no se aplica

Asegurate de que el CSS sea inline (style="") o este en un tag <style> dentro de la plantilla. Las hojas de estilo externas no se cargan.

Problemas de calidad de imagen

Establece dimensiones en pixeles explicitas que coincidan con tu objetivo (1920×1080 para HD, 3840×2160 para 4K). No uses dimensiones basadas en porcentajes.

La plantilla aparece en blanco

Verifica errores de sintaxis HTML. Prueba primero una plantilla minima (<h1>Hola</h1>) y construye desde ahi.

Ver Tambien