Clicker Wonderland

Contents

1. What Clicker Wonderland makes

Clicker Wonderland is a browser-based 3D design tool that builds a working desk clicker around a real mechanical keyboard switch. You choose a shape, upload a picture, or import a 3D model you already own; the app generates two printable parts plus the pocket, plate cutout and stem socket that hold an MX style switch between them. Print the two parts, push a switch in, and you have a physical button that clicks.

The two halves

Every design is exactly two printed parts plus one bought switch. The button (also called the top or cap) is the part that moves. The base is the part that stays still and carries the switch. Between them sit a plate cutout that the switch clips into, a switch cavity under that plate, a sliding guide surface that keeps the press straight, and a cross shaped socket that grips the switch stem.

Two ways to design

2. Before you start

What you need

• A browser with WebGL 2 — Chrome, Edge, Firefox or Safari on a computer, or Safari on iOS and Chrome on Android. Phones get the full editor, laid out viewer-first. The 3D viewport does real geometry work, so a reasonably recent machine is a comfortable minimum.
• An FDM 3D printer, or a printing service. Multi-colour is a bonus, not a requirement.
• One MX style mechanical switch per clicker — Cherry MX, Gateron, Kailh, or a Kailh BOX. Clicky switches such as BOX White give the loudest, most satisfying result.
• Optional hardware, depending on the accessories you add: a split ring or keyring, a 6x2 mm or 8x3 mm neodymium disc magnet, a badge pin, or a lanyard cord.

Accounts and downloads

Designing needs no account — build the whole thing, look at it from every angle, and change your mind as often as you like. Saving a printable file is what needs one: a free account, signed in with a one-click link by email or with Google, and there is no password to remember. Each printable file you save spends one of your downloads, so it is worth getting the design right in the preview before you export. Your design is saved in this browser, so signing in never costs you the thing you have just made.

What the app stores on your machine

The app keeps your current design, which cards you had open, whether you have seen the tour, whether you have seen the coach card, any 3D model you imported, and any font file you added to letter a design — all in this browser only, and nothing is uploaded. All of it lasts as long as this window: a refresh brings your work back exactly as you left it, and closing the window starts you fresh. Custom fonts are no different — the font file never leaves your machine, and the design that uses it is rebuilt with that font after a refresh. Under Fine-tuning — Your data (or in All controls) there is a single Delete everything stored button; after it runs, the app verifies each item really went and reports anything that did not. That deletion cannot be undone.

3. The interface at a glance

The 3D viewport is central and full-bleed. Controls live in a side studio panel (desktop) or bottom sheet (phone) of step-by-step group cards. The mode pair sits in the top dock, the bottom dock offers starting and printing actions, and the Ready to print beacon sits at the top — top right on a computer, centred on a phone.

The studio panel and group cards

At the top sits the mode pair: Flat button and 3D Model Cut · Beta. Below it, step-by-step group cards open in sequence as you confirm each step with Looks right →. Tapping any card header jumps back to revise that step.

The little circled i

The circled i next to a control opens a short note that explains it in cases rather than paragraphs — what each option does, and what to change when the printed result is wrong. This guide reproduces the substance of those notes in place.

The viewport

Drag to orbit, scroll to zoom, right drag to pan. The viewport is interactive beyond the camera: you can drag the keychain loop around the rim, drag the pink handles that resize a cut region, right click an artwork piece to change how that one piece is finished, and click a spot on an imported model to place the switch there.

For keyboard users the viewport exposes a component menu: press Enter, the Menu key, or Shift+F10 to list every part of the design and every action available on the selected one. Arrow keys nudge the selected part, Delete removes it, and Escape clears the selection or closes open sheets. Two skip links at the very top of the page jump straight to the 3D preview or to saving and export.

The Ready to print beacon and print sheet

At the top of the screen — top right on a computer, centred on a phone — the Ready to print beacon reports live whether the current design is printable. Tapping Print my clicker in the bottom dock or in Fine-tuning opens the print sheet with all save and share actions. Chapter 16 covers how to read the checks in detail.

