For the past decade, engineering leaders have chosen web frameworks by balancing bundle size, server rendering performance, and human developer ergonomics. As software teams shift toward autonomous coding agents, a fourth metric has quietly taken over engineering budgets: how many millions of tokens an AI model must burn to ship a working feature without getting lost in framework abstractions.
Frontend architect Nolan Lawson decided to quantify that token tax directly. Using Claude Code powered by Anthropic’s Claude Opus 5.5 at high effort, Lawson ran a 60-session benchmark across 12 popular JavaScript frameworks and meta-frameworks. In each run, the agent was tasked with building the exact same interactive application—a PokéAPI search, filter, and pagination client—while passing an automated accessibility-tree conformance test suite.
To make the comparison fair, every framework was initialized with its official scaffolding CLI and equipped with its recommended Model Context Protocol (MCP) server or vendor skill files. Because LLM output is non-deterministic, Lawson executed five independent runs per framework and recorded median wall-clock duration, total token consumption, API dollar cost, and Lighthouse production performance metrics.
The results expose a nearly twofold cost and speed gap between the leanest HTML-first stacks and heavily opinionated enterprise frameworks. Hono paired with htmx finished at a median cost of $2.67 in 8.6 minutes, and Astro completed in 8.2 minutes at $2.76 with zero kilobytes of client-side JavaScript. At the opposite end of the spectrum, Angular cost a median of $4.97, took 17.2 minutes, consumed 9.76 million tokens, and failed to produce a testable build in two of its five attempts.
Fast Facts: 12-Framework AI Coding Benchmark
In the benchmark analysis published by Nolan Lawson , each framework was evaluated across five autonomous Claude Code runs using Claude Opus 5.5:
Lowest Token Cost & Highest Reliability : Hono + htmx ($2.67 median cost, 8.6 minutes, 4.26M tokens, 18 KiB JS transferred, 100 Lighthouse Performance) and Astro ($2.76 median cost, 8.2 minutes, 4.13M tokens, 0 KiB JS transferred, 100 Lighthouse Performance).Lowest Raw Token Volume : Nuxt ($2.82 median cost, 9.0 minutes, 3.85M tokens, 84 KiB JS transferred) and Vanilla JS with Vite ($2.98 median cost, 10.1 minutes, 5.00M tokens, 7 KiB JS transferred).The Mainstream Middle Tier : Next.js ($3.14 median cost, 10.9 minutes, 4.99M tokens, 142 KiB JS transferred—the heaviest client bundle tested), Qwik ($3.27, 10.7 minutes, 5.64M tokens), TanStack Start ($3.54, 10.3 minutes, 7.07M tokens), SolidStart ($3.79, 11.2 minutes, 7.13M tokens), and React Router ($3.81, 12.5 minutes, 7.58M tokens).The High-Token Tier : SvelteKit ($4.28, 10.8 minutes, 8.53M tokens), Gracile + Lit ($4.65, 12.1 minutes, 9.04M tokens), and Angular ($4.97, 17.2 minutes, 9.76M tokens, with 2 failed runs out of 5).Why Agents Burn Extra Tokens : Frameworks that introduced breaking syntax changes after the model’s training cutoff—or niche frameworks with sparse pre-training representation—forced Claude Opus 5.5 to read migration guides or inspect node_modules source code mid-task.
Why Framework Complexity Multiplies Agent Token Spend
Human developers pay for framework complexity once during onboarding and amortize that knowledge across months of work. Coding agents pay for framework complexity on every single session cold start. When an agent edits a server-rendered Hono + htmx or Astro route, the mental model is linear: an HTTP request arrives, data is fetched, and standard HTML attributes are returned. Few files change, build verification is near-instant, and the agent rarely triggers hydration mismatches or client-server boundary errors.
Framework Stack
Median API Cost & Time
Median Token Usage & JS Bundle
Agent Skill / MCP Behavior
Hono + htmx $2.67 / 8.6 mins
4.26M tokens / 18 KiB JS
Read Hono skill files in 5 of 5 runs; zero hydration retries
Astro $2.76 / 8.2 mins
4.13M tokens / 0 KiB JS
Used Astro MCP in 2 of 5 runs; fastest wall-clock completion
Next.js $3.14 / 10.9 mins
4.99M tokens / 142 KiB JS
Read skill file in 1/5 runs and AGENTS.md in 2/5 runs
SvelteKit $4.28 / 10.8 mins
8.53M tokens / 36 KiB JS
Invoked Svelte MCP in 5/5 runs; read v3 migration docs every run
Angular $4.97 / 17.2 mins
9.76M tokens / 93 KiB JS
Used Angular MCP in 3/5 runs; failed conformance in 2 of 5 runs
Hono + htmx
Median API Cost & Time $2.67 / 8.6 mins
Median Token Usage & JS Bundle 4.26M tokens / 18 KiB JS
Agent Skill / MCP Behavior Read Hono skill files in 5 of 5 runs; zero hydration retries
Astro
Median API Cost & Time $2.76 / 8.2 mins
Median Token Usage & JS Bundle 4.13M tokens / 0 KiB JS
Agent Skill / MCP Behavior Used Astro MCP in 2 of 5 runs; fastest wall-clock completion
Next.js
Median API Cost & Time $3.14 / 10.9 mins
Median Token Usage & JS Bundle 4.99M tokens / 142 KiB JS
Agent Skill / MCP Behavior Read skill file in 1/5 runs and AGENTS.md in 2/5 runs
SvelteKit
Median API Cost & Time $4.28 / 10.8 mins
Median Token Usage & JS Bundle 8.53M tokens / 36 KiB JS
Agent Skill / MCP Behavior Invoked Svelte MCP in 5/5 runs; read v3 migration docs every run
Angular
Median API Cost & Time $4.97 / 17.2 mins
Median Token Usage & JS Bundle 9.76M tokens / 93 KiB JS
Agent Skill / MCP Behavior Used Angular MCP in 3/5 runs; failed conformance in 2 of 5 runs
By contrast, when a framework undergoes major paradigm shifts—such as Svelte 5 runes and SvelteKit v3 routing, or React Server Components versus client hooks—the model’s pre-training weights actively conflict with the project’s installed compiler version. In SvelteKit’s case, Claude Opus 5.5 invoked the official Svelte MCP in all five runs and had to read the SvelteKit v3 migration guide on every single attempt to correct its own deprecated syntax instincts. That self-correction loop doubled token consumption compared to Astro, even though both frameworks finished in roughly ten minutes.
Even more revealing was how inconsistently the model used vendor-supplied MCP tools and skill files. While Claude consulted Hono skills, React Router skills, and the Svelte MCP in 100% of runs, it ignored the Nuxt MCP entirely (0 of 5 runs) and checked Next.js skill documentation in only one of five attempts. In two TanStack Start runs and several Gracile + Lit sessions, the agent bypassed documentation altogether and grepped directly inside node_modules to reverse-engineer TypeScript definitions.
Practical Implications: Budgeting for Agent-Assisted Frontend Teams
For engineering managers running dozens of autonomous pull requests per day, a $2.20 difference on a tiny five-component CRUD app scales into thousands of dollars per month across a multi-developer organization. More importantly, token bloat correlates directly with context-window pollution: the more tokens an agent spends fighting framework boilerplate or compiler errors, the less reasoning capacity remains for business logic and edge-case security.
The 4-Step Enterprise Implementation Playbook
Enforce Version-Pinned AGENTS.md Context at the Repo Root : Do not rely on coding agents to voluntarily trigger an external MCP server when they get stuck. Place a concise, mandatory AGENTS.md or CLAUDE.md file in the repository root that explicitly states the installed framework version, bans deprecated patterns from earlier versions, and shows one canonical 20-line example of a data-fetching route.Favor HTML-First and Low-Boilerplate Stacks for Internal Tools : When spinning up greenfield admin panels, internal dashboards, or B2B portals where agents will write 80% of the code, default to low-ceremony architectures like Astro, Hono + htmx, or Nuxt. They cut agent iteration time by 35% to 50% while shipping significantly smaller client bundles.Gate Agent Loops With Accessibility-Tree Conformance Tests : Lawson’s benchmark succeeded because the agent wasn’t allowed to declare victory when npm run build exited cleanly; it had to pass Playwright accessibility-tree assertions. Require agents to verify DOM roles, labels, and interactive states before opening a pull request.Track Token-per-PR Metrics by Repository : Instrument your Claude Code, Cursor, or Codex enterprise billing logs by repository tag. If a specific frontend repo consistently requires 8M+ tokens per merged feature, audit its build-time error messages and trim unnecessary abstraction layers.
Next Steps
