The AI Cost of JavaScript Frameworks: A Benchmark
In October 2026, Nolan Lawson, a Microsoft engineer and author of the "Read the Tea Leaves" blog, published one of the most ambitious benchmarks ever produced on the practical impact of AI agents on the web ecosystem: a study measuring the real cost of building the same application with twelve different JavaScript frameworks, using Claude Code with the Opus 5.5 model. The results offer one of the few concrete data points available on which web development stack adapts best to the era of AI-assisted development.
The experiment is, in many ways, elegant in its simplicity. Lawson asked AI agents to build a Pokémon application based on the PokéAPI — with a list, search, type filtering, and detail views — using each of the twelve frameworks. For each setup, the agents ran five iterations, with detailed metrics on API cost, real time, token usage, lines of code generated, and Lighthouse scores for performance and accessibility.
The most striking result was the cost variation: while Hono with htmx cost only $2.67 per build on average, Angular reached $4.97 — nearly double. But Angular was also the only one to fail: in two out of five attempts, the agent could not produce a working application.
Why these results matter
The web development community thrives on debates based on "vibes." Frameworks are described as "blazing fast" or "supercharge your development" without real metrics backing the claims. Lawson identifies this as a structural problem: just as React's adoption was justified for years by the vague assertion that "the virtual DOM is fast," today's claim that a particular framework is "better for AI agents" rarely receives empirical treatment.
Lawson's data reveal a clear hierarchy. The lightest frameworks — Hono+htmx, Astro, and Nuxt — were the most economical (median costs between $2.67 and $2.82). The heaviest — SvelteKit, Gracile+Lit, and Angular — were significantly above, with Angular and SvelteKit leading in both cost and build time. Vanilla JavaScript with Vite came in at $2.98 — surprisingly competitive.
What Lawson calls the "code factor" emerges as the true cost driver. Hono+htmx produced approximately 1,370 lines of code for the same functionality that Angular delivered in 2,009 lines — roughly 70% of the code. In AI-assisted development, less code means fewer tokens consumed in every future edit, generating cumulative savings that extend far beyond the initial build.
The hidden side: bundle size and performance
While Lighthouse scores (Performance, Accessibility, CLS) were practically saturated across all frameworks — most scoring 100 for Performance and Accessibility — the volume of JavaScript sent to the client varied dramatically. Astro sent effectively 0 KiB. Next.js sent 142 KiB — the widest gap among the twelve setups tested.
This difference is not just a benchmark metric: it's the same pattern the web industry has been combating for years, now visible in a way that was previously invisible. Vanilla JavaScript with Vite sent just 7 KiB; React Router and TanStack Start sent over 100 KiB. The framework choice determines the weight of the application in the end user's browser, and this directly impacts the experience on mobile connections.
What the benchmark misses
Lawson is honest about the experiment's limitations. The app tested is relatively simple — closer to a Wikipedia catalog than a financial dashboard — meaning the results may not apply to complex interactive applications. The agent always used the same model (Claude Opus 5.5), the same effort level, and the same sandbox configuration. The variance between iterations was high: in Astro's case, for example, the cost ranged from $2.16 to $3.63 across the five runs.
Moreover, the study does not address long-term maintenance cost — AI-generated code may be cheap to create, but difficult to maintain if the human team is not familiar with the framework's specific patterns. As Sencha's analysis observes: "The hidden costs of enterprise development — integration, security audit, version-conflict debugging, onboarding — remain largely unchanged, whether the initial code was AI-generated or hand-written."
Conclusion
The question is: if you're building a web application in 2026 with AI agents in your daily workflow, does framework choice shift from an architecture decision to a cost optimization decision? Lawson's data suggest yes — but that the right answer depends not only on initial build cost, but on bundle weight, team familiarity, and the type of application being built.
Sources: Read the Tea Leaves, daily.dev, Web Standards
✓ Independent sources cross-checked and verified before publishing
