Making Data Editable

A single attribute

If you want to make a piece of data editable, this really simple with Remake — and one of its core strengths. 💪

If you have this element, for example:

<div object key:page-title="@innerText"></div>

Then to make it editable, you just need to add an edit: attribute that matches they key you want to edit:

<div object key:page-title="@innerText" edit:page-title></div>

Remake handles the rest, including creating the inline edit popover and saving persistent data to the user's account.

Editing multiple keys at once

You can also trigger multiple edit areas at the same time.

For example:

<div object key:my-favorite-link-name="@search" key:my-favorite-link-url="@search">
  <div>
    <a target:my-favorite-link-url="@href" href="">
      <span target:my-favorite-link-name="@innerText"></span>
    </a>
  </div>
  <button edit:my-favorite-link-name edit:my-favorite-link-url>Edit link</button>
</div>

This will pop up two edit areas: one for editing the text of a link and another for editing a url!

→ Next: Adding New Items