The Interface

The Layout at a Glance

When you launch TouchDesigner and open a new .toe file, you see a workspace divided into several panels. The large dark canvas in the centre is the Network Editor — this is where you spend most of your time. Across the top is the menu bar. Along the left edge is the Palette. On the right is the Parameter Dialog. At the bottom is the Timeline. These panels can be resized, rearranged, and replaced, but this default layout is a sensible starting point.

The Network Editor

The Network Editor is the main canvas where you place and connect operators. Think of it as an infinite, scrollable whiteboard.

Navigation:

• Scroll to zoom in and out.
• Middle-drag (or Alt+drag) to pan.
• Press H to home the view on whatever you have selected, or on all operators if nothing is selected.
• Press A to frame all operators in the network.
• Press U to go up one level if you are inside a COMP (a sub-network).

Adding operators:

• Press Tab anywhere in the Network Editor to open the operator search panel. Start typing a name — noise, level, constant — and the list narrows. Press Enter or double-click a result to place the operator at the cursor position.
• Right-click on the canvas to open a contextual menu. This menu also lets you add operators, paste copied operators, and access network-level settings.

The viewer: Every operator has a small thumbnail viewer embedded in its tile. Single-click an operator to see a larger preview in the floating viewer pane. The viewer pane can be resized by dragging its edge. To see the output of an operator full-screen, middle-click its viewer.

The Cook indicator: Each operator tile has a small dot in the upper right. When the dot is green, the operator cooked (processed) this frame. When it is grey, the operator did not need to re-cook because nothing upstream changed. This is the lazy-evaluation system at work — operators only do work when they need to.

The Palette

Along the left edge of the screen is the Palette Browser — a library of pre-built components, organised into categories like Tools, Derivative, Experimental, and community contributed sections. You can drag any palette item into the Network Editor to instantiate it.

Useful palette items for beginners include:

• Tools/Base — an empty container component, useful for organisation.
• Tools/Keyboard In — maps keyboard events to CHOP channels.
• Derivative/Kantan Mapper — a projection mapping toolkit.

The Palette can be collapsed by clicking the arrow at its top edge. If you lose it entirely, go to Dialogs > Palette.

The Parameter Dialog

When you click an operator in the Network Editor, its parameters appear in the Parameter Dialog on the right side of the screen. The Parameter Dialog is divided into tabs specific to that operator type. A Movie File In TOP, for example, has tabs called Movie, Image, Trim, Play, Common, and Info.

Parameters can be:

• Numeric sliders — drag left/right to change value, or click the number and type a value directly.
• Toggle switches — on/off.
• Menus — dropdown lists of choices.
• String fields — file paths, channel names, Python expressions.
• Colour pickers — RGBA values.
• XYZ/XYZW fields — grouped numeric inputs for vectors.

Right-clicking any parameter exposes several options, including Expression, Export, Set to Default, and Add Reference. These are covered in depth in the Parameters and Expressions tutorial.

The Timeline

At the bottom of the screen is the Timeline. It shows:

• Current frame and time (in the left portion).
• FPS — you can click this number to change the project frame rate.
• Start and End frame markers — the range for playback-based operations.
• Play, Pause, Stop, and Loop controls.

The Timeline FPS setting controls how fast TouchDesigner’s internal clock ticks. At 60 FPS, every absTime.seconds increment of 1.0 corresponds to 60 frames. Most real-time work runs at 30 or 60 FPS.

The Info DAT and Textport

Two tools are essential for debugging.

The Textport (Alt+T, or Dialogs > Textport) is the Python console and error log. When a Python script fails, the error message appears here. You can also type Python expressions directly into the Textport to explore the TD scripting API — try typing print(op('comp1')) to see how operators resolve.

The Info DAT is not a separate window but a special operator — a DAT of type Info — that you wire to another operator to inspect its state. Pressing I on a selected operator places an Info DAT automatically. The Info DAT shows things like the current texture resolution of a TOP, the number of channels in a CHOP, or the last Python error from a Script DAT.

You can also hover over the output dot of any operator to see a small info tooltip with basic stats — resolution for TOPs, channel count for CHOPs, point count for SOPs.

Working with UI Panels

TouchDesigner’s interface is composed of panes. Each pane has a small panel type indicator in its top-left corner — a grid of dots. Click that indicator to switch the pane between different types: Network Editor, Viewer, Parameter Dialog, Timeline, Textport, and more.

To split a pane, hover near its edge until the cursor changes to a resize arrow, then drag. To add a new pane, click the + button in the top-right corner of any pane.

To save a layout, go to Dialogs > UI Layout Editor. You can save named layouts and recall them with a single click — useful if you switch between a programming layout (multiple Network Editors + Textport) and a performance layout (a single full-screen viewer).

Essential Keyboard Shortcuts

These shortcuts are available inside the Network Editor when it has keyboard focus. If shortcuts are not working, click inside the Network Editor first to give it focus.

Navigating Into and Out of COMPs

Container operators (COMPs) hold entire sub-networks. Double-clicking a COMP dives into it, showing its internal network. The breadcrumb path at the top of the Network Editor shows your current location: /project1/base1/ means you are inside base1 which is inside project1.

Press U or click the parent entry in the breadcrumb to go back up. This hierarchical structure lets you organise complex projects without the Network Editor becoming unmanageably crowded.

With the interface oriented, the next tutorial explains the six operator families — the fundamental vocabulary of TouchDesigner.