Getting started

In this tutorial you go from an empty playground to a page that is live on the Internet. You write a small page, watch the output follow every keystroke, change the page from the output side, nudge a number with the arrow keys, sign in, choose a name and deploy with one keystroke. It takes about 15 minutes.

Prerequisites:

A current browser on a computer. Chrome, Edge and Safari are the best tested; see Browser support.
A GitHub, Google, Microsoft or Apple account, for steps 5 to 8. You sign in with it; you do not create a separate one.
Pop-ups allowed for rtcode.io: the GitHub sign-in opens a window.

Step 1: Open the playground

Go to go.rt.ht. It opens the playground at https://rtcode.io/x/#act=code.new, with the New Code chooser over it. Choose New Project, Start from scratch.

The chooser opens a template in a new tab. Hold Shift while you click to open it in the tab you are in; touch devices have no Shift and always get a new tab. Esc closes the chooser. You can also open rtcode.io/x/ directly: the editor starts empty, and shows a short hint.

New Project starts with two <meta> elements on one line, a viewport and a color scheme, and the cursor on the line below them.

html

<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta name=color-scheme content="light dark">

You should see: a dark toolbar across the top, with the logo button at the far left and the avatar button at the far right. Below it the editor on the left holds the two <meta> elements, and the output on the right is empty.

Note: Keep the color-scheme line. The playground makes the output follow your system theme, even for a page that declares nothing, but a deployed page gets no such style. A page that does not declare its own color scheme can look different once it is deployed.

Step 2: Write some HTML

Click in the editor, select everything with Ctrl+A / ⌘+A, and type or paste this page. The output follows as you type. There is no Run button and no reload.

html

<meta name=viewport content="width=device-width,initial-scale=1"><meta name=color-scheme content="light dark">
<style>
  body { font: 1.25rem/1.5 system-ui; text-align: center; padding: 2rem }
  h1 { font-size: 3rem }
</style>
<h1>Hello, RTCode</h1>
<input placeholder="Type here, then edit the source">

Type something into the box in the output. Then change the heading in the editor: the box keeps what you typed, because an edit patches only the parts of the page that it touches. While you are in the middle of a tag, the output keeps its last good state and catches up when the tag is complete.

You should see: the heading Hello, RTCode in large type, centered, with an input box under it. The logo button shows ↔, because both sync directions are live, and its → arrow flashes green after each edit.

Step 3: Edit the live page

Now go the other way. Add contenteditable to the heading in the editor:

html

<meta name=viewport content="width=device-width,initial-scale=1"><meta name=color-scheme content="light dark">
<style>
  body { font: 1.25rem/1.5 system-ui; text-align: center; padding: 2rem }
  h1 { font-size: 3rem }
</style>
<h1 contenteditable>Hello, RTCode</h1>
<input placeholder="Type here, then edit the source">

Click the heading in the output and change its text. The same change appears in the source: the page writes its changes back into the editor, as a small text edit at the right place.

Note: This direction, Live output → input, works while the input is not in focus. If you have just been typing in the editor, click in the output first. Press F6 to pull the output into the source once, whenever you want to.

You should see: the text of the <h1> line in the editor changing as you type in the output. The ← arrow of the sync pill flashes green when a pull starts.

Step 4: Nudge a value

Double-click 3rem in the style to select it, and press ↑. The number becomes 4rem, and the heading grows. Press ↑ once more for 5rem, then Alt+↑ / ⌥+↑ five times for 5.5rem. ↓ goes the other way. While a number is selected, the arrow keys change it instead of moving the cursor, and delta controls appear in the toolbar: =, ↑ and ↓. Click and hold a button to repeat.

Keys	Changes the number by
`↑` and `↓`	1
`Shift`+`↑` / `⇧`+`↑` and `Shift`+`↓` / `⇧`+`↓`	10
`Ctrl`+`↑` / `⌘`+`↑` and `Ctrl`+`↓` / `⌘`+`↓`	100
`Alt`+`↑` / `⌥`+`↑` and `Alt`+`↓` / `⌥`+`↓`	0.1
`Alt`+`Shift`+`↑` / `⌥`+`⇧`+`↑` and `Alt`+`Shift`+`↓` / `⌥`+`⇧`+`↓`	0.01

Press Esc or click to collapse the selection when you want the arrow keys to move the cursor again. After the nudges, your page reads:

html

