Bun 1.4's Bun.WebView: Build a Shot-Scraper-Style JSON API for Claude Code

Key Takeaways

• Bun 1.4's Bun.WebView enables a 192-256MB browser automation JSON API (shot-scraper style).
• Use it to give Claude Code web scraping and JS execution without heavy Playwright overhead.

What Changed

Bun 1.4 dropped today, and it's a big one. The long-awaited Rust rewrite is here, but buried under a mountain of new features: Bun.Image, Bun.markdown, Bun.cron(), bun run --parallel, and more. For Claude Code users, the standout is Bun.WebView — first-class browser automation built into Bun's core, using either macOS WebKit or a local Chromium via the Chrome DevTools Protocol (CDP).

Simon Willison immediately put it to the test: he had Claude Code for web build a prototype JSON API inspired by his shot-scraper javascript tool. The result? A TypeScript server that loads a page, executes JavaScript against it, and returns the result — all in a 192MB-256MB container.

What It Means For You

If you've ever wanted Claude Code to scrape dynamic pages, render SPAs, or run browser-based assertions, you've probably reached for Playwright or Puppeteer. Those are heavy — a full Chromium instance can eat 500MB+ easily. Bun.WebView's approach cuts that dramatically:

• 192MB-256MB for a full Chrome against complex pages (tested with cgroups)
• Native CDP support — no extra driver or wrapper needed
• WebKit option on macOS for lighter, faster local runs
• Built into Bun core — no npm install, no version mismatch headaches

This means you can run a browser automation service in a tiny container, right next to your Claude Code agent, without blowing up your infrastructure costs.

Try It Now

Here's how to get started:

1. Install Bun 1.4: curl -fsSL https://bun.sh/install | bash (or brew install bun)

2. Clone Simon's prototype for a working reference:

   git clone https://github.com/simonw/research/tree/main/bun-webview-json-api
   cd bun-webview-json-api
   bun install
   

3. Build your own minimal server — the core pattern is simple:

   import { WebView } from "bun";
   
   const server = Bun.serve({
     port: 3000,
     async fetch(req) {
       const url = new URL(req.url);
       if (url.pathname === "/scrape") {
         const target = url.searchParams.get("url");
         const script = url.searchParams.get("script") || "return document.title";
         const wv = new WebView({ url: target });
         const result = await wv.evaluate(script);
         return Response.json({ result });
       }
       return new Response("Not found", { status: 404 });
     },
   });
   

4. Wire it into Claude Code — add an MCP server or use a claude CLI call:

   claude -p "Scrape https://example.com and extract all h2 headings" --tool "curl http://localhost:3000/scrape?url=https://example.com&script=return Array.from(document.querySelectorAll('h2')).map(h=>h.textContent)"
   

5. Optimize for your use case:

   • Use WebKit on macOS for dev/testing (faster startup)
   • Use Chromium in production for full compatibility
   • Set a memory limit in your container (start at 256MB, adjust down)

Pro tip: Combine with Bun.cron() to schedule periodic scrapes that feed data back to Claude Code for analysis — all in one Bun process.

Why This Matters for Claude Code

Claude Code excels at reasoning and code generation, but it can't click buttons or render JavaScript. Bun.WebView gives you a lightweight bridge to the browser that's cheap enough to run as a sidecar service. No more spinning up a 1GB Playwright container just to check if a page loads — a 192MB Bun service does it.

Simon's prototype is just the start. Imagine:

• Visual regression testing — capture screenshots, compare with Claude Code's vision
• Dynamic form filling — automate complex multi-step web flows
• SPA scraping — extract data from React/Vue apps that need JS execution

Bun 1.4 makes this trivial. Try it today.

Source: simonwillison.net