The playground interface

The toolbar

A dark toolbar runs along the top. From left to right it holds:

• the File button, the RTCode.io logo with the sync pill, which opens the File menu;
• the title button: the title of the playground, its first route and its editors;
• the code statistics: characters and lines of the input, the cursor and the selection;
• the delta controls =, ↑ and ↓, shown only while a selection holds a number or a boolean;
• on the right, the Playground button, which shows the layout and a few badges, the cast button of Remote Output, hidden until a remote session exists, the Open button ↗ and the User avatar.

A toolbar that overflows scrolls sideways with the vertical mouse wheel, and by dragging an empty part of it with the mouse. The arrow keys move the focus between its controls, and Esc outside a menu returns the focus to the input.

The input

The input is a Monaco editor, the editor of VS Code, in HTML mode with two-space indentation, LF line endings, bracket-pair colors, a minimap that stays hidden until the mouse is over it, and Emmet. Global shortcuts work while you type: the editor hands every key it does not use to the playground. F1 opens the command palette, which lists every command, and a right-click opens the context menu with the RTCode groups. See Commands.

The code statistics show the characters and lines of the input on the left, and on the right the cursor as Line:Column, or ×N with N cursors, the number of selected characters and, with more than one line selected, ×N lines. The tooltip reads Input ⏐ Selection.

While the input is not in focus, a transparent curtain covers it. The wheel still scrolls the editor, a click focuses it and removes the curtain, and a right-click opens the context menu. The sync direction follows the focus: with the focus in the input, edits flow to the output, and without it, changes in the page flow to the input. See Live sync and reloads.

With a number selected, the delta controls appear. ↑ and ↓ change the number, = edits the delta expression, and a ✱ on it marks an expression other than (x + d). The first time you select a number in a top-level playground, a tooltip shows the key once per page load, for 1.5 seconds. See Editing superpowers.

The output

The output is a frame that runs your page on an origin of its own, out.rtcode.io, apart from the editor. When the playground is embedded, or in a browser that gives its editor no origin-keyed agent cluster, such as Safari, the output uses out.rtcode.net instead. The frame is not sandboxed, and it delegates the clipboard, fullscreen, camera, microphone, geolocation, MIDI, payment, display capture, screen wake lock and encrypted media features to your page, so the page can ask for them like any other.

Open ▸ Output ▸ Tab and Popup move the output into a window of its own, always on out.rtcode.net. While an output is external, the panel shows Output in external window. and the split moves to the input. Closing the last external window reloads the playground, which brings the inline output back. Reloading or leaving the playground closes the windows it opened. See Output windows.

Viewport, zoom, color scheme, user preferences, text direction, language, font size and animation speed of the output can be changed without touching the source. See Output settings.

Notifications and the console

Notifications appear as toasts in a stack at the top right, for three seconds by default. Alt+N / ⌥+N focuses the stack, and Esc hides the focused toast.

The 📜 button at the bottom left, or at the bottom right when the output is on the left, opens the console, and a right-click opens the network panel. Badges beside it count the log, info, debug, warn and error calls, with failed assertions, and the network requests of the page and its workers. F12 toggles the console. See Console and network.

Four layouts

The input and the output sit side by side or stacked, and either one can come first. The layout is part of the link of a playground. A key that holds its default value is left out.

From code, s.layout reads and sets the layout. See Selection and layout globals.

Changing the layout

• Alt+/ / ⌥+/ switches between side by side and stacked.
• Alt+P / ⌥+P swaps the input and the output, and mirrors the split, so a split at 30% becomes 70%.

Both are also in Playground ▸ Swap, and on the split popover.

The split

Drag the divider to move the split, or use keys. Alt+1 / ⌥+1 to Alt+9 / ⌥+9 set 10% to 90%. Pressing the digit of the current position mirrors it. Alt+0 / ⌥+0 sets 100%, or 0% when the split is above 90%, Alt+[ / ⌥+[ and Alt+] / ⌥+] move it by 1%, or by 10% with Shift, and Alt+' / ⌥+' mirrors it. Numpad digits are refused, because they are reserved for alt codes. On macOS the editor has actions for these keys, because ⌥ and a key would otherwise type a character.

Ctrl+' / ⌘+' focuses the divider, and then its keys need no modifier. Press it again to return to the input. Ctrl+Alt+' / ⌘+⌥+' locks the split: the divider turns red on hover. The playground remembers one split position for each axis during the session, and a window resize keeps the last percentage. The position of the split is not stored in a link.

From code, s.Position reads and sets the split from 0 to 100, with a capital P.

The split popover

Hovering, focusing or clicking the divider shows a popover with the commands that belong to the split:

Position

Set the split to 0%, 10%, 50%, 90% or 100%, or step it with the arrows or the brackets.

Swap

Toggle the layout with /, or swap the panels with P.

Output settings

A button that opens the Output settings dialog.

Color Scheme

A click cycles the output between system, dark and light, and a right-click toggles dark and light. In Safari a click opens a WebKit bug report instead, and the right-click and the keys still work.

Zoom

Zoom out, zoom in, a prompt for a number, and presets from .25 to 5.

Focus

Move the focus to the input, the divider or the output.

Scroll

The keys that scroll every output from the editor.

The four menus

