todomvc README

The project's README from github.com/tastejs/todomvc. As one markdown file: README.md.

TodoMVC

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:

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

Addy is a Software Engineer at Google who originally created TodoMVC. He oversees the project direction, maintenance and organizes the planning and development efforts of the team.

Sindre Sorhus - Lead Developer

Sindre is a Web Developer who leads core development, quality control and application design for the project. His engineering contributions have helped us ensure consistency and best practices are enforced wherever possible. Sindre also leads up development of the TodoMVC application spec.

Pascal Hartig - Developer

Pascal is a Software Engineer at Twitter with a deep passion for consistency. He watches pull requests and helps developers getting their contributions integrated with TodoMVC.

Stephen Sawchuk - Developer

Stephen is a Front-end Engineer at Quicken Loans that cares about improving the maintainability and developer experience of open-source projects. His recent contributions include helping us move all apps over to using Bower and implementing the new information bar.

Colin Eberhardt - Developer

Colin is a software consultant at Scott Logic who is passionate about all software - from JavaScript to Java, and C# to Objective-C. His recent contribution to the project has been a fully automated test suite.

Sam Saccone - Developer

Sam is a Software Engineer at Google who is driven by an endless desire to create, solve problems, and improve developers' lives.

Arthur Verschaeve - Developer

Arthur is an open-source fanboy from Belgium. He is passionate about developer tooling and all things JavaScript.

Fady Samir Sadek - Developer

Fady is a front-end developer who loves all things JavaScript and enjoys solving real world problems using the web platform and helping other developers do the same. He currently leads maintenance of the project and ensures that the project is friendly for new contributors and upcoming developers.

Gianni Chiappetta - Logo designer

Gianni is a programmer and designer currently working as the Chief Rigger at MetaLab.

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.

todomvc (tastejs/todomvc)

Searching Database…

29K ·GitHub
Todomvc
这是什么？TodoMVC 在数十个 JavaScript 框架和库中实现了同一个待办事项应用，方便你在为实际项目选定框架之前，并排比较它们。
这是一个框架，还是一组示例？它不是框架，而是一个存放相同待办事项应用实现的代码仓库，每个框架一个版本，都遵循同一份规范，因此可以直接比较语法和结构。
怎样运行其中某个示例应用？进入你想要的示例文件夹（例如 React、Vue、Angular、Svelte、Preact、Lit、React Redux），安装其依赖，然后用它自带的构建工具运行，多数使用 Vite、webpack 或 rollup。
构建和测试这些示例需要先安装什么？需要 Node.js 20.19.0 或更高版本；测试套件还依赖 Cypress 以及随附的 Express 测试服务器。
仓库里的每个示例都在积极维护吗？只有精选的一组现代版本（React 19、Vue 3.5、Angular 21、Svelte 5、Preact 10、Lit 3.3、React Redux 9）保持更新；其余为遗留示例，仅供历史参考，可能已经过时。
我能为仓库里没有的框架生成 TodoMVC 实现吗？可以。应用规范是纯 Markdown 文本，你可以把它交给 Claude Code、Cursor、Copilot、Codex 或 Gemini Code Assist 等 AI 编程助手，让它用你选择的任何框架实现同一份规范。
怎样对这些示例运行 Cypress 测试？对精选的现代版本，使用 npm run test:all；添加 --all 可以检查 examples/ 中的所有示例；使用 --framework=react 则只测试单个框架。
TodoMVC 和浏览器基准测试有什么关系？TodoMVC 是跨浏览器 Speedometer 基准测试的核心，主流浏览器引擎都用它来衡量和优化界面性能。
能用 TodoMVC 判断一个框架的“体积”大小吗？不能。示例为了便于阅读，有意使用未压缩的源代码，因此不同框架之间的文件大小比较没有代表性。
What are similar projects?razzle, storybook, ice, dva, jira_clone, qiankun, nx, codesandbox-client
Which topics is it in?cypress, preact, javascript-framework, specification, redux, svelte, frontend-framework, angular, webpack, examples, web-framework, vite
Creator
tastejs
Size
76.4 MB
Stars
29K
Updated
CommitMay 03Release2.0.0Jun 06
Age
15y
Commits · 90 Days