--- title: The AI cost of JavaScript frameworks | daily.dev description: An AI coding benchmark measured how much it costs agents to build the same small Pokémon app in 12 different JavaScript frameworks. Using Claude Opus 5.5 with... canonical: https://daily.dev/posts/the-ai-cost-of-javascript-frameworks-jrc9vfahf twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The AI cost of JavaScript frameworks | daily.dev og:description: An AI coding benchmark measured how much it costs agents to build the same small Pokémon app in 12 different JavaScript frameworks. Using Claude Opus 5.5 with... og:url: https://daily.dev/posts/the-ai-cost-of-javascript-frameworks-jrc9vfahf og:image: https://api.daily.dev/og/posts/jRC9Vfahf.png og:image:alt: The AI cost of JavaScript frameworks og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The AI cost of JavaScript frameworks **[Read the Tea Leaves](https://daily.dev/sources/nolanlawson)** · 16 min read · 0 upvotes · 0 comments ## Summary An AI coding benchmark measured how much it costs agents to build the same small Pokémon app in 12 different JavaScript frameworks. Using Claude Opus 5.5 with official MCPs or skills, the author ran 5 iterations per framework and measured cost, tokens, lines of code, and Lighthouse scores. Hono+htmx was cheapest to build at $2.67 median, while Angular was priciest at $4.97 and failed twice outright. SvelteKit and Gracile+Lit were also notably expensive, partly because agents read migration docs or unfamiliar source code. Lighthouse performance and accessibility scores stayed nearly saturated across frameworks, but JavaScript bytes sent ranged from 0 for Astro to 142 for Next.js, and Hono+htmx produced the same app as Angular with about 70% of the code. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Which JavaScript framework is cheapest for an AI coding agent like Claude Opus to build an app with? Hono+htmx was cheapest at a median of $2.67 per build, followed by Astro at $2.76 and Nuxt at $2.82. Angular was most expensive at $4.97 and failed to produce a working app in 2 of 5 attempts, later redone with 3 iterations instead. SvelteKit and Gracile+Lit also ran expensive, partly because agents read unfamiliar migration docs or source code mid-task. _Picking a framework for an AI-heavy workflow? daily.dev surfaces benchmarks like this to inform that tradeoff._ ### How much JavaScript does Next.js send compared to Astro when an AI agent builds the same app in each? Next.js sent 142 KB of JavaScript while Astro sent effectively 0 KB, the widest gap among 12 frameworks tested with an AI agent building an identical Pokémon app. React Router and TanStack Start also sent over 100 KB, while Vanilla JavaScript with Vite sent just 7 KB, showing bundle size tracks closely with each framework's client-side footprint. _Weighing bundle size against framework choice? daily.dev tracks performance comparisons like this one._ ### Does using a JavaScript framework reduce the amount of code an AI agent needs to write and maintain? Yes, framework choice measurably affects total lines of code when an AI agent builds the same app. Hono+htmx produced about 1,370 lines versus Angular's 2,009 lines for equivalent functionality, roughly 70% of the code. Since code size affects token costs on every future edit, leaner frameworks can lower long-term maintenance cost in agent-driven development, not just initial build cost. _Thinking about maintainability in an AI-assisted codebase? daily.dev follows findings like this on framework overhead._ ## Similar posts on daily.dev - [AI Agent Token Costs: How to Cut Your Bill by 60-80%](https://daily.dev/posts/ai-agent-token-costs-how-to-cut-your-bill-by-60-80--nglqddiuw) · Alex CloudStar · 1 upvotes · 0 comments - [Vibe Coding Economically: Which Framework Is the Cheapest? \(Rails vs Django vs Laravel\)](https://daily.dev/posts/vibe-coding-economically-which-framework-is-the-cheapest-rails-vs-django-vs-laravel--wryznrmaw) · AppSignal · 0 upvotes · 0 comments - [The top 10 AI agent frameworks to know in 2026](https://daily.dev/posts/the-top-10-ai-agent-frameworks-to-know-in-2026-oi6y0gidz) · LogRocket · 1 upvotes · 0 comments - [Comparing token economics across 42 AI models](https://daily.dev/posts/comparing-token-economics-across-42-ai-models-htlm2dnb1) · Neon · 2 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#javascript](https://daily.dev/tags/javascript), [#ai-agents](https://daily.dev/tags/ai-agents) [View this post on daily.dev](https://daily.dev/posts/the-ai-cost-of-javascript-frameworks-jrc9vfahf) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The AI cost of JavaScript frameworks","url":"https://daily.dev/posts/the-ai-cost-of-javascript-frameworks-jrc9vfahf","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-ai-cost-of-javascript-frameworks-jrc9vfahf"},"datePublished":"2026-10-28T14:42:17.459Z","dateModified":"2026-10-28T15:03:22.058Z","description":"An AI coding benchmark measured how much it costs agents to build the same small Pokémon app in 12 different JavaScript frameworks. Using Claude Opus 5.5 with...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/541111aa8e12574a78dc718facc8ec7b?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/541111aa8e12574a78dc718facc8ec7b?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Read the Tea Leaves","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Read the Tea Leaves","logo":"https://media.daily.dev/image/upload/s--hCPaPAOM--/f_auto/v1727446484/logos/nolanlawson","url":"https://daily.dev/sources/nolanlawson"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/the-ai-cost-of-javascript-frameworks-jrc9vfahf","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,javascript,ai-agents","timeRequired":"PT16M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Read the Tea Leaves","item":"https://daily.dev/sources/nolanlawson"},{"@type":"ListItem","position":3,"name":"The AI cost of JavaScript frameworks"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/the-ai-cost-of-javascript-frameworks-jrc9vfahf#faq","mainEntity":[{"@type":"Question","name":"Which JavaScript framework is cheapest for an AI coding agent like Claude Opus to build an app with?","acceptedAnswer":{"@type":"Answer","text":"Hono+htmx was cheapest at a median of $2.67 per build, followed by Astro at $2.76 and Nuxt at $2.82. Angular was most expensive at $4.97 and failed to produce a working app in 2 of 5 attempts, later redone with 3 iterations instead. SvelteKit and Gracile+Lit also ran expensive, partly because agents read unfamiliar migration docs or source code mid-task. Picking a framework for an AI-heavy workflow? daily.dev surfaces benchmarks like this to inform that tradeoff."}},{"@type":"Question","name":"How much JavaScript does Next.js send compared to Astro when an AI agent builds the same app in each?","acceptedAnswer":{"@type":"Answer","text":"Next.js sent 142 KB of JavaScript while Astro sent effectively 0 KB, the widest gap among 12 frameworks tested with an AI agent building an identical Pokémon app. React Router and TanStack Start also sent over 100 KB, while Vanilla JavaScript with Vite sent just 7 KB, showing bundle size tracks closely with each framework's client-side footprint. Weighing bundle size against framework choice? daily.dev tracks performance comparisons like this one."}},{"@type":"Question","name":"Does using a JavaScript framework reduce the amount of code an AI agent needs to write and maintain?","acceptedAnswer":{"@type":"Answer","text":"Yes, framework choice measurably affects total lines of code when an AI agent builds the same app. Hono+htmx produced about 1,370 lines versus Angular's 2,009 lines for equivalent functionality, roughly 70% of the code. Since code size affects token costs on every future edit, leaner frameworks can lower long-term maintenance cost in agent-driven development, not just initial build cost. Thinking about maintainability in an AI-assisted codebase? daily.dev follows findings like this on framework overhead."}}]} ```