The AI cost of JavaScript frameworks
TL;DR Highlight
Building the same app with 12 JS frameworks via agents, 5 runs each, showed up to ~2x cost differences.
Who Should Read
A full-stack developer choosing a JS framework while rebuilding a frontend with coding agents.
Core Mechanics
- Hono+htmx was cheapest
- Median over 5 runs per run: $2.67, Astro $2.76, Nuxt $2.82.
- Angular was the most expensive at $4.97.
- SvelteKit, Gracile and Angular cost more
- SvelteKit agents read the v3 migration guide in every run.
- Gracile agents cloned the repo or read compiled source in node_modules.
- The author says Angular's cost seems tied to total code size.
- Vanilla cost more than some frameworks
- Vite-only Vanilla cost $2.98, below Next.js ($3.14) but cheaper than SvelteKit, Angular and React Router.
- The author reads this as having some framework beating having none.
- JS transferred: Astro 0 KiB, Next.js 142 KiB
- Per Lighthouse, Astro sent 0 KiB, Next.js 142 KiB, TanStack Start 118 KiB.
- Mobile LCP broadly favored MPAs: Astro 810ms vs Next.js 2090ms.
- Lines of code: Hono+htmx 1370 vs Angular 2009
- The author says Hono+htmx built about the same app with ~70% of Angular's code.
- Less code means fewer tokens in future edits.
- Performance and accessibility scores near saturated
- Performance ranged from 97 (Vanilla) to 100, and Accessibility was 100 for all.
- So differences showed up in JS bytes, TBT and LCP.
Community Reactions
- Opinion: results depend on the app type
- Several commenters said the Pokémon app is mostly static and may not translate to complex apps.
- Others suggested adding auth and more features and re-running.
- Experience: HTMX struggled on complex forms
- One commenter said a form worked but the page took 30s to load and state dropped.
- After adding enough tests, the HTMX version ended up faster than a React one would have been.
- Opinion: newer frameworks cost more because models don't know them
- Agents must discover new APIs on the fly, which costs tokens.
- Future training could improve efficiency.
- Experience: Astro worked well for a static site
- One commenter built a Cloudflare Pages site with Astro and Opus 5.5 and was impressed.
How to Apply
- Benchmark your own stack on a small app
- Within 30 minutes, pick a small screen like your product's and have the agent build it 2–3 times from one spec.
- Record the cost, tokens and time Claude Code reports.
- Add token cost and line count to framework choice
- Compare candidates' build cost and lines of code in a table.
- Use the median of at least 5 runs, not one.
- Try MPA candidates first for content pages
- For near-static screens, measure Astro and Hono+htmx first.
- Compare JS bytes and LCP with Lighthouse mobile settings.
Try It
# Paste into Claude Code (simplified version of the article's benchmark)
Build the app from the spec below with the latest version of {{framework}}. Do not use Tailwind, Bootstrap or other UI frameworks.
Spec: {{app spec}}
When done, tell me:
- Non-blank source lines
- Why you chose SSR or CSR
Next: swap only the framework, run the same prompt 5 times each, and compare median cost, time and line count.Terminology
Related Papers
Claude Code regularly sends each background agent’s transcript to its model
Disabling Claude Code's 30-second agent status summaries removed 19.7% of API requests in one team's telemetry
Cross-request KV cache exposure in the GLM-5.3 Workers AI model (155 responses)
A KV pool smaller than the context window leaked other customers' data into 155 long-prompt responses.
Microsoft Decision-1: 9B Qwen Model Launch Explained
Microsoft's 9B Qwen-based model returns only per-option probabilities for routing and classification.
Cerebras Deploys Trillion-Parameter AI Models
Cerebras fits Kimi K3 (3T) across 59 wafers in a pipeline, serving 1000-2000+ tokens per second
A practical guide to AI image generation, from diffusion to agents
Testing image APIs showed you pay per canvas, and camera-style prompts beat describing the view
DeepInfer: High-performance inference framework for DeepSeek models
DeepSeek open-sourced DeepInfer, its production inference engine, under Apache-2.0.
Mercury 3: Diffusion at scale
Scaling diffusion LLM 40x gives Mercury 3: 4–8x faster than speed-tier models, similar quality
DeepSeek banned from U.S. federal civilian agencies under new DHS order
DHS order bans DeepSeek from U.S. federal civilian agency IT systems