computer.tldraw.com

Visual programming means building a program by placing and connecting visual elements instead of typing lines of code. On a canvas-based tool like tldraw's computer, you place components on an infinite canvas, wire them together, and optionally add AI to power behavior. This approach suits interactive, spatial, and exploratory work — dashboards, prototypes, teaching demos — better than it suits large, logic-heavy codebases.

Visual programming vs. text-based coding

The core difference is the interface, not the underlying computation. Both describe inputs, operations, and outputs; they just express them differently.

Text code scales through abstraction (functions, modules). Visual programs scale through layout and composition — which is why they shine when the relationships between parts matter more than the raw logic.

The node-and-connection model on an infinite canvas

A canvas-based visual program has three ingredients:

1. Components (nodes) — self-contained units that take an input and produce an output. A slider, a data fetch, a chart, or a text box can each be a component.
2. Connections (edges) — the wires that pass one component's output into another's input. The connection is the data flow.
3. The canvas — an unbounded surface where you arrange components spatially. Position carries meaning: related parts sit together, and you can zoom out to see the whole system.

The mental model is a pipeline. If component A outputs a number and component B expects a number, connecting A → B makes B react whenever A changes. Disconnect the wire and the flow stops. This is why the most common bug in visual programming isn't a syntax error — it's a missing or misplaced connection.

An infinite canvas matters because visual programs grow sideways, not downward. You can keep a working section intact while experimenting in empty space beside it, then wire the successful experiment back in.

Building and linking interactive components

A typical build loop looks like this:

1. Place a source component — something that produces a value, such as a slider, a text input, or a data source.
2. Place a transform component — something that changes the value, such as a calculation or a filter.
3. Place an output component — something that displays or acts on the result, such as a chart, a shape, or an animation.
4. Connect them in order — source → transform → output.
5. Interact and verify — move the slider and confirm the output updates. If nothing changes, check the connection first.

The expected result is a live, interactive artifact: change an input on the canvas and the downstream components respond immediately. That immediacy is the main advantage — you see the effect of a change without a build step.

Where AI fits in

AI enters a visual programming workflow in two practical places:

• As a component — an AI step that takes a prompt or data as input and returns generated content, which you then wire into the rest of the canvas like any other node.
• As a builder — using natural-language instructions to generate or modify components, so you describe the behavior you want instead of assembling every node by hand.

In both cases the canvas stays the source of truth: AI output becomes just another value flowing through connections you control. Treat AI-generated components as drafts to inspect and rewire, not as finished logic.

When to choose visual programming

Choose visual programming when:

• The problem is spatial or interactive (dashboards, simulations, teaching tools).
• You want to explore and iterate quickly without a compile cycle.
• Non-programmers need to read or modify the logic.
• The system is a pipeline of inputs, transforms, and outputs.

Choose text-based coding when:

• The logic is deeply nested or algorithmically complex.
• You need rigorous version control, testing, and code review.
• The program is large and maintained by many people over time.
• Performance and precise control matter more than visual clarity.

Many real projects mix both: a visual canvas for the interactive layer, text code for the heavy computation behind it.

Getting started

tldraw's computer runs in the browser and requires JavaScript enabled to load. Open the canvas, place a source component, connect it to an output, and interact with it — that single working pipeline teaches the model faster than any description. From there, add a transform in the middle, then an AI component, and watch how each new connection changes the behavior of the whole.

A node-based editor is a visual programming interface where you build a program by placing nodes (each representing an operation, value, or component) on a canvas and connecting them with wires. Data or control flows along those wires from one node's output port to another node's input port, and the resulting graph is what executes. It suits people who think in terms of data flow and relationships rather than sequential lines of text — for example, building interactive components, wiring up AI steps, or prototyping logic on an infinite canvas. It is less suited to problems dominated by tight loops, heavy string manipulation, or large codebases where text tooling (diffing, refactoring, search) matters more.

The core building blocks

Every node-based editor, regardless of product, is made of the same few parts:

The key mental shift: in text code, order is implied by line position. In a node graph, order is implied by connections. A node with no incoming wire on a required port simply has nothing to run on.

How execution actually happens

There are two common models, and knowing which one you're in explains most confusing behavior:

