Output settings

Three ways in

• The F1 palette item Output: Settings. It has no key.
• The Playground menu (Alt+J / ⌥+J) ▸ Output ▸ Settings.
• The Output settings button in the popover of the split divider, whose tooltip reads "Output settings / Viewport, zoom, preferences, text and animation speed".

From a script, showOutputSettings() opens it. Opening the dialog reads the settings from the outputs again, closes the Playground menu and focuses the Preset select. Closing it returns focus to the control that opened it.

A dialog that stays out of the way

The dialog is modeless: the editor, the output and the menus stay usable while it is open. Clicking outside does not close it. Esc or the × button closes it, and Esc leaves it open while another modal dialog or drawer is open. It always uses the dark theme, whatever the color scheme of the output.

• Placement. It opens centered, or at the position you gave it. It moves to the left, right, top or bottom of the visible output, 8 px away, when that side has room, and otherwise takes the spot on screen with the least overlap. It re-checks when the layout, the output frame or the window changes, and never moves while you drag it.
• Moving it. Drag the header, or focus the header and press the arrow keys: they move it 10 px, and with Shift 50 px. The position stays within the visible viewport, with 8 px margins, and is remembered until you reload.
• Status and errors. The heading briefly reads "Applying output settings…", "Waiting for an output document." or "Waiting for the new output document.". Each distinct error appears once as a toast, the failing control is marked invalid, and its tooltip ends with the message.

Which outputs a setting reaches

Once the output has moved to external windows, the inline output is gone, and the settings that need it have no effect. See Output windows.

Viewport presets

The Preset select sizes the output to a fixed number of CSS pixels:

The og:image preset uses the same 1200 × 630 size as the og:image previews that RTEdge generates. See Social previews. Choosing a preset keeps the current zoom and the Auto-fit setting. With Auto-fit on, the zoom is refitted to the new size.

Phone presets are reference sizes

The phone presets are CSS layout reference sizes, not device emulation. The playground does not emulate the device pixel ratio, the browser's own chrome, safe areas, touch or device posture, and the select's tooltip adds that actual viewport dimensions vary with display zoom and browser controls.

• Apple. The sizes are physical pixels divided by 3.
• Samsung. The sizes are physical pixels divided by a reference device pixel ratio: 3.75 for the Galaxy S26 Ultra, 2.625 for the Fold8 Ultra and 2.5 for the Fold8. The Fold sizes are rounded up.
• Inner screens. The iPhone Duo inner and Fold8 inner sizes are given in their natural wide orientation. The Fold8 Ultra inner screen is taller than it is wide.

Custom size

The Width and Height fields take whole numbers of at least 1, and show "Auto" when empty. Set, or Enter in a field, applies them. Clearing both fields restores Panel. Any other invalid input shows "Enter positive whole numbers for both width and height.". The ⇄ button swaps width and height, which rotates the viewport, and applies the result.

A fixed viewport of w × h sizes the output frame to exactly that many CSS pixels, so media queries, innerWidth and innerHeight in the output see that size. The stage is then w × zoom by h × zoom, and the output pane scrolls. If the browser cannot honor the size, the viewport row says "Browser viewport is W × H CSS px; requested W × H.".

Zoom

The Zoom field takes a number of at least 0.1, in steps of 0.01. Its list offers .25, .33, .5, .67, .75, .8, .9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4 and 5. A manual zoom turns Auto-fit off.

• The output frame is scaled with CSS scale.
• In Panel mode, the frame is sized to 100% divided by the zoom, so zooming out gives the output a larger CSS viewport: the panel size divided by the zoom, like browser zoom.
• With a fixed viewport, only the displayed size changes.
• The stored value has two decimals and a minimum of 0.1. It has no maximum.

A zoom other than 1 shows as a badge on the Playground button, such as ×.5.

Auto-fit and Fit now

Auto-fit is a checkbox that is disabled until a fixed viewport is set. While it is on, the zoom is refitted on the next animation frame whenever the output panel resizes. Any manual zoom turns it off, and restoring Panel clears both the viewport and Auto-fit.

Fit now is disabled without a fixed viewport. It fits once, setting the zoom to the largest two-decimal value at which the viewport fits the panel, and it does not turn Auto-fit off. When it cannot fit, it says why: "Set a fixed viewport before fitting.", "The output panel has no usable space.", "The browser could not apply the requested viewport dimensions." or "This viewport cannot fit at the minimum zoom (0.1×).".

Zoom keys

Each step shows the popover of the split divider for about a second with the new value. The popover's Zoom section also has a grid of the presets. See Keyboard shortcuts.

Color scheme

The Color scheme select offers System, Light and Dark. It writes an inline color-scheme on the output frame and on the <html> element of each output document. System writes light dark. In the inline output, both prefers-color-scheme and light-dark() follow it. No browser flag is needed, and the setting is applied again after every full load.

In output tabs and popups there is no frame, so only the document root's color-scheme is set. light-dark() and the browser's own colors follow it, but prefers-color-scheme media queries there most likely keep following the browser.

