SpinWheel Guide

A free random-picker wheel. Spin solo or go live so others can watch in real time.

1 · Adding & managing items

Items are the options that appear as segments on the wheel. You can have up to 24 items.

Adding an item

Type the item name in the Add an item… field.
Press Enter or click +.
The item appears on the wheel immediately.

Duplicate items & weight

If you add an item with the same name as an existing item (case-insensitive), SpinWheel merges them automatically and increases the weight instead of creating a duplicate.

A purple weight badge (e.g. 2×) appears next to items with weight greater than 1.
Higher weight = bigger slice on the wheel = higher chance of being selected.
For example, "Pizza" with weight 2 and "Burger" with weight 1 means Pizza gets 2/3 of the wheel.

Adjusting weight manually: Click on any item label (or its weight badge) to open a popup where you can use − and + buttons to adjust the weight from 1 to 10.

Segment order

Segments on the wheel are arranged alphabetically. This keeps the layout consistent and predictable across spins.

Removing an item

Click the × button on the right side of any item row.

Shuffle & Clear all

Shuffle randomises the display order of items in the list. Clear all removes every item after a confirmation prompt.

2 · Colours & active toggle

Changing a segment colour

Click the coloured dot on the left of any item row. Your browser's native colour picker opens — pick any colour and the wheel updates instantly.

Tip: SpinWheel automatically picks black or white label text depending on how light or dark your chosen colour is, so readability is always maintained.

Deactivating an item

Toggle the pill switch next to an item off. It stays in your list but is greyed out and excluded from the wheel — useful for temporarily removing an option without deleting it. Toggle it back on to bring it back.

3 · Spinner settings

Click the ⚙️ gear icon next to the spinner name to open spinner settings.

Repeat items

Controls how many times each item appears on the wheel. Use the − and + buttons to set a value from 1 to 10.

1× (default) — Each item appears once on the wheel.
2× or more — Each item appears multiple times, distributed evenly around the wheel. For example, with 3 items and repeat set to 2×, the wheel shows: A, B, C, A, B, C.

Use case: If you want certain outcomes to be more likely, increase that item's weight (see section 1). The repeat setting multiplies every item equally, while weight gives individual items bigger slices.

Spin speed

Controls how fast the wheel rotates during a spin. Choose from three options:

Slow — Wheel rotates gently (3–4 full rotations)
Med (default) — Moderate speed (5–7 rotations)
Fast — Wheel spins rapidly (9–12 rotations)

All speeds take the same amount of time to complete (4.5–6 seconds) — only the rotation count differs.

Settings are saved: Both repeat and speed settings are saved with your spinner and sync to spectators in live sessions.

4 · Spinning the wheel

You need at least 2 active items to spin.

Click the Spin button, or
Click directly on the wheel canvas, or
Press Space while the page has focus.

The wheel spins for 4–6 seconds with a smooth ease-out. When it stops, the winning item — whichever is under the pointer triangle at the top — is announced in a pop-up overlay.

From the overlay you can Spin again or click Done to dismiss it (Esc also closes it).

5 · Recent Spinners — saving & reloading

SpinWheel automatically remembers your wheel setups so you can reuse them without re-entering items.

How saving works

Every time you spin, the current items are automatically saved to the Recent Spinners panel. No name is required — if the Spinner name field is empty, a name is generated from your item labels (e.g. Pizza, Tacos, Burgers +4). Spinning again with the same name updates that entry rather than creating a duplicate.

Naming your spinner

Type a name (e.g. Friday Lunch, Team Draw) in the Spinner name field before you spin to give it a memorable label in Recent Spinners.

Starter templates

If you haven't saved any spinners yet, the Recent Spinners panel shows a few ready-made examples. Click Try it on any starter to load it and give it a spin — it saves automatically when you do.

Loading a saved spinner

Click any entry in the Recent Spinners panel to load it. This replaces the current items with that saved set and pre-fills the Spinner name field.

Removing a spinner

Click the × button on any entry to remove it from your list.

Storage: When you are signed in, Recent Spinners sync to your account via Firebase — your spinners are available on any device. When signed out, spinners are saved in your browser's local storage and are device-specific. Up to 20 spinners are kept.

6 · Going live — sharing with spectators

Share your wheel in real time. Spectators watch the same spin animation on their device, simultaneously.

Starting a live session

Set up your items.
Click 📡 Go Live in the top-right corner.
A LIVE indicator appears and a share link is shown in the Live Session panel.
Click Copy and send the link to your audience.

While live

Any item you add, remove, or change colour is synced to spectators immediately.
When you spin, all spectators see the same wheel animation in real time.
The result overlay appears on everyone's screen when the spin finishes.

Ending the session

Click End Live in the header. Spectators will see a "Session ended" message and be redirected to the SpinWheel app after a few seconds.

Sessions persist. The session stays active even if you refresh the page or briefly lose connection. Only clicking "End Live" will end it.

No account needed for live. Live sessions require no login — a random 6-character room code is generated for each session.

7 · Watching as a spectator

Open the share link your host sent. The URL looks like:
kraftedlogic.com/sports/spinwheel/?room=XXXXXX

The wheel and items load automatically — no setup required.
The WATCHING LIVE badge in the header confirms you're connected.
You cannot spin or edit items — that's the host's role.
The result overlay appears on your screen when the host's spin completes.
If the host ends the session, the badge changes to Session ended and you'll be redirected to the SpinWheel app after 3 seconds.

8 · Keyboard shortcuts

Space — Spin the wheel (host only; page body must have focus)
Enter — Add the item currently typed in the input field
Esc — Close the result overlay