<base target=htmz>

<!-- Clicking the 'edit' link replaces the static text
     with an editable field component provided by /field -->
<label>
  Title:
  <div id="title">
    <b>The Seven Bits</b>
    <a href="/field?id=title&value=The Seven Bits#title">edit</a>
  </div>
</label>

<label>
  Genre:
  <div id="genre">
    <b>Horror</b>
    <a href="/field?id=genre&value=Horror#genre">edit</a>
  </div>
</label>

<label>
  Description:
  <div id="description">
    <b>Seven ate nine.</b>
    <a href="/field?id=description&value=Seven ate nine.#description">edit</a>
  </div>
</label>

NodeJS example backend /field

// This field component toggles between static / edit mode
// by replacing itself when 'edit' / 'save' is clicked.
if (request.query.save) {
  // Static mode
  response.send(`
    <div id='${request.query.id}'>
      <b>${request.query.value}</b>
      <a href="/field?id=${request.query.id}&value=${request.query.value}#${request.query.id}">
        edit
      </a>
    </div>
  `);
} else {
  // Edit mode
  response.send(`
    <form id="${request.query.id}" action="/field#${request.query.id}">
      <input hidden name="id" value="${request.query.id}">
      <input name="value" value="${request.query.value}">
      <button name="save" value="save">save</button>
    </form>
  `);
}