explaingit

tastejs/todomvc

28,916JavaScriptAudience · developerComplexity · 2/5ActiveSetup · easy

TLDR

A reference project implementing the same to-do app in multiple JavaScript frameworks side-by-side, so developers can compare syntax and structure before choosing one.

Mindmap

mindmap
  root((repo))
    What it does
      Same app in many frameworks
      Compare syntax and structure
      Identical feature spec
    Frameworks included
      React
      Vue
      Angular
      Svelte
      Preact
      Lit
      React Redux
    Use cases
      Evaluate frameworks
      Learn framework idioms
      Performance benchmarking
    Quality assurance
      Cypress test suite
      Identical behavior validation
      Up-to-date releases

Things people build with this

USE CASE 1

Compare how React, Vue, and Angular handle the same features to decide which framework fits your project.

USE CASE 2

Learn how different frameworks structure a to-do app by reading and running their implementations side-by-side.

USE CASE 3

Use as a benchmark to measure UI performance differences across frameworks and browsers.

Tech stack

JavaScriptReactVueAngularSveltePreactLitCypress

Getting it running

Difficulty · easy Time to first run · 5min
License could not be detected automatically. Check the repository's LICENSE file before use.

In plain English

TodoMVC is a reference project that implements the same simple to-do list application, add tasks, mark them complete, filter and delete them, in many different JavaScript frameworks. The purpose is to give developers a fair, side-by-side comparison of how each framework approaches the same problem, so they can evaluate syntax, structure, and complexity before committing to one for a real project. Each implementation follows an identical specification for the app's behavior: the same features, the same routing, the same keyboard interactions. This makes comparing them meaningful rather than like comparing different problems. The maintained examples currently include React, Vue, Angular, Svelte, Preact, Lit, and React with Redux, all kept up to date with their latest stable releases. The repository also includes older implementations for historical reference. A Cypress test suite validates that every example works correctly and behaves identically. A developer who is evaluating whether to use React versus Vue for a new project, for example, can look at the TodoMVC implementations of each and see how adding a task or toggling a filter is expressed in each framework's idiom. TodoMVC has also become part of the Speedometer browser benchmark used to measure UI performance across major browser engines. The project is written in JavaScript, and each example can be built and run locally by installing its dependencies and running a build step.

Copy-paste prompts

Prompt 1
Show me the React implementation of TodoMVC and explain how it handles adding and deleting tasks.
Prompt 2
Compare the Vue and React TodoMVC implementations, what are the key syntax differences in how they manage state?
Prompt 3
How does the Redux version of TodoMVC differ from plain React? Walk me through the store setup.
Prompt 4
I'm choosing between Svelte and Angular for a new project. Show me how each handles filtering tasks in TodoMVC.
Prompt 5
Set up and run the TodoMVC React example locally, then modify it to add a priority field to tasks.
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.