Exporting files with o:

Exporting an element

Write the file name as the value of o:. In o:=nav.js the attribute name is o: and the value is nav.js. The colon belongs to the attribute syntax, so the URL is /nav.js, not /:nav.js.

<style o:=.css>
  :root { color-scheme: light dark; font: 1rem/1.5 system-ui; }
  h1    { color: oklch(0.6 0.15 250); }
</style>
<script type=module o:=greet.js h:access-control-allow-origin=*>
  export const greet = name => `Hello, ${name}!`
</script>
<template o:=page.html>
  <meta charset=utf-8>
  <link href=.css rel=stylesheet>
  <h1 id=out></h1>
  <script type=module>
    import { greet } from './greet.js'
    out.textContent = greet('exports')
  </script>
</template>
<iframe src=page.html></iframe>

File names

A name must contain a . and must not contain a /. Names that start with a dot, such as .js, .css, .md and .svg, are valid and common: they are served at <route>/.js and so on.

Stick to letters, digits, _ and - plus one ., or to a leading-dot name. Matching is case-sensitive on RTEdge.net. Names that contain :, ? or #, names that end in *, and a few names the platform reserves are not reachable; see Reserved paths. On a host-root route, the platform also answers favicon.ico and robots.txt itself.

Choosing the body

Every export has a body, a content type and optional headers. The body comes from the element itself.

<textarea hidden o:=notes.txt o:content=value>Remember the milk.</textarea>

<script type=text/plain o:=llms.txt o:type="text/plain;charset=utf-8"># Example
> One-line summary for LLM tools.
</script>
<script type=application/json o:=data.json>{"version":1}</script>
<script type=image/svg+xml o:=.svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="tomato"/></svg>
</script>
<iframe src=llms.txt></iframe> <iframe src=data.json></iframe> <img src=.svg alt width=48 height=48>

<img hidden alt o:=dot.png src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
<img src=dot.png alt=dot width=64 height=64>

<script o:=.js>
  class Api { static ping = () => 'pong' }
</script>
<script type=none o:=.js>export { Api }</script>
<output id=pong></output>
<script type=module>
  import { Api } from './.js'
  pong.value = Api.ping()
</script>

Content types

Both environments use the same extension table of 78 entries; RTEdge.net adds wasm. The extension is the text after the last ., lowercased, so x.JS is text/javascript. The full table is on o:type.

The table has no entry for webmanifest, map, yaml, yml, toml, vtt, jsx, tsx or glb, nor for wasm in the playground. Those fall back to the default text type, so set o:type for them. .ts maps to video/mp2t.

For non-ASCII text that visitors open directly (.txt, .md, .csv), give the charset yourself, with o:type="text/plain;charset=utf-8" or h:content-type. A page exported from a <template> should start with <meta charset=utf-8>, because RTEdge.net serves table types without a charset.

Headers

h:<name>=<value> adds a response header to the file. The HTML parser lowercases attribute names, so header names arrive in lowercase. An element can carry any number of h:* attributes; they are kept in order. On an element with neither o: nor worker:fs they have no effect.

RTEdge.net

Sends the h:* headers verbatim, then the computed content type (only when there is no h:content-type), edge and deploy. It adds no cache-control unless you set one, and no CORS headers for other sites unless you set h:access-control-allow-origin. Platform headers such as server-actual and, on *.rt.ht, strict-transport-security take priority over yours.

Playground

Builds the response from your h:* headers, then forces origin-agent-cluster: ?1, cache-control: no-store, Referrer-Policy: unsafe-url and the computed content-type; later keys win. h:content-type, h:cache-control, h:origin-agent-cluster and h:referrer-policy are therefore overridden, and h:set-cookie has no effect. Other headers, such as CORS, CSP and content-disposition, apply.

Headers belong to files only; they do not apply to the root document. When several elements share a name, the first element's headers apply. See h:* and Response headers.

