# Nolan Lawson's AI cost of JavaScript frameworks test: $2.67 to $4.97 per agent-built app

> Opus 5.5 built the same Pokémon app five times in each of 12 frontend stacks. Hono+htmx and Astro were cheapest. Angular cost nearly twice as much and failed to produce a measurable app twice.

- Published: 2026-11-01
- By: Samir Sengupta (https://www.samcodeman.com/about)
- Canonical: https://www.samcodeman.com/writing/nolan-lawson-ai-cost-javascript-frameworks-2-67-to-4-97
- How this was made: Drafted with Claude, Anthropic's model from 1 cited source, then checked against it in a second editing pass. Editorial policy: https://www.samcodeman.com/editorial-policy
- Disclosure: I build Wayne, an AI coding harness for VS Code, and Omnitron, an agent harness, so I work in this category.

## The short version

- Median build cost for the same agent-built app ranged from $2.67 with Hono+htmx to $4.97 with Angular. Token use ranged from 3.85M with Nuxt to 9.76M with Angular.
- Lawson gives a cause for each of the three most expensive stacks. SvelteKit agents read the v3 migration guide on every run. Gracile+Lit agents read the framework's source. Angular's cost seems to track total code size.
- Vanilla JS with Vite cost more than Hono+htmx, Astro and Nuxt, so having no framework did not make the agent cheaper.
- Lighthouse Performance and Accessibility scores were near 100 for every stack, so the cost differences did not show up as quality differences on this small content-style app.

Nolan Lawson benchmarked the AI cost of building one app with 12 JavaScript frameworks and stacks, including vanilla JS. Opus 5.5 built the app five times in each stack. Median cost per build ran from $2.67 for Hono+htmx to $4.97 for Angular, about 1.9 times as much. Angular also failed to produce a measurable app twice, so some of its metrics come from three runs instead of five.

Lawson wrote the benchmark because claims that some framework is "better for agents" are usually made without evidence. The test app is a small Pokémon browser built on the PokéAPI, with search and filtering. Each agent ran in a sandbox with the spec, the official MCP server or skills for its framework where one existed, and a conformance suite based on the accessibility tree rather than the raw DOM. It was told to use the latest version of the framework. It was not told whether to use SSR or CSR, and it was not told that Lighthouse would score its output. Tailwind, Bootstrap and other component frameworks were excluded.

> Did anyone think to ask the agents?
>
> - Nolan Lawson, The AI cost of JavaScript frameworks

## AI cost across JavaScript frameworks spans 1.9x

Median cost per run, ordered from cheapest to most expensive: Hono+htmx $2.67, Astro $2.76, Nuxt $2.82, Vanilla $2.98, Next.js $3.14, Qwik $3.27, TanStack Start $3.54, SolidStart $3.79, React Router $3.81, SvelteKit $4.28, Gracile+Lit $4.65, Angular $4.97. These are API prices quoted directly by Claude Code. Lawson ran the tests on a $100/month Max plan, so they are not what he actually spent.

Tokens and wall-clock time track cost closely. Token counts are as reported by Claude Code and include cache reads, uncached input and output. Nuxt used the fewest at 3.85M, followed by Astro at 4.13M and Hono+htmx at 4.26M. Angular used the most at 9.76M, ahead of Gracile+Lit at 9.04M and SvelteKit at 8.53M. Astro was fastest at 8.2 minutes, and Angular was slowest at 17.2 minutes, with individual runs ranging from 9.8 to 23.7.

The variance is large. React Router's median is about $1 above Hono+htmx's, yet its cheapest run ($2.82) cost less than Hono+htmx's most expensive run ($3.19). Lawson calls everything he measured very stochastic, because an agent can go off on a tangent and waste tokens for reasons unrelated to the framework. He also says some reliable patterns still emerge, so teams estimating agent costs should look at the ranges as well as the medians.

## Why SvelteKit, Gracile+Lit and Angular cost more

Lawson gives a different cause for each of the three most expensive stacks:

- SvelteKit: the agents read the SvelteKit v3 migration guide in every run, likely because the release is too new to be in Opus 5.5's training data.
- Gracile+Lit: the agents did not know Gracile well, so they either cloned the Gracile repo or read its compiled source from node_modules.
- Angular: the extra cost seems to be a function of total code size. The lines-of-code results are not in the source excerpt available here.

The SvelteKit and Gracile+Lit explanations point to what the model knows rather than to the framework's design. The benchmark used only Opus 5.5, so it cannot show whether another model or a later training cutoff would change those two results. On Hacker News, one commenter said the data shows Angular is "broken even for agents". Others pushed back. One said Angular is the wrong choice for small apps like this one. Another said its rigidity helped when switching between many client projects. A third suspected that an app made of forms with complex validation rules would shuffle the order.

## Official MCP servers and skills were often ignored

Not every stack had an MCP server or skill, and the agents often did not use the ones that were installed:

- Nuxt: agents never used the Nuxt MCP.
- Next.js: with next-devtools-mcp and the next-dev-loop skill installed, agents read the skill file in 1 of 5 runs and AGENTS.md in 2 of 5.
- TanStack Start: nothing was installed, but agents found the skill files shipped in node_modules in 2 of 5 runs.
- Astro: the Astro MCP server was used in 2 of 5 runs.
- Angular: the MCP was used in 3 of 5 runs, the skill tool in 4 of 5 and skill files in 2 of 5.
- React Router and Hono: the skill tool was used in 5 of 5 runs.
- SvelteKit: the Svelte Claude Code plugin's MCP was used in 5 of 5 runs, and SvelteKit was still the third most expensive stack.
- Gracile+Lit, Qwik, SolidStart and Vanilla: no MCP or skill was installed.

Lawson did not force the agents to use the tooling. He doubts many vibe-coders are shouting at their agents in all-caps to use the MCP, and says plenty probably skip it entirely. The practical lesson is that installing an MCP server or skill does not mean the agent will call it. Consistent use also did not guarantee low cost: React Router used its skill in every run and cost a median $3.81.

## Vanilla JS with Vite was not the cheapest option

The vanilla agent was told to use "vanilla JavaScript or TypeScript with Vite, without a UI framework." It came fourth on cost at $2.98, behind Hono+htmx, Astro and Nuxt. It came fifth on tokens at 5.00M, also behind Next.js at 4.99M. Its median build time was 10.1 minutes, with one run taking 18.6. Lawson chose Vite because it underpins many frameworks and represents fairly standard JavaScript infrastructure.

At runtime, vanilla shipped 7 KiB of JavaScript and had 0 ms Total Blocking Time. It also had the only non-zero layout shift (CLS 0.111) and the lowest Performance score, 97. Lawson calls the cost result surprising and says it seems to show that some framework can be better than nothing, or at least better than raw Vite. That cuts against Hacker News commenters who argued frameworks are unnecessary boilerplate once agents write the code. On this app, vanilla used more tokens than four stacks and fewer than the other seven.

## Lighthouse barely separates the 12 stacks

On the home page, Accessibility scored 100 for every stack. Performance ranged from 97 to 100, and every stack except vanilla had a CLS of 0.000. The metrics that do separate the stacks are client-side. JavaScript transferred ranged from 0 KiB for Astro to 142 KiB for Next.js, with React Router at 115 KiB and TanStack Start at 118 KiB. Total Blocking Time under simulated mobile throttling was 0 ms for Astro, Gracile+Lit, Hono+htmx, SvelteKit and vanilla, against 71 ms for Next.js and 103 ms for Angular.

Lawson notes that Lighthouse and Core Web Vitals are biased against SPAs, so MPA frameworks are almost guaranteed to win on JavaScript bytes and blocking time. He reports only the home page, because other pages either scored similarly or swung wildly on metrics like LCP. He calls Largest Contentful Paint highly variable, and the excerpt cuts off before those results. The post also lists maintainability as a dimension, but that section is not in the material available here.

## One content-style app limits the conclusions

Lawson says the app represents only one holotype, a relatively content-based site with little interactivity, "closer to a Wikipedia than a Figma, GMail, etc." Commenters on Hacker News raised the same point. One noted that Astro is built for content-driven websites and asked how results would change for a highly interactive app with nontrivial real-time or async behavior. Another questioned whether zero client-side JS is better, preferring SvelteKit's progressive enhancement. A third argued that spending an extra $2 and 2 minutes is worth it for a long-term maintainable codebase.

On this evidence, Hono+htmx and Astro had the two lowest median costs and placed second and third on tokens. Astro shipped 0 KiB of JavaScript and Hono+htmx shipped 18 KiB. Angular had the highest cost, the most tokens, the longest build time and two failed builds. The results come from one model, one small app and Lighthouse scores for one page. The sources include no interactive or large-app variant, so the cost ordering is evidence only for small, mostly static apps.

## Questions this raises

### Which JavaScript framework was cheapest for an AI agent to build with?

Hono+htmx had the lowest median cost at $2.67 per build, followed by Astro at $2.76 and Nuxt at $2.82. Angular was the most expensive at $4.97, about 1.9 times as much as Hono+htmx.

### Why did SvelteKit, Gracile+Lit and Angular cost more?

Agents read the SvelteKit v3 migration guide in every run, likely because the release postdates Opus 5.5's training data. With Gracile+Lit they cloned the repo or read compiled source in node_modules, and Angular's extra cost appears to track total code size.

### Did the agents use the official MCP servers and skills?

Often not. Agents never used the Nuxt MCP, and with Next.js they read the skill file in only 1 of 5 runs. Consistent use did not guarantee low cost: React Router used its skill in every run and still cost a median $3.81.

## Key facts

- Median cost per Opus 5.5 build ranged from $2.67 (Hono+htmx) to $4.97 (Angular), about 1.9x
- Angular failed to produce a measurable app in 2 of 5 runs and used the most tokens at 9.76M
- Nuxt used the fewest tokens at 3.85M; Astro was fastest at a median 8.2 minutes
- Vanilla JS with Vite placed fourth on cost at $2.98 and had the only non-zero CLS (0.111)
- SvelteKit used its MCP in 5 of 5 runs and was still the third most expensive stack at $4.28

## Sources

1. [The AI cost of JavaScript frameworks](https://nolanlawson.com/2026/10/28/the-ai-cost-of-javascript-frameworks/) - nolanlawson.com

Discussion read (practitioners' reactions, not a source): https://news.ycombinator.com/item?id=50323088