4. Quick start: your first button

1. Choose Flat button in the top dock, then tap Start with a shape (or Start with a picture).
2. Pick a shape. Tap Circle, Heart, Kitty or any of the 22 built-in outlines in the 7-column shape grid. If you would rather start from something than from nothing, press Surprise me: it rolls a random shape, size, colour pair and keychain, and touches nothing else you have set. Tap Looks right →.
3. Choose a size and fit. In Your button, adjust the How big? slider (60 mm is the friendly default). Choose how the halves fit (Top hugs the base is classic) and pick an edge look (Rounded, Beveled or Square).
4. Pick a palette. Choose from the 28 colour palettes; the Button and Base colour wells let you override either colour individually. Tap Looks right →.
5. Add text or accessories, if you want them. In Features, type into Add text, pick a font or upload your own font file (.ttf, .otf, .woff), and choose whether letters stand proud or carve in. Switch on Keychain or Magnet if needed. Tap Looks right →.
6. Check it. Open All controls from the panel footer to tick Animate Assembly to watch the halves lift apart, Cross Section View to look inside at the switch pocket, or Print colours to see the paints the file will really carry rather than lit screen colours. Orbit and inspect in the 3D viewport.
7. Check the beacon. The Ready to print beacon at the top of the screen confirms when everything is valid and printable.
8. Print my clicker. Tap Print my clicker in the bottom dock (or on the Fine-tuning card) to open the print sheet, then tap Save for 3D printing (.3mf) — one file with every part and your colours, ready for Bambu Studio, PrusaSlicer or OrcaSlicer.

5. Choosing a mode

The top dock above the viewport provides an always-visible choice between two design modes:

Switching modes does not throw the other mode's work away. If you switch to 3D Model Cut and change your mind before importing a model, simply tap Flat button in the top dock to return.

6. Shape or picture (Flat mode)

Pick a shape

Twenty-two built-in outlines in a 7-column grid, each one a single tap that rebuilds the model: Circle, Rounded square, Squircle, Hexagon, Capsule, Oval, Egg, Diamond, Shield, Cookie, Clover, Heart, Flower, Star, Cloud, Kitty, Bear, Bunny, Duck, Ghost, Mushroom and Butterfly. Clean shapes give a reliable guided fit and need no picture at all.

Surprise me rolls a whole design — shape, size, colour pair and keychain — and leaves every other setting you have chosen alone. Press it again for a new roll.

Or a picture

Drop a PNG, JPG or SVG onto the upload field, or tap to choose one, and the app traces it into a printable outline. A transparent PNG works best, because the transparency is the outline.

Artwork finish

Sets the starting finish for every traced piece; any single piece can be overridden afterwards.

Button perimeter

In the Your button card, Follow my picture makes the outline of your picture the outline of the button, sized by Outline backing — the plain border added around and between picture pieces, 2.5 mm by default. Clean shape keeps the picture inside a built-in shape instead, sized by Picture size inside the shape (%), which leaves a clean border between the artwork and the perimeter.

Retrace banner

If a newer tracing algorithm becomes available for an uploaded picture, a banner appears in the Your picture card offering Re-trace so you can upgrade the outline with one tap.

Artwork pieces and switches

A traced picture comes apart into pieces, and every detected piece is listed in the settings. Select one and change it, or right click the piece directly in the 3D view (keyboard: select it and press Enter) to make it raised, engraved, domed, or a separate moving button with its own switch. Apply selected settings to all pushes one piece's settings across the whole picture, and Use one automatic switch hands the decision back to the app.

The piece you mark as the moving button becomes the visible top of the clicker; the app generates its mechanical backplate, MX socket and matching switch housing underneath. Size may be raised automatically within the 118 mm limit to make the mechanism fit — anything larger than that is rejected.

7. Size

Starting points

Each preset also sets a matching wall thickness and switch cavity. None of them is a lock — every slider below still moves.

How big?

