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.

Todos

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