• Data-flow (push) execution. When a node's inputs are all satisfied, it runs and pushes its result downstream. This is the model in most visual-programming and shader-style tools. Change one upstream value and everything downstream recomputes.
• Pull / on-demand evaluation. Nothing runs until something downstream asks for a value; the editor walks backward up the graph to compute only what's needed. This is common when the graph feeds a render or a query.

Triggering is usually one of: automatic re-run on any change, an explicit "run" action, or an event (a click, a timer, an input change) wired into the graph as a source node.

Node-based editor vs. related approaches

These are often confused, so compare them on the same axes:

A node-based editor is often implemented on a canvas — the canvas is the surface, the node graph is the structure. So "canvas computing" and "node-based editing" overlap but aren't identical: a canvas can hold non-node elements (freehand drawings, images, text) alongside a graph.

Typical workflow

1. Add nodes. Place a source node (a constant, an input, a data fetch) and the operation nodes you need.
2. Connect ports. Drag from an output port to a compatible input port. The editor usually highlights valid targets.
3. Configure parameters. Fill in the fields inside each node — values, modes, options.
4. Run. Either it auto-runs on change, or you trigger execution.
5. Inspect the result. Check the output node, a preview, or a connected display component.
6. Iterate. Change a parameter or rewire, and watch what updates.

Troubleshooting the common failures

• Type mismatch on a wire. The output port produces a different kind of value than the input expects (e.g., a list into a single-value port). Fix: insert a conversion node, or pick the matching port.
• Cycle / circular dependency. Node A feeds B which feeds back into A. Most editors refuse to run this. Fix: break the loop with a state or delay node, or restructure.
• Node produces no output. Usually an unsatisfied required input, an unset parameter, or an upstream node that itself failed. Trace backward from the silent node to the first one missing input.
• Nothing updates when you change something. You may be in pull mode without a trigger, or the changed node isn't on the path to the output. Check whether a re-run is needed.

Choosing whether to use one

Pick a node-based editor when the problem is naturally a graph of transformations — inputs flowing through steps to an output — and when seeing that structure helps you reason. Skip it when the logic is dominated by iteration, complex conditionals, or text-heavy processing, where a text editor's tooling will serve you better. Many tools let you mix both, using nodes for the visible pipeline and small code blocks for the fiddly parts.

An AI whiteboard is a digital canvas where AI can generate, edit, or organize visual content alongside your own drawing and diagramming. You use it when the bottleneck is turning rough ideas into structured visuals — not when you already know exactly what to draw. On tldraw's computer (computer.tldraw.com), the canvas is built for visual programming: you place interactive components, connect them, and use AI to power what you build. The site describes it as free in your browser, and it requires JavaScript to run.

How an AI whiteboard differs from a standard digital whiteboard

A standard whiteboard is a surface: you draw, type, and move things, and every change comes from you. An AI whiteboard adds a layer that can act on the content already on the canvas.

The practical difference is where the effort goes. On a standard board you spend time drawing structure. On an AI whiteboard you spend more time specifying what you want and then correcting the result.

Common AI actions on a canvas

These are the tasks AI features on a canvas are typically pointed at. Treat them as categories of work rather than a fixed menu — what's available depends on the tool.

• Generate diagrams. Describe a system, flow, or relationship and get shapes and connectors placed on the canvas instead of drawing each box yourself.
• Summarize notes. Turn a cluster of sticky notes or text blocks into a shorter set of points on the board.
• Turn text into shapes. Convert a written list into nodes, cards, or a structured layout you can then rearrange.
• Clean up messy boards. Align, group, or reorganize scattered elements into something readable.

On tldraw's computer specifically, the emphasis is on building interactive components and connecting them, with AI used to power those creations. That's a step beyond generating a static diagram: the canvas holds things that do something.

How AI fits into a visual workflow

AI works best as a middle step, not the first or last one.

1. Dump raw material. Sketch, type, or paste everything onto the canvas without worrying about order. This is the part humans are good at and AI can't do for you.
2. Ask AI to impose structure. Generate a diagram from a description, convert notes into nodes, or propose a grouping. The output lands as editable canvas objects.
3. Edit by hand. Move, rename, delete, and reconnect. AI output is a first draft, and the canvas is where you fix it.
4. Connect and extend. If the tool supports interactive components, wire them together so the board does something rather than just showing something.
5. Iterate. Re-prompt on the parts that are wrong instead of rebuilding from scratch.