Four menus hang from the toolbar. The File menu is also called the Code menu in the palette and the Main Menu to assistive technology, and the Playground menu carries an older name in the palette. This guide uses the names of the tooltips. On macOS, ⌃+⌥+U opens the User menu in the editor and ⌥+U elsewhere.

Using the menus

• With a fine pointer, a menu opens when you hover its button, and closes 500 ms after the pointer leaves, if hovering opened it. A click opens it and keeps it open. Touch users tap.
• ↓ on a focused button opens its menu. ↑ and ↓ move and wrap, Home and PageUp go to the first item, End and PageDown to the last, a letter jumps to the next item that starts with it, Enter activates and Esc closes.
• The key of an item shows beside it, in the macOS form on Apple platforms. Tooltips appear after 200 ms.
• Some items keep their menu open after you use them, such as the Live toggles, Delete and the Capture items.
• Items can take modifiers. See Commands.

The File menu

The File menu holds everything that starts something: sync, new code, the edge and the agent folder.

The Route item shows Alt+T as its hint on Windows and Linux, and ⌥+R on macOS. Alt+T sets the title and Alt+R sets the routes, as Keyboard shortcuts explains.

The Playground menu

The Playground menu holds what changes the arrangement and the input: swap, editing, output settings and fullscreen. Its button shows the layout.

Reset opens the Clear Caches page at cc.rt.ht, and Feedback opens the feedback repository on GitHub. About, Alt+Shift+/ / ⌥+⇧+/, shows the RTCode™ trademark notice, the copyright line, the version lines and the name of your browser.

The Open menu

The Open menu opens things in other windows.

The Popup item shows Alt+B, but its key is Alt+Shift+B / ⌥+⇧+B.

The User menu

The header names RTCode.io and links to Elefunc.com, the terms and the privacy policy. Signed out, the menu offers Sign in with GitHub, Google, Microsoft or Apple, and marks the provider you used last. Signed in, it shows:

• your account email;
• Usage, which opens your usage page in a window named _usage;
• Domains, a dialog that lists the subdomains and custom domains you claimed. Click a subdomain to release it, with a prompt that wants its exact name, or choose claim domain to claim another. A custom domain shows setup until it is active. See Domains and subdomains;
• Routes, Alt+. / ⌥+., a drawer with your recent deployments, each with its time, a Copy button, a link to open it, Edit…, Versions… and its screenshot;
• a workers meter and a storage meter, each with a tooltip, refreshed whenever the menu opens;
• Sign out.

An action that needs an account opens this menu with a toast such as Sign in to deploy. The playground restores your session when it is top level; an embedded playground does not.

Menus that change

A menu item can be disabled or absent, depending on the state:

• With no routes, Edge ▸ Open, Edge ▸ Load, Edge ▸ Delete, Code ▸ Versions and Open ▸ Edge ▸ Route are disabled. Code ▸ Size stays enabled.
• In an embedded playground, the Code and Edge sections, Open ▸ Edge and the Capture section are hidden, and Open ▸ Playground ▸ Tab and Playground ▸ Reload appear. A click on the title button opens the File menu instead of the Code dialog.
• The Agent section needs Chrome or Edge on a computer. See Browser support.

The New Code chooser

Create: New Code… opens a chooser over the playground. Run it with Ctrl+Alt+N / ⌘+⌥+N (⌃+⌘+⌥+N in the macOS editor), with File ▸ Code ▸ New, from the context menu, or by opening https://rtcode.io/x/#act=code.new. The link go.rt.ht leads to that address.

Template links open in a new tab. Hold Shift while you click or press Enter to open one in the tab you are in. Touch devices have no Shift and always get a new tab. Esc closes the chooser, and on touch devices a tap on the background does too.

Templates

The chooser lists these templates. New Project starts with a viewport and a color-scheme meta, and the cursor on the line below them. A link that ends in ? opens the source of a deployed template; see Linking to and embedding the playground.

Snippets

Snippet commands insert at the cursor: Alt+S / ⌥+S a style, Alt+X / ⌥+X a script, Alt+M / ⌥+M a module script and Alt+G / ⌥+G a simple worker, which also needs a single empty cursor. In the inserted text, | marks where the cursor lands and |>…<| what is selected. New Markdown (MD) and New Script Worker have no key, and are in the palette and the context menu. See Editing superpowers.

RTCode adds Emmet abbreviations Experimental to the ones the editor knows, such as z for <style>, x for <script>, w for a worker and we for an edge worker.

Importing

• Import URL…, Ctrl+Alt+V / ⌘+⌥+V, asks for a URL, prefilled from the clipboard, and replaces the whole input as one edit that you can undo. CodePen pen URLs are fetched through cp.rt.ht, and the title of the playground becomes the title of the pen. A request that a browser blocks is retried through a fetch proxy. A response that is not a success shows its status in an alert.
• Paste URL Content… fetches the same way and inserts the text at the cursor. The title stays.
• Paste with Positions… pastes clipboard text in which | creates cursors and |>…<| creates selections. With the clipboard blocked it shows Clipboard blocked by browser and a prompt.

To open a CodePen pen, change codepen.io to xcodepen.io in its URL, or use rtcode.io/<user>/pen/<id>. Both lead to cdpn.rt.ht, which opens the pen in the playground. The link https://xcodepen.io/ alone opens the Import URL prompt.