Sets the width across the longest side of the button, from 30 to 118 mm, with an exact numeric input beside the slider. The slider's minimum adapts to the shape you chose so the switch socket never leaves the silhouette, which means every value the slider offers is a value that builds.

8. Colours

One palette pick sets the Button and Base colours together; the two colour wells below override either one on its own. There are 28 palettes: Sakura, Mint, Bubblegum, Midnight, Lavender Dream, Peach Sorbet, Ocean Wave, Lemonade, Strawberry Milk, Matcha Latte, Blueberry, Cotton Candy, Sunset, Forest Walk, Flamingo, Taro Boba, Mango Tango, Cloudy Sky, Rose Gold, Cherry Cola, Pistachio, Grape Soda, Vanilla Cream, Coral Reef, Panda, Neon Pop, Clay and Sand, and Sea Glass.

Button and Base set the main body colours. An uploaded picture may add simplified source colour regions to the Button in the 3MF file; starter icons and text stay the Button colour unless you give the text its own. Each part keeps its colour all the way into the .3mf, so your slicer asks for filaments rather than handing you one grey lump. A plain zip of STLs carries no colour at all — that is the format's limitation, not the app's.

9. Shell and edges

How the halves fit

A fuller shell hides more of the mechanism; a lighter one prints faster and uses less filament. Either way, the outer look is finished with the edge treatments below.

Outer edge look and smoothness

On the Your button card, Edge look lets you choose between Rounded, Beveled, and Square. When Rounded is selected, Smoothness offers three presets: Subtle (0.5 mm), Medium (1.25 mm default), and Max (2.5 mm).

In the More options door and All controls sheet, three edges can be adjusted independently: Button top, Base top and Base bottom. Each gets its own choice of Sharp, Fillet or Chamfer, an amount in millimetres, and a row of preset values from 0.00 to 5.00 mm.

Each edge card shows three numbers: Requested (what you asked for), Safe estimate (the largest value the app is confident about at this size), and Applied (what actually got built). Values above the safe estimate stay visible and selectable — they are marked as risky, not blocked, and they are still tested. If a build fails validation the last verified settings come back and the affected edge card is named, so a bevel that got trimmed says so rather than quietly coming out different. A green status line confirms when the current settings are watertight, manifold and exportable.

10. Text

Type a name, a date or an initial into Add text on the Features card. Multi-line text is supported by pressing Enter. Twenty-three fonts are built in under Letter style, grouped by feel: rounded and soft styles, classic block, fairytale, princess and storybook, playful, bubble and comic, handwritten, brush and script, elegant and western serifs, condensed poster, chunky, marker, Georgia, Times, Trebuchet, Verdana and two monospaced faces. You can also load your own .ttf, .otf or .woff directly on the card; it is traced locally, never leaves your machine, and lasts for the session.

Raised text is its own colour region in the exported file. Engraved text can colour the recessed cut faces too, so a slicer can recolour it either way.

11. Accessories

Accessories are toggled in a compact 2x2 grid on the Features card: Keychain, Magnet, Lanyard slot, and Ring hole. Switching on Keychain or Lanyard pops a brief ~2.8-second hint confirming that you can drag the attachment point directly along the edge in the 3D viewport.

Keychain loop

Tick Keychain and a loop appears on the rim, sized for a keyring, split ring or lanyard clip. Hole size defaults to 4.0 mm. Loop position slides it around the edge in degrees, where 90 is the top, 0 the right and 270 the bottom — or just drag the loop around the model in the 3D view. Loop height raises it off the print bed.

Magnet pocket

Adds a pocket in the underside of the base for a disc magnet — hidden from outside. Set Magnet size and Magnet thickness to the disc you own; 6x2 mm and 8x3 mm neodymium discs are the classics. Clearance for glue is added automatically. Glue the magnet in after printing and you have a fridge clicker.

Ring hole / Ring channel

