RTCode.io - Overview | RTCode.io docs

Concepts and usage

RTCode.io treats a web page as a live document. The source you edit and the page you see are two views of the same thing, and either one can change the other.

The playground is one page. A toolbar runs along the top, and below it a draggable split separates two panels: the input, an editor for your HTML with its CSS and JavaScript inline, and the output, which shows the page. They sit side by side or stacked, either one first, and one key changes the arrangement. The output runs on an origin of its own, out.rtcode.io, apart from the editor. See The playground interface.

Your source is the body of the page: write the elements, and let <meta>, <title>, <link> and <style> elements stand among them. There is no <html>, <head> or <body> to write.

html

<meta name=color-scheme content="light dark">
<style>body { font: 1.5rem system-ui; padding: 1rem }</style>
<h1>Hello, RTCode</h1>

Open go.rt.ht to choose a template, or rtcode.io/x/ for an empty editor.

Two-way sync

The sync engine, IOSync, keeps a map between the text of the editor and the page. When you edit the source, it patches only the parts of the page that the edit touches, so typed text, focus, scroll position and the state of your scripts survive. When something changes in the page, whether you type into a contenteditable element or a script adds an element, the change is written into the source as a small text edit at the right place.

Each direction has a Live switch and a Once key. F4 pushes the source into the page, F6 pulls the page into the source, and F5 loads the page again from scratch. The page is loaded again, instead of patched, when an edit changes an executable script, when a custom element that is not declared is present, or when you ask for it. Changes in the page reach the source while the input is not in focus.

See Live sync and reloads, The IOSync model and Locating source, which links the cursors of the editor to the elements of the page.

A session is a link

Most of the state of a playground lives in the fragment of its URL: the source, the title, the layout, the selections, the folds and the output settings. The playground rewrites the fragment as you edit, so the address of your playground is a link to it. The source is stored under the key / and the title under title. The position of the split is not part of the link.

plain

https://rtcode.io/x/#/=%3Ch1%3EHello%3C%2Fh1%3E&title=Hello

A deployed page keeps its source too. Add ? after the last slash of its address, and the editor opens with the page exactly as it was deployed. See Linking to and embedding the playground.

Editing with the keyboard

Select a number such as 3rem and press ↑: it becomes 4rem, and the page follows. Shift+↑ / ⇧+↑ adds 10, Ctrl+↑ / ⌘+↑ adds 100 and Alt+↑ / ⌥+↑ adds 0.1. Multiple cursors, selection chords, encode and decode commands, expression evaluation and HTML helpers have keys of their own. See Editing superpowers, Keyboard shortcuts and Commands.

html

<h1 style=font-size:3rem>Nudge me</h1>

Workers

A <script type=worker> element holds the code of a backend: a fetch() handler that answers requests. In the playground it runs in a service worker of the output's origin. A URL that starts with a colon reaches it, and :hello arrives as /hello. The playground serves your page for /. Mark the worker edge, and a deploy publishes the same code to RTEdge.net.

html

<iframe src=:hello></iframe>
<script type=worker edge>
  export default { fetch: request => new Response(`Hello from ${new URL(request.url).pathname}`) }
</script>

Exported files, signed-in users and key-value storage work in the playground much as they do on the edge. A value in the playground's KV may hold up to 64 KiB with its metadata, and up to 10 MiB on RTEdge.net. Playground and edge differences lists what else differs, and Using workers is the guide.

AI agents

Agent 📂 Share™ (patent-pending) connects the playground to a folder on your computer. The playground writes its source, its selections, the console, screenshots and pins into the folder, and takes in what an agent writes there. So Codex, Claude Code, or any agent that reads AGENTS.md or CLAUDE.md, works on the same live page as you. It needs Chrome or Edge on a computer. See Agent 📂 Share™, File Sync, Agent files and Pins.

Deploy

Press Ctrl+S / ⌘+S to deploy. You sign in with GitHub, Google, Microsoft or Apple, and choose a route: a name such as hello, which is served at https://hello.rt.ht/, or a domain of your own. The playground sends its whole state to RTEdge.net, and the first deploy to a free name claims it for you. Every deploy is a version with a screenshot. RTEdge.net serves from 337 cities in 125+ countries, with 500 Tbps of capacity and under 50 ms for 95% of Internet users. See Deploying to RTEdge.net and RTEdge.net.

