The AI cost of JavaScript frameworks
Nolan Lawson’s benchmark measures how much it costs in tokens for Claude Code to build the same app across 12 different JS stacks.
Developers are increasingly having AI agents build applications from scratch. But have you ever wondered how much your choice of framework costs when you are paying for every generated token?
Nolan Lawson ran an experiment: he asked Claude Code to build the exact same Pokémon web app across 12 different stacks, from Angular and Next.js to Astro, Hono+htmx, and vanilla JS. Each app was generated 3–5 times for fairness.
What the results showed:
- Hono + htmx was the cheapest stack. The median build cost was just $2.67 per run, and the resulting codebase was the smallest in the benchmark (~1,370 lines).
- Astro led on client cleanliness. Building it cost nearly as little ($2.76), and best of all, the app shipped 0 KiB of client-side JavaScript on the initial page.
- Angular was the most expensive and verbose. A build cost $4.97 (the agent kept tripping over SSR and proxy configs), and the codebase ballooned past 2,000 lines.
- Client bundle size: Transferred JS ranged from 0 KiB (Astro) and 7 KiB (Vanilla JS) to 84 KiB (Nuxt) and 142 KiB (Next.js).
Main takeaway: Your choice of framework directly affects your wallet. And it is not just about the initial generation: codebase size directly dictates token costs on every subsequent refactor or feature addition performed by an agent.