The manual steps aren't overhead — they're where the board becomes accurate.

Typical use cases

• Brainstorming. Generate a spread of ideas or categories from a short prompt, then prune by hand.
• System mapping. Describe components and dependencies, get a first-pass diagram, then correct the relationships.
• Turning rough sketches into structured diagrams. Sketch loosely, then have AI or structured tools convert the mess into aligned nodes and connectors.
• Prototyping interactive visuals. On a canvas built for visual programming, assemble components and connect them, using AI to drive behavior.

Limits to expect

• Accuracy. Generated diagrams can contain wrong relationships or invented details. Verify anything factual before you rely on it.
• Editing is mandatory. AI output rarely matches your intent on the first pass. Budget time for cleanup.
• Manual work is sometimes faster. For a five-box flowchart you already have in your head, drawing it beats writing a prompt and fixing the result.
• Tool-dependent features. Not every AI whiteboard supports interactive components or visual programming. tldraw's computer is aimed at that use; a general AI whiteboard may only generate and summarize.
• Browser and JavaScript requirements. tldraw's computer needs JavaScript enabled to run, so it won't work in a stripped-down or script-blocked browser.

Choosing whether to use one

Use an AI whiteboard when the hard part is structuring vague input — messy notes, an undescribed system, a rough sketch. Stay with a plain whiteboard or direct drawing when you already know the structure and just need to place it. If you want the canvas to hold working, connected components rather than static diagrams, look for a tool built for visual programming, which is the direction tldraw's computer takes.

Canvas computing means building a program by placing interactive components on an infinite canvas and connecting them, rather than writing code line by line. On tldraw's computer (computer.tldraw.com), you get a visual programming surface in the browser: components act as nodes, connections carry data or control flow, and AI can help power what you build. It's a good fit when you want to prototype interactive behavior, teach programming concepts, or assemble small tools without a full development setup. It is not a replacement for a conventional codebase when you need fine-grained control, version control, or heavy computation.

The core idea: a canvas instead of a file

In a text editor, a program is a sequence of statements read top to bottom. On a canvas, a program is a spatial arrangement: each component sits somewhere on an infinite plane, and the meaning comes from what it is and what it connects to.

This changes three things:

• Structure is visible. Data flow is a line you can trace with your eyes, not a call stack you reconstruct in your head.
• Editing is direct. You move, duplicate, or rewire a component instead of renaming variables across files.
• The canvas is the workspace. Notes, dead ends, and alternative versions can live next to the working program without polluting it.

How the node-based editor model works

The node-based editor is the mechanism underneath. Three parts matter:

Components as nodes

Each component is a self-contained unit with inputs, outputs, and some behavior — a slider, a shape, a text box, a logic gate, an AI-powered block. A node doesn't know or care what feeds it; it just reacts to its inputs.

Connections as data or control flow

A connection between two nodes means "output of A becomes input of B." That single rule covers most cases:

Evaluation

When an input changes, the affected nodes recompute and the result updates on the canvas. You see the effect immediately, which is why this model suits interactive and exploratory work.

How visual programming differs from traditional coding

The trade-off is real: visual programs are easier to see and harder to scale. Past a certain complexity, a canvas of hundreds of nodes becomes as hard to navigate as a large codebase — just in a different way.

Where AI fits in

AI on a canvas can act as a node like any other: you feed it input, it produces output, and that output flows into the rest of the program. Practically, this means you can:

• Generate content (text, shapes, images) that other components then manipulate.
• Turn a natural-language description into a starting arrangement of components.
• Add behavior to a component without writing the logic yourself.

Because AI output is just another value on the canvas, you can inspect it, branch on it, or feed it back into the graph — the same as any other node.

A concrete first project

A minimal build that exercises the whole model:

