AI Coding Agents Put 12 JavaScript Frameworks to the Test. Here's What Won

For years, choosing a JavaScript framework has been one of the most debated decisions in web development. Developers have compared React, Angular, Vue, Svelte and other technologies based on performance, flexibility, developer experience and the complexity of maintaining applications.

But the growing use of artificial intelligence in software development is introducing another factor: how efficiently can an AI coding agent work with a particular framework?

A recent experiment by developer Nolan Lawson puts that question to the test. Instead of relying on personal preferences or general framework popularity, Lawson asked an AI coding agent to build the same web application using 12 different JavaScript frameworks and development stacks.

The results challenge some familiar assumptions about modern web development. Frameworks that prioritize simplicity and server-side rendering performed particularly well in several categories, while some more complex approaches required additional time and resources.

The findings do not mean that established frameworks such as React or Angular are becoming obsolete. However, they suggest that the best technology choices for AI-assisted development may not always be the same choices developers have traditionally made.

A 12-Framework Experiment With One Common Application

The experiment was designed to make the comparison as consistent as possible.

Lawson instructed an AI coding agent using Claude Code to build a basic Pokémon web application connected to PokéAPI, a public API that provides Pokémon information.

The same application requirements were used across 12 different frameworks and JavaScript development stacks:

1. Angular
2. Astro
3. Gracile with Lit
4. Hono with htmx
5. Vanilla JavaScript with Vite
6. Next.js
7. Nuxt
8. Qwik
9. React Router
10. TanStack Start
11. SolidStart
12. SvelteKit

Each framework was tested through five independent runs, allowing the experiment to account for some of the variation that can occur when an AI model generates code.

Angular was an exception for certain measurements because two of its five attempts did not produce a measurable working application. The relevant results were therefore calculated using three successful runs.

To evaluate the applications, Lawson used an automated test suite that checked whether the generated interfaces actually met the requirements. Google Lighthouse was also used to assess aspects of the resulting websites, including performance and accessibility.

The experiment examined several areas, including the cost of generating an application, development time, code size, JavaScript transferred to users and page-loading performance.

Hono and htmx Delivered the Lowest AI Build Cost

One of the most interesting findings concerned the reported cost of generating the applications.

Hono paired with htmx recorded the lowest median build cost at approximately $2.67 per run.

Astro followed closely at $2.76, while Nuxt recorded $2.82.

These three technologies performed particularly well in the experiment, although the differences between their results were relatively small.

At the other end of the comparison, Angular recorded a median cost of approximately $4.97 and required substantially more time and tokens in the successful runs.

SvelteKit also recorded a higher median generation cost of approximately $4.28.

The findings suggest that AI coding agents can be more economical when working with technologies that provide clear conventions and avoid unnecessary architectural complexity.

However, these figures should be interpreted carefully. They represent the reported cost of generating this particular test application under the experiment's conditions. They are not estimates of the total cost of developing a production website or maintaining a commercial application.

Astro Was the Fastest Framework in the Build Test

Although Hono and htmx had the lowest median generation cost, Astro achieved the fastest median build and testing time.

The Astro application took approximately 8.2 minutes to build and test.

Hono with htmx followed at 8.6 minutes, while Nuxt completed the task in approximately 9 minutes.

Angular took approximately 17.2 minutes, making it the slowest framework in the comparison.

This difference is particularly interesting because the AI agent was working with the same application requirements across the different technologies.

The results suggest that framework design, documentation, conventions and the amount of code an agent needs to generate can influence how quickly it completes a development task.

For teams using AI coding tools, this could become an important consideration when estimating development time and choosing technologies for new projects.

Website Performance Revealed Another Important Difference

The experiment did not stop at measuring how quickly an AI agent could generate code.

It also examined how the resulting applications performed when loaded in a browser.

Astro recorded the fastest Largest Contentful Paint result at approximately 810 milliseconds.

Largest Contentful Paint, commonly known as LCP, measures how quickly the largest visible content element on a page appears to the user. It is one of Google's Core Web Vitals and provides an important indication of perceived loading performance.

Next.js recorded approximately 2,090 milliseconds, while TanStack Start recorded approximately 2,028 milliseconds in the reported test.

The experiment also highlighted differences in the amount of JavaScript delivered to the browser.

Astro transferred almost no JavaScript in the tested application, while Next.js transferred approximately 142 KiB. React Router transferred around 115 KiB, and Angular transferred approximately 93 KiB.

These results reflect the specific applications generated for the benchmark, rather than fixed performance characteristics of the frameworks themselves.

A carefully optimized Next.js application, for example, can perform very differently from a basic application generated under a particular set of instructions.

Nevertheless, the results reinforce an important web development principle: sending less unnecessary JavaScript to the browser can help reduce the work required to render and run a page.

Why Simpler Frameworks May Work Better With AI Coding Agents

