sync

Syntax

<meta sync=reload>
<my-element sync=pure></my-element>

Value

reload

While any element with sync=reload exists in the source, every edit anywhere in the source is a full reload of the output. The usual place is a <meta>, which makes the whole page reload on every edit. The match is exact and case-sensitive, so sync=Reload does nothing.

pure Experimental

Marks the custom element instance that carries it as sync-safe: it does not force a reload. The value is exactly pure, in lowercase.

Description

After each edit, the playground decides between a hot patch, which keeps the output's state, and a full reload. The two values of sync feed that decision from opposite sides:

Both are explained in When the output reloads. The same decision is made for scripts by <script reload> and <script pure>.

Usage notes

Where to put sync=reload

It works on any element. Putting it on a <meta> is the usual form, because the whole page then reloads on every edit, for example <meta sync=reload name=viewport content="width=device-width,initial-scale=1">. Exported files refresh only on a full reload, so sync=reload is also the page-wide way to keep o:= files, worker:fs assets and sibling copies current while you edit. See Exporting files.

Scripts have their own attributes

On a <script>, the Boolean attributes reload and pure do the same jobs, and the Boolean reload counts only on <script>. Use sync=pure for custom elements, and <script pure> for scripts.

Templates are not inspected

The playground does not look inside a <template>. A sync=reload in <template o:=page.html> or in <template shadowrootmode> is not a reload marker.

Declaring a tag instead of an instance

sync=pure is per instance. To make every element of a tag, or of a prefix, sync-safe, list it in <meta io:sync>.

In deployments

Deploying does not strip sync, as it does the attributes that start with i:, o:, io:, edge:, h: and worker:. It stays in the HTML as an inert attribute, and has no effect outside the playground.

Examples

Reloading on every edit

The data block exports /notes.txt, and the frame shows it. With <meta sync=reload>, the file and the frame always show the current text. Without the meta, the frame keeps the file of the last load.

<meta sync=reload>
<script type=text/plain o:=notes.txt>Edit me and the frame follows.</script>
<iframe src=notes.txt></iframe>

A custom element without a declaration

Experimental Here <tick-tock> carries sync=pure instead of being listed in a <meta io:sync>. Editing the paragraph, its class or the <style> hot-patches the page, and the clock keeps the time it showed when it connected. Editing the <script> reloads the output.

<style>:root { color-scheme: light dark } p { color: light-dark(oklch(45% .2 250), oklch(80% .12 250)) }</style>
<p class=lead>Edit me: text, class and CSS update without a reload.</p>
<tick-tock sync=pure></tick-tock>
<script type=module>
  customElements.define('tick-tock', class extends HTMLElement {
    #root = this.attachShadow({ mode: 'closed' })
    connectedCallback() { this.#root.textContent = new Date().toLocaleTimeString() }
  })
</script>

Specifications

Not part of any specification. sync is an RTCode.io extension, and it is read only by the playground.

Availability

See also

• Global attributes
• Live sync and reloads
• The IOSync model
• <meta io:sync>
• <script>: RTCode attributes
• oi:exclude
• Writing IOSync-safe components
• sync (Playground API)