<meta name=viewport content="width=device-width,initial-scale=1"><meta name=color-scheme content="light dark">
<style>
  body { font: 1.25rem/1.5 system-ui; text-align: center; padding: 2rem }
  h1 { font-size: 5.5rem }
</style>
<h1 contenteditable>Hello, RTCode</h1>
<input placeholder="Type here, then edit the source">

You should see: the heading growing as you press the keys, and font-size: 5.5rem in the style.

Note: Presses less than 600 ms apart, as when you hold a key, merge into one undo step, so Ctrl+Z / ⌘+Z undoes them together.

Step 5: Sign in

Deploying needs an RTCode.io account. Press Ctrl+S / ⌘+S. You are not signed in yet, so the User menu opens with the toast Sign in to deploy. and nothing is sent. You can also click the avatar at the far right of the toolbar.

Choose GitHub, Google, Microsoft or Apple. GitHub opens a pop-up window. Google, Microsoft and Apple sign in through your identity provider, and multi-factor sign-in and passkeys work there as usual.

You should see: a toast Signed in with your email, and your avatar in the toolbar. The User menu now lists your email, Usage, Domains and Routes, a meter for workers and one for storage, and Sign out.

Note: If the GitHub window closes early, the toast says User cancelled the flow! A GitHub account without an email address shows Required email address is missing. with a button to your GitHub profile settings. Troubleshooting lists the sign-in messages.

Step 6: Choose a route

A route says where your page will live. Press Alt+R / ⌥+R, or click the title button in the toolbar. The Code dialog opens with a Title, Routes and Editors.

In Routes, type a name of your own, such as your-name, and choose Set. A name without a dot is a subdomain of rt.ht, so this one will be served at https://your-name.rt.ht/. A name needs at least four characters, and cannot be a reserved word. If you also give the page a Title, it becomes the default description of the deployed page.

You should see: the name as a chip under the title in the toolbar, where it said Unrouted.

Note: You can press Ctrl+S / ⌘+S before you choose a route. The toast says No routes to deploy. and the Code dialog opens on Routes with a Deploy button: type the name there and choose Deploy. By default an account can claim one name; see Limits and quotas.

Step 7: Deploy

Press Ctrl+S / ⌘+S. The playground sends the whole page to RTEdge.net. If the name is free, the first deploy claims it for you, with a toast You have reserved this domain! 🎉 and a Domains button. While the deploy runs, a Deploying… toast shows and the favicon turns into a cloud. If your name is taken, reserved or too short, an error toast says so and the Routes dialog opens again, so that you can choose another name.

You should see: a toast with the address of your page, https://your-name.rt.ht/.

Add a message to a deploy with Ctrl+Alt+S / ⌘+⌥+S. See Deploying to RTEdge.net.

Step 8: Open your deployment and its source

Click the link in the toast, or press Ctrl+E / ⌘+E, to open your deployment in a new tab. It is an ordinary web page, served from RTEdge.net. To open its source again, add ? after the last slash of its address:

plain

https://your-name.rt.ht/
https://your-name.rt.ht/?

The second address opens the playground with your page exactly as you deployed it, with its title and route. Change the page and press Ctrl+S / ⌘+S again to deploy a new version. Every deploy is a version that you can compare and restore; see Versions and Smart Undo.

You should see: your page in the new tab, with the large heading and the input box. At the second address, the playground opens with your code.

Warning: A page without a worker or an access rule has a public source: anyone can open it with ?. Keep secrets out of it. See Restricting access and Keeping secrets out of deployments.

Summary

You opened a playground from a template, and know that rtcode.io/x/ opens an empty one.
You saw the output follow the source without a reload, and the source follow the page.
You nudged a number with the arrow keys and their modifiers.
You signed in, chose a route and deployed with Ctrl+S / ⌘+S.
You opened your deployment, and its source with ?.

Next steps

The playground interface: A tour of the editor, the output, the split, the menus and status indicators, titles and new-code templates.
Editing superpowers: Nudge numbers with the arrow keys, edit with multiple cursors, encode and decode selections, evaluate expressions and use the HTML helpers.
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.
Using workers: Write backend code in a <script type=worker> that runs in the playground and, with edge, on RTEdge.net.
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.
Deploying to RTEdge.net: Choose routes, deploy with one keystroke or from code, add a message, open, and delete deployments.
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.
Keyboard shortcuts: The playground's keyboard shortcuts in one table.