Web Viewer

The Web Viewer LOP embeds a Chromium-based browser directly in TouchDesigner. It can browse live websites, render styled Markdown documents, display HTML from a connected DAT, or connect to LOP Studio. When wired to an Agent LOP, it exposes up to 14 tools that let an AI agent navigate pages, read content, click elements, fill forms, and scroll — effectively giving the agent a web browser.

Key Features

• Four web modes: Navigate (live browsing), Markdown (styled document rendering), DAT in1 (render HTML from a connected DAT), and LOP Studio (authenticated dashboard connection)
• Link containment: Automatically patches target="_blank" links and window.open calls so all navigation stays inside the operator
• Six Markdown themes: DOT/LOPs, Simple Dark, Simple Light, Spring, Sunset, and Stormy
• JavaScript execution API: Other operators can execute JavaScript in the browser and receive results via callback through the ExecuteJavaScript method
• URL sync: The URL parameter automatically updates to reflect the browser’s current address

Agent Tool Integration

🔧 GetTool Enabled 14 tools

This operator exposes 14 tools that allow Agent and Gemini Live LOPs to browse websites, extract page content, discover and click interactive elements, fill and submit forms, scroll pages, and retrieve page info.

Use the Tool Debugger operator to inspect exact tool definitions, schemas, and parameters.

Tools are organized into four tiers controlled by the Tool Preset menu on the AgentTools page:

Preset	What it enables
Read Only	Navigation, content extraction, scrolling, page info
Interactive	Everything in Read Only plus element discovery and clicking
Full (Form Submission)	All tools including form fill, type-and-enter, and type-into-focused
Custom	Pick individual toggles manually

When an agent navigates to a URL, the tool automatically extracts a content preview and discovers clickable elements, giving the agent immediate context about the page.

Input/Output

Inputs

• Input 1 (DAT): When Web Mode is set to “DAT in1”, the operator renders HTML content from the connected DAT.

Outputs

• Output 1 (TOP): The rendered web page as a texture, usable anywhere in your TouchDesigner network.
• Output 2 (DAT): The webrender info table containing current URL, page title, loading status, and other browser state.

Usage Examples

Browsing a Website

1. On the Navigation page, set Web Mode to “Navigate”.
2. Enter a URL in the URL field.
3. Pulse Go to load the page.
4. Use Back, Forward, and Refresh for navigation. You can also interact directly with mouse and keyboard when the component viewer is active.

Rendering Markdown

1. Create a Text DAT with Markdown content, or wire one into the network.
2. Set Web Mode to “Markdown”.
3. Drag your Text DAT onto the Markdown Source parameter.
4. Choose a style from the Markdown Style menu.
5. Pulse Render Markdown — or enable Render onChange to re-render automatically whenever the source DAT changes.

Agent-Driven Web Research

1. Place a Web Viewer and an Agent LOP in your network.
2. On the Web Viewer’s AgentTools page, set Tool Preset to “Interactive”.
3. Wire the Web Viewer into the Agent’s tool inputs.
4. Ask the agent to visit a website and summarize its contents — the agent will navigate, extract text, and report back.

Troubleshooting

• Form tools triggering CAPTCHA: The form submission and typing tools work best on local or custom web portals. Public sites may present CAPTCHA challenges that the agent cannot solve.
• Page not rendering after navigation: Some sites load content dynamically. Use the Refresh button or have the agent call web_refresh_page and wait before extracting content.

Parameters

Navigation

Status (Status) op('web_viewer').par.Status Str

Default:

"" (Empty String)

Web Mode (Webmode) op('web_viewer').par.Webmode Menu

Default:

Navigate

Options:

Navigate, Markdown, in1, Lopstudio

URL (Url) op('web_viewer').par.Url Str

Default:

https://dotdocs.netlify.app/

Markdown Style (Markdownstyle) op('web_viewer').par.Markdownstyle Menu

Default:

dot

Options:

dot, simple_dark, simple_light, spring, sunset, stormy

Markdown Source (Markdowndat) op('web_viewer').par.Markdowndat DAT

Default:

"" (Empty String)

Render Markdown (Rendermarkdown) op('web_viewer').par.Rendermarkdown Pulse

Default:

False

Render onChange (Autorendermd) op('web_viewer').par.Autorendermd Toggle

Default:

False

Go (Go) op('web_viewer').par.Go Pulse

Default:

False

Back (Back) op('web_viewer').par.Back Pulse

Default:

False

Forward (Forward) op('web_viewer').par.Forward Pulse

Default:

False

Refresh (Refresh) op('web_viewer').par.Refresh Pulse

Default:

False

AgentTools