One of the central observations from the experiment is that AI agents appeared to work more efficiently with frameworks that favor convention, stable APIs and concise development patterns.

This is an important distinction.

Traditional framework comparisons often focus on how comfortable a technology is for human developers. They may consider ecosystem size, available libraries, documentation, flexibility and the experience of building complex applications.

AI coding agents introduce another dimension.

An agent must understand the framework's conventions, identify the correct APIs, interpret documentation and generate code that works within the expected architecture.

When a framework provides predictable patterns and handles more of the underlying complexity, the agent may need fewer instructions and less generated code to complete a task.

Server-centric technologies can also reduce the amount of coordination required between browser-side and server-side application logic.

This helps explain why Hono with htmx and Astro performed well in the experiment.

However, it would be inaccurate to conclude that every AI agent will always perform better with server-centric frameworks. The results can change depending on the model, available tools, documentation, task complexity and how the application is designed.

Does This Mean React and Angular Are Losing Their Place?

Not necessarily.

The benchmark has generated interest partly because it challenges the assumption that the most familiar or widely used framework will automatically be the most efficient choice for AI-assisted development.

However, the experiment did not compare every possible use case.

It tested one relatively simple Pokémon application. A complex enterprise dashboard, real-time collaboration platform, browser-based game or large interactive application could produce different results.

React and its surrounding ecosystem remain relevant for applications that require sophisticated client-side interactions and established development patterns.

Angular continues to offer a structured environment for large applications and teams that value its conventions, tooling and integrated architecture.

The same applies to other technologies in the comparison. Each framework has strengths that may become more important depending on the project.

The more useful conclusion is that developers should avoid choosing technologies purely because they are popular or familiar.

Instead, framework selection should consider the actual requirements of the project, the experience of the development team, long-term maintenance and the tools that will be used to build the application.

What This Means for Web Developers and Development Agencies

The results offer several lessons for developers, software companies and web development agencies.

1. AI Development Tools Are Changing Technology Selection

AI coding agents are becoming part of everyday software development. As their capabilities improve, teams will increasingly evaluate frameworks based on how well they work with automated development workflows.

A framework that is easy for an AI agent to understand may reduce development time and the amount of generated code required for certain projects.

Development teams should begin testing their preferred frameworks with the AI tools they actually use.

2. Website Performance Still Matters

A website is not successful simply because its code was generated quickly.

Users still expect pages to load quickly, interfaces to respond smoothly and websites to work reliably across devices.

The benchmark's JavaScript transfer and loading-time results highlight why performance should remain part of the framework selection process.

Developers should pay attention to unnecessary scripts, rendering strategies, image optimization, caching and the overall amount of work required from the browser.

3. Less Code Does Not Automatically Mean Better Software

The experiment also measured the amount of source code generated for each application.

Hono with htmx produced approximately 1,370 lines of code, while Angular produced approximately 2,009 lines.

Smaller codebases can be easier to review and may reduce the amount of material an AI agent needs to process during future changes.

However, code length alone is not a reliable measure of software quality.

A smaller application can still contain security vulnerabilities, poor architecture or difficult-to-maintain logic. Developers must evaluate correctness, readability, testing, documentation and maintainability alongside code size.

4. Human Review Remains Essential

AI-generated code still requires proper engineering oversight.

Developers need to verify that applications meet their requirements, handle errors correctly, protect sensitive information and remain maintainable.

Automated tests, security reviews and code reviews should remain part of the development process.

The objective should not be to let AI choose and build everything without supervision. It should be to use AI to improve productivity while maintaining professional development standards.

5. Agencies Should Test Before Committing to a Technology

Web development agencies may find it useful to run small internal benchmarks before selecting a framework for a new project.

For example, an agency could ask the same AI coding agent to build a representative feature in two or three candidate frameworks.

It could then compare:

1. Time required to complete the task.
2. Cost of AI model usage.
3. Code quality and maintainability.
4. Page-loading performance.
5. Accessibility.
6. Ease of debugging and future changes.

This would provide practical evidence for technology selection rather than relying entirely on developer preferences.

The Future of Web Development May Be More About the Right Tools Than the Most Popular Ones

The JavaScript framework debate is unlikely to disappear. Developers will continue to compare technologies, argue about architecture and look for better ways to build websites and applications.

What is changing is the role of AI in that decision-making process.

As AI coding agents become more capable, development teams will need to think about how efficiently a framework can be understood, implemented, tested and maintained by both humans and machines.

Nolan Lawson's experiment provides an interesting starting point. Hono with htmx, Astro and Nuxt performed particularly well in several categories, while the results also demonstrated that different frameworks can produce very different development costs and browser experiences.

But no single benchmark can determine the best technology for every project.

The right framework will depend on the application's complexity, performance requirements, available expertise, security needs and long-term maintenance plans.

For developers and businesses, the bigger lesson is clear: AI is changing how software gets built, but good engineering decisions still matter.