Make Xenon yours.

What you can make

Xenon has nine kinds of creation. Each one exports as a small, self-contained code — a copyable link or a .json file — that anyone can import to get your exact result. Here's the whole map.

STEP 0Set up & find the two buttons that matter

You only need Xenon installed and two places in the app. Learn these once and everything else clicks into place.

1. Install Xenon if you haven't. Download the setup, double-click, done. Open the dashboard (it lives at http://127.0.0.1:3030 in any browser, and full-screen on a Xeneon Edge).
2. Find "Import". Open Settings (the gear), choose the Widgets & sharing tab, and look for the Share & Import card. The Import (link or file)… button is how you install anything — a code you copied, a link, or a .json file.
3. Find "Layout". Back on the dashboard, the Layout button in the top bar turns on edit mode — drag tiles around, resize them, add new ones from the + palette, add pages. This is where pages and widgets come to life.

Themes — your colours & look

A theme is the whole visual identity of your dashboard: light or dark, canvas, panels, controls, text, borders, state colours, glass, corner roundness and even a custom font. Xenon applies those semantic roles everywhere, so Settings, menus, Deck tools and every built-in widget stay in the same visual language. Change any of it, then save and share it as one code.

Make one without code

1. Open Settings → Appearance.
2. Pick a mode (Light / Dark / Auto), then set the canvas, panel, secondary surface, controls, text, borders and state colours you care about. Leave a role on Auto and Xenon derives it from the surface.
3. Keep Contrast protection on unless you deliberately need exact low-contrast art direction. It repairs unreadable text and state combinations while preserving colours that already pass.
4. Adjust panel opacity, blur and roundness until the material feels right. Everything updates live across widgets, Settings, menus and Deck tools.
5. Tap Save current theme to keep it as a card you can switch back to anytime.
6. To share it: Settings → Widgets & sharing → Share & Import → Export theme. You get a link or a .json — send it to anyone.

One palette, every surface

Theme files use role names instead of component-specific colours. This is the complete authoring contract; old three-colour themes with only accent, background and text still import, and Xenon derives the missing roles safely.

{
  "appearance": "light",
  "background": "#f1ead5",
  "surface": "#fff8df",
  "surfaceAlt": "#e4d8bd",
  "controlColor": "#d8c9a9",
  "text": "#241f1b",
  "mutedText": "#61564d",
  "lineColor": "#403833",
  "accent": "#e53e54",
  "accentText": "#ffffff",
  "contrastGuard": true
}

One theme, light and dark

A theme's colours are normally fixed: a cream theme stays cream even for someone running Windows in dark mode. Add paletteVariants and you ship both halves in one theme — Xenon paints the one that matches the mode the user picked, and follows Windows live when they're on Auto. Set "appearance": "auto" and the two halves become the palette.

{
  "appearance": "auto",
  "styleMode": "comic",
  "accent": "#e63d4e",
  "background": "#efe6cf",
  "text": "#1b140d",
  "paletteVariants": {
    "light": { "accent": "#e63d4e", "background": "#efe6cf", "surface": "#efe6cf", "text": "#1b140d" },
    "dark":  { "accent": "#ff5566", "background": "#12101d", "surface": "#191527", "text": "#fbf3e0" }
  }
}

Each half takes any role from the table above. Write each one as a complete palette: a role you leave out of a half is derived for that tone rather than borrowed from the other half, so a cream surface can never leak into the dark side. The top-level colours stay required — they describe your primary tone and are what older Xenon versions import.

Override just one widget

1. Turn on Layout and tap the paint control on the widget.
2. Switch from Follow theme to Custom, then change only the roles that tile needs. Unset roles continue to inherit the global theme.
3. The local palette is contrast-checked, saved with the layout, included in backups and page presets, and passed into sandboxed SDK widgets.
4. Choose Follow theme again to remove the override cleanly.

Or start from a real one

Here's the same Nebula theme from the top of the page. Copy it, import it (Share & Import → Import), then open Appearance and tweak it into your own. Learning by remixing is the fastest way in.

eyJ4ZW5vblByZXNldCI6MSwiZXhwb3J0ZWRBdCI6IiIsImFwcFZlcnNpb24iOiI0LjUuMSIsImdyaWRDb2xzIjoyNCwia2luZCI6InRoZW1lIiwibmFtZSI6Ik5lYnVsYSIsImRhdGEiOnsiYXBwZWFyYW5jZSI6ImRhcmsiLCJzdHlsZU1vZGUiOiJnbGFzcyIsImFjY2VudCI6IiNiNTdiZmYiLCJiYWNrZ3JvdW5kIjoiIzBhMDcxMyIsInRleHQiOiIjZjFlY2ZhIiwibXV0ZWRUZXh0IjoiIzlhOGZiYiIsImR5bmFtaWNBbGJ1bVRoZW1lIjpmYWxzZSwicGFuZWxBbHBoYSI6MC45LCJ1aVJvdW5kbmVzcyI6MS4zLCJnbGFzc0JsdXIiOjI2LCJnbGFzc1NhdHVyYXRlIjoxNzUsImJnRGltIjowLjUsImJnQXVyb3JhIjp7ImVuYWJsZWQiOnRydWUsImludGVuc2l0eSI6NjIsInNwZWVkIjo0NX0sImJnR3JpZCI6eyJlbmFibGVkIjpmYWxzZX0sImJnU3RhdGljIjp7InN0eWxlIjoibm9uZSIsImludGVuc2l0eSI6NzB9fX0

Animated backgrounds — a living backdrop

Behind your tiles you can run a gentle animation: stars, waves, aurora, a neon grid. Xenon ships ready-made ones you enable with a tap, and if you're curious, the animation is just a tiny piece of JavaScript you can write yourself.

The one-tap way

1. Open Settings → Appearance → Animated background.
2. Tap a template — Stars, Waves, Neon dots, Nebula, Aurora, Matrix, Confetti, Orbit or Plasma. It turns on instantly.
3. Share it with Export background, or install someone else's with Import background.

A real one to import

Starfield Drift — a calm parallax starfield with a soft violet nebula glow. Copy, then Share & Import → Import.

