RTCode.io and RTEdge.net docs

Concepts and usage

Both products work on the same thing: one HTML document. You write it in RTCode.io, where it stays in sync with the page it renders, and RTEdge.net serves it to your visitors.

RTCode.io holds one HTML document, with its CSS, JavaScript and workers, next to the live page it renders. The two stay in two-way sync: the output updates as you type, and changes in the live page, made by you or by its scripts, flow back into the source. The IOSync model explains how, and where the limits are.

Global attributes extend HTML for the platform. o: turns an element into a file served at its own URL, and a <script type=worker> holds backend code that runs as a service worker in your own browser. With Agent 📂 Share™ (patent-pending), Claude Code, Codex or any agent that reads AGENTS.md or CLAUDE.md works on the live playground through a folder on your disk.

RTEdge.net, the network

RTEdge.net is the network RTCode.io deploys to. A deployment answers on its routes, on a name.rt.ht subdomain or your own domain, and runs the same worker code at the edge. It can sign visitors in with GitHub, Google, Microsoft or Apple through four-character URL suffixes, keep data in user, domain or route scoped KV storage, and keep every deploy as a version with a screenshot.

RTEdge.net runs on Cloudflare Workers for Platforms: 337 cities in 125+ countries, 500 Tbps of capacity, and under 50 ms for 95% of Internet users.

Write, sync, deploy

A project moves through three steps, and the document stays the same in each of them:

Write. Open the playground and write HTML, CSS and JavaScript in one document. Add o: to publish files and a <script type=worker edge> for backend code. Getting started walks through it.
Sync. The output follows every edit, and edits in the page come back into the source. Share the playground with an agent, and File Sync keeps the folder and the playground in step.
Deploy. Pick routes, then press Ctrl+S / ⌘+S. RTEdge.net serves the page, its exported files and its worker, and keeps the deploy as a version with a screenshot. See Deploying to RTEdge.net.

Some things differ on purpose between the two places. For example, a KV value plus its metadata may be up to 64 KiB in the playground and up to 10 MiB on RTEdge.net. Playground and edge differences lists them all. These docs are themselves one RTCode.io playground, deployed to RTEdge.net; Building a multi-page site shows the technique.

Tutorials

Step-by-step introductions, each ending with something that works.

Getting started: From an empty playground to a live deployment: write HTML, watch it sync both ways, nudge a value, sign in, pick a route and deploy.
Building a full-stack app: Build one HTML file with a worker API, per-user KV storage and sign-in, test it in the playground, then deploy it to RTEdge.net.
Pairing with an AI agent: Share a playground folder with Claude Code or Codex, let the agent edit, read the console and screenshots, place pins, and run evals.

Concepts

How the platform works, for when you want to know why.

Architecture: How RTCode.io and RTEdge.net fit together: the editor, the isolated output and its service worker, the deploy pipeline, and the edge.
The IOSync model: How RTCode.io keeps the HTML source and the live page in two-way sync without reloads, and the guarantees and limits of that sync.
Request routing: The order in which the playground output and RTEdge.net answer a request: platform suffixes, worker paths, source views, access checks, files, the page, the worker.
Anatomy of a deployment: What one deploy produces: the served page, exported files, the edge worker, metadata, a version and a screenshot.
Playground and edge differences: Everything that behaves differently in the playground and on RTEdge.net, in one table.
Security and access model: Sites, sessions and permits: how RTEdge.net isolates deployments, who can view a page, and who can open its source.

Guides

Task-focused guides for the playground, AI agents, workers and deployments.

Playground

The playground interface: A tour of the editor, the output, the split, the menus and status indicators, titles and new-code templates.
Live sync and reloads: When an edit hot-patches the output, when the output reloads, how changes in the page flow back into the source, and how to control both.
Locating source with F8: Link editor cursors to output elements and jump from any element on the page to its source.
Writing IOSync-safe components: Build custom elements and dynamic UI that stay in sync with the source: shadow roots, the Highlight API and adopted style sheets.
Editing superpowers: Nudge numbers with the arrow keys, edit with multiple cursors, encode and decode selections, evaluate expressions and use the HTML helpers.
Exporting files with o:: Turn any element into a file served at its own URL in the playground and on RTEdge.net: names, bodies, content types and headers.
Building a multi-page site: Serve many pages from one playground with templates, a shared stylesheet and script, and a live preview, like these docs.
Sibling routes: Open playgrounds on the same host can fetch and import each other's exported files, using the URLs they will have after deployment.
Output settings: Preview any viewport, zoom, colour scheme, user preference, text direction, language, font size and animation speed without changing the source.
Output windows, Remote Output and Freeze: Open the output in a tab or popup, mirror it to other devices with Remote Output, and recover from runaway code with Freeze.
Console and network: Read logs and requests from the output and its workers, use the console fingerprint, and find the same console in the agent folder.
Screen capture: Capture screenshots and videos of the output or a window, use picture-in-picture, and keep 📸.png fresh for agents.
Measuring code size: Measure the source, its exported files and its worker bundle locally, deployed or for any saved version.
Linking to and embedding the playground: Build links that open code in RTCode.io, open a deployment's editor, and embed a live playground in your own page.
Browser support: Which browsers run the playground, which features need Chrome or Edge, and what differs in Firefox and Safari.
Troubleshooting: Fixes for a blank output, stale exported files, a stuck service worker, popup blockers, sharing conflicts and other common problems.

