• Create editable pages using only HTML templates
• Easy to learn, powerful data attribute syntax
• Perfect for rapidly prototyping ideas

1. Install the command line tool

npm install remake -g

2. Create a new project

remake create <project-dir>

3. Run the development server

cd <project-dir>
npm run dev

4. Start building a web app with Remake!

An example of editing, adding, and removing items with the starter todos project.

Remake is everything you need to create a web app in record time, with very little overhead.

Remake provides all the tools you need to:

• Instantly add CRUD operations to your page
• Have all your pages' data auto-save after it's been edited
• Store your data in a format that's easy to access and understand

Out of the box, Remake comes with:

• User accounts: People can sign up and log in to your app!
• Flat file database: No need to install, configure, or host a database
• Simple data handling: Accessing and saving nested objects is easy

If you know how to build a website with HTML and CSS — and know the basics of Handlebars templating — you can build a web app with Remake!

• A simple todo list app in 12 lines of HTML
• 30 minute tutorial on how to build a Trello clone

Remake is based around a simple idea:

What if every HTML webpage knew how to save, edit, and add new items to itself?

• Remake uses simple data attributes, starting with data-o for attributes that output data and starting with data-i for attributes that input data
• Using a simple data attribute (data-i-editable), you can make the data on an element editable and have it auto-save to the database
• Using another simple data attribute (data-i-new), you can easily render back-end partial templates and add them to the page

HTML is formatted like a tree 🌳 in that it has a root node and every other element on a page branches off of that root node.

So, what if we were able to transform HTML into an object that we could save to a database just by looking at its natural tree structure?

We can do this in Remake by tagging elements with data. Remake will parse and save this data automatically whenever it changes.

Here's how it works in Remake:

<div data-o-type="object"></div>

This element has been tagged as an Object, which means Remake will convert it into this:

{}

Let's go through a few more examples:

<div data-o-type="object" data-o-key-name="David"></div>

This will be converted into an object with a key/value pair inside of it:

{name: "David"}

The first attribute (data-o-type) tells us which data type to expect. It can be set to only object or list.

The second attribute (data-o-key-name) tells us that this object has a key of name (the key is always the part that comes after data-o-key-). And we look at the attribute's value to get the key's value.

<div data-o-type="object">
  <div data-o-type="object" data-o-key="person" data-o-key-name="David">
    </div>
</div>

This example is a bit more advanced, as it relies on nested elements to create nested data:

{person: {name: "David"}}

In this example, we use the data-o-key attribute — with nothing after it — to create an object inside of an object. The value of data-o-key tells us which key the nested object will be.

Let's look at the only other data type that Remake supports: Arrays. In Remake, we use the term list.

How do we create a list in Remake?

<div data-o-type="list"></div>

This is a pretty simple example and will compile into just a simple, empty array:

[]

How would we go about adding objects to this array? We'd just nest them of course!

<div data-o-type="list">
  <div data-o-type="object" data-o-key-name="David">
  <div data-o-type="object" data-o-key-name="John">
  <div data-o-type="object" data-o-key-name="Mary">
</div>

When Remake looks at this, all it sees is:

[
  {name: "David"},
  {name: "John"},
  {name: "Mary"}
]

Sign up for the newsletter to get updates as this framework develops

• Contact the author on Twitter
• View the public roadmap
• View a live production app: RequestCreative

• Andrew de Jong