eyJ4ZW5vblByZXNldCI6MSwiZXhwb3J0ZWRBdCI6IiIsImFwcFZlcnNpb24iOiI0LjUuMSIsImdyaWRDb2xzIjoyNCwia2luZCI6ImJnIiwibmFtZSI6IlN0YXJmaWVsZCBEcmlmdCIsImRhdGEiOnsibmFtZSI6IlN0YXJmaWVsZCBEcmlmdCIsImNvZGUiOiIvLyBTdGFyZmllbGQgRHJpZnQg4oCUIGEgY2FsbSwgYm91bmRlZCBwYXJhbGxheCBzdGFyZmllbGQuXG4vLyBDb250cmFjdDogZGVmaW5lIGRyYXcoY3R4LCB0LCB3LCBoKS4gdCA9IHNlY29uZHMgc2luY2Ugc3RhcnQuXG4vLyBGaXhlZCBzdGFyIGNvdW50LCBPKE4pIHBlciBmcmFtZSwgbm8gZ3Jvd2luZyBzdGF0ZSDigJQgc2FmZSB0byBydW4gZm9yZXZlci5cbmNvbnN0IE4gPSAxNTA7XG5sZXQgc3RhcnMgPSBudWxsO1xuXG5mdW5jdGlvbiBzZWVkKCkge1xuICBzdGFycyA9IFtdO1xuICBmb3IgKGxldCBpID0gMDsgaSA8IE47IGkrKykge1xuICAgIC8vIHogPSBkZXB0aCAoMC4yIG5lYXIgLi4gMSBmYXItaXNoKTsgciA9IGEgc3RhYmxlIHBlci1zdGFyIHJhbmRvbSBmb3IgY29sb3VyL3R3aW5rbGUuXG4gICAgc3RhcnMucHVzaCh7IHg6IE1hdGgucmFuZG9tKCksIHk6IE1hdGgucmFuZG9tKCksIHo6IDAuMjUgKyBNYXRoLnJhbmRvbSgpICogMC43NSwgcjogTWF0aC5yYW5kb20oKSB9KTtcbiAgfVxufVxuXG5mdW5jdGlvbiBkcmF3KGN0eCwgdCwgdywgaCkge1xuICBpZiAoIXN0YXJzKSBzZWVkKCk7XG5cbiAgLy8gRGVlcCBzcGFjZSB3YXNoIHdpdGggYSBmYWludCB2aW9sZXQgbmVidWxhIGdsb3cgYXQgdGhlIHRvcC5cbiAgY3R4LmZpbGxTdHlsZSA9ICcjMDYwNDBjJztcbiAgY3R4LmZpbGxSZWN0KDAsIDAsIHcsIGgpO1xuICBjb25zdCBnbG93ID0gY3R4LmNyZWF0ZVJhZGlhbEdyYWRpZW50KHcgKiAwLjUsIC1oICogMC4yLCAwLCB3ICogMC41LCAtaCAqIDAuMiwgaCAqIDEuMSk7XG4gIGdsb3cuYWRkQ29sb3JTdG9wKDAsICdyZ2JhKDE0MCwgOTAsIDIyMCwgMC4yOCknKTtcbiAgZ2xvdy5hZGRDb2xvclN0b3AoMSwgJ3JnYmEoNiwgNCwgMTIsIDApJyk7XG4gIGN0eC5maWxsU3R5bGUgPSBnbG93O1xuICBjdHguZmlsbFJlY3QoMCwgMCwgdywgaCk7XG5cbiAgZm9yIChsZXQgaSA9IDA7IGkgPCBzdGFycy5sZW5ndGg7IGkrKykge1xuICAgIGNvbnN0IHMgPSBzdGFyc1tpXTtcbiAgICBjb25zdCB4ID0gcy54ICogdztcbiAgICAvLyBOZWFyZXIgc3RhcnMgZHJpZnQgZmFzdGVyIChwYXJhbGxheCk7IHdyYXAgc21vb3RobHkgd2l0aCBtb2R1bG8uXG4gICAgY29uc3QgeSA9ICgoKHMueSArIHQgKiAwLjAxMiAqIHMueikgJSAxKSArIDEpICUgMSAqIGg7XG4gICAgY29uc3QgdHdpbmtsZSA9IDAuNTUgKyAwLjQ1ICogTWF0aC5zaW4odCAqIDEuOCArIHMuciAqIDYuMjgzKTtcbiAgICBjdHguZ2xvYmFsQWxwaGEgPSAoMC4yNSArIDAuNzUgKiBzLnopICogdHdpbmtsZTtcbiAgICBjdHguZmlsbFN0eWxlID0gcy5yID4gMC43MiA_ICcjYzdhM2ZmJyA6ICcjZGJlOGZmJztcbiAgICBjdHguYmVnaW5QYXRoKCk7XG4gICAgY3R4LmFyYyh4LCB5LCBzLnogKiAxLjUsIDAsIDYuMjgzKTtcbiAgICBjdHguZmlsbCgpO1xuICB9XG4gIGN0eC5nbG9iYWxBbHBoYSA9IDE7XG59XG4iLCJpbXBvcnRlZCI6dHJ1ZX19

Write your own (optional)

Under the templates there's a code box. Anything you type there runs in a locked sandbox — no internet, no access to your files. You define one function, draw, and Xenon calls it at the background's frame rate — 30 frames per second by default, adjustable from 10 to 60 right next to the editor. Here's the whole idea:

// t = seconds since start · w,h = size in pixels · ctx = a 2D canvas
function draw(ctx, t, w, h) {
  ctx.fillStyle = '#06040c';      // paint the backdrop
  ctx.fillRect(0, 0, w, h);

  // a dot that circles the middle, once every ~6 seconds
  const x = w/2 + Math.cos(t) * 120;
  const y = h/2 + Math.sin(t) * 120;
  ctx.fillStyle = '#b57bff';
  ctx.beginPath();
  ctx.arc(x, y, 6, 0, Math.PI * 2);
  ctx.fill();
}

That's a complete, working background. Keep the work per frame small and steady and it runs forever without slowing anything down. It lives in the same locked sandbox as a widget (no network, no access to your files), so it's always safe to try one.

Frames per second — the performance dial

Every animated background carries its own frame-rate cap: how many times per second the scene is repainted. 30 is the default and the sweet spot for almost any scene — smooth to the eye, light on the machine. Near-static looks (a breathing gradient, a slow starfield) are happy at 10–20; reserve 60 for genuinely fast motion. Animation speed never changes — a lower cap only paints less often.

Theme authors set it when packaging (bgCustom.fps in a theme, or "backgroundFps" in pack.json). And it's always the user's machine, so the dial stays in their hands too: Settings → Animated background → Frames per second works even on imported backgrounds whose code is locked.

Dashboard pages — arrange your widgets

A page is a saved arrangement: which tiles are on screen and where they sit on the grid. You can have several pages and swipe between them — one for gaming, one for work, one for streaming.