AI agents

Agent 📂 Share™: Share the live playground with any coding agent through a folder: setup, Auto-Share, Share ← Folder, indicators and limits.
File Sync: Exported files and the worker become separate files on disk that sync both ways with the playground.
Agent files: Every file in a shared folder: 📄.html, 📄.sel, 📜.json, 📸.png, 📍 pins, 🕐 versions, pasted files, instructions and skills.
File evals (io.eval.js and o.eval.js): Run JavaScript in the playground or the output by writing a file, and read the result from another file.
Pins and comments: Point at elements or regions of the live output, attach comments and images, and drive pins from code.

Workers

Using workers: Write backend code in a <script type=worker> that runs in the playground and, with edge, on RTEdge.net.
Mocking third-party APIs: Answer requests to other hosts from a playground worker with io:host, and choose what happens when the worker fails with io:fail.
Importing modules and WebAssembly: Import JavaScript modules from URLs and run streamed, embedded or compiled WebAssembly in the playground and at the edge.
Storing data in KV: Open user, domain or route scoped key–value storage with env.KV.open() and store values in the playground and on RTEdge.net.
The edge worker runtime: How a deployed worker runs on RTEdge.net: bundling, compatibility settings, which requests reach it, outbound requests, errors and limits.
Post-quantum cryptography: Post-quantum TLS on every RTEdge.net host and ML-KEM and ML-DSA in Web Crypto for edge workers.

RTEdge.net

Deploying to RTEdge.net: Choose routes, deploy with one keystroke or from code, add a message, open, and delete deployments.
Domains and subdomains: Claim a name.rt.ht subdomain, connect your own domain, and understand how routes map to hosts and paths.
Versions and Smart Undo: Every deploy is a version with a screenshot: compare and restore them, browse them online, and undo into deployed history.
Social previews and screenshots: The automatic og:image screenshot and default tags, and how to set your own title, description and image.
Adding sign-in: Sign visitors in with GitHub, Google, Microsoft or Apple using four-character URL suffixes, and read the user in pages and workers.
Restricting access: Choose who may view a deployment and who may open its source with edge:user, io:user and io:guest.
Keeping secrets out of deployments: What copy:redact, edge:redact and edge:remove hide, what stays visible through the source view, and how to keep private things private.
Usage and tail logs Experimental: Watch a deployment's usage and stream its worker logs from the ::u and ::t suffixes.
Web Push Experimental: Send push notifications to yourself from pages and workers with push.rt.ht and wp.rt.ht.
Coming soon Coming soon: RTCode.ai, <ai-agent> and <fs-explorer>: what is announced and how they will fit in.

Reference

Reference pages for the attributes, elements, APIs, URL suffixes, commands and platform rules of RTCode.io and RTEdge.net.

Global attributes

The global attributes are the attributes RTCode.io adds to every HTML element: files, headers, redaction, access, sync control and notes for agents.

i:: Marks an element whose content can be fetched from a URL into the editor on demand.
o:: Exports an element as a file served at /name.ext in the playground and on RTEdge.net.
o:type: Sets the content type of an exported file or worker asset.
o:content: Chooses which property of the element becomes the exported file's body.
h:*: Adds a response header to an exported file or worker asset.
worker:fs: Binds the element's content to the worker as an env.FS asset.
copy:redact: Replaces the element with a comment when the source is copied to the clipboard.
edge:redact: Replaces the element with a comment in the deployed page.
edge:remove: Removes the element from the deployed page.
edge:user: Restricts who may view a deployment.
io:user: Restricts who may open a deployment's source in RTCode.io.
io:guest: Lets anyone open the source of a deployment that has an edge worker.
oi:exclude: Keeps runtime changes to an element out of the source when the page syncs back.
sync: sync=reload makes every edit reload the output; sync=pure marks a custom element as safe to hot-patch.
ai: Leaves a short instruction for AI agents on an element.