Output tools

Preview the output as it will look elsewhere, without changing the source: a fixed viewport such as a phone, a zoom, a forced color scheme, user preferences, text direction, language, font size and animation speed. Read the console and the network requests of the page and its workers, open the output in a tab or a popup, capture it as an image or a video, and measure the size of the code. See Output settings, Console and network, Output windows, Screen capture and Measuring code size.

The basic approach

Making something with RTCode.io generally looks like this:

Open rtcode.io/x/, or go.rt.ht to choose a template.
Write HTML, CSS and JavaScript. The output follows as you type.
Change the page or the source, whichever is closer. Press F5 to load the page again from scratch.
Export files with o:, and add a <script type=worker> when you need a backend.
Sign in, set a title and routes in the Code dialog (Alt+T / ⌥+T), and press Ctrl+S / ⌘+S.

Tutorials

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.

Guides

The 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 and data

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.

Deploy

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.

Concepts

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.
Playground and edge differences: Everything that behaves differently in the playground and on RTEdge.net, in one table.
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.
Security and access model: Sites, sessions and permits: how RTEdge.net isolates deployments, who can view a page, and who can open its source.

Reference

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.

Playground API

Playground API: The 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().

Attributes and elements

Global attributes: 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.
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.
<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.

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.

More reference

RTEdge.net reference: URL suffixes, query parameters, response headers, error pages, limits and reserved paths of deployments.
Limits and quotas: Size, worker, subdomain and storage limits that apply by default.
Glossary: Terms used across RTCode.io and RTEdge.net.
Utilities: Public helper hosts that complement RTCode.io and RTEdge.net, with their status.

Examples

Edit the page or the source

Click the heading and type: the change appears in the source, because the input is not in focus. Edit the heading in the source, and the page follows.

html

<meta name=color-scheme content="light dark">
<style>body { font: 1.5rem system-ui; padding: 1rem }</style>
<h1 contenteditable>Edit me here, or in the source</h1>

Nudge a number

Select 3rem in the source and press ↑ and ↓. Add Shift, Ctrl / ⌘ or Alt / ⌥ for steps of 10, 100 and 0.1.

html

<meta name=color-scheme content="light dark">
<h1 style=font-size:3rem>Nudge me</h1>

A page with a worker

The page asks its worker for JSON. In the playground the worker runs in your browser, and deployed to a route it runs on RTEdge.net.

html

<pre id=api oi:exclude></pre>
<script type=module>
  api.textContent = JSON.stringify(await fetch(':api/now?tz=UTC').then(r => r.json()), null, 2)
</script>
<script type=worker edge>
  export default {
    fetch: async request => {
      const { pathname, searchParams } = new URL(request.url)
      if (pathname !== '/api/now') return new Response('Not found', { status: 404 })
      return Response.json({ now: new Date().toISOString(), tz: searchParams.get('tz') })
    }
  }
</script>

The oi:exclude attribute keeps the text that the script writes out of the source. See oi:exclude.

Specifications

Not part of any specification. RTCode™ is a playground made by Elefunc, Inc. It builds on these standards:

Specification
HTML Standard
Service Workers
Fetch Standard
URL Standard
Compression Streams Standard
File System Access
Screen Capture
Cloudflare Workers runtime: web standards

Availability

Feature	Playground	RTEdge.net	Notes
Editing, live sync and Locate	Yes	No	The playground runs them. A deployed page is an ordinary page that carries no sync runtime.
Output tools: settings, console, windows	Yes	No	They preview and inspect the output of the playground.
Workers and exported files	Yes	Yes	In the playground a worker runs in a browser service worker. Mark it `edge` to deploy it.
Agent 📂 Share™	Partial	No	Chrome or Edge on a computer, in a top-level playground. See Browser support.
Screen capture	Partial	No	Desktop browsers. Cropping to a panel is Chrome and Edge only.
Opening the source with `?`, versions and sign-in suffixes	No	Yes	These belong to RTEdge.net. See URL suffixes.

The playground runs in current browsers. It needs service workers, and some features need Chrome or Edge on a computer. Browser support lists what works where.