1. On the dashboard, tap Layout in the top bar to enter edit mode.
2. Drag tiles to move them, drag a corner to resize. Tap + to add a widget from the palette, or Add page for a fresh one (up to 8).
3. Give each tile a personal touch with per-tile Decor — a background picture, an ornamental frame, an overlay.
4. Share it: Share & Import → Export page picks which page to hand out. Import re-checks every widget id, so a shared page can never sneak something in.

Deck profiles — your own control grid

The Deck widget is a Stream-Deck-style grid of keys. Each key can launch an app or website, control your media, run OBS or Discord, fire a hotkey, and more — and you style every key exactly how you like. Each profile also owns its device appearance: cap material, shape, faceplate, key-well artwork and music-strip styling. An imported profile changes only itself; profiles already on the Deck keep their original look.

1. Add the Deck widget from the + palette in Layout mode.
2. Tap a key to open Edit key: choose an icon or a picture face, a label, colours or a gradient, and the action it runs on tap / double-tap / hold.
3. Open Personalizza to choose the profile's device theme. Fumetto makes the chassis, keys, icons and captions look hand-inked on paper; the live preview shows its full background before you apply it.
4. Organise keys into folders and pages; group actions into a single key for multi-step macros.
5. Share a profile with Export Deck profile. For safety, actions are rebuilt from scratch on export and import, and the import screen shows exactly which action types a profile contains before you add it.

Widgets — the easy way (no code)

A widget is a tile that does its own thing. The quickest way to make one is the built-in Create widget wizard — pick a template, tweak a few options with a live preview, and save. No files, no code.

1. Go to Settings → Widgets & sharing → Create → Create widget.
2. Pick a template: clock, system monitor, now-playing, label or countdown.
3. Adjust the options (colours, size, what it shows) and watch the preview update. Press Save & install — it appears in your + palette.
4. Share it with Export widget. Anyone who imports it approves its permissions once, then it's theirs.

WIDGET SDKBuild a widget, from scratch

Templates cover the common tiles. When you want something no template can do — your own design, your own data, your own logic — you build a widget. This is the complete reference: everything is on this page, nothing to look up elsewhere. It starts from "I've never written a widget" and goes all the way to the full protocol, so read as far as you need and stop.

What a widget actually is: a folder with an HTML file. Xenon runs it inside a locked sandbox — no internet, no access to your files or the dashboard — and it talks to Xenon through one small message channel. You ask for the data and controls you need, the user approves them once, and your widget drives the real thing. Nothing leaves the PC.

1 · Your first widget: two files

A widget is at least two files in a folder: a manifest.json (its name and what it needs) and an index.html (what it shows). This one needs no data and no permissions. It shows the time and follows your dashboard's accent colour.

{
  "api": 1,
  "id": "neon-clock",
  "name": "Neon Clock",
  "entry": "index.html",
  "streams": [],   // no data needed
  "actions": []    // no controls needed → the permission dialog says "nothing"
}

<!doctype html>
<meta charset="utf-8">
<style>
  :root { --accent:#b57bff; --text:#f1ecfa; }
  body { margin:0; display:grid; place-items:center; height:100vh;
         background:transparent; color:var(--text); font-family:system-ui; }
  #t  { font-size:16vw; font-weight:700; color:var(--accent);
         text-shadow:0 0 22px color-mix(in srgb,var(--accent),transparent 50%); }
</style>
<div id="t">--:--</div>
<script>
  // use this tile's complete, contrast-checked palette
  function applyTheme(theme) {
    const p = theme && (theme.palette || theme); // fallback for older Xenon
    if (!p) return;
    if (p.accent) document.documentElement.style.setProperty('--accent', p.accent);
    if (p.text) document.documentElement.style.setProperty('--text', p.text);
  }
  addEventListener('message', e => {
    const m = e.data;
    if (m && m.xenonSdk === 1 &&
        (m.type === 'init' || m.type === 'theme')) applyTheme(m.theme);
  });
  // tick the clock every second
  const pad = n => String(n).padStart(2,'0');
  setInterval(() => {
    const d = new Date();
    document.getElementById('t').textContent = pad(d.getHours())+':'+pad(d.getMinutes());
  }, 1000);
  // say hello so Xenon starts talking to us
  parent.postMessage({ xenonSdk:1, type:'hello' }, '*');
</script>

Two notes for beginners: the folder name must match the manifest id (neon-clock), and inline <script> only works inside your own widget file — in bigger widgets put your JS in a widget.js file and load it with <script src="widget.js"></script>.

Put it on your dashboard

1. In Xenon, open Settings → Widgets & sharing and turn on third-party widgets.
2. Put your neon-clock folder inside server/data/widgets/ — the folder Xenon watches for widgets.
3. Add the Custom widget tile from the + palette and tap Rescan. Your widget appears in the picker. Approve its permissions (here, none) and it renders.

2 · From your folder to a shareable code

Your folder lives on your PC. To give your widget to someone else, Xenon packs the whole folder — every file — into one self-contained code (a copyable string, or a .json). That's why the code looks so long: it carries all your files inside it, encoded, so whoever imports it gets your exact widget with nothing to download and no folder to assemble.

1. Install your widget first (the three steps above).
2. Go to Settings → Widgets & sharing → Share & Import → Export widget and pick it.
3. Xenon hands you the code (or a .json file). Send it to anyone. They paste it into Import, see exactly what it needs, approve, and it's theirs.

Here is the Neon Clock from step 1, packed into its code. This single string is those two files. Copy it, open Share & Import → Import in Xenon, and you'll get the exact widget:

