# Advanced save attributes

> Inline handlers that run on a copy of the element during the snapshot, and JavaScript-level control over the outgoing HTML.

Source: https://clayjs.com/docs/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.

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

## onaftersave

Run something every time a save succeeds.

```html
<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.

```html
<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.

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