Building

Nodes & connections

A workflow is a graph of nodes wired together on the canvas. Each node does one job; the edges between them decide what feeds what, and in what order things run.

A minimal workflow: a reference image feeds a prompt, which produces code.

The core node types#

Three node types cover most workflows. You add them from the canvas and connect them by dragging from one node’s output handle to another’s input handle.

Image node

Holds an image — either an input you upload or an output the workflow generated. Input image nodes are how you bring a screenshot, brand asset, or reference onto the canvas. Generated images come back in a chosen aspect ratio: 1:1, 16:9, 9:16, 4:3, 3:4, 3:2, or 2:3.

Prompt node

The workhorse. A prompt node holds your instructions, the model to run, and what kind of output to produce. It reads from any nodes wired into it — an image, upstream text, generated code — and produces a new output when it runs. Output types include image, text, SVG, video, and HTML.

Code node

Displays generated code with syntax highlighting — TSX, CSS, JSON, Markdown, SVG, and more. Copy the contents or download the file straight from the node; neither is gated behind a paywall.

There are more specialized nodes too — a screen node renders live HTML in a sandboxed frame, a video node plays generated clips, and a capture node records motion from a live URL. Prebuilt workflows wire these up for you where they apply.

Connecting nodes#

Drag from the handle on the right edge of a node (its output) to the handle on the left edge of another (its input). The connection means “feed this node’s result into that one.” A prompt node can take several inputs at once — for example a reference image plus an upstream design brief.

  • Outputs flow left-to-right, from source handle to target handle.
  • A node can fan out to multiple downstream nodes, and a node can take multiple inputs.
  • Cycles aren’t allowed — a node can’t depend on its own output, directly or indirectly.
Image node

Reference

Prompt node

Generate component

Prompt node

Extract color palette

One node can fan out to several — here a single reference drives two prompts at once.

How a workflow runs#

When you run a workflow, vmotif sorts the graph into dependency order and executes top-down. A node runs only once everything wired into it has finished, so a prompt waiting on a generated image won’t fire until that image exists. Independent branches run in parallel, and outputs appear on the canvas as each step completes.

Choosing a model#

Each prompt node picks the model that fits its output type. vmotif routes across providers so you can use the strongest model for each job. The in-app model picker is always the source of truth; a sampling of what’s available:

Images
Nano Banana Pro (Gemini 3), GPT Image 2, Flux 2 Pro, Flux Kontext, Recraft V4, Imagen 4 Ultra, Grok Imagine.
Text & code
Claude Opus 4.7, Claude Sonnet 4.6, GPT-5.2, Gemini 3 Flash, Kimi K2.6, and more.
SVG
Gemini 3 Pro and Gemini 3.1 Pro Preview.
Video
Veo 3.1, Kling 3.0, Wan 2.6, Seedance 2.0 — text-to-video and image-to-video.
Model access depends on your plan. Pro and Team unlock every model; see Plans & limits for what’s included.