The command Output: Color Scheme cycles System, Dark and Light with Ctrl+Alt+C / ⌘+⌥+C in the editor. In the popover of the split divider, a click on the Color Scheme row cycles the same way, and a right click toggles Dark and Light (from System, it picks the opposite of the system preference). The Playground button shows a sun for Light or a moon for Dark. In Safari, a click on the popover row opens WebKit bug 284973 instead; the dialog's select, the keys and ocs work as usual.

User preferences

Four selects override the browser's native prefers-* media features for the output:

System, the reset value, clears the override, so the browser's real setting applies again. No preference actively overrides the setting to no-preference. The overrides change the real media queries and matchMedia() in the output. Nothing is simulated: the page's own CSS and scripts decide what changes. This page reacts to a reduced-motion override:

<style>
  :root { color-scheme: light dark; font: 1rem/1.5 system-ui; }
  main  { padding: 1rem; min-block-size: 50dvh; background: light-dark(oklch(98% 0 0), oklch(22% .02 250)); }
  .spin { display: inline-block; animation: spin 2s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
  @keyframes spin { to { rotate: 1turn; } }
</style>
<main>
  <p id=pref></p>
  <span class=spin>⟳</span>
</main>
<script>
  const q = matchMedia('(prefers-reduced-motion: reduce)');
  const show = () => pref.textContent = `prefers-reduced-motion: ${q.matches ? 'reduce' : 'no-preference'}`;
  q.onchange = show; show();
</script>

In a browser that supports the override, choose Reduced motion ▸ Reduce, or run orm = 'reduce'; await orm, and the spinner stops and the text changes.

A preference counts as available only when every connected output supports it. Whether an override reaches only the output or also the editor depends on the browser: in testing, the playground output was independent of the editor, while simpler frame setups shared overrides.

Show unsupported

The Show unsupported checkbox in the dialog header is off by default. While it is off, a preference row is hidden unless its capability is confirmed. While it is on, unavailable rows show disabled, with the tooltip "Requires native preference support, currently available in Chrome with Experimental Web Platform features enabled.", and a status line says "Native preferences available.", "Native preferences unavailable." or "Checking native preferences…". The checkbox changes only what you see. It is not saved in the URL, resets do not touch it, and hidden rows keep their values and errors. A mouse wheel gesture over it toggles it once.

Reset buttons

Each of the 12 settings has a reset button, ↺: viewport, zoom, Auto-fit, color scheme, the four preferences, direction, language, root font size and animation speed. A button is dimmed while its setting is at its default.

The defaults are: viewport Panel, zoom 1, Auto-fit off, color scheme and the four preferences System, direction, language and root font size Original, and animation speed 1.

Mouse wheel

Every control also answers the mouse wheel, and its tooltip says how. A step is 90 units of wheel, and a new gesture starts after 250 ms without wheel events, or when the direction changes. Wheel up increases a value.

• Zoom and animation speed step by 0.1. Root font size and the viewport width and height step by 1 px. On an empty width or height in Panel mode, the wheel starts from the measured size. On an empty root font size, it starts from the output's computed size.
• Selects move to the previous or next enabled option, and stop at the ends. Checkboxes toggle once per gesture.
• Language steps through the named suggestions. A custom tag stays unchanged unless you hold Alt, and Alt + wheel from a custom tag goes to Original.
• Ctrl + wheel and ⌘ + wheel are left to the browser.

Values commit on change or Enter, and until then the draft is marked dirty. A late reply for an older request never overwrites a newer draft.

Building a link from a script

This link opens a page with a 390 × 844 viewport, fitted to the panel, and a dark output. The playground applies ovp before ovfit.

const html = `<h1>Hello</h1>`;
const href = `https://rtcode.io/x/#${new URLSearchParams({ '/': html, title: 'Phone preview', ovp: '390x844', ovfit: 1, ocs: 'dark' })}`;
// https://rtcode.io/x/#%2F=%3Ch1%3EHello%3C%2Fh1%3E&title=Phone+preview&ovp=390x844&ovfit=1&ocs=dark

See Linking and embedding.

Previewing a phone layout

ovp = [440, 956]          // iPhone 18 Pro Max reference size (CSS px)
ovfit = true              // refit the zoom whenever the output panel resizes
fitOVP()                  // { ok, viewport, available, requiredZoom, minimumZoom: 0.1, previousZoom, zoom }
ocs = 'dark'; await ocs   // 'dark'
ovp = undefined           // back to the responsive Panel; Auto-fit turns off

Direction, language, font size and animation speed

odir = 'rtl'; await odir      // <html dir=rtl> in the output
olang = 'ar'; await olang     // <html lang=ar>; nothing is translated
ofs = 20; await ofs           // root font size 20px: rem-based sizes follow
oas = 0.25; await oas         // CSS and Web Animations at quarter speed
oas = 0; await oas            // hold animation time
odir = olang = ofs = undefined; oas = 1   // restore authored values

One call for every setting

Experimental outputSettings.set(key, value) validates a value, applies it and resolves the confirmed value, for any of the preference, text and animation keys and for oz, ocs, ovp and ovfit. Its errors include "Zoom requires a positive finite number." and "Color scheme must be light, dark, or undefined.". Unlike the plain setters, outputSettings.set('oz', …) rejects non-positive values.