claude-code - 💡(How to fix) Fix Flutter web apps don't render in Claude Preview (CanvasKit requires WebGL) [1 comments, 2 participants]

Description

Flutter web apps render as a black screen in the Claude Preview tool. The HTML and scripts load, but the Flutter engine never initializes — no flt-glass-pane, no canvas, no Flutter DOM elements appear. The same app works perfectly in a real Chrome browser.

Root cause

Claude Preview uses Playwright's Chromium, which runs without GPU acceleration. Flutter's CanvasKit renderer compiles Skia to WASM and renders via WebGL. Without WebGL support, the engine silently fails to bootstrap.

As of Flutter 3.35, the --web-renderer html flag and HTML renderer have been removed — CanvasKit/Skwasm is the only option, making this a hard blocker with no workaround.

Steps to reproduce

1. Create a Flutter web project
2. Configure .claude/launch.json:

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "flutter-web",
      "runtimeExecutable": "cmd",
      "runtimeArgs": ["/c", "flutter", "run", "-d", "web-server", "--web-port", "3002", "--web-hostname", "localhost"],
      "port": 3002
    }
  ]
}

1. Run preview_start — server starts, page loads, but screen is black
2. preview_eval confirms: document.querySelector('flt-glass-pane') returns null
3. Open localhost:3002 in real Chrome — works fine

Environment

• Flutter 3.35.1 (stable)
• Windows 11
• Claude Code CLI

Possible solutions

• Launch Playwright Chromium with --use-gl=egl or --use-gl=swiftshader flags to enable software WebGL
• Expose a config option for custom Chromium launch flags
• Document the limitation for Flutter users

Workaround

Use the Chrome MCP (Claude in Chrome) to preview Flutter web apps in a real browser instead of Claude Preview.