<script type=module o:=code.js h:access-control-allow-origin=* h:cache-control="public, max-age=300">
  export const answer = 42
</script>
<script type=module>
  import { answer } from './code.js'
  console.log(answer)
</script>

Exporting HTML pages

The usual way to export a page is a <template>: its default body is innerHTML, the template is inert, and it can hold a complete page with <meta>, <title> and <link>. Keep the default innerHTML: o:content=textContent is empty in the playground but not on RTEdge.net, and o:content=outerHTML on a template drops the template's attributes on RTEdge.net.

• On RTEdge.net, a text body of type text/html that does not start with <!doctype html is served with Vary: Sec-Fetch-Dest. Navigations (document, frame, iframe, embed, object or fencedframe) get <!doctype html> prepended, while fetch() receives the raw fragment.
• The playground serves the export as it is and adds no doctype. As for any document without a doctype, browsers then use quirks mode there, and standards mode once the page is deployed.
• In the playground, exported pages are served without the RTCode runtime, which only the root document gets. IOSync, Locate and the console relay therefore do not run inside them.
• Start each page with <meta charset=utf-8>.

To publish many pages from one playground, see Building a multi-page site.

Keeping exports fresh in the playground

The playground rebuilds exports and env.FS only when the output initializes in full: on the first load, on Load (F5), and on any edit that reloads the output. Other edits are hot patches. They morph the page but leave /name serving the previous content.

• An edit reloads the output when the src or the outerHTML of a JavaScript-type script changes (types empty, module, importmap, the JavaScript MIME types and worker; not <script pure>), when an element with sync=reload or a <script reload> exists, when <base href> changes, or when a custom element that is not sync-safe is present.
• Exports from JavaScript-type scripts are therefore always fresh. Exports from <style>, <template>, data blocks (type=text/plain, application/json, none, …), <img> and other elements go stale after an edit until Load (F5).
• To keep them fresh, add reload to such a script, or put sync=reload on any element: every edit then reloads the output.

See Live sync and reloads for the complete list of triggers.

<script reload type=text/markdown o:=.md>
# Notes
</script>
<iframe src=.md></iframe>

Playground and RTEdge.net

The two environments share the same tables and defaults; Playground and edge differences covers the rest of the platform. They differ in these places for exports. Because bodies read from outerHTML, innerHTML or another property are cleaned and re-serialized on deploy, they are not byte-identical between the two; script and style textContent and binary exports are, for sources with LF line endings.

Exports and workers

A file wins over the worker: a request for a name that is also an export is answered by the export. A path with a : prefix is never a file lookup and reaches the worker, so <iframe src=:data> calls the worker with the path /data.

In the playground, a worker's fetch() resolves same-origin URLs whose last segment contains . to your exports first, so fetch("x.js") returns the live export. On RTEdge.net, relative URLs in a worker do not resolve: use absolute URLs, or give the worker its assets with worker:fs. See Using workers.

Exports and agents

With File Sync on, which is the default, Agent Folder Share writes every element that has o: to the shared folder as a file named by its o: value.

• Each <script type=worker> is written as ⚙️.js. Names with / create subfolders.
• Duplicate names are not joined: each element gets <name>.1, <name>.2 and so on.
• Unsafe or reserved names are skipped with a message such as <name>: unsafe or reserved Share path.
• A synced file holds the authored source, not the served body: the full element for outerHTML exports, the text between the tags for innerHTML, script and style exports.
• Exports nested inside a <template> are not written.

See File Sync and Agent files.

Who can read an export

A deployed export is a public URL. The edge:user gate protects exports as well as the page. edge:redact and edge:remove on the exporting element keep the element out of the served page, but the file is still served at its URL.

Availability

See also

• o:
• o:type
• o:content
• h:*
• worker:fs
• Building a multi-page site
• Sibling routes
• Live sync and reloads
• Playground and edge differences
• Anatomy of a deployment
• Response headers
• Keeping secrets out
• File Sync