Nos HTML

Os Nos HTML renderizam templates HTML/CSS personalizados em imagens com injecao de dados dinamicos. Crie cartoes de titulo, graficos para redes sociais, visualizacoes de dados, cartoes de produto ou qualquer elemento visual personalizado — depois use-os como entrada para geracao de video ou exporte diretamente.

O que e um No HTML?

O No HTML e um mini renderizador web dentro do seu workflow. Escreva HTML e CSS (ou deixe a IA gerar), injete dados dinamicos de outros nos usando variaveis handlebar ({{nomeVariavel}}), e o no renderiza como uma imagem de saida.

Entradas e Saidas

Porta	Direcao	Tipo	Descricao
input (mapeado)	Entrada	Texto	Variaveis dinamicas via `{{nomeVar}}` — de Text, JSON Parser, List Selector, Fetch, Concatenator
output	Saida	Imagem	HTML renderizado como imagem → Cena, Upscaler, Canvas, Google Drive Export

Controles do Inspetor

Editor HTML/CSS

Escreva seu template HTML com CSS inline. O editor suporta HTML5 e CSS3 padrao.

Geracao de Codigo IA

Descreva o que voce quer em linguagem natural e a IA gera o HTML/CSS para voce.

Exemplo de prompt: “Crie um cartao de titulo com fundo degradado, texto branco grande centralizado e uma sombra sutil”

Mapeamento de Variaveis

Cada {{nomeVariavel}} no seu HTML corresponde a uma conexao de entrada. Conecte nos para fornecer valores dinamicos.

Prevializacao ao Vivo

Veja a renderizacao em tempo real do seu template enquanto edita. Atualiza automaticamente quando os dados conectados mudam.

Tag

Atribua um tag como @cartao-titulo para referenciar a saida deste no.

Sintaxe Handlebar

Use chaves duplas para injetar conteudo dinamico:

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

Cada {{variavel}} se torna uma porta de entrada. Conecte um No de Texto, JSON Parser ou outra fonte de texto para fornecer o valor em tempo de execucao.

Como Usar

Adicione um No HTML ao canvas
Escreva HTML/CSS no editor, OU use a geracao de codigo IA
Adicione marcadores {{nomeVariavel}} onde quiser conteudo dinamico
Conecte fontes de texto as portas de entrada de variaveis
Verifique a previsualizacao ao vivo para confirmar a renderizacao
Conecte a saida a um No de Cena (para video) ou exporte

Exemplos de Workflow

Cartoes de Titulo Dinamicos

No de Texto (“Episodio 1: O Inicio”) → No HTML com template:

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

→ No de Cena (anima o cartao de titulo em uma intro de video)

Cartao de Produto de API

Fetch (API de produto) → JSON Parser (extrair nome, preco, imageUrl) → No HTML (template de cartao de produto com {{name}}, {{price}}, {{imageUrl}}) → Cena (video vitrine de produto)

Dicas e Melhores Praticas

Defina dimensoes explicitas no seu CSS (ex. width: 1920px; height: 1080px) para uma resolucao de saida consistente
Use a geracao de codigo IA para layouts complexos — descreva o que voce quer em linguagem natural
Teste primeiro com dados estaticos: codifique valores fixos para verificar o template, depois substitua por {{variaveis}}
Animacoes CSS NAO sao renderizadas — apenas o frame estatico e capturado como imagem
Fontes web: Fontes do sistema padrao estao disponiveis. Para fontes personalizadas, use @font-face inline com base64
Mantenha os templates simples e focados — JavaScript complexo nao sera executado no renderizador

Solucao de Problemas

As variaveis nao sao renderizadas

Verifique se o nome da variavel em {{nomeVar}} corresponde exatamente ao rotulo da conexao de entrada (sensivel a maiusculas e minusculas).

O CSS nao e aplicado

Certifique-se de que o CSS seja inline (style="") ou esteja em um tag <style> dentro do template. Folhas de estilo externas nao sao carregadas.

Problemas de qualidade de imagem

Defina dimensoes em pixels explicitas correspondentes ao seu alvo (1920×1080 para HD, 3840×2160 para 4K). Nao use dimensionamento baseado em porcentagens.

O template aparece em branco

Verifique erros de sintaxe HTML. Tente primeiro um template minimo (<h1>Ola</h1>) e construa a partir dai.

Veja Tambem

Nos de Texto — Forneca texto dinamico para templates
Nos Fetch — Importe dados de API para templates
Nos JSON Parser — Extraia campos especificos para variaveis de template
Cenas — Anime templates renderizados em video