One file. Your file. Structured, yet flexible.

// A minimal vanilla JS cell plugin
function ready(callback) {
  if (window.dbcoolAPI) return callback();
  window.addEventListener("dbcool:apiReady", callback, { once: true });
}

ready(async () => {
  const api = window.dbcoolAPI;
  const root = document.getElementById("root");

  // Render the current cell value
  async function render() {
    const value = (await api.getValue()) ?? "(empty)";
    root.innerHTML = `
      <div class="cell">
        <span>${value}</span>
        <button onclick="edit()">✏️</button>
      </div>
    `;
  }

  // Handle edits
  window.edit = async () => {
    const next = prompt("New value:", await api.getValue());
    if (next !== null) {
      await api.setValue(next);
      await api.finishEdit();
    }
  };

  // Re-render on host-driven changes
  window.addEventListener("dbcool:valueChanged", render);
  await render();
});