Remake is the fastest way to build a CRUD web app. It combines a unique HTML syntax with built-in CRUD editing capabilities, to make building a multi-user web app as simple as writing a few lines of HTML.

A simple demo

First of all, let's start with a code example:

<div data-o-type="object">
  <ul data-o-key="todos" data-o-type="list">
    {{#for todo in todos}}
      <li 
        data-o-type="object" 
        data-l-key-text
        data-i-editable
      >{{default todo.text "New todo item"}}</li>
    {{/for}}
  </ul>
  <button data-i-new="todo">Add Todo</button>
</div>

This is a fully working todos application in Remake. If you install Remake (npm install -g remake) and generate a starter application, and replace the code in the /app/username.hbs file with this, you'll get an application that looks like this:

Simple todo app in Remake

Remake works by:

  • Converting elements on your page into either objects or arrays
  • Serializing your page into a big nested object (with some objects and arrays inside of others)
  • Saving that object to a user database whenever the page changes

This makes it possible to treat your front-end like a database. If an element is changed, removed, or moved, then its corresponding data in the database will also be changed, removed, or moved.

Remake also provides some great default widgets for changing, deleting, and sorting the data on your page by using a single attribute: data-i-editable or data-i-sortable.

The current (rapidly evolving) documentation is here: https://docs.remaketheweb.com/ And you can watch a tutorial of me building this Kanban app with full explanation here: http://tutorials.remaketheweb.com/

Remake's Main Idea

Remake does a lot of things automatically for you, including updating elements / removing / and making elements sortable. In the future, it will be possible to upload and manipulate images and files too.

The main idea behind Remake is that data is embedded into the page and saved in the same structure as the structure of the HTML, making it really easy to add new data, make it editable, and build a working prototype.

The difference between Remake and Vue.js / React

The main difference:

  • Remake is perfect for building simple CRUD apps, prototypes, and page builders (think: anything you would use Wordpress/Vapid/Craft CMS to build). It takes a few hours to learn and configure.
  • Vue.js is an amazing technology that's great for building just about type of web app (as long as you're comfortable configuring and building a backend). It takes anywhere from weeks to months to learn and configure correctly.

Remake is simpler and less flexible, but comes with a backend built in. It's perfect for building a simple page builder very, very quickly (think: hours). It's also evolving quickly and will support much more soon. Vue.js is more flexible at creating different types of components out of the box, but it's much harder to build a full web app with because it's only the rendering layer.

Building a full Remake app might take you a few hours (or possibly days), while building a full Vue app, with a back-end and user accounts and hosting, might take a few weeks (or even months).

Technically speaking, they're very different.

  • Remake tightly couples data to the DOM, while Vue separates data into a data model.
  • Remake make powerful assumptions about how to edit items and add new items to the page, while Vue lets you configure that manually.
  • Remake is a full-stack framework (with user accounts and a JSON db for each user built in), while Vue is just a front-end rendering library.
  • Remake is server-rendered with Handlebars.js, so it doesn't do any rendering, whereas Vue is just responsible for rendering the front-end.
  • Remake comes with a deploy service out of the box, while Vue is just responsible for rendering.