eyJ4ZW5vblByZXNldCI6MSwiZXhwb3J0ZWRBdCI6IiIsImFwcFZlcnNpb24iOiI0LjUuMSIsImdyaWRDb2xzIjoyNCwia2luZCI6IndpZGdldCIsIm5hbWUiOiJOZW9uIENsb2NrIiwiZGF0YSI6eyJpZCI6Im5lb24tY2xvY2siLCJuYW1lIjoiTmVvbiBDbG9jayIsInN1cmZhY2UiOiJ0aWxlIiwic3RyZWFtcyI6W10sImFjdGlvbnMiOltdLCJob3N0cyI6W10sImhvb2tzIjpbXSwicGF5bG9hZCI6eyJpZCI6Im5lb24tY2xvY2siLCJmaWxlcyI6W3sicGF0aCI6ImluZGV4Lmh0bWwiLCJkYXRhIjoiUENGa2IyTjBlWEJsSUdoMGJXdytDanhvZEcxc0lHeGhibWM5SW1WdUlqNEtQR2hsWVdRK0NpQWdQRzFsZEdFZ1kyaGhjbk5sZEQwaWRYUm1MVGdpUGdvZ0lEeHRaWFJoSUc1aGJXVTlJblpwWlhkd2IzSjBJaUJqYjI1MFpXNTBQU0ozYVdSMGFEMWtaWFpwWTJVdGQybGtkR2dzSUdsdWFYUnBZV3d0YzJOaGJHVTlNU0krQ2lBZ1BHeHBibXNnY21Wc1BTSnpkSGxzWlhOb1pXVjBJaUJvY21WbVBTSjNhV1JuWlhRdVkzTnpJajRLSUNBOGRHbDBiR1UrVG1WdmJpQkRiRzlqYXp3dmRHbDBiR1UrQ2p3dmFHVmhaRDRLUEdKdlpIaytDaUFnUEdScGRpQmpiR0Z6Y3owaVkyeHZZMnNpUGdvZ0lDQWdQR1JwZGlCamJHRnpjejBpZEdsdFpTSWdhV1E5SW5ScGJXVWlQaTB0T2kwdFBDOWthWFkrQ2lBZ0lDQThaR2wySUdOc1lYTnpQU0prWVhSbElpQnBaRDBpWkdGMFpTSStKbTVpYzNBN1BDOWthWFkrQ2lBZ1BDOWthWFkrQ2lBZ1BDRXRMU0JPYnlCcGJteHBibVVnUEhOamNtbHdkRDQ2SUhSb1pTQnpZVzVrWW05NElFTlRVQ0JwY3lCelkzSnBjSFF0YzNKaklDZHpaV3htSnk0Z1RHOW5hV01nYkdsMlpYTWdhVzRnZDJsa1oyVjBMbXB6TGlBdExUNEtJQ0E4YzJOeWFYQjBJSE55WXowaWQybGtaMlYwTG1weklqNDhMM05qY21sd2RENEtQQzlpYjJSNVBnbzhMMmgwYld3K0NnPT0ifSx7InBhdGgiOiJtYW5pZmVzdC5qc29uIiwiZGF0YSI6ImV3b2dJQ0poY0draU9pQXhMQW9nSUNKcFpDSTZJQ0p1Wlc5dUxXTnNiMk5ySWl3S0lDQWlibUZ0WlNJNklDSk9aVzl1SUVOc2IyTnJJaXdLSUNBaWRtVnljMmx2YmlJNklDSXhMakF1TUNJc0NpQWdJbUYxZEdodmNpSTZJQ0paYjNVaUxBb2dJQ0prWlhOamNtbHdkR2x2YmlJNklDSkJJR0pwWnl3Z1oyeHZkMmx1WnlCamJHOWpheTRnVG1WbFpITWdibThnWkdGMFlTQmhibVFnYm04Z2NHVnliV2x6YzJsdmJuTWc0b0NVSUdsMElHcDFjM1FnYzJodmQzTWdkR2hsSUhScGJXVWdhVzRnZVc5MWNpQmtZWE5vWW05aGNtUW5jeUJoWTJObGJuUWdZMjlzYjNWeUxpSXNDaUFnSW1WdWRISjVJam9nSW1sdVpHVjRMbWgwYld3aUxBb2dJQ0p6ZEhKbFlXMXpJam9nVzEwc0NpQWdJbUZqZEdsdmJuTWlPaUJiWFN3S0lDQWlhRzl6ZEhNaU9pQmJYU3dLSUNBaWFHOXZhM01pT2lCYlhRcDlDZz09In0seyJwYXRoIjoid2lkZ2V0LmNzcyIsImRhdGEiOiJPbkp2YjNRZ2V5QXRMV0ZqWTJWdWREb2dJMkkxTjJKbVpqc2dMUzEwWlhoME9pQWpaakZsWTJaaE95QjlDaW9nZXlCaWIzZ3RjMmw2YVc1bk9pQmliM0prWlhJdFltOTRPeUJ0WVhKbmFXNDZJREE3SUgwS2FIUnRiQ3dnWW05a2VTQjdJR2hsYVdkb2REb2dNVEF3SlRzZ2ZRcGliMlI1SUhzS0lDQmthWE53YkdGNU9pQm5jbWxrT3lCd2JHRmpaUzFwZEdWdGN6b2dZMlZ1ZEdWeU93b2dJR1p2Ym5RdFptRnRhV3g1T2lCemVYTjBaVzB0ZFdrc0lDMWhjSEJzWlMxemVYTjBaVzBzSUNKVFpXZHZaU0JWU1NJc0lITmhibk10YzJWeWFXWTdDaUFnWTI5c2IzSTZJSFpoY2lndExYUmxlSFFwT3dvZ0lHSmhZMnRuY205MWJtUTZJSFJ5WVc1emNHRnlaVzUwT3dvZ0lDMTNaV0pyYVhRdFptOXVkQzF6Ylc5dmRHaHBibWM2SUdGdWRHbGhiR2xoYzJWa093cDlDaTVqYkc5amF5QjdJSFJsZUhRdFlXeHBaMjQ2SUdObGJuUmxjanNnZFhObGNpMXpaV3hsWTNRNklHNXZibVU3SUgwS0xuUnBiV1VnZXdvZ0lHWnZiblF0YzJsNlpUb2dZMnhoYlhBb016UndlQ3dnTWpKMmR5d2dNVEl3Y0hncE93b2dJR1p2Ym5RdGQyVnBaMmgwT2lBM01EQTdDaUFnYkdsdVpTMW9aV2xuYUhRNklERTdDaUFnYkdWMGRHVnlMWE53WVdOcGJtYzZJREF1TURGbGJUc0tJQ0JqYjJ4dmNqb2dkbUZ5S0MwdFlXTmpaVzUwS1RzS0lDQjBaWGgwTFhOb1lXUnZkem9nTUNBd0lESXljSGdnWTI5c2IzSXRiV2w0S0dsdUlITnlaMklzSUhaaGNpZ3RMV0ZqWTJWdWRDa2dOVFVsTENCMGNtRnVjM0JoY21WdWRDazdDaUFnWm05dWRDMTJZWEpwWVc1MExXNTFiV1Z5YVdNNklIUmhZblZzWVhJdGJuVnRjenNLZlFvdVpHRjBaU0I3Q2lBZ2JXRnlaMmx1TFhSdmNEb2dNQzQwWlcwN0NpQWdabTl1ZEMxemFYcGxPaUJqYkdGdGNDZ3hNWEI0TENBMExqVjJkeXdnTWpCd2VDazdDaUFnWm05dWRDMTNaV2xuYUhRNklEVXdNRHNLSUNCc1pYUjBaWEl0YzNCaFkybHVaem9nTUM0eE5HVnRPd29nSUhSbGVIUXRkSEpoYm5ObWIzSnRPaUIxY0hCbGNtTmhjMlU3Q2lBZ2IzQmhZMmwwZVRvZ01DNDJNanNLZlFvPSJ9LHsicGF0aCI6IndpZGdldC5qcyIsImRhdGEiOiJKM1Z6WlNCemRISnBZM1FuT3dvdkx5Qk9aVzl1SUVOc2IyTnJJT0tBbENCWVpXNXZiaUJUUkVzZ1FWQkpJSFl4TGlCT1pXVmtjeUJ1YnlCemRISmxZVzF6SUdGdVpDQnVieUJ3WlhKdGFYTnphVzl1Y3pvS0x5OGdhWFFnYjI1c2VTQnlaV0ZrY3lCMGFHVWdiRzlqWVd3Z1kyeHZZMnNnWVc1a0lHWnZiR3h2ZDNNZ2RHaGxJR1JoYzJoaWIyRnlaQ2R6SUdGalkyVnVkQ0JqYjJ4dmRYSXVDaTh2Q2k4dklFSnlhV1JuWlNBb1lXeHNJRzFsYzNOaFoyVnpJSHNnZUdWdWIyNVRaR3M2TVN3Z2RIbHdaU3dnNG9DbUlIMHNJSEJ2YzNSbFpDQjBieUIwYUdVZ2NHRnlaVzUwS1RvS0x5OGdJQ0IzYVdSblpYUWc0b2FTSUdodmMzUTZJQ2RvWld4c2J5Y2dJQ2h2Ym1ObElISmxZV1I1S1Fvdkx5QWdJR2h2YzNRZzRvYVNJSGRwWkdkbGREb2dKMmx1YVhRbklDQWc0b2FTSUhzZ2RHaGxiV1VzSU9LQXBpQjlJQ0FnWVc1a0lDQW5kR2hsYldVbklPS0draUI3SUhSb1pXMWxJSDBnSUc5dUlHTm9ZVzVuWlFvb1puVnVZM1JwYjI0Z0tDa2dld29nSUdOdmJuTjBJSFJwYldWRmJDQTlJR1J2WTNWdFpXNTBMbWRsZEVWc1pXMWxiblJDZVVsa0tDZDBhVzFsSnlrN0NpQWdZMjl1YzNRZ1pHRjBaVVZzSUQwZ1pHOWpkVzFsYm5RdVoyVjBSV3hsYldWdWRFSjVTV1FvSjJSaGRHVW5LVHNLQ2lBZ1puVnVZM1JwYjI0Z2MyVnVaQ2h0YzJjcElIc2dkMmx1Wkc5M0xuQmhjbVZ1ZEM1d2IzTjBUV1Z6YzJGblpTaDdJSGhsYm05dVUyUnJPaUF4TENBdUxpNXRjMmNnZlN3Z0p5b25LVHNnZlFvS0lDQXZMeUJHYjJ4c2IzY2dkR2hsSUdSaGMyaGliMkZ5WkNCMGFHVnRaU0J6YnlCMGFHVWdZMnh2WTJzZ1lXeDNZWGx6SUcxaGRHTm9aWE1nZEdobElHTjFjbkpsYm5RZ2JHOXZheTRLSUNCbWRXNWpkR2x2YmlCaGNIQnNlVlJvWlcxbEtIUm9aVzFsS1NCN0NpQWdJQ0JwWmlBb0lYUm9aVzFsSUh4OElIUjVjR1Z2WmlCMGFHVnRaU0FoUFQwZ0oyOWlhbVZqZENjcElISmxkSFZ5YmpzS0lDQWdJR052Ym5OMElISnZiM1FnUFNCa2IyTjFiV1Z1ZEM1a2IyTjFiV1Z1ZEVWc1pXMWxiblF1YzNSNWJHVTdDaUFnSUNCcFppQW9kR2hsYldVdVlXTmpaVzUwS1NCeWIyOTBMbk5sZEZCeWIzQmxjblI1S0NjdExXRmpZMlZ1ZENjc0lIUm9aVzFsTG1GalkyVnVkQ2s3Q2lBZ0lDQnBaaUFvZEdobGJXVXVkR1Y0ZENrZ2NtOXZkQzV6WlhSUWNtOXdaWEowZVNnbkxTMTBaWGgwSnl3Z2RHaGxiV1V1ZEdWNGRDazdDaUFnZlFvS0lDQmpiMjV6ZENCd1lXUWdQU0FvYmlrZ1BUNGdVM1J5YVc1bktHNHBMbkJoWkZOMFlYSjBLRElzSUNjd0p5azdDaUFnWm5WdVkzUnBiMjRnZEdsamF5Z3BJSHNLSUNBZ0lHTnZibk4wSUc1dmR5QTlJRzVsZHlCRVlYUmxLQ2s3Q2lBZ0lDQjBhVzFsUld3dWRHVjRkRU52Ym5SbGJuUWdQU0J3WVdRb2JtOTNMbWRsZEVodmRYSnpLQ2twSUNzZ0p6b25JQ3NnY0dGa0tHNXZkeTVuWlhSTmFXNTFkR1Z6S0NrcE93b2dJQ0FnTHk4Z2RHVjRkRU52Ym5SbGJuUWdiMjVzZVNEaWdKUWdibVYyWlhJZ1luVnBiR1FnU0ZSTlRDQm1jbTl0SUhaaGJIVmxjeTRLSUNBZ0lHUmhkR1ZGYkM1MFpYaDBRMjl1ZEdWdWRDQTlJRzV2ZHk1MGIweHZZMkZzWlVSaGRHVlRkSEpwYm1jb2RXNWtaV1pwYm1Wa0xDQjdJSGRsWld0a1lYazZJQ2R6YUc5eWRDY3NJR1JoZVRvZ0oyNTFiV1Z5YVdNbkxDQnRiMjUwYURvZ0ozTm9iM0owSnlCOUtUc0tJQ0I5Q2dvZ0lIZHBibVJ2ZHk1aFpHUkZkbVZ1ZEV4cGMzUmxibVZ5S0NkdFpYTnpZV2RsSnl3Z0tHVXBJRDArSUhzS0lDQWdJR052Ym5OMElHMGdQU0JsTG1SaGRHRTdDaUFnSUNCcFppQW9JVzBnZkh3Z2JTNTRaVzV2YmxOa2F5QWhQVDBnTVNCOGZDQjBlWEJsYjJZZ2JTNTBlWEJsSUNFOVBTQW5jM1J5YVc1bkp5a2djbVYwZFhKdU93b2dJQ0FnYVdZZ0tHMHVkSGx3WlNBOVBUMGdKMmx1YVhRbklIeDhJRzB1ZEhsd1pTQTlQVDBnSjNSb1pXMWxKeWtnWVhCd2JIbFVhR1Z0WlNodExuUm9aVzFsS1RzS0lDQjlLVHNLQ2lBZ2RHbGpheWdwT3dvZ0lITmxkRWx1ZEdWeWRtRnNLSFJwWTJzc0lERXdNREFwT3dvZ0lITmxibVFvZXlCMGVYQmxPaUFuYUdWc2JHOG5JSDBwT3lBZ0lDOHZJSE4wWVhKMElIUm9aU0JvWVc1a2MyaGhhMlVLZlNrb0tUc0sifV19fX0

