{
if (value) element.mode = value as typeof element.mode;
}}
>
{element.mode ?? 'osu'}
{/if}
{value}
is replaced with the live value. Rule variables such as
{score}
still work too.
Fallback value used when the data is empty or unavailable (such as when logged out).
Result Preview
{previewResult || '(empty)'}
{:else}
Use {score}
for a rule variable, or live clock values such as
{time},
{time12}
and
{hour}.
Clock values refresh every second; other variables update when a script changes them.
{#if variables.length > 0}
Insert
{#each variables as variable (variable)}
{/each}
{/if}
{/if}
{
if (value) element.fontFamily = value;
}}
>
{element.fontFamily ?? 'Sora Variable'}
{#each fontOptions as font (font.family)}
{/each}
{
if (value) element.borderStyle = value as 'solid' | 'dashed' | 'dotted';
}}
>
{element.borderStyle ?? 'solid'}
{:else if element.type === 'icon'}
Choose from over 17,000 icons. Launcher icons adapt to the theme's icon family.
{:else if element.type === 'repeater'}
{
if (value) element.source = value as 'image' | 'icon';
}}
>
{element.source === 'image' ? 'Image' : 'Icon'}
{#if element.source === 'image'}
{element.src ?? 'No image yet'}
{:else}
{/if}
Columns and rows of 0 fill the layer bounds automatically. Up to 240 tiles are drawn.
{:else if element.type === 'gauge'}
{
if (value) element.mode = value as 'bar' | 'ring';
}}
>
{element.mode ?? 'bar'}
{
element.variable = value && value !== 'none' ? value : undefined;
}}
>
{element.variable ?? 'None (use the value below)'}
{#each variables as variable (variable)}
{/each}
{#if !element.variable}
{Math.round((element.value ?? 0.5) * 100)}%
(element.value = value)}
/>
{/if}
(element.rounded = checked === true)}
/>
{:else if element.type === 'ticker'}
{
if (value) element.fontFamily = value;
}}
>
{element.fontFamily ?? 'Sora Variable'}
{#each fontOptions as font (font.family)}
{/each}
(element.background = (event.currentTarget as HTMLInputElement).value)}
/>
{#if element.background}
{/if}
{:else if element.type === 'button'}
{
if (value && element.action.type === 'navigate') {
element.action = {
type: 'navigate',
screen: value as typeof element.action.screen,
};
}
}}
>
{element.action.screen}
{:else if element.action.type === 'url'}
{
if (element.action.type === 'url') {
element.action = {
type: 'url',
url: (event.currentTarget as HTMLInputElement).value,
};
}
}}
/>
The launcher always shows the full address and asks for confirmation before opening a
website.
{/if}
In editor mode, canvas clicks select layers for dragging. Test actions using this button,
or Shift+click on canvas.
{:else if element.type === 'path'}
Draw inside a 0–100 box, for example M 5 95 L 50 5 L 95 95 Z. The path is
stretched to the layer bounds. M, L, H, V, C, S, Q, T, A and Z commands are supported.
{
if (value) element.fillMode = value as 'solid' | 'gradient';
}}
>
{element.fillMode ?? 'solid'}
{#if element.fillMode === 'gradient'}
{:else}
{/if}
(element.stroke = (event.currentTarget as HTMLInputElement).value)}
/>
{
if (value) element.strokeStyle = value as 'solid' | 'dashed' | 'dotted';
}}
>
{element.strokeStyle ?? 'solid'}
{
if (value) element.strokeLinecap = value as 'butt' | 'round' | 'square';
}}
>
{element.strokeLinecap ?? 'round'}
{:else if element.type === 'particles'}
{
if (value) element.preset = value as typeof element.preset;
}}
>
{element.preset}
{#each THEME_PARTICLE_PRESETS as preset (preset.value)}
{/each}
(element.fade = checked === true)}
/>
Particles animate forever and pause when the system asks for reduced motion.
{:else if element.type === 'clock'}
{
if (value) element.mode = value as 'digital' | 'analog';
}}
>
{element.mode ?? 'digital'}
{#if (element.mode ?? 'digital') === 'digital'}
{
if (value) element.fontFamily = value;
}}
>
{element.fontFamily ?? 'Sora Variable'}
{#each fontOptions as font (font.family)}
{/each}
{#if element.widget === 'launch-button'}
Interactive game launch button. Satisfies the required Launch button condition.
{:else if element.widget === 'player-card'}
Live stats card displaying rank, pp, accuracy, level, and playcount.
{:else if element.widget === 'avatar'}
Player avatar with live profile image, shape styles, country badge, and online ring.
{:else if element.widget === 'recent-activity'}
Highlights the player's latest play, beatmap cover art, and grade badge.
{:else if element.widget === 'telemetry'}
Pill bar showing beatmap counts, skin counts, ping, and osu! build.
{:else if element.widget === 'header'}
Launcher title and dynamic greeting. Full shows title and subtitle, Compact shows an
inline pill greeting, and Minimal displays title only.
{:else}
Launcher title and dynamic greeting.
{/if}