When to Use Canvas vs. Browser in OpenClaw

OpenClaw provides two powerful tools for visual interaction: Canvas and Browser. While both deal with UIs, they serve distinct purposes and are optimized for different tasks. Understanding when to use each is key to building efficient, maintainable automations.

Canvas: Your Lightweight, Embedded UI Surface

Canvas is a dedicated, agent-controlled HTML/CSS/JS panel embedded directly in the OpenClaw macOS app. Think of it as a private, miniature web workspace that your agent can control and display instantly.

Key Characteristics

• Local & Isolated: Canvas files live in ~/Library/Application Support/OpenClaw/canvas/ and are served via a custom openclaw-canvas:// URL. It’s completely separate from the internet and your personal browsing.

• Fast and Deterministic: Because it serves local files, Canvas loads instantly and is immune to network flakiness, third-party scripts, and CAPTCHAs.

• Agent as UI Developer: You write static HTML, CSS, and JavaScript files that the agent serves. This gives you full programmatic control over the UI.

• Limited Interaction: Canvas is designed for display and simple interaction. Your agent can navigate it, evaluate JavaScript, and capture snapshots, but it’s not intended for complex, multi-step workflows with external services.

Best Use Cases

• Building Agent-Controlled Dashboards: Create a custom UI to display agent metrics, task statuses, or system health in a clean, real-time view.

• Presenting Information Densely: Show formatted data like logs, reports, or structured JSON without the noise of a full website.

• Hosting A2UI: Canvas is the primary host for A2UI, OpenClaw's advanced UI framework for building interactive surfaces.

• Triggering Agent Actions via Deep Links: You can embed links like openclaw://agent?message=process in your Canvas to let users initiate new agent runs with a single click.

In short: Use Canvas when you want your agent to create and own a UI that is reliable, fast, and under its complete control.

Browser: Your Full-Featured Automation Engine

The Browser tool gives your agent complete control over a dedicated Chromium-based browser instance (like Chrome, Brave, or Edge). It’s your window into the live web.

Key Characteristics

• Full Web Access: Your agent can open any URL, log in to sites, click buttons, fill forms, and interact with any web application just like a human would.

• Powered by CDP & Playwright: Built on Chrome DevTools Protocol (CDP) and enhanced by Playwright, it offers a robust, stable API for automation. The agent uses precise element references (e12) from accessibility snapshots to avoid flaky selectors.

• Two Profiles: You can choose between the openclaw profile (a completely isolated, managed browser) and the chrome profile (which connects to your existing Chrome tabs via a browser extension).

• Complex State & Security: Web pages have complex state (cookies, storage, auth). OpenClaw provides tools to manage this (e.g., browser cookies set, browser set credentials), but it adds a layer of complexity.

Best Use Cases

• Automating Web Logins and Forms: Automatically log into a SaaS application and extract data.

• Web Scraping: Extract information from public or private web pages (e.g., checking a competitor's pricing page).

• Testing Web Workflows: Simulate user journeys on your own site (e.g., a checkout flow) to ensure reliability.

• Interacting with External APIs via UI: Some systems only expose functionality through their web UI, not an API. Browser automation is the only way to integrate.

In short: Use Browser when you need your agent to interact with the real, live internet, especially for authentication, navigation, and complex user flows.

The Bottom Line: A Simple Decision Tree

When deciding which tool to use, ask yourself two questions:

1. Am I interacting with a public or private website on the internet?

   • Yes → Use browser. Canvas has no access to external URLs.
   • No → Proceed to question 2.

2. Do I need to build a custom UI to display information or control my agent?

   • Yes → Use canvas. It’s designed to be a blank slate for your own content.
   • No → Neither may be needed.

For example:

• Want to check your Gmail inbox? That’s the browser.
• Building a live-uptime dashboard for your home servers? That’s canvas.
• Need to log into your bank to capture a statement? browser.
• Creating a to-do list that your agent manages for you? canvas.

Choose wisely, and your automations will be as robust as they are powerful.