Carves a channel through the base so a real metal split ring can be threaded through it. The see-through ring in the preview is a guide showing where the metal will sit — it never prints. Set Ring size and Wire thickness to the ring you actually have. Position slides it around the edge, Sink into the body sets how deep it bites (it must pass all the way through the edge to hook on), Lift raises it, and Stand the ring upright turns it through ninety degrees.

Lanyard slot

A wide flat slot through the rim for a strap or cord. Use it rather than the round keychain hole when the clip is too wide for a hole — a lanyard clip usually is. Slot position works in the same degrees as the loop, or drag it directly in the 3D view.

Badge pin back

Under More options, two shallow pockets in the underside of the base accommodate a standard bar or safety pin, glued in after printing. It shares the underside with the magnet pocket, so turn one off to use the other. The print checks verify the wall left around every pocket you add.

12. Preview options

Three switches in the All controls sheet (and More options doors) change what you see and nothing else. None of them touches the exported files.

13. Advanced and fine-tuning

These are the numbers that decide whether the printed clicker feels right. Most designs never need them; a printer that runs tight or loose needs two or three of them.

Switch fit

Maker's mark

Tick Sign the inside of the base and type your brand. It becomes raised lettering on the floor of the switch pocket — your signature on every print, invisible from outside.

Where it clicks (switch centring)

On the Your button card, Where it clicks (mm from centre) provides X and Y range and numeric inputs, plus a Centre reset button. This moves the click point away from the middle of the button for asymmetric shapes or corner clicks. The offset is clamped dynamically to the model's footprint so the switch always stays inside the walls.

Your data

Everything the app has kept in your browser is listed under Fine-tuning / All controls with a Delete everything stored button. See chapter 2.

14. 3D Model Cut: import a 3D model

3D Model Cut turns a 3D model you already own into a clicker that splits along a seam you define. It is in beta and guides you through four sequential group cards: 1. Your 3D model, 2. Choose cut, 3. Features, and Fine-tuning.

1. Import your 3D model

Drop a .glb, .gltf, .3mf or .stl onto the upload card. GLB, GLTF and 3MF keep their source colours. Colourless STL files are assigned a two-tone moving top and stationary bottom automatically so you can tell the halves apart.

Colours chooses how colour reaches the file. Keep the model's colours shows every shade on screen and carries the paints underneath the lighting — but a white highlight on yellow prints yellow, because a printer lays filament and cannot lay a highlight. Flatten to printable picks printable colours for the screen too, so what you see is what exports. Turn on Print colours under All controls to see the exact paints.

Foot trim (in More options) flattens the underside so the body can stand on its own. At 0 percent the model stays whole with no slice taken off the bottom; raise it only if you want a flat foot. A model you intend to print on its seam face does not need a foot at all.

2. Define the moving part

Three pictured buttons on the Choose cut card offer different ways to split the model:

Switching between methods keeps your sketches: Quick flat cut retains them and they can be re-enabled for an intersection later.

3. Switch position and features

Tap Place switch on model and click a spot on the 3D model, or use Auto-fit and ↺ Centre for fast alignment. Exact X, Y, Z coordinates and nudge arrows are available behind the More options door.

Z drop lowers the switch interface into the model. What happens underneath is set by Z-depth behaviour: with Two parts, extended stem, the top receiver reaches down to the lowered switch; with Top sinks into bottom, the moving part nests into a cavity instead.

Accessories (Keychain, Magnet, Lanyard slot, Ring hole) are toggled directly on the card with live drag hints.

Seam and orientation controls

15. The intersection cut editor

An intersection cut lets you define where the moving part is from up to three directions at once, and the button becomes the part that all of them agree on. Draw a circle on the top view and a band on the front view, and the button is the piece that is inside both.

Step 1 — open the editor

Choose Intersection cuts on the Choose cut card. The view swings face on to the plane you are drawing and locks orbit so dragging draws strokes. The model rebuilds cleanly when you tap Apply cut.

Step 2 — choose a plane

Three views of the same model: XY · Top, XZ · Front and YZ · Side. Each keeps its own drawing, and each narrows the moving part further. Most designs need only XY. Switching planes preserves sketches on other planes, and the final cut uses the common overlap of every enabled plane.