Tool Preset (Toolpreset) op('web_viewer').par.Toolpreset Menu

Default:

custom

Options:

custom, off, readonly, interactive, full

Navigate to URL (Enablenavigate) op('web_viewer').par.Enablenavigate Toggle

Default:

False

Go Back (Enablegoback) op('web_viewer').par.Enablegoback Toggle

Default:

False

Go Forward (Enablegoforward) op('web_viewer').par.Enablegoforward Toggle

Default:

False

Refresh Page (Enablerefresh) op('web_viewer').par.Enablerefresh Toggle

Default:

False

Extract Content (Enableextract) op('web_viewer').par.Enableextract Toggle

Default:

False

Scroll Up (Enablescrollup) op('web_viewer').par.Enablescrollup Toggle

Default:

False

Scroll Down (Enablescrolldown) op('web_viewer').par.Enablescrolldown Toggle

Default:

False

Scroll to Top (Enablescrolltop) op('web_viewer').par.Enablescrolltop Toggle

Default:

False

Get Page Info (Enablegetinfo) op('web_viewer').par.Enablegetinfo Toggle

Default:

False

Find Clickable Elements (Enablefindelements) op('web_viewer').par.Enablefindelements Toggle

Default:

False

Click Element (Enableclick) op('web_viewer').par.Enableclick Toggle

Default:

False

Fill & Submit Form (Enableformsubmit) op('web_viewer').par.Enableformsubmit Toggle

Default:

False

Type & Enter (Enabletypeenter) op('web_viewer').par.Enabletypeenter Toggle

Default:

False

Type into Focused (Enabletypefocused) op('web_viewer').par.Enabletypefocused Toggle

Default:

False

Settings

Server Port (Serverport) op('web_viewer').par.Serverport Int

Default:

0

Range:

0 to 1

Slider Range:

0 to 1

Restart Server (Restartserver) op('web_viewer').par.Restartserver Pulse

Default:

False

Restart Process (Autorestart) op('web_viewer').par.Autorestart Toggle

Default:

False

Restart Web Process (Autorestartpulse) op('web_viewer').par.Autorestartpulse Pulse

Default:

False

WebRender Frame Rate (Maxrenderrate) op('web_viewer').par.Maxrenderrate Int

Default:

30

Range:

1 to 1

Slider Range:

1 to 60

Changelog

v1.1.02026-03-01

• Add per-tool Enable* toggle parameters with Toolpreset preset bank - Use onPar prefix for toggle/preset callbacks (not promoted) - Remove fallback extraction methods (_find_elements_fallback, _extract_content_fallback) - Remove TD_* title prefix parsing from OnWebRenderInfoChange - Remove patch_is_pending flag, simplify check_for_patch - Remove duplicate import statements and test_js_escaping - Consolidate webserver_callbacks /web-data and /js-exec into single handler - Remove verbose debug prints from webserver_callbacks
• Add LOP Studio mode with authenticated dashboard connection - Uses LOPStudioConnector for embed token auth flow - Remove unused Testjscallback parameter and test methods

v1.0.22025-12-26

• Add LOP Studio mode with authenticated dashboard connection via LOPStudioConnector embed token auth
• Remove unused Testjscallback parameter and test methods
• Initial commit

v1.0.12025-07-24

• FIXED: Resolved a critical navigation bug that caused new URLs to fail with an ERR_ABORTED error, which kept the browser stuck on the original page.
• DETAILS: The fix prevents a race condition where a page-load event would improperly re-trigger navigation to the old URL. This was solved by adding a state flag (is_syncing_url) that is reset on a deferred script, breaking the feedback loop.

v1.0.02025-07-19

• Initial Release of the Web Viewer LOP.
• Added URL navigation capabilities, allowing users to browse web pages within TouchDesigner.
• Implemented Go, Back, Forward, and Refresh pulse parameters for web navigation control.
• Introduced a Webmode parameter with options for Navigate (web browsing) and Markdown rendering.
• Developed a robust Markdown rendering system, allowing .tox to display Markdown content from a specified DAT.
• Provided multiple Markdown style options: DOT/LOPs Style, Simple Dark, Simple Light, Sunset, Spring, and Stormy.
• Implemented automatic patching of new tab links to ensure they open within the current webrender TOP, preventing external browser launches. This includes handling target="_blank", JavaScript event handlers, and window.open calls.
• Integrated SendKey and InteractMouse methods to allow for programmatic keyboard and mouse interaction with the rendered web content.
• Utilized DotLOPUtils for parameter creation and logging, ensuring consistent operator development practices.
• Designed with robust error handling for markdown rendering, checking for essential operators and content placeholders.

Related Operators

• Agent
• Agent Orchestrator