PageSourceSearch

https://todomvc.com/

html todomvc.com collected 2026-09-24 15:19:32 UTC 32,248 bytes, 462 lines download raw bytes

1<!doctype html>
2<html lang="en">
3	<head>
4		<meta charset="utf-8">
5		<title>TodoMVC</title>
6		<meta name="description" content="Helping you select a JavaScript framework - the same Todo app implemented in React, Vue, Svelte, Angular, Lit, Preact and many more">
7		<meta name="viewport" content="width=device-width,initial-scale=1">
8		<meta name="twitter:card" content="summary">
9		<meta name="twitter:title" content="TodoMVC">
10		<meta name="twitter:site" content="@TasteJS">
11		<meta name="twitter:description" content="Helping you select a JavaScript framework - the same Todo app implemented in React, Vue, Svelte, Angular, Lit, Preact and many more">
12		<meta name="twitter:image" content="https://raw.githubusercontent.com/tastejs/todomvc/gh-pages/site-assets/screenshot.png">
13		<meta property="og:url" content="http://todomvc.com">
14		<meta property="og:title" content="TodoMVC">
15		<meta property="og:image" content="https://raw.github.com/tastejs/todomvc/gh-pages/site-assets/screenshot.png">
16		<meta property="og:description" content="Helping you select a JavaScript framework - the same Todo app implemented in React, Vue, Svelte, Angular, Lit, Preact and many more">
17		<link rel="shortcut icon" href="site-assets/favicon.ico">
18		
18<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
18
19		<!-- build:remove -->
20		
20<script src="bower_components/prefixfree/prefixfree.min.js"></script>
20
21		<!-- endbuild -->
22		<!-- build:css site-assets/main.min.css -->
23		<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
24		<link rel="stylesheet" href="site-assets/main.css">
25		<!-- endbuild -->
26		<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
27	</head>
28	<body>
29		<div class="container">
30			<header class="row">
31				<div class="col-md-8">
32					<img class="logo" src="site-assets/logo.svg" width="500" height="86" alt="TodoMVC">
33					<p>Helping you <strong>select</strong> an MV* framework</p>
34					<nav>
35						<a href="https://github.com/tastejs/todomvc/archive/master.zip" class="zocial red">Download</a>
36						<a href="https://github.com/tastejs/todomvc" class="zocial ltgray">View on GitHub</a>
37						<a href="https://medium.com/@tastejs" class="zocial ltgray">Blog</a>
38					</nav>
39				</div>
40				<div class="col-md-4">
41					<img class="logo-icon" src="site-assets/logo-icon.png" width="330" height="330" alt="TodoMVC">
42				</div>
43			</header>
44			<div class="row">
45				<div class="col-md-4">
46					<h2>Introduction</h2>
47					<p>Developers have a number of choices today when it comes to selecting a JavaScript framework or UI library for building scalable web apps.</p>
48					<p>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?</p>
49					<p>To help you understand the options, we created TodoMVC - a project which has offered the same Todo applications implemented in popular JavaScript frameworks for over a decade.</p>
50					<p>TodoMVC is useful for comparing syntax and solutions, is officially used in cross-browser benchmarks (e.g. <a href="https://browserbench.org/Speedometer3.1/" target="_blank">Speedometer</a>) and aims to stay up to date as trends change over time.</p>
51					<a href="https://twitter.com/tastejs" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false"></a>
52					<a href="https://twitter.com/share" class="twitter-share-button" data-via="tastejs" data-url="http://todomvc.com" data-text="TodoMVC - Helping you select a JavaScript framework - the same Todo app in React, Vue, Svelte, Angular and more"></a>
53				</div>
54				<div class="col-md-8">
55					<h2>Examples</h2>
56					<style is="custom-style">
57						paper-tabs {
58							--paper-tabs-selection-bar-color: #b12d2b;
59						}
60
61						paper-tab {
62							--paper-tab-ink: #b12d2b;
63						}
64
65						paper-tabs, core-toolbar {
66							color: rgb(53, 53, 53);
67							background-color: #f4f4f4;
68							font-family: 'Helvetica Neue', Helvetica, Arial;
69							box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
70						}
71					</style>
72					<paper-tabs selected="0" class="js-app-tabs">
73						<paper-tab data-target="js">JavaScript</paper-tab>
74						<paper-tab data-target="ctojs">Compile-to-JS</paper-tab>
75						<paper-tab data-target="labs">Labs</paper-tab>
76					</paper-tabs>
77
78					<iron-pages selected="0" class="app-lists">
79						<div class="js-app-list" data-app-list="js">
80							<p class="applist-intro">
81								These are examples written in pure JavaScript.
82							</p>
83							<ul class="js-app-list-inner applist js">
84								<li>
85									<a class="applist-item" href="examples/react/dist/" data-source="http://facebook.github.io/react/" data-content="React is a JavaScript library for building user interfaces.">
86										<span class="link">React</span>
87										<span class="badge" data-color="green">New</span>
88									</a>
89								</li>
90								<li>
91									<a class="applist-item" href="examples/react-redux/dist" data-source="https://react-redux.js.org/" data-content="React Redux is maintained by the Redux team, and kept up-to-date with the latest APIs from Redux and React.">
92										<span class="link">React Redux</span>
93										<span class="badge" data-color="green">New</span>
94									</a>
95								</li>
96								<li>
97									<a class="applist-item" href="examples/vue/dist/" data-source="http://vuejs.org" data-content="Vue.js provides the benefits of MVVM data binding and a composable component system with an extremely simple and flexible API.">
98										<span class="link">Vue.js</span>
99										<span class="badge" data-color="green">New</span>
100									</a>
101								</li>
102								<li>
103									<a class="applist-item" href="examples/preact/dist/" data-source="https://preactjs.com/" data-content="Fast 3kB React alternative with the same modern API. Components & Virtual DOM.">
104										<span class="link">Preact</span>
105										<span class="badge" data-color="green">New</span>
106									</a>
107								</li>
108								<li>
109									<a class="applist-item" href="examples/backbone/dist/" data-source="http://backbonejs.org/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">
110										<span class="link">Backbone.js</span>
111										<span class="badge" data-color="green">New</span>
112									</a>
113								</li>
114								<li>
115									<a class="applist-item" href="examples/angular/dist/browser/" data-source="https://angular.dev" data-content="Angular is a web framework that empowers developers to build fast, reliable applications.">
116										<span class="link">Angular</span>
117										<span class="badge" data-color="green">New</span>
118									</a>
119								</li>
120								<li>
121									<a class="applist-item" href="examples/emberjs/todomvc/dist/" data-source="http://emberjs.com" data-content="Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.">
122										<span class="link">Ember.js</span>
123										<span class="badge" data-color="green">New</span>
124									</a>
125								</li>
126								<li>
127									<a class="applist-item" href="examples/lit/dist/" data-source="https://lit.dev/" data-content="Lit is a simple library for building fast, lightweight web components.">
128										<span class="link">Lit</span>
129										<span class="badge" data-color="green">New</span>
130									</a>
131								</li>
132								<li>
133									<a class="applist-item" href="examples/knockoutjs/" data-source="http://knockoutjs.com" data-content="Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern">
134										<span class="link">KnockoutJS</span>
135									</a>
136								</li>
137								<li>
138									<a class="applist-item" href="examples/dojo/" data-source="http://dojotoolkit.org" data-content="Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications.">
139										<span class="link">Dojo</span>
140									</a>
141								</li>
142								<li>
143									<a class="applist-item" href="examples/knockback/" data-source="http://kmalakoff.github.com/knockback/" data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">
144										<span class="link">Knockback.js</span>
145									</a>
146								</li>
147								<li>
148									<a class="applist-item" href="examples/canjs/" data-source="http://canjs.us" data-content="CanJS with jQuery. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">
149										<span class="link">CanJS</span>
150									</a>
151								</li>
152								<li>
153									<a class="applist-item" href="examples/polymer/index.html" data-source="http://polymer-project.org" data-content="Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers. It is comprised of core platform features (e.g Shadow DOM, Custom Elements, MDV) enabled with polyfills and a next generation web application framework built on these technologies.">
154										<span class="link">Polymer</span>
155									</a>
156								</li>
157
158								<li>
159									<a class="applist-item" href="examples/mithril/" data-source="https://mithril.js.org/" data-content="Mithril is a modern client-side Javascript framework for building Single Page Applications. It's small (< 8kb gzip), fast and provides routing and XHR utilities out of the box.">
160										<span class="link">Mithril</span>
161									</a>
162								</li>
163								<li>
164									<a class="applist-item" href="examples/backbone_marionette/" data-source="http://marionettejs.com" data-content="Backbone.Marionette is a composite application library for Backbone.js that aims to 
164simplify the construction of large scale JavaScript applications.">
165										<span class="link">Marionette.js</span>
166									</a>
167								</li>
168							</ul>
169						</div>
170						<div class="js-app-list" data-app-list="ctojs">
171							<p class="applist-intro">
172								These are applications written in programming
173								languages that compile to JavaScript.
174							</p>
175							<ul class="js-app-list-inner applist js">
176								<li>
177									<a class="applist-item" href="examples/svelte/dist/" data-source="https://svelte.dev/" data-content="Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.">
178										<span class="link">Svelte</span>
179										<span class="badge" data-color="green">New</span>
180									</a>
181								</li>
182								<li>
183									<a class="applist-item" href="examples/gwt/" data-source="https://developers.google.com/web-toolkit/" data-content="Google Web Toolkit (GWT) is an MVP development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords.">
184										<span class="link">GWT</span>
185									</a>
186								</li>
187								<li>
188									<a href="examples/closure/" data-source="http://code.google.com/closure/library/" data-content="The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more.">
189										<span class="link">Closure</span>
190									</a>
191								</li>
192								<li>
193									<a class="applist-item" href="examples/elm/" data-source="http://elm-lang.org" data-content="A functional reactive language for interactive applications">
194										<span class="link">Elm</span>
195									</a>
196								</li>
197								<li>
198									<a class="applist-item" href="examples/angular-dart/web/" data-source="https://github.com/angular/angular.dart" data-content="Dart firstly targets the development of modern and large scale browser-side web apps. It's an object oriented language with a C-style syntax. AngularDart is a port of Angular to Dart.">
199										<span class="link">AngularDart</span>
200									</a>
201								</li>
202								<li>
203									<a class="applist-item" href="examples/typescript-backbone/" data-source="http://typescriptlang.org" data-content="TypeScript is a language for application-scale JavaScript development. It offers classes, modules, interfaces and type-checking at compile time to help you build robust components.">
204										<span class="link">TypeScript + Backbone.js</span>
205									</a>
206								</li>
207								<li>
208									<a class="applist-item" href="examples/typescript-angular/" data-source="http://typescriptlang.org" data-content="An AngularJS + TypeScript implementation of TodoMVC. The only significant difference between this and the vanilla Angular app is that dependency injection is done via annotated constructors, which allows minification of JavaScript.">
209										<span class="link">TypeScript + AngularJS</span>
210									</a>
211								</li>
212								<li>
213									<a class="applist-item" href="examples/typescript-react/" data-source="http://typescriptlang.org" data-content="An TypeScript + React implementation of TodoMVC. TypeScript is a language for application-scale JavaScript development. It offers classes, modules, interfaces and type-checking at compile time to help you build robust components. This examples showcases how to work with TSX files, which allow us to enjoy native JSX support while working with  TypeScript.">
214										<span class="link">TypeScript + React</span>
215									</a>
216								</li>
217								<li>
218									<a class="applist-item" href="examples/reagent/" data-source="https://reagent-project.github.io/" data-content="Reagent provides a minimalistic interface between ClojureScript and React.">
219										<span class="link">Reagent</span>
220									</a>
221								</li>
222								<li>
223									<a class="applist-item" href="examples/binding-scala/" data-source="https://github.com/ThoughtWorksInc/Binding.scala" data-content="Binding.scala is a reactive web framework. This TodoMVC application has the tiniest code size among all the TodoMVC implementations.">
224										<span class="link">Scala.js + Binding.scala</span>
225									</a>
226								</li>
227								<li>
228									<a class="applist-item" href="examples/js_of_ocaml/" data-source="http://ocsigen.org/js_of_ocaml/" data-content="Js_of_ocaml is a compiler of OCaml bytecode to Javascript.">
229										<span class="link">js_of_ocaml</span>
230									</a>
231								</li>
232								<li>
233									<a class="applist-item" href="examples/humble/" data-source="https://github.com/go-humble/humble" data-content="Humble is a collection of loosely-coupled tools designed to build client-side and hybrid web applications using GopherJS, which compiles Go code to JavaScript.">
234										<span class="link">Humble + GopherJS</span>
235									</a>
236								</li>
237							</ul>
238						</div>
239						<div class="js-app-list" data-app-list="labs">
240							<p class="applist-intro">
241								These are examples written in JavaScript that
242								we are still evaluating.
243							</p>
244							<ul class="js-app-list-inner applist js">
245								<li>
246									<a class="applist-item" href="examples/backbone_require/" data-source="http://requirejs.org" data-content="RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your co
246de.">
247										<span class="link">Backbone.js + RequireJS</span>
248									</a>
249								</li>
250								<li>
251									<a class="applist-item" href="examples/knockoutjs_require/" data-source="http://knockoutjs.com" data-content="This project is an adaptation of /examples/knockoutjs with require.js.">
252										<span class="link">KnockoutJS + RequireJS</span>
253									</a>
254								</li>
255								<li>
256									<a class="applist-item" href="examples/angularjs_require/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. This is an example of using it with AMD modules.">
257										<span class="link">AngularJS + RequireJS</span>
258									</a>
259								</li>
260								<li>
261									<a class="applist-item" href="examples/canjs_require/" data-source="http://canjs.us" data-content="CanJS is a client-side, JavaScript framework that makes building rich web applications easy. The AMD version lets you use the framework in a fully modular fashion and will only what you actually need.">
262										<span class="link">CanJS + RequireJS</span>
263									</a>
264								</li>
265								<li>
266									<a class="applist-item" href="examples/lavaca_require/" data-source="http://getlavaca.com" data-content="A curated collection of tools for building mobile web applications.">
267										<span class="link">Lavaca + RequireJS</span>
268									</a>
269								</li>
270								<li>
271									<a class="applist-item" href="examples/cujo/index.html" data-source="http://cujojs.com" data-content="cujoJS is an architectural framework for building highly modular, scalable, maintainable applications in Javascript.  It provides architectural plumbing, such as modules (AMD and CommonJS), declarative application composition, declarative connections, and aspect oriented programming.">
272										<span class="link">cujoJS</span>
273									</a>
274								</li>
275								<li>
276									<a class="applist-item" href="examples/somajs/" data-source="http://somajs.github.com/somajs" data-content="soma.js is a framework created to build scalable and maintainable javascript applications.">
277										<span class="link">soma.js</span>
278									</a>
279								</li>
280								<li>
281									<a class="applist-item" href="examples/duel/www/" data-source="https://bitbucket.org/mckamey/duel/wiki/Home" data-content="DUEL is a dual-side templating engine using HTML for layout and 100% pure JavaScript as the binding language. The same views may be executed both directly in the browser (client-side template) and on the server (server-side template).">
282										<span class="link">DUEL</span>
283									</a>
284								</li>
285								<li>
286									<a class="applist-item" href="examples/dijon/" data-source="https://github.com/creynders/dijon-framework" data-content="Dijon is an IOC and DI micro-framework for Javascript. Originally it was meant to be a port of Robotlegs, but deviated to something quite different. It remains however heavily inspired by Robotlegs, and more specifically Swiftsuspenders.">
287										<span class="link">Dijon</span>
288									</a>
289								</li>
290								<li>
291									<a class="applist-item" href="examples/enyo_backbone/" data-source="http://enyojs.com/" data-content="Enyo is a simple but powerful encapsulation model, which helps you factor application functionality into self-contained building blocks that are easy to reuse and maintain.">
292										<span class="link">Enyo + Backbone.js</span>
293									</a>
294								</li>
295								<li>
296									<a class="applist-item" href="examples/exoskeleton/" data-source="http://exosjs.com/" data-content="A faster and leaner Backbone for your HTML5 apps.">
297										<span class="link">Exoskeleton</span>
298									</a>
299								</li>
300								<li>
301									<a class="applist-item" href="examples/ractive/" data-source="http://ractivejs.org" data-content="Ractive.js is a next-generation DOM manipulation library, optimised for developer sanity.">
302										<span class="link">Ractive.js</span>
303									</a>
304								</li>
305								<li>
306									<a class="applist-item" href="examples/aurelia/" data-source="http://aurelia.io/" data-content="Aurelia is a next generation JavaScript client framework that leverages simple c
306onventions to empower your creativity">
307										<span class="link">Aurelia</span>
308									</a>
309								</li>
310								<li>
311									<a class="applist-item" href="examples/riotjs/" data-source="http://riotjs.com/" data-content="Riot.js is a React-like user interface micro-library.">
312										<span class="link">Riot</span>
313									</a>
314								</li>
315								<li>
316									<a class="applist-item" href="examples/jsblocks/" data-source="http://jsblocks.com/" data-content="From simple user interfaces to complex single-page applications using faster, server-side rendered and easy to learn framework.">
317										<span class="link">JSBlocks</span>
318									</a>
319								</li>
320							</ul>
321						</div>
322
323					</iron-pages>
324					<hr>
325					<h2>Compare these to a non-framework implementation</h2>
326					<ul class="applist">
327						<li>
328							<a class="applist-item" href="examples/javascript-es5/dist/" data-source="https://developer.mozilla.org/en/JavaScript" data-content="You know JavaScript right? :P">
329								<span class="link">JavaScript ES5</span>
330								<span class="badge" data-color="green">New</span>
331							</a>
332						</li>
333						<li>
334							<a class="applist-item" href="examples/javascript-es6/dist/" data-source="https://developer.mozilla.org/en/JavaScript" data-content="Modern JavaScript and DOM APIs only — no framework, no library. Uses webpack to bundle and optimize.">
335								<span class="link">Modern JavaScript</span>
336								<span class="badge" data-color="green">New</span>
337							</a>
338						</li>
339						<li>
340							<a class="applist-item" href="examples/jquery/dist/" data-source="http://jquery.com" data-content="jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.">
341								<span class="link">jQuery</span>
342								<span class="badge" data-color="green">New</span>
343							</a>
344						</li>
345						<li>
346							<a class="applist-item" href="examples/web-components/dist/" data-source="https://developer.mozilla.org/en-US/docs/Web/API/Web_components" data-content="Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.">
347								<span class="link">Web Components</span>
348								<span class="badge" data-color="green">New</span>
349							</a>
350						</li>
351					</ul>
352					<hr>
353					<ul class="legend">
354						<li><span class="badge" data-color="green">New</span> = New or updated app</li>
355					</ul>
356				</div>
357			</div>
358			<hr>
359			<div class="row">
360				<div class="col-md-6 quotes">
361					<blockquote class="quote speech-bubble">
362						<p></p>
363						<footer>
364							<img width="40" height="40" alt="">
365							<a></a>
366						</footer>
367					</blockquote>
368				</div>
369				<div class="col-md-6">
370					<img class="screenshot" src="site-assets/screenshot.png" width="558" height="246" alt="Todo app screenshot">
371				</div>
372			</div>
373			<hr>
374			<div class="row">
375				<div class="col-md-4">
376					<h2>New in 2.0</h2>
377					<ul class="whats-new">
378						<li><h4>Framework Updates 🚀</h4>
379							<div>
380								<p>Each of the actively-maintained example apps has been brought up to its current stable line, with i
380diomatic code for the modern version.</p>
381								<label class="link" for="updated-expander">Examples ▼</label>
382								<input type="checkbox" id="updated-expander" class="simple-dropdown">
383								<ul class="collapsed" id="updated-apps">
384									<li><a href="examples/angular/dist/browser/">Angular 21</a> (new <code>@angular/build</code> builder)</li>
385									<li><a href="examples/react/dist/">React 19</a> (createRoot, react-router 7)</li>
386									<li><a href="examples/vue/dist/">Vue 3.5</a> (Vite 8)</li>
387									<li><a href="examples/svelte/dist/">Svelte 5</a> (full runes migration)</li>
388									<li><a href="examples/preact/dist/">Preact 10.29</a></li>
389									<li><a href="examples/lit/dist/">Lit 3.3</a></li>
390									<li><a href="examples/react-redux/dist/">React Redux 9</a> with Redux Toolkit 2</li>
391								</ul>
392							</div>
393						</li>
394						<li><h4>Test Suite Modernization 🧪</h4>
395							<div>
396								<p>The Cypress test suite is functional again on current Node and now drives the official TodoMVC behavioural spec across every maintained app. Around twenty real spec deviations (trim on save, save on blur, escape handling, accessibility labels, "Clear completed" capitalisation) were caught and fixed along the way.</p>
397							</div>
398						</li>
399						<li><h4>Tooling Cleanup 🧹</h4>
400							<div>
401								<p>Dropped gulp 3, Selenium scaffolding, Bower-only deps, and other long-stale infrastru
401cture from the test path. <code>npm run test:all</code> works on a fresh clone again.</p>
402							</div>
403						</li>
404					</ul>
405				</div>
406				<div class="col-md-4">
407					<h2>Selecting a Framework</h2>
408					<p>Once you've downloaded the latest release and played around with the apps, you'll want to decide on a specific framework to try out.</p>
409					<p>Study the syntax required for defining models, views and (where applicable) controllers and classes in the frameworks you're interested in and try your hand at editing the code to see how it feels using it first-hand.</p>
410					<p>Please ensure that if you're happy with this, you do spend more time investigating the framework (including reading the official docs, the source and its complete feature list). There's often a lot more to a framework than what we present in our examples.</p>
411				</div>
412				<div class="col-md-4">
413					<h2>Getting Involved</h2>
414					<p>Is there a bug we haven't fixed or an MV* framework you feel would benefit from being included in TodoMVC?</p>
415					<p>If so, feel free to fork the repo, read our <a href="https://github.com/tastejs/todomvc/wiki">contribution guidelines</a>, and submit a pull request &mdash; we'll be happy to review it for inclusion.</p>
416					<p>Make sure you use the <a href="https://github.com/tastejs/todomvc-app-template">template</a> as a starting point and read the <a href="https://github.com/tastejs/todomvc/blob/master/app-spec.md">app specification</a>.</p>
417					<p>
418						<a class="zocial small ltgray" href="https://github.com/tastejs/todomvc/wiki">Submit Pull Request &raquo;</a>
419					</p>
420				</div>
421			</div>
422			<hr>
423			<div class="row">
424				<div class="col-md-12">
425					<h2>Build a TodoMVC App with Your AI Coding Agent</h2>
426					<p>Want a TodoMVC implementation in a framework that isn't on this page yet, or one that exactly matches your team's stack? The TodoMVC 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). Drop the line below into your agent of choice and swap in the framework you want:</p>
427					<pre><code>Build a TodoMVC app following this spec https://raw.githubusercontent.com/tastejs/todomvc/refs/heads/master/app-spec.md in React</code></pre>
428					<p>Replace <code>React</code> with <code>Vue</code>, <code>Svelte</code>, <code>Angular</code>, <code>Solid</code>, <code>Lit</code>, <code>Preact</code>, <code>Qwik</code>, or any framework or language you want to evaluate. The spec covers the same behavioural surface every example on this page implements (add, edit, toggle, filter, route, clear completed), so the result is directly comparable to the reference apps above.</p>
429					<p>This makes TodoMVC useful as both a teaching artifact and a benchmarkable prompt: a quick way to feel out how a new framework reads, or how a given AI agent handles a non-trivial-but-bounded UI task.</p>
430				</div>
431			</div>
432			<hr>
433			<div class="row">
434				<div class="col-md-12">
435					<h2>Industry Impact</h2>
436					<p>TodoMVC was created in 2011 to give developers a single, consistent application they could re-implement in any framework, side by side, on equal footing. Over the years since, the humble Todo app has become the de-facto teaching example for UI frameworks and component-driven architecture: it is small enough to fit in a single screen of code, but large enough to exercise state management, list rendering, routing, persistence, editing, and event handling. That has made it the reference point developers reach for when learning a new framework, and the reference point framework authors reach for when explaining theirs.</p>
437					<p>Major engineering organizations across the industry use TodoMVC apps in onboarding, internal training, conference talks, framework documentation, and live demos: from teams at <strong>Google</strong>, <strong>Apple</strong>, <strong>Microsoft</strong>, and <strong>Meta</strong> to research groups at <strong>OpenAI</strong> and the wider open-source community. If you have ever sat through "here is how this framework feels", odds are good the example on screen was a TodoMVC app.</p>
438					<p>TodoMVC has also become foundational to how the web platform itself is measured. Since <strong>Speedometer 1.0</strong>, the cross-browser benchmark every major browser engine uses to optimize UI performance has been built around TodoMVC implementations. Each generation of Speedometer has expanded that core: <a href="https://webkit.org/blog/8063/s
438peedometer-2-0-a-benchmark-for-modern-web-app-responsiveness/" target="_blank">Speedometer 2.0</a> rebuilt the suite around modernized TodoMVC apps in the popular frameworks of the day, and <a href="https://webkit.org/blog/15131/speedometer-3-0-the-best-way-yet-to-measure-browser-performance/" target="_blank">Speedometer 3.0</a> further expanded the workloads to better reflect the modern web. Improvements to JavaScript engines, layout, rendering, and DOM performance in Chromium, WebKit, and Gecko are routinely validated against TodoMVC code paths. The project's reach goes well beyond the apps you see on this page.</p>
439				</div>
440			</div>
441			<hr>
442			<footer class="credit">
443				<p>Brought to you by
444					<a href="https://github.com/addyosmani"><img src="https://avatars.githubusercontent.com/u/110953?v=4&s=80" width="40" height="40" alt="Addy Osmani">Addy</a>
445					<a href="https://github.com/sindresorhus"><img src="https://avatars.githubusercontent.com/u/170270?v=4&s=80" width="40" height="40" alt="Sindre Sorhus">Sindre</a>
446					<a href="https://github.com/passy"><img src="https://avatars.githubusercontent.com/u/9906?v=4&s=80" width="40" height="40" alt="Pascal Hartig">Pascal</a>
447					<a href="https://github.com/stephenplusplus"><img src="https://avatars.githubusercontent.com/u/723048?v=4&s=80" width="40" height="40" alt="Stephen Sawchuk">Stephen</a>
448					<a href="https://github.com/colineberhardt"><img src="https://avatars.githubusercontent.com/u/1098110?v=4&s=80" width="40" height="40" alt="Colin Eberhardt">Colin</a>
449					<a href="https://github.com/arthurvr"><img src="https://avatars1.githubusercontent.com/u/6025224?v=3&s=80" width="40" height="40" alt="Arthur Verschaeve">Arthur</a>
450					<a href="https://github.com/samccone"><img src="https://avatars0.githubusercontent.com/u/883126?v=3&s=80" width="40" height="40" alt="Sam Saccone">Sam</a>
451					<a href="https://github.com/FadySamirSadek"><img src="https://avatars.githubusercontent.com/u/7483806?v=4&s=80" width="40" height="40" alt="Sam Saccone">Fady</a>
452				</p>
453			</footer>
454		</div>
455		<!-- build:js site-assets/main.min.js -->
456		
456<script src="bower_components/jquery/dist/jquery.min.js"></script>
456
457		
457<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
457
458		
458<script src="site-assets/main.js"></script>
458
459		<!-- endbuild -->
460		
460<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
460
461	</body>
462</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.