Elements

<script type=worker>: the worker element: Holds the worker code that answers requests in the playground and, with edge, on RTEdge.net.
<script>: RTCode attributes: The reload and pure attributes that RTCode.io adds to scripts.
<meta io:sync>: Lists custom elements whose edits can hot-patch without reloading the output.

Playground API

The Playground API is the set of JavaScript globals of the playground window, for the browser console and for agents' io.eval.js files.

Code: Deployment configuration of the current playground: routes and editors.
edge: Deploy, measure and browse versions from code.
edge.save.limit(): Deploys the playground to every route in Code.D, or deletes deployments.
edge.size(): Measures the source, its files and worker, locally, deployed or for a saved version.
edge.versions(): Lists past deployments and writes any of them into the agent folder.
o: The output from the playground's side: authored source lookup, dimensions and pins.
PinList: The o.pins list: add, capture, configure and remove pins from code.
sync: Manual sync, authored-source lookup from the output, and the worker request metadata hook.
Output settings globals: ovp, ovfit, oz, oar, setOAR(), ocs, orm, opc, ort, ord, odir, olang, ofs and oas.
Selection and layout globals: sel, the title, s.layout, s.Position and getDimensions().

Worker runtime

The fetch() handler: The function a worker exports to answer requests, and its request, env and ctx arguments.
Request.rt: Platform metadata on every request a worker receives: the signed-in user, the client IP and where the code runs.
env: The worker's bindings: env.FS assets and env.KV storage.
KVNamespace: A scoped key–value namespace opened with env.KV.open(): get, put, delete and list.

URL suffixes

URL suffixes lists every suffix and special query that RTEdge.net understands on deployed URLs, in one table.

::si ::sa ::su ::so: Sign in, sign in as, read the signed-in user and sign out, with related forms for popups and embeds.
?: Opens a deployment's source in RTCode.io.
??: Opens the versions of a deployment.
*: Lists the deployments you can edit under a host or path.
/:: Sends a request straight to the deployment's worker.
::u ::t Experimental: Opens usage analytics and live worker logs of a deployment.
::kv: Browses the KV storage of a deployment.
::meta ::owner Experimental: Reads a deployment's digest and checks whether you own it.
/::edge: Returns diagnostics about how the request was served.
::qr: Returns a QR code for the page or any text.
::clear: Clears this site's data in the visitor's browser.
?::/h:: Overrides response headers of a file from the URL.
Query parameters: Social preview overrides, content-type overrides and other query parameters RTEdge.net understands.

Commands and shortcuts

Commands: Every command of the playground by menu, with its keys on Windows, Linux and macOS.
Keyboard shortcuts: The playground's keyboard shortcuts in one table.

Platform reference

Routes: Deployment route syntax, normalization, and how host and path routes map to pages, files and workers.
Editors: Editor entry syntax, permissions, and how owners add or remove collaborators from deployments.
Response headers: The headers RTEdge.net adds to deployed pages, files and worker responses.
Error pages and status codes: What visitors see for missing code, missing files, sign-in requirements and worker errors.
Limits and quotas: Size, worker, subdomain and storage limits that apply by default.
Reserved paths: Paths the platform answers on every host, and paths deployments cannot use.
Glossary: Terms used across RTCode.io and RTEdge.net.

Utilities

The utilities are public helper hosts that complement RTCode.io and RTEdge.net, each with its status.

ip.rt.ht and rq.rt.ht: See your IP and edge location, and echo any request back as JSON.
q.cf.rt.ht and qi.rt.ht: Query DNS, IP and ASN data, RDAP and WHOIS, TLDs and post-quantum TLS support in one call or in the QI console.
x.rt.ht, px.rt.ht and fp.cf.rt.ht: Fetch through helper proxies: a base64 URL fetcher, a header-rewriting proxy and a CORS proxy.
in.rt.ht and short links: Open any deployment through one gateway and use rt.ht short links such as go.rt.ht.
logo.rt.ht and fv.rt.ht: The official RTCode and RTEdge marks, and text or emoji favicons from a URL.
browsers.page: The latest browser versions as a page and as an API.
lt.rt.ht: Compare RTEdge.net latency with other edge platforms from your browser.

RTCode.io and RTEdge.net