diff --git a/sandboxes/react/App.js b/sandboxes/react/App.js
new file mode 100755
index 00000000..9d2a9288
--- /dev/null
+++ b/sandboxes/react/App.js
@@ -0,0 +1,112 @@
+import React from "react";
+import classnames from "classnames";
+
+import { map } from "microstates";
+import State from "@microstates/react";
+import TodoMVC from "@microstates/todomvc";
+
+import TodoTextInput from "./TodoTextInput";
+
+const pluralize = (word, count) => (count === 1 ? word : `${word}s`);
+
+export default function App({ value, onChange }) {
+  return (
+    <State type={TodoMVC} value={value} onChange={onChange}>
+      {app => (
+        <div class="todoapp">
+          <header className="header">
+            <h1>todos</h1>
+            <TodoTextInput
+              text={app.newTodo.state}
+              classes="new-todo"
+              onSave={app.insertNewTodo}
+              onBlur={app.insertNewTodo}
+              onInputChange={app.newTodo.set}
+              placeholder="What needs to be done?"
+            />
+          </header>
+          <section className="main">
+            {app.hasTodos && (
+              <span>
+                <input
+                  id="toggle-all"
+                  className="toggle-all"
+                  type="checkbox"
+                  checked={app.isAllComplete}
+                  onChange={app.toggleAll}
+                />
+                <label htmlFor="toggle-all" />
+              </span>
+            )}
+            <ul className="todo-list">
+              {map(app.filtered, todo => (
+                <li
+                  className={classnames({
+                    completed: todo.completed.state,
+                    editing: todo.editing.state
+                  })}
+                  key={todo.id.state}
+                >
+                  {todo.editing.state ? (
+                    <TodoTextInput
+                      text={todo.text.state}
+                      classes="edit"
+                      onSave={todo.save}
+                      onBlur={todo.save}
+                      onInputChange={todo.text.set}
+                    />
+                  ) : (
+                      <div className="view">
+                        <input
+                          className="toggle"
+                          type="checkbox"
+                          checked={todo.completed.state}
+                          onChange={todo.completed.toggle}
+                        />
+                        <label onDoubleClick={todo.edit}>{todo.text.state}</label>
+                        <button
+                          className="destroy"
+                          onClick={() =>
+                            app.todos.filter(item => todo.state !== item.state)
+                          }
+                        />
+                      </div>
+                    )}
+                </li>
+              ))}
+            </ul>
+            {app.hasTodos && (
+              <footer className="footer">
+                <span className="todo-count">
+                  <strong>{app.active.length || "No"}</strong>{" "}
+                  {pluralize("item", app.active.length)}
+                </span>
+                <ul className="filters">
+                  {app.filters.map(filter => (
+                    <li key={filter.key}>
+                      <button
+                        className={classnames({ selected: filter.selected })}
+                        style={{ cursor: "pointer" }}
+                        onClick={filter.select}
+                      >
+                        {filter.label}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+                {app.hasCompleted && (
+                  <button
+                    className="clear-completed"
+                    onClick={app.clearCompleted}
+                  >
+                    Clear completed
+                  </button>
+                )}
+              </footer>
+            )}
+          </section>
+        </div>
+      )}
+    </State>
+  );
+}
diff --git a/sandboxes/react/TodoTextInput.js b/sandboxes/react/TodoTextInput.js
new file mode 100755
index 00000000..e3e9c730
--- /dev/null
+++ b/sandboxes/react/TodoTextInput.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class TodoTextInput extends Component {
+  static propTypes = {
+    onSave: PropTypes.func.isRequired,
+    onInputChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
+    text: PropTypes.string,
+    placeholder: PropTypes.string
+  }
+
+  handleSubmit = e => {
+    if (e.which === 13) {
+      this.props.onSave(e.target.value)
+    }
+  }
+
+  handleChange = e => {
+    this.props.onInputChange(e.target.value)
+  }
+
+  handleBlur = e => {
+    if (this.props.onBlur) {
+      this.props.onBlur(e.target.value)
+    }
+  }
+
+  render() {
+    return (
+      <input
+        className={this.props.classes}
+        type="text"
+        placeholder={this.props.placeholder}
+        autoFocus="true"
+        value={this.props.text}
+        onBlur={this.handleBlur}
+        onChange={this.handleChange}
+        onKeyDown={this.handleSubmit}
+      />
+    )
+  }
+}
diff --git a/sandboxes/react/index.js b/sandboxes/react/index.js
new file mode 100755
index 00000000..b30c524e
--- /dev/null
+++ b/sandboxes/react/index.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import './styles.css';
+
+let key = 'microstates-todomvc';
+
+let restore = () => JSON.parse(localStorage.getItem(key) || "null");
+let save = value => localStorage.setItem(key, JSON.stringify(value));
+
+let initial = restore() || {
+  todos: [{ id: 0, text: 'Write Microstates Docs', completed: false }]
+};
+
+ReactDOM.render(<App value={initial} onChange={save} />, document.getElementById('root'))
diff --git a/sandboxes/react/package.json b/sandboxes/react/package.json
new file mode 100755
index 00000000..1be18aef
--- /dev/null
+++ b/sandboxes/react/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "microstates-todomvc-react",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "@microstates/react": "0.9.0",
+    "@microstates/todomvc": "1.0.0-beta.0",
+    "classnames": "latest",
+    "microstates": "0.10.1",
+    "prop-types": "15.6.2",
+    "react": "16.4.2",
+    "react-dom": "16.4.2",
+    "react-scripts": "1.1.4"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
\ No newline at end of file
diff --git a/sandboxes/react/styles.css b/sandboxes/react/styles.css
new file mode 100755
index 00000000..314908ac
--- /dev/null
+++ b/sandboxes/react/styles.css
@@ -0,0 +1,379 @@
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	font-weight: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #f5f5f5;
+	color: #4d4d4d;
+	min-width: 230px;
+	max-width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-weight: 300;
+}
+
+:focus {
+	outline: 0;
+}
+
+.hidden {
+	display: none;
+}
+
+.todoapp {
+	background: #fff;
+	margin: 130px 0 40px 0;
+	position: relative;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp h1 {
+	position: absolute;
+	top: -155px;
+	width: 100%;
+	font-size: 100px;
+	font-weight: 100;
+	text-align: center;
+	color: rgba(175, 47, 47, 0.15);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	font-weight: inherit;
+	line-height: 1.4em;
+	border: 0;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.003);
+	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+	width: 1px;
+	height: 1px;
+	border: none; /* Mobile Safari */
+	opacity: 0;
+	position: absolute;
+	right: 100%;
+	bottom: 100%;
+}
+
+.toggle-all + label {
+	width: 60px;
+	height: 34px;
+	font-size: 0;
+	position: absolute;
+	top: -52px;
+	left: -13px;
+	-webkit-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+
+.toggle-all + label:before {
+	content: '❯';
+	font-size: 22px;
+	color: #e6e6e6;
+	padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked + label:before {
+	color: #737373;
+}
+
+.todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+	border-bottom: none;
+}
+
+.todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+.todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 12px 16px;
+	margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+	display: none;
+}
+
+.todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.todo-list li .toggle {
+	opacity: 0;
+}
+
+.todo-list li .toggle + label {
+	/*
+		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+	*/
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+	background-repeat: no-repeat;
+	background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+}
+
+.todo-list li label {
+	word-break: break-all;
+	padding: 15px 15px 15px 60px;
+	display: block;
+	line-height: 1.2;
+	transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+	color: #d9d9d9;
+	text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 30px;
+	color: #cc9a9a;
+	margin-bottom: 11px;
+	transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+	color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+	content: '×';
+}
+
+.todo-list li:hover .destroy {
+	display: block;
+}
+
+.todo-list li .edit {
+	display: none;
+}
+
+.todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+.footer {
+	color: #777;
+	padding: 10px 15px;
+	height: 20px;
+	text-align: center;
+	border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50px;
+	overflow: hidden;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+	            0 8px 0 -3px #f6f6f6,
+	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
+	            0 16px 0 -6px #f6f6f6,
+	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+	float: left;
+	text-align: left;
+}
+
+.todo-count strong {
+	font-weight: 300;
+}
+
+.filters {
+	margin: -6px 0 0 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+.filters li {
+	display: inline;
+}
+
+.filters li button {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+
+.filters li button:hover {
+	border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li button.selected {
+	border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.clear-completed:hover {
+	text-decoration: underline;
+}
+
+.info {
+	margin: 65px auto 0;
+	color: #bfbfbf;
+	font-size: 10px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	text-align: center;
+}
+
+.info p {
+	line-height: 1;
+}
+
+.info a {
+	color: inherit;
+	text-decoration: none;
+	font-weight: 400;
+}
+
+.info a:hover {
+	text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	.toggle-all,
+	.todo-list li .toggle {
+		background: none;
+	}
+
+	.todo-list li .toggle {
+		height: 40px;
+	}
+}
+
+@media (max-width: 430px) {
+	.footer {
+		height: 50px;
+	}
+
+	.filters {
+		bottom: 10px;
+	}
+}
\ No newline at end of file