Step-by-Step Tutorial

Learn Remake faster

Want to get a feel for Remake's syntax fast?

  • Learn all the basic attributes in 5 minutes
  • You can build a real web app with what you learn!

We'll take you through the todo app code attribute by attribute and explain each one.

You'll come away with a deeper understanding than most people — and the ability to build an app that supports data editing, sortable data, nested data, and user accounts.


You can edit and sort these todos!
  • Finish designing website
  • Create app prototype
  • Edit voiceover audio
<div object> <h2>Todos</h2> <ul class="todos" key="todos" array sortable> {{#for todo in todos}} <li class="todo" object key:text="@innerText" edit:text >{{ default todo.text "New todo item" }}</li> {{/for}} </ul> <button class="add-todo" new:todo>Add Todo</button> </div>

body { padding: 1.75rem 1.5rem 0 1.5rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: #fff; color: #212529; }

h2 { margin-bottom: 1rem; color: #7048e8; font-size: 24px; }

.text-light { position: relative; top: -1px; opacity: .5; font-size: 18px; }

.todos { list-style-type: none; margin: 0 0 1.25rem 0; padding: 0; max-width: 320px; }

.todo { margin-bottom: 10px; padding: 5px 12px 7px; color: #5536b2; background-color: #f3f0ff; border: 1px solid #9775fa; border-radius: 5px; cursor: pointer; }

.todo:hover { background-color: #e5dbff; border: 1px solid #845ef7; }

.add-todo { padding: 8px 16px 10px; color: #fff; background-color: #7048e8; border-radius: 5px; }

.add-todo:hover { opacity: .85; }

Play with Remake demos

Ready to go further?

Try our interactive demos, where you you can edit Remake code and see it work live! With no need to install anything.

→ 2 interactive demo apps

View on GitHub
☰ Menu