3 · The bridge: how your widget talks to Xenon

Your widget can't reach the network or the dashboard directly. Everything travels as messages. Each message is an object with xenonSdk: 1 and a type. You send messages to window.parent (target origin '*'); Xenon sends messages back to your window. Here is the entire conversation, start to finish:

1. You say hello. parent.postMessage({ xenonSdk:1, type:'hello' }, '*') kicks everything off.
2. Xenon sends init. The current theme, the language, and exactly which streams and actions the user granted (which may be fewer than you asked for — always read this, don't assume).
3. Xenon replays your data. Right after init, it sends the latest value of every granted stream, so you can paint immediately without waiting for the next update.
4. Xenon keeps you current. A data message every time a stream changes, a theme message whenever the look changes, and a size message with your tile's pixel box + DPR (on mount and on every resize).
5. You act. Send an action to control something; Xenon replies with an action_result (ok:true, or an error code).

The messages, exactly

// ── widget → Xenon (you send these to window.parent) ──
{ xenonSdk:1, type:'hello' }
{ xenonSdk:1, type:'action', id:42, action:{ type:'media', cmd:'playpause' } }

// ── Xenon → widget (you receive these in a 'message' listener) ──
{ xenonSdk:1, type:'init',
  theme:{ appearance:'dark', overrides:['accent'],
    palette:{
      background:'#070808', surface:'#111314', surfaceAlt:'#16191a', control:'#1c2021',
      text:'#f0f3f1', muted:'#a6b1ad', dim:'#7f8a86', line:'#46504c',
      accent:'#1ed760', onAccent:'#111111',
      success:'#45d483', warning:'#f0b84f', danger:'#ff6268', info:'#62cbea',
      surfaceSoft:'rgba(22,25,26,0.92)', panelAlpha:0.92  // card surface at the user's panel opacity (null → use surfaceAlt)
    } },
  lang:'en',                 // en · it · ko · ja · zh
  streams:['system'],       // what the user actually granted
  actions:['media'] }
{ xenonSdk:1, type:'data', stream:'system', data:{ /* the live payload, see §5 */ } }
{ xenonSdk:1, type:'theme', theme:{ /* same shape as init.theme */ } }
{ xenonSdk:1, type:'action_result', id:42, ok:true }
{ xenonSdk:1, type:'action_result', id:42, ok:false, error:'not_allowed' }

A real example: a live CPU meter

Same two files, but now the widget asks for the system stream and shows CPU load. Notice the flow: say hello, read init to see what was granted, then handle each data message.

{
  "api": 1,
  "id": "cpu-meter",
  "name": "CPU Meter",
  "entry": "index.html",
  "streams": ["system"]   // → the user is asked to grant "system"
}

<!doctype html>
<meta charset="utf-8">
<style>
  :root { --accent:#1ed760; --text:#e9f2ee; }
  body { margin:0; display:grid; place-items:center; height:100vh;
         font-family:system-ui; color:var(--text); background:transparent; }
  #v { font-size:14vw; font-weight:700; color:var(--accent); }
</style>
<div id="v">--%</div>
<script>
  addEventListener('message', e => {
    const m = e.data;
    if (!m || m.xenonSdk !== 1) return;
    // palette comes on init and whenever this tile's theme changes
    if ((m.type === 'init' || m.type === 'theme') && m.theme) {
      const p = m.theme.palette || m.theme;
      if (p.accent) document.documentElement.style.setProperty('--accent', p.accent);
      if (p.text) document.documentElement.style.setProperty('--text', p.text);
    }
    // live data for a stream we were granted
    if (m.type === 'data' && m.stream === 'system') {
      const cpu = Number(m.data && m.data.cpu);
      document.getElementById('v').textContent =
        Number.isFinite(cpu) ? Math.round(cpu) + '%' : '--%';
    }
  });
  parent.postMessage({ xenonSdk:1, type:'hello' }, '*');
</script>

4 · manifest.json — every field

The manifest declares who your widget is and what it needs. Here's one that uses everything, followed by what each field means.

{
  "api": 1,
  "id": "my-widget",
  "name": "My Widget",
  "version": "1.0.0",
  "author": "You",
  "description": "One or two sentences shown in the picker and the permission dialog.",
  "entry": "index.html",
  "streams": ["system", "media"],
  "actions": ["media", "volume"],
  "hosts": ["api.example.com"],
  "userHosts": [{ "id": "nas", "label": "NAS address", "scope": "private" }],
  "hooks": ["my-event"],
  "storage": true,
  "storageGroup": "my-widget-set",
  "secrets": true
}

5 · Data streams — everything you can read

List any of these in streams. Live streams arrive as unchanged data messages and replay their latest cached value after init. The richer Discord snapshots are loaded on demand while their UI is visible. Every string in a payload is display text: render it with textContent.

6 · Actions — everything you can control

List a category in actions and it unlocks that category's action types. Send { xenonSdk:1, type:'action', id:<yours>, action:{ type, …params } } and you get an action_result back. Everything is re-checked on Xenon's side (the same gate Deck keys pass), and actions are limited to about one every 250 ms per widget.

A real example: a mute button

A one-key widget that toggles your microphone. It asks for the mic action category, and sends a micMute action on tap.

<!doctype html>
<meta charset="utf-8">
<style>
  body { margin:0; height:100vh; display:grid; place-items:center; background:transparent; }
  button { font:600 5vw system-ui; padding:.5em 1em; border-radius:16px; cursor:pointer;
           border:1px solid #2a3a34; color:#e9f2ee; background:#0e1512; }
</style>
<button id="b">🎙 Mute</button>
<script>
  let n = 0;
  document.getElementById('b').addEventListener('click', () => {
    parent.postMessage({ xenonSdk:1, type:'action', id:++n,
      action:{ type:'micMute', mode:'toggle' } }, '*');
  });
  addEventListener('message', e => {
    const m = e.data;
    if (m && m.xenonSdk === 1 && m.type === 'action_result' && !m.ok)
      console.log('action failed:', m.error);   // e.g. 'not_allowed' if the user declined mic
  });
  parent.postMessage({ xenonSdk:1, type:'hello' }, '*');
</script>

7 · Reaching the internet, tiles & webhooks

Your widget has no direct network, ever — the sandbox blocks fetch, XHR and WebSockets. For the two cases where you need the outside world, Xenon gives you safe, mediated channels.

Calling an API (the fetch proxy)

Name the hostnames you need in the manifest's hosts, then ask Xenon to make the request for you and hand back the result.

// manifest: "hosts": ["api.example.com"]
parent.postMessage({
  xenonSdk:1, type:'fetch',
  id:7,                                   // your correlation id
  url:'https://api.example.com/v1/data',
  method:'GET',
  headers:{ 'Accept':'application/json' }
}, '*');

addEventListener('message', e => {
  const m = e.data;
  if (m && m.xenonSdk === 1 && m.type === 'fetch_result' && m.id === 7) {
    if (m.ok) { const json = JSON.parse(m.body); /* … */ }
    else console.log('fetch error:', m.error);   // host_not_allowed · rate_limited · timeout …
  }
});

• https:// to any declared host; plain http:// only to LAN gear (private IPs, *.local, single-word names).
• Loopback and link-local are unreachable, even if a hostname resolves to 127.0.0.1 — blocked at connect time.
• Redirects are not followed (you get the status and location and decide). Headers are limited to accept, accept-language, content-type, authorization and x-*.
• Responses cap at 1 MB; text arrives as UTF-8, binary as base64. Rate limit: about one request per second.

Addresses only the user knows (userHosts)

hosts works when you know the address as you build the widget. It doesn't when the server lives on the user's network — a NAS, a Docker host, a printer, a self-hosted Plex. You can't know that address, and hard-coding your own would make the widget useless to everyone else.

So declare a named blank instead. The user fills it in when they approve your widget, and you read it back from init.

// manifest:
// "userHosts": [{ "id": "nas", "label": "NAS address", "scope": "private" }]

// init hands you what they typed, with a ready-made base:
// userHosts: { nas: { host:'192.168.1.50', port:32400, scheme:'http',
//                     base:'http://192.168.1.50:32400' } }
const nas = init.userHosts.nas;
if (nas) {
  parent.postMessage({ xenonSdk:1, type:'fetch', id:8,
    url: nas.base + '/library/sections' }, '*');
}

• label is the text above the field — say plainly what you want ("Plex server address"). scope is "private" (default, the user's own network only) or "any" (also a public domain, for a self-hosted service).
• The user can type 192.168.1.50:32400, nas.local or https://plex.example.com — all fine. Use base rather than rebuilding the URL yourself. Ports aren't part of the allowlist, so a slot covers any port on that host.
• A slot they left empty is simply absent from init.userHosts — but in practice Xenon won't mount you until every declared slot has an address, and asks them for it instead.
• The address is stored with the user's grant, never in your package: it doesn't travel when the widget is shared, and it survives updates. Users change it later from the Store's Installed list → Address.
• Up to 4 slots. Ask for as few as you can — each one is a field a person has to understand and type.

Local webhooks (a local app pushes to you)

Declare hook ids in hooks, and any local process (Streamer.bot, AutoHotkey, a script) can push an event straight into your widget.

POST http://127.0.0.1:3030/sdk/hook/<your-package-id>/<hook-id>
Content-Type: application/json

{ "anything": "up to 64 KB" }

addEventListener('message', e => {
  const m = e.data;
  if (m && m.xenonSdk === 1 && m.type === 'hook') {
    console.log('hook', m.hook, m.data);   // JSON arrives parsed
  }
});

Delivery is live-only: if no dashboard is open the event is dropped and the sender is told so. Hooks reach your widget even on a page that isn't currently on screen, so you can turn them into Deck states (next).

Map & radar tiles

A slippy map (a weather radar, a location picker) needs many small image tiles, which are too slow to pull one-by-one through the fetch proxy. Point your map library's tile layer straight at the same-origin tile route instead — it's allowed by the widget sandbox with no relaxation, and goes through the exact same host allowlist and safety checks as the fetch proxy, with a built-in cache.

// init tells you your package id: { type:'init', pkgId:'weather-radar', … }
// manifest: "hosts": ["tile.example.com"]
const tile = (u) => `/sdk/tile/${pkgId}?u=${encodeURIComponent(u)}`;
L.tileLayer(tile('https://tile.example.com/{z}/{x}/{y}.png'), { /* … */ });

The tile host must be in your hosts. Images only, cached briefly so panning back doesn't re-hit the server, and rate-limited per widget. Bundle the map library (Leaflet's JS/CSS/marker images) inside your package as usual.

8 · Saving settings & secrets

The sandbox gives your widget no cookies and no localStorage, so Xenon hands you two host-mediated stores instead — both opt-in from the manifest, both shown in the permission dialog, and both living outside your package folder so an update that refreshes your widget never wipes the user's data.

Persistent storage — a widget's own settings

Add "storage": true and you get a small key/value store for the things your widget should remember: the teams a user follows, the sources they picked, a map's last centre and zoom.

parent.postMessage({ xenonSdk:1, type:'store', id:1,
  op:{ op:'set', key:'teams', value:[64, 65] } }, '*');
parent.postMessage({ xenonSdk:1, type:'store', id:2,
  op:{ op:'get', key:'teams' } }, '*');

addEventListener('message', e => {
  const m = e.data;
  if (m && m.xenonSdk === 1 && m.type === 'store_result' && m.id === 2)
    console.log('teams:', m.value);   // [64, 65]  (null if never set)
});

• Ops: set (key, value), get, delete, keys, clear. Values are any JSON value.
• Caps: up to 16 KB per value, 128 keys, 256 KB per store — over that you get value_too_large / too_many_keys / store_full.
• Share across widgets: give several packages the same "storageGroup": "my-set" and they read and write one shared store — perfect for a suite of sibling widgets that keep a common list.

Secrets & API keys — never shipped, never seen

A widget you publish must contain no API keys, and the sandboxed page should never hold one where an update could log it. Add "secrets": true and you get a write-only vault: you can store a key and use it, but you can never read it back.

// Save it once — e.g. from a settings field the user fills in:
parent.postMessage({ xenonSdk:1, type:'secret', id:1,
  op:{ op:'set', name:'apiKey', value:userInput } }, '*');

// Use it: {{secret:NAME}} is filled in by Xenon just before the request
// leaves — the key never travels through your widget.
parent.postMessage({ xenonSdk:1, type:'fetch', id:7,
  url:'https://api.football-data.org/v4/matches',
  headers:{ 'X-Auth-Token': '{{secret:apiKey}}' } }, '*');

• Ops: set (name, value), delete, names, has. There is deliberately no get — a read never returns a value.
• Reference a secret with {{secret:NAME}} anywhere in a fetch's url, headers or body (a key-in-URL API like TheSportsDB works too). Substitution can never move the request to a different host.
• Up to 16 secrets, 4 KB each. A placeholder for a secret you haven't stored fails the request rather than sending the literal token.

9 · Deck integration

A widget can add keys to the Deck (Xenon's Stream-Deck-style grid) three ways. All of them are declared under a deck object in the manifest.

Macros — bundle built-in actions into one key

A macro is a named, multi-step sequence of the same actions you can send over the bridge. It appears in the Deck editor under "Widgets" as Your widget › Macro name.

"deck": {
  "actions": [
    { "id": "quiet", "name": "Quiet mode",
      "steps": [
        { "action": { "type": "volume", "mode": "mute" } },
        { "action": { "type": "micMute", "mode": "mute" }, "delayMs": 200 }
      ] }
  ]
}

Every category a macro touches must also be in your top-level actions (so the user is asked to grant it). Up to 8 macros, 10 steps each; per-step delay up to 5 s.

Published states — light a key from your widget

Declare state ids, then publish values whenever they change. In the Deck editor, "Reflect a widget state" binds any key to your state: the key stays lit while the value is truthy. You can even carry a live label, icon and colour for the key face.

// manifest: "deck": { "states": [{ "id": "viewers", "name": "Viewers" }] }
parent.postMessage({ xenonSdk:1, type:'state',
  id:'viewers', value:1234,
  label:'LIVE 1.2k', color:'#ff3355' }, '*');   // label ≤24, color #hex

Handler actions — your code answers a key

Where a macro composes built-in actions, a handler is a Deck key answered by your own code, with a real config form the user fills in. Declare up to 8, each with up to 4 params (text / select / number).

"deck": {
  "handlers": [
    { "id": "post", "name": "Post a message", "params": [
      { "name": "text", "label": "Message", "kind": "text" }
    ] }
  ]
}

addEventListener('message', e => {
  const m = e.data;
  if (m && m.xenonSdk === 1 && m.type === 'handler' && m.handler === 'post') {
    doYourThing(m.args.text);                     // use granted actions / fetch / state as usual
    // ack so the key can report success (first ack wins; no ack in ~3s → key flashes red)
    parent.postMessage({ xenonSdk:1, type:'handler_ack', callId:m.callId, ok:true }, '*');
  }
});

Add "background": true (top level) and your handlers can run headless — Xenon mounts a hidden frame so your Deck keys answer even with no tile on screen.

10 · Ambient scenes (fullscreen widgets)

Add "surface": "ambient" to your manifest and your package becomes an Ambient scene — a fullscreen screensaver the user selects in Settings → Ambient instead of placing as a tile. Everything else is identical: same folder, same sandbox, same bridge, same permission dialog, same Export / Import.

• You render the whole screen. It's landscape and watched from a distance, so design big, calm and dim — near-black backgrounds are kind to an always-on display. No scrolling (overflow: hidden).
• Keep the top-right corner clear — Xenon draws an exit ✕ there (Escape also closes). Everywhere else, taps reach your page.
• The clock is yours (use Date in-frame). Live data still arrives over your granted streams, exactly like a tile.
• Pause when hidden: gate your requestAnimationFrame loop on document.hidden — scenes open after long idle and pause during games.

11 · Versioning & the security model

Versioning. api: 1 is the contract on this page. Breaking changes would ship as api: 2 with a migration window; Xenon rejects a manifest whose api it doesn't support, so your widget never half-works.

Why this is safe (worth knowing, whichever side you're on):

• The iframe is sandboxed without allow-same-origin: the document has an opaque origin and can't touch the dashboard's origin or storage.
• Every asset is served with connect-src 'none'; sandbox allow-scripts, so even opening the widget URL directly stays offline and sandboxed.
• The manifest is re-validated on Xenon's side; unknown streams / actions are dropped; asset paths are allowlisted by segment and extension.
• Xenon forwards only the streams the user granted and dispatches only granted actions; every action is re-checked in the server's action registry.
• All network goes through the host proxy: the host allowlist is the authority, loopback is unreachable even via DNS tricks, redirects aren't followed, sizes are bounded. Your widget never holds a network primitive.
• Storage and secrets live on the server, outside your package folder. Secrets are write-only — the frame can never read one back — and are filled into a request only for the hosts you already declared, server-side.

Ambient scenes — a fullscreen screensaver

When your dashboard sits idle it can drift into an Ambient scene: a fullscreen canvas with a huge clock, the weather, what's playing, your agenda, live stats, text and shapes — placed anywhere, in any colour. It's the showpiece look.

1. Install one from a share code or the catalog via Share & Import → Import. It lands under Settings → Ambient → My scenes.
2. Set it as your screensaver there, and it appears whenever the dashboard is idle.

Full packages — share everything at once

Made a whole look — a theme, a couple of pages, a background, your favourite widgets — and want to hand someone the entire thing? Bundle it into one package code.

1. Go to Share & Import → Export package.
2. Tick what to include: theme (with its font), pages, Deck profiles, background, your own widgets and Ambient scenes.
3. You get a single code. When someone imports it, each part is re-checked on the way in, and any widgets ask for their permissions — exactly like installing them one by one, just in one step.
4. To uninstall it later, open Share & Import → Installed content. Xenon shows every resource that download added and Remove all deletes them together without touching the user's own creations.

Publish to the community catalog

Proud of something? Put it in the community catalog so anyone can find and install it. It's free, moderated by hand, and keeps your name on your work.

1. Export your creation (theme, page, widget, package…).
2. In the share dialog, hit ✨ Publish to the catalog. It copies your code and opens a pre-filled submission form on GitHub.
3. Add a title, a short description and a screenshot, then submit. A maintainer reviews it and, once merged, it shows up in the catalog for everyone.

There's no hidden backend and nothing auto-publishes — you're always in control of what goes out and when.