todomvc
Helping you select a JavaScript framework - Todo apps for React.js, Angular, Vue and many more
Top Related Projects
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more
Quick Overview
TodoMVC is a project that helps developers compare and evaluate different JavaScript frameworks and libraries by implementing a simple todo application. It provides a consistent specification and design for a todo app, implemented across various popular front-end technologies, allowing developers to see how different frameworks approach the same problem.
Pros
- Offers a standardized way to compare different JavaScript frameworks
- Provides real-world examples of how to implement common features across various technologies
- Serves as a learning resource for developers new to specific frameworks
- Regularly updated to include new and popular frameworks
Cons
- Some implementations may become outdated as frameworks evolve
- The todo app example might be too simple for evaluating more complex application needs
- Doesn't cover backend integration or more advanced front-end features
- May lead to oversimplification when choosing a framework based solely on this example
Code Examples
As TodoMVC is not a code library but a collection of example implementations, there are no specific code examples to provide. Instead, developers can browse the repository to find implementations in their preferred framework or library.
Getting Started
To get started with TodoMVC:
- Visit the TodoMVC website or the GitHub repository.
- Choose a framework or library you're interested in exploring.
- Clone the repository or download the specific implementation.
- Follow the README instructions for the chosen implementation to set up and run the todo app locally.
- Explore the code to understand how the todo app is implemented in that particular framework or library.
Competitor Comparisons
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more
Error generating comparison
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Helping you select a JavaScript framework
Website Blog TasteJS
Developers have a number of choices today when it comes to selecting a JavaScript framework or UI library for building scalable web apps.
React, Vue, Svelte, Angular, Solid, Lit... the list of solutions continues to grow, but just how do you decide on which to use in a sea of so many options?
To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented in most of the popular JavaScript frameworks of the day. Each example is functionally identical and follows the same app specification, so you can compare syntax, structure, and idioms side by side on equal footing.
TodoMVC has been the de-facto teaching example for UI frameworks for over a decade, and forms the core of the cross-browser Speedometer benchmark used by every major browser engine to optimize UI performance.
Examples
The actively maintained examples in this repo are kept current with their framework's latest stable line. As of TodoMVC 2.0:
- React 19
- Vue 3.5
- Angular 21
- Svelte 5 (with runes)
- Preact 10
- Lit 3.3
- React Redux 9 (with Redux Toolkit 2)
Plenty of legacy framework showcases also live in examples/ for historical reference. See the website for the full list.
Build a TodoMVC App with Your AI Coding Agent
The app spec is plain Markdown and reads cleanly into any modern AI coding agent (Claude Code, Cursor, GitHub Copilot, Codex, Gemini Code Assist, Aider, and so on). To generate a fresh implementation in a framework or language that isn't on the list above, drop this prompt into your agent of choice:
Build a TodoMVC app following this spec https://raw.githubusercontent.com/tastejs/todomvc/refs/heads/master/app-spec.md in React
Replace React with Vue, Svelte, Angular, Solid, Lit, Preact, Qwik, or any framework or language you want to evaluate. The result follows the same behavioural surface every example in this repo implements (add, edit, toggle, filter, route, clear completed), so it's directly comparable to the reference apps.
Running the examples and tests
Each example builds and serves itself. Most modern apps use Vite, webpack, or rollup; cd into an example, install, and run:
$ cd examples/react
$ npm install
$ npm run build
$ npm run serve
To run the Cypress test suite against the maintained examples:
$ npm install
$ npm run test:all
npm run test:all defaults to the curated modern set. Pass --all to sweep every example in examples/, or --framework=react to target a single one. See tests/README.md for details.
Team
TodoMVC would not be possible without a strong team of contributors helping push the project forward each day. Additionally, we have a core project team composed of:
Addy Osmani - Founder/Lead
Sindre Sorhus - Lead Developer
Pascal Hartig - Developer
Stephen Sawchuk - Developer
Colin Eberhardt - Developer
Sam Saccone - Developer
Arthur Verschaeve - Developer
Fady Samir Sadek - Developer
Gianni Chiappetta - Logo designer
Disclaimer
TodoMVC has been called many things including the 'Speed-dating' and 'Rosetta Stone' of JavaScript frameworks. Whilst we hope that this project can offer assistance in deciding what frameworks are worth spending more time looking at, remember that 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.
Also, please keep in mind that TodoMVC is not the perfect way to compare the size of different frameworks. We intentionally use the unminified versions to make reading the source code easier.
Getting Involved
Whilst we enjoy implementing and improving existing Todo apps, we're always interested in speaking to framework authors (and users) wishing to share Todo app implementations in their framework/solution of choice.
Check out our contribution docs for more info.
License
Everything in this repo is MIT License unless otherwise specified.
MIT © Addy Osmani, Sindre Sorhus, Pascal Hartig, Stephen Sawchuk.
Top Related Projects
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot