Rewind

Copy<piix-rewind>
  <div>
    <h3 class="ex-h3">Edit anything, then rewind.</h3>
    <p contenteditable style="padding:10px;outline:2px solid currentColor">Type here, delete things, then press ◀◀ below.</p>
    <label><input type="checkbox"> Remember me</label>
    <input type="text" placeholder="Your name">
  </div>
</piix-rewind>

It records every change inside it as it happens: text typed into fields and editable areas, elements your code adds and removes, attributes, checkboxes and selects. Press ◀◀ and it rewinds like a tape, with scanlines, a rolling tracking band and the time counting back, every change undone in reverse, letter by letter. Drag the playhead to any moment, ►► to come back to now, or KEEP to carry on from that moment (everything after it is dropped, like undo). These are the real changes reversed, not screenshots: the past you see is live DOM, held still until you come back.

Installation

Copy<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

Copy<!-- just rewind (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/rewind.min.js"></script>

Copynpm install piixpal

// once, in your entry file
import "piixpal";

Copy// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-rewind>
      <div>
        <h3 className="ex-h3">Edit anything, then rewind.</h3>
        <p contenteditable style="padding:10px;outline:2px solid currentColor">Type here, delete things, then press ◀◀ below.</p>
        <label><input type="checkbox"> Remember me</label>
        <input type="text" placeholder="Your name">
      </div>
    </piix-rewind>
  );
}

Usage

Copy<piix-rewind>
  <div>
    <h3 class="ex-h3">Edit anything, then rewind.</h3>
    <p contenteditable style="padding:10px;outline:2px solid currentColor">Type here, delete things, then press ◀◀ below.</p>
    <label><input type="checkbox"> Remember me</label>
    <input type="text" placeholder="Your name">
  </div>
</piix-rewind>

Examples

Undo for a whole app

It records what your own code does too: here, tasks added, ticked and deleted.

Copy<piix-rewind>
  <form id="rwAdd"><input id="rwTask" placeholder="New task"> <button>Add</button></form>
  <ul id="rwList"></ul>
</piix-rewind>

<script>
  rwAdd.onsubmit = e => {
    e.preventDefault();
    if (!rwTask.value) return;
    const li = document.createElement('li');
    li.innerHTML = '<label><input type="checkbox"> <span></span></label> <button>×</button>';
    li.querySelector('span').textContent = rwTask.value;
    li.querySelector('button').onclick = () => li.remove();
    rwList.append(li);
    rwTask.value = '';
  };
</script>

From your own code

Hide the tape deck and build your own controls with rewind(), seek(), play() and keep().

Copy<piix-rewind id="tape" controls="off">
  <p contenteditable style="padding:10px;outline:2px solid currentColor">Write something…</p>
</piix-rewind>
<piix-button tone="ink" size="sm" onclick="tape.rewind()">Rewind</piix-button>
<piix-button tone="lime" size="sm" onclick="tape.play()">Back to now</piix-button>
<piix-button tone="coral" size="sm" onclick="tape.keep()">Keep</piix-button>

API reference

Events

Methods

Accessibility

• While you look at the past, the content is inert, so nothing in it can be changed by accident.
• The playhead is a slider: arrow keys, Page Up/Down, Home and End move through time.
• It announces when you are in the past and when you are back.
• With reduced motion the tape effects stay still.