TodoMVC: A Side-by-Side JavaScript Framework Comparison Through One App

What TodoMVC compares and who uses it

TodoMVC exists to answer one question: given a list of JavaScript frameworks, how does each one structure the same application? The README describes the problem directly: "Developers have a number of choices today when it comes to selecting a JavaScript framework or UI library for building scalable web apps... just how do you decide on which to use in a sea of so many options?" The answer is a repository where every example implements the same todo application, follows the same behavioural specification, and can be browsed side by side. The primary audience is developers evaluating frameworks for a new project, instructors teaching frontend development, and teams considering a migration. The Speedometer benchmark team also uses TodoMVC: the README states that it "forms the core of the cross-browser Speedometer benchmark used by every major browser engine to optimize UI performance".

The app specification that keeps all examples comparable

The file `app-spec.md` in the repository root defines the behavioural surface every implementation must cover: add a new todo, edit an existing one, toggle completion, filter by active or completed status, route between views, and clear completed items. The README lists these as the six operations. Because every example implements this same surface identically, a developer reading the React implementation and then the Vue implementation is comparing framework idioms rather than feature sets. The spec is written in plain Markdown, which the README notes reads cleanly into AI coding agents. The test suite in the `tests/` directory, which uses Cypress, validates that each implementation satisfies the spec. The spec has been stable across major versions: the 2.0.0 release updated the example implementations, not the specification itself.

The actively maintained examples in TodoMVC 2.0

TodoMVC 2.0 was released on 2026-06-06. The README lists the examples kept current with their framework's latest stable line:

- React 19 (`examples/react`) - Vue 3.5 (`examples/vue`) - Angular 21 (`examples/angular`) - Svelte 5 with runes (`examples/svelte`) - Preact 10 (`examples/preact`) - Lit 3.3 (`examples/lit`) - React Redux 9 with Redux Toolkit 2 (`examples/react-redux`)

The `examples/` directory also holds legacy framework implementations for historical reference, including AngularJS 1.x, Backbone, Ember, Knockout, Elm, Dojo, jQuery, and others. These legacy examples are not actively updated but remain in the repository for comparison with the history of frontend development patterns.

Running examples and the Cypress test suite

Most modern examples use Vite, webpack, or rollup. Each example builds and serves itself:

$ cd examples/react
$ npm install
$ npm run build
$ npm run serve

To run the Cypress test suite against all maintained examples:

$ npm install
$ npm run test:all

`npm run test:all` defaults to the curated modern set. Passing `--all` sweeps every example in `examples/`, including legacy ones. Passing `--framework=react` targets a single implementation. The `tests/README.md` file documents the full options. Node.js 20.19.0 or later is required, as specified in the package.json engines field. The test runner uses `start-server-and-test` to spin up the express server before running Cypress.

Generating new framework implementations with AI coding agents

The README notes that `app-spec.md` is plain Markdown and suggests using it with AI coding agents. The recommended prompt is:

Build a TodoMVC app following this spec https://raw.githubusercontent.com/tastejs/todomvc/refs/heads/master/app-spec.md in React

Replacing React with Vue, Svelte, Angular, Solid, Lit, Preact, Qwik, or any other framework produces a specification-compliant implementation that covers the same six operations as every other example. The README mentions Claude Code, Cursor, GitHub Copilot, Codex, Gemini Code Assist, and Aider as agents that work with this approach. This use case turns TodoMVC from a read-only reference into an active evaluation tool: generate an implementation in a framework the team is considering, then run the Cypress suite to confirm it passes.

TodoMVC as the Speedometer 3.1 benchmark core

The README states that TodoMVC "forms the core of the cross-browser Speedometer benchmark used by every major browser engine to optimize UI performance". The Speedometer benchmark, hosted at browserbench.org/Speedometer3.1, uses TodoMVC implementations to measure how fast browsers render typical React, Vue, and Angular interactions under load. This gives TodoMVC a significance beyond framework comparison: every major browser team has optimised their JavaScript engine against these specific implementations. The implication for developers is that the performance characteristics seen on TodoMVC reflect real browser investment. However, the benchmark role also limits what the codebase can change: spec-breaking changes to the maintained examples would break the Speedometer workload.

Limitations and what TodoMVC cannot tell you

The README includes a Disclaimer section worth quoting: "the Todo application offers a limited view of a framework's potential capability. It is meant to be used as a gateway to reviewing how a basic application using a framework may be structured, and we heavily recommend investing time researching a solution in more depth before opting to use it." The disclaimer adds that TodoMVC is not for comparing bundle sizes: it intentionally uses unminified builds to make source code readable. A todo app demonstrates routing, list rendering, form handling, and local state, but does not exercise server communication, authentication, code splitting, or error handling. For a deeper evaluation, building a small prototype of the actual application is more informative. The last push was 2026-06-06, more than three months before the last push date for many other projects in this batch, but not long enough to call the project inactive.

Editorial conclusion

TodoMVC is the right tool for getting a quick read on how a framework structures a complete interactive application, and for generating a specification-compliant baseline with an AI coding agent. The README itself cautions that it offers a limited view of a framework's potential capability and recommends investing time in deeper research before making a production decision. Speedometer 3.1 provides the performance angle; TodoMVC provides the syntax and architecture angle. The last push was on 2026-06-06 when v2.0.0 was released, updating all maintained examples to their current stable versions.

Frequently asked questions

Official sources

1. Issues
2. Project website
3. README
4. Releases
5. tastejs/todomvc on GitHub