The one-press start: Centre plug

Centre plug fills the top view with a round region. It arrives three-fifths of the way across whatever you imported, scaling with the model. It is an ordinary region — everything in this chapter applies to it.

The drawing tools

Magnetic edge and Trace outline

Magnetic edge makes drawing tools cling to the model's real silhouette. Trace outline selects the entire silhouette in one press.

Editing what you drew

With Select active, drag inside a region to move it, or drag a pink handle to reshape it. Alt+click an edge adds a point; Alt+click a handle removes one; Delete removes the active region.

Finished shapes become numbered chips under Selection regions. Click a chip to edit it or its cross to remove it. Undo last region steps back one shape. Clear active plane empties the current plane. Cancel discards changes and restores the previous cut.

Add and Subtract

Every new shape either joins the selection (Add) or is carved out of it (Subtract). The first shape on a plane is always additive.

Which part actually moves

Cut depth

Depth is a choice on the top plane only. Automatic depth puts the floor at the switch-aware seam. Turn it off and Button floor sets how deep the button reaches. Flat floor cuts level; Follow surface keeps the button a lid of uniform thickness following the model's outer skin.

Fit and release

Wall draft leans the cut wall so parts separate cleanly upon pressing. Cut clearance sets the sliding gap for this cut alone.

The live mechanism readout

Under the editor, a line reports mechanism clearance in real time (e.g. Switch at x 0, y 0, seam 26.5 mm). It confirms whether the switch fits, warns if there is no room for the guide lip, or indicates if regions need adjusting.

Step 3 — Apply cut, then check readiness

Apply cut executes the geometry boolean. The button enables once an active plane holds a closed region. When complete, the Ready to print beacon updates with final verification.

16. Checking print readiness

The Ready to print beacon at the top of the screen is the live readout that verifies your design. When you tap Print my clicker, the print sheet opens with full confirmation: Your clicker is ready — 2 parts · fits any FDM printer.

The status check confirms that the final solids are watertight, manifold, correctly oriented, and have valid switch cavities and clearances. If any parameter needs adjustment, the beacon turns amber and reads Check this. Tap it on a phone, or rest the pointer on it on a computer, to read the full message, then fix it before printing.

When an adjustment is needed

If a cut or placement is out of bounds, the status message names the exact direction to fix:

17. Saving, exporting and sharing

Tapping Print my clicker in the bottom dock or on the Fine-tuning card opens the print sheet with four export options:

18. Printing and assembly

Slicing

• Open the .3mf and check both parts are on the plate, each as one body. The app lays parts flat; the 3mf arrives with colours assigned per part.
• A 0.2 mm layer height is a sensible default. Finer layers make sliding guide surfaces smoother.
• Print the two parts in different filaments if you can — the colour split is already in the file.
• Supports are usually unnecessary. The exceptions are a keychain loop lifted off the bed, and a ring channel or lanyard slot high on the rim.
• A 3D Model Cut button is the one part that prints socket down, because a sculpted shape has no flat top face to stand on. Supports elsewhere on it are fine and often needed for sculpted overhangs. The socket ceiling is a 45° ridge, so with normal supports the slot comes out empty. Use normal supports rather than tree supports for this part: tree supports can enter the socket mouth. If using tree supports globally, place a support blocker over the socket opening.

Assembly

1. Clean any stringing from inside the switch pocket and sliding walls. A binding clicker is more often a stray strand of plastic than a wrong dimension.
2. Push the switch into the plate cutout in the base until it clips firmly into place.
3. 3D Model Cut buttons only: look into the socket before pressing it on. Check that the cross socket is clean and free of debris.
4. Press the button halfway down onto the switch stem so the cross socket engages, then test the click and travel.
5. Glue in the magnet, badge pin or split ring if you designed a pocket for one.

19. Troubleshooting

20. Keyboard and mouse reference

21. Default values cheat sheet

22. Glossary