HTML Nodes

The HTML Node gives you the power of web design directly on the canvas. It allows you to create custom visual layouts using standard HTML and CSS, which can then be rendered as images for use in your video generation or as overlays.

Features

Dynamic Inputs (Variables)

You can make your design dynamic by using handlebar syntax {{variable_name}} in your HTML code.

• Action: Writing {{title}} in the code editor automatically creates a new input handle named “title” on the node.
• Connection: You can connect a Text Node or Logic Node to this input to inject content dynamically.

Real-time Preview

The node includes a built-in browser engine that renders your code in real-time, allowing you to see exactly how the final image will look.

AI Code Generation (“Prompt to Code”)

Don’t know HTML? No problem.

• Feature: Use the “Prompt AI” tab to describe what you want (e.g., “A modern, dark-themed quote card with a blurred background and neon text”).
• Result: The AI will generate the HTML and CSS code for you.

Use Cases

• Title Cards: Create consistent, branded title screens for your videos.
• Social Media Posts: Generate dynamic images for Instagram/Twitter by injecting different quotes into a template.
• Data Visualization: Use CSS to create simple bar charts or data displays fed by a Fetch Node.