1. Open the canvas at computer.tldraw.com in a browser with JavaScript enabled.
2. Add an input component — for example, a slider or a text field. This is your source node.
3. Add an output component — a shape, a label, or a display block.
4. Connect them. Drag from the input's output to the output component's input. The connection line is the program.
5. Change the input. Move the slider or edit the text. The output component should update immediately — that's the evaluation loop working.
6. Add a third component between them (a transform, a condition, or an AI block) and rewire. You've just built a three-node pipeline.

Verification: if changing the input doesn't change the output, the connection isn't carrying data — check that you connected output-to-input, not input-to-input.

Common limitations to plan around

• JavaScript is required. The page states you need JavaScript enabled to run tldraw. With it disabled, nothing loads.
• Browser performance. An infinite canvas with many live components runs in a browser tab, so very large or compute-heavy graphs will feel the limits of that environment.
• Complexity ceiling. As noted above, visual clarity degrades as node count grows; plan to split large ideas into separate canvases rather than one giant graph.
• Not a code replacement. For version control, testing, and precise performance work, a text-based codebase remains the better tool.

When to choose canvas computing

Pick it when the problem is interactive, visual, or exploratory — a prototype, a teaching demo, a small tool, or a sketch of an idea you'll later formalize. Skip it when you need strict reproducibility, deep integration with existing code, or performance you can measure and tune at a low level.

Interactive components are the reusable building blocks of a canvas-based visual program: self-contained pieces you place on an infinite canvas, configure, and wire together so they respond to input and pass data or trigger behavior. On tldraw's computer (computer.tldraw.com), you build them visually rather than by writing a full application, and the site describes the workflow as creating visual programs, connecting components, and using AI to power what you make. The main condition to know up front: the tool runs in the browser and requires JavaScript to be enabled, so a page that stays blank usually means scripting is blocked rather than the canvas being empty.

Static shapes vs. interactive components

The distinction matters because both live on the same canvas and look similar at a glance.

A drawn rectangle is a shape. A component that reads a value, changes when you interact with it, or feeds another component is part of the program's behavior. If nothing on your canvas reacts when you click, drag, or change a value, you are most likely working with static shapes rather than components.

How components are placed, configured, and connected

The general pattern in canvas-based visual programming, and the one the site's description points to, is:

1. Place a component on the canvas. It becomes an object with its own position and identity.
2. Configure it. Components expose settings or inputs that determine what they do — a source of data, a condition, a display format.
3. Connect it. Wiring one component's output to another's input is what turns a collection of parts into a working program.
4. Run and observe. Because the canvas is live, you see the result of the connections rather than compiling and launching separately.

The connection step is the one that carries the most meaning. A wire is a claim that "this output feeds that input," so a program that does nothing is often a program whose wires are missing, reversed, or pointing at the wrong port.

Wiring components to pass data or trigger behavior

Two broad kinds of connection show up in node-based editors, and it helps to know which one you are making:

• Data flow — a value produced by one component becomes the input of another. Change the source and everything downstream updates.
• Trigger or event flow — one component's action causes another to run. The connection carries "when this happens, do that" rather than a value.

If a component receives data but never appears to act, check whether you wired a data connection where a trigger was needed, or the reverse. They are not interchangeable.

Where AI fits

The site lists AI as a way to power your creations, which in practice means AI can generate or drive component behavior instead of you specifying every rule by hand. Treat this as an accelerator for the parts that are tedious to encode manually, and keep the deterministic wiring — what connects to what — under your own control so you can still reason about why the program behaves as it does.

When components don't respond

Work through these in order, since each rules out a different layer:

• Blank canvas or nothing loads — JavaScript is disabled or blocked. The site states plainly that JavaScript must be enabled to run tldraw.
• The component renders but ignores clicks — you may have a static shape, not an interactive component.
• It reacts but nothing downstream changes — the output is not wired to the next component's input, or the wire is on the wrong port.
• It worked, then stopped — an upstream value or trigger changed. Trace back along the connections to the first component that no longer produces what the rest expect.
• Behavior is unpredictable — too much logic is hidden inside AI-driven parts. Move the connection structure back into explicit wiring so each step is inspectable.

The reliable habit is to test one connection at a time: place two components, wire them, confirm the second responds to the first, then add the next. Debugging a canvas is much easier when you know which wire introduced the problem.