Advanced save attributes

The hooks a save runs on its own copy of the page: clean up an element before it is written to disk, react to a save, reload a generated stylesheet, or transform the whole document in JavaScript.

onbeforesave / onbeforesnapshot#

Inline handlers that run on a copy of the element during the snapshot, so the live page never flickers. onbeforesave runs only for saves; onbeforesnapshot runs for every snapshot, including live-sync broadcasts.

<div onbeforesave="this.removeAttribute('data-temp')">…</div>

onaftersave#

Run something every time a save succeeds.

<div onaftersave="console.log('saved at', event.detail.timestamp)">…</div>

refetch-on-save#

For a stylesheet that is generated on save: reload it without a flash.

<link rel="stylesheet" href="style.css" refetch-on-save>

clay.cacheBust(el)#

Force one resource to re-download. Swaps a ?v= timestamp onto the element’s href or src. Pairs well with onaftersave.

clay.addDocumentTransform(fn)#

For JavaScript-level control over the outgoing HTML. Registers a callback that receives the cloned document before serialization, and again on every change check. Strip, rewrite, or annotate anything; the live page is untouched. Keep it pure and repeatable: a callback that writes something new each run leaves the page permanently dirty.

clay.addDocumentTransform(doc => doc.querySelectorAll(".draft-marker").forEach(el => el.remove()));