The same small app cost an estimated $2.67 to build with Hono+htmx and $4.97 with Angular, when Claude Opus 5.5 did the coding. Astro came in at $2.76 and Next.js at $3.14 (Nolan Lawson, 28 Oct 2026).
So the framework you hand an agent can nearly double the bill for the same job. But these are medians of five runs on one app, and the spread inside each framework is wide.
The short answer
- Cheapest in this test: Hono+htmx at a median $2.67, with Astro ($2.76) and Nuxt ($2.82) close behind. The gaps among the top three are smaller than the run-to-run swings.
- Most expensive: Angular at $4.97, then Gracile+Lit at $4.65 and SvelteKit at $4.28.
- Next.js sits in the middle: fifth cheapest of 12 at $3.14, but it shipped the most JavaScript to the browser.
- Time and tokens follow cost: Lawson says both track it closely. Angular was the slowest, most token-hungry and priciest build.
What exactly did Lawson test?
Lawson wrote one spec for a Pokémon browsing app built on the PokéAPI. It lists Pokémon with their types, moves and game data, and lets users search and filter. He calls it a relatively content-based site with little interactivity (Lawson, 28 Oct 2026).
He gave that spec to Opus 5.5 at high effort and told it to use the latest version of each framework. There were 12 setups: 11 frameworks or meta-frameworks plus a vanilla JavaScript baseline built with Vite. Where a framework had an official MCP server or skills, the agent had them installed. Each agent worked in a sandbox with the conformance test suite but no warning that Lighthouse would grade it later. Every setup was built five times, and he reports the median.
The dollar figures are API prices that Claude Code reported, not money spent. Lawson ran everything on a Max plan, so it came out of his $100 a month.
The benchmark is public on GitHub as nolanlawson/agent-framework-benchmark. Its README says each agent gets the same spec, tests, tools and one-line prompt, runs alone in a fresh Podman container, and reads a local copy of PokéAPI data, so downloading the data costs no tokens.
How do all 12 setups compare on cost?
Medians of five runs, with the cheapest and priciest run in the last column (Lawson, 28 Oct 2026).
| Setup | Median cost | Run range |
|---|---|---|
| Hono+htmx | $2.67 | $2.23 to $3.19 |
| Astro | $2.76 | $2.16 to $3.63 |
| Nuxt | $2.82 | $2.39 to $4.25 |
| Vanilla (Vite) | $2.98 | $2.24 to $3.37 |
| Next.js | $3.14 | $2.58 to $4.13 |
| Qwik | $3.27 | $2.35 to $3.80 |
| TanStack Start | $3.54 | $3.11 to $3.96 |
| SolidStart | $3.79 | $2.84 to $4.81 |
| React Router | $3.81 | $2.82 to $3.97 |
| SvelteKit | $4.28 | $3.59 to $4.65 |
| Gracile+Lit | $4.65 | $3.92 to $5.07 |
| Angular | $4.97 | $3.19 to $6.82 |
Time is the agent’s wall-clock minutes. Tokens are in millions and include cache reads, uncached input and output, as Claude Code reported them.
| Setup | Time | Tokens |
|---|---|---|
| Astro | 8.2 min | 4.13M |
| Hono+htmx | 8.6 min | 4.26M |
| Nuxt | 9.0 min | 3.85M |
| Vanilla (Vite) | 10.1 min | 5.00M |
| TanStack Start | 10.3 min | 7.07M |
| Qwik | 10.7 min | 5.64M |
| SvelteKit | 10.8 min | 8.53M |
| Next.js | 10.9 min | 4.99M |
| SolidStart | 11.2 min | 7.13M |
| Gracile+Lit | 12.1 min | 9.04M |
| React Router | 12.5 min | 7.58M |
| Angular | 17.2 min | 9.76M |
What does the gap mean in practice?
Three readings stand out, all by our arithmetic from the tables.
- The ends are far apart. Angular’s median is $2.30 above Hono+htmx, about 1.9 times as much. It also took twice as long: 17.2 minutes against 8.6, with about 2.3 times the tokens.
- The top of the table is a tie in practice. Hono+htmx beats Astro by 9 cents, but Astro’s cheapest run ($2.16) undercut Hono+htmx’s cheapest ($2.23). Treat the top three as one group.
- The ranges overlap. Lawson’s own example: React Router’s median is about $1 above Hono+htmx, yet its cheapest run ($2.82) beat Hono+htmx’s priciest ($3.19). Even Angular’s cheapest run, $3.19, matched that priciest Hono+htmx run.
Vanilla is the surprise. With no framework at all, it still cost more than three framework setups. Lawson reads that as a sign that some framework can beat none.
Worked example, our arithmetic, not a quote or invoice. Assumptions: you pay API rates rather than a subscription, you run 20 builds a month of similar size, and each costs the median above with no extra retries. That comes to about $53 a month with Hono+htmx, $63 with Next.js and $99 with Angular. A real project is larger and messier, so use this only to see the scale of the gap.
Why did Angular, SvelteKit and Gracile cost more?
Lawson gives a different reason for each (Lawson, 28 Oct 2026):
- Angular: it seems to come down to total code size. Its apps ran a median 2,009 non-blank lines against 1,370 for Hono+htmx. Lawson notes Hono+htmx did roughly the same job with about 70% of the code.
- SvelteKit: the agents read the SvelteKit v3 migration guide in every run. Lawson suspects v3 is too new for Opus 5.5’s training data. The test used @sveltejs/kit 3.1.0.
- Gracile+Lit: the agents did not know the framework well. They either cloned the Gracile repo or read its compiled source in node_modules.
The lesson for you: an agent pays to learn what it does not already know. A framework that is new, rare or verbose costs more tokens before it produces anything. Code size also matters after launch: Lawson notes it drives the token count of future edits too.
How were the failed Angular runs counted?
In two of five runs, the Angular agent built a server-rendered app that rejected non-localhost access, even though the instructions said it would sit behind a reverse proxy. Lawson counted those as failures to meet the spec and did not rerun them (Lawson, 28 Oct 2026).
He says the failures affect only the code size and performance numbers, which use Angular’s three working apps. All five Angular runs stay in the cost section. That section also holds the time and token charts, and each is labelled a median of five runs. A post update says an earlier version overstated how badly the Angular agents failed.
That is the honest way to price it. A failed run still burns tokens, so it belongs in the bill. Dropping it would make Angular look cheaper than it was to use. Our piece on why a cheaper model can cost more per finished task makes the same point about retries.
Did the framework tools help the agents?
Not in any clear way. Lawson logged how often agents touched the official tools (Lawson, 28 Oct 2026):
- Hono skills: used in 5 of 5 runs. React Router skill: 5 of 5. Svelte’s Claude Code plugin MCP: 5 of 5.
- Angular MCP: 3 of 5 runs. Astro MCP: 2 of 5. TanStack Start skill files: 2 of 5.
- Next.js skill files: 1 of 5, with its AGENTS.md read in 2 of 5. The Nuxt MCP: never used.
Our reading: SvelteKit used its MCP every time and still landed third most expensive, while Nuxt never used its MCP and came third cheapest. Lawson goes further and suspects the current MCPs and skills may do more harm than good.
What did users get from each framework?
Lawson ran Lighthouse mobile tests on the home page only, with 4x CPU throttling and Slow 4G, on a 2025 Framework 13 laptop. Performance and accessibility scores sat near the ceiling for every setup, so they do not separate the field. The differences show up elsewhere:
- JavaScript sent: Astro sent about 0 KiB and Hono+htmx 18 KiB. Next.js sent the most, at 142 KiB.
- Largest Contentful Paint: Astro led at 810 ms. Next.js was slowest at 2,090 ms; Lawson ties its wide range to one app that skipped lazy-loading images.
- Total Blocking Time: 0 ms for Astro, Hono+htmx and several others. Angular had 103 ms and Next.js 71 ms.
Lawson says Lighthouse and Core Web Vitals are biased against single-page apps. A content site like this one plays to multi-page frameworks.
How much weight can this test carry?
It is a useful signal, not a verdict. Lawson calls his measurements very stochastic, and he kept to five runs per setup mostly to save time. The app is small and mostly static, and one model at one effort level did all the work. ClueTrove did not rerun the benchmark.
The Hacker News thread had 336 points and more than 250 comments when we read it. Several commenters said a simple app may not reflect form-heavy or larger products. Others argued that models know popular frameworks better from training data. One argued that an extra $2 and two minutes can be worth paying. We saw no comment in the thread identified as Lawson’s.
Who should act on this?
Worth a look if
You start new, content-heavy sites with an agent and pay per token. The cheap group here, Hono+htmx, Astro and Nuxt, also shipped light pages.
Probably skip it if
Your team already runs a large app on one framework. A few dollars per build is small next to the cost of switching, and this test did not measure a complex app.
Pay attention if you use a new framework version
The SvelteKit result suggests that docs the model must read on every run add cost. Shipping a short project guide may help, though Lawson did not test that.
What to do next
- Fork agent-framework-benchmark and swap in a spec that looks like your product.
- Run each candidate several times and compare the ranges, not just the medians.
- Include broken builds in your cost total.
- Check your plan. On a subscription, tokens may matter less than time and output size.
- Price your token totals with current rates from our AI model pricing and API cost guide.
Questions readers ask
Which JavaScript framework is cheapest for AI coding agents?
In Lawson’s test, Hono+htmx had the lowest median cost at $2.67 per build, with Astro at $2.76 and Nuxt at $2.82. Astro was the fastest, at 8.2 minutes, and Nuxt used the fewest tokens, 3.85 million.
Is Next.js expensive for AI agents?
Not on build cost. Next.js 16.4.3 was fifth cheapest of 12 at $3.14 and used 4.99 million tokens. It did ship the most JavaScript, 142 KiB, and had the slowest Largest Contentful Paint, 2,090 ms.
Why did Angular take so long to build?
Its median build ran 17.2 minutes, twice Hono+htmx’s 8.6, and used 9.76 million tokens. Lawson links the cost to code size: about 2,009 lines. The test used @angular/core 22.2.3.
Why did SvelteKit cost more than React-based setups?
The agents read the SvelteKit v3 migration guide in every run, which Lawson thinks is because v3 is too new for Opus 5.5’s training data. SvelteKit’s median was $4.28, against $3.14 for Next.js and $3.81 for React Router.
Does vanilla JavaScript save tokens with AI agents?
Not here. The Vite baseline cost $2.98 and used 5.00 million tokens, more than Hono+htmx, Astro and Nuxt. The agent chose to build a single-page app in all five runs.
How do I reproduce Lawson’s results?
The repo’s README gives the command: node bench/run.mjs –frameworks=all –iterations=5 –effort=high. It needs Linux, Podman 4.3 or later, Node 20 or later, about 15 GB of disk and Claude credentials. The raw results sit in a separate agent-framework-benchmark-results repo.
Glossary
- Meta-framework: a framework built on top of a UI library that adds routing and server rendering, such as Next.js on React.
- MCP server: a tool connection that lets an agent look up a framework’s docs or run its commands.
- Conformance suite: automated checks that an app meets the spec. Lawson’s reads the accessibility tree rather than the raw DOM.
- Largest Contentful Paint: how long the largest visible element takes to appear.
Sources
- Nolan Lawson, The AI cost of JavaScript frameworks (28 October 2026), read 2 November 2026
- nolanlawson/agent-framework-benchmark on GitHub, read 2 November 2026
- Hacker News discussion of the post, read 2 November 2026
Facts read on 2 November 2026. Token prices change; check your provider before you budget.
Part of the guide: AI model pricing and API cost guide.
