Clicker Wonderland

Download the PDF A4, 22 chapters. Same text as this page.

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 a free account, 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.

What the app stores on your machine

The app keeps your current design, which panels you had open, whether you have seen the tour, whether you have seen the welcome card, and any 3D model you imported - all in this browser only, and nothing is uploaded. Custom fonts you load are used locally for that session and never leave your machine. Under Advanced - Your data 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 window is split in two. The left sidebar holds the design controls, stacked as numbered sections. The right side is the 3D viewport, with a printability panel and the export dock along the bottom.

The sidebar

At the top sits Show me around, a guided tour of the app, and below it a row of jump chips - one per section - with Open all and Collapse all at the end. Clicking a chip scrolls to that section; the chips also tell you the running order.

Section numbering shifts slightly between Flat and Organic mode, because each mode shows only the sections it needs.

Step by step guides

Most sections carry a small link at the top - Shape or picture, step by step, Size, step by step, and so on - with a step count beside it. These open the app's own illustrated walkthrough for that section. The largest by far is Intersection cuts, step by step at 22 steps, which is the subject of chapter 15 of this guide.

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. Two skip links at the very top of the page jump straight to the 3D preview or to saving and export.

The printability panel and export dock

Along the bottom of the viewport a status line reports whether the current design is printable, and the export dock holds the four save actions. A Preview not current badge in the top right corner means the picture on screen is behind your latest change and a rebuild is pending. Chapter 16 covers how to read the panel in detail.

4. Quick start: your first button

1. Leave Start here on Flat button. It is the mode with nothing to import and nothing that can fail.
2. Pick a shape. In Shape or picture, tap Circle, Heart, Kitty or any of the 22 built in outlines. The outline you choose is the outline that prints. 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.
3. Choose a size. In Size, tap Desk (60 mm) for a first print. Keychain is 42 mm and also switches the keychain loop on; Chonky is 82 mm.
4. Pick a palette. One pick in Colours sets the Button and Base colours together; the two wells underneath override either one.
5. Add text, if you want it. Type into Text on the button, choose Raised or Engraved, and set the size. Raised text exports as its own colour region so a slicer can recolour it.
6. Check it. Tick Animate Assembly to watch the halves lift apart, and Cross Section View to look inside at the switch pocket. Tick Print colours to see the paints the file will really carry rather than the lit colours on screen.
7. Read the printability line under the viewport. It should open with a tick and the word Printable.
8. Save for 3D printing (.3mf) - one file with every part and your colours, ready for Bambu Studio, PrusaSlicer or OrcaSlicer.

5. Section 1 - Start here

A single two way choice that decides which sections the rest of the sidebar shows.

Switching modes does not throw the other mode's work away, and there is a Back to flat buttons button in the empty organic viewport if you change your mind before importing anything.

6. Section 2 - Shape or picture (Flat mode)

Pick a shape

Twenty two built in outlines, 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 click 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

Auto - follow artwork 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. Preset shape keeps the picture inside one of fourteen built in shapes instead, sized by Artwork fit (%), which leaves a clean border between the artwork and the perimeter.

Artwork pieces and switches

A traced picture comes apart into pieces, and every detected piece is listed in this panel. 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. Section 3 - 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. 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. Section 4 - 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 .zip of STLs carries no colour at all - that is the format's limitation, not the app's.

9. Section 5 - Shell and edges

Shell style

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 treatment

Three edges are treated 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 sixteen 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 line above the cards confirms when the current settings are watertight, manifold and exportable.

10. Section 6 - Text

Type a name, a date or an initial into Text on the button. Twenty three fonts are built in, 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; 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

Keychain loop

Tick Add a keychain hole 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 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.

Badge pin back

Two shallow pockets in the underside of the base for 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 printability panel checks the wall left around every pocket you add.

12. Preview options

Three switches that change what you see and nothing else. None of them touches the exported files.

13. Advanced

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.

Center the switch

Offset X and Offset Y move the click point away from the middle of the button, which is what an asymmetric shape wants, or a click you deliberately want in one corner. The offset is clamped so the switch always stays inside the walls.

Your data

Everything the app has kept is listed here with one button that deletes it. See chapter 2.

14. Organic mode: import a 3D model

Organic mode turns a model you already own into a clicker that splits along a seam you define. It is in beta and it asks three things of you: an import, a cut, and somewhere sensible for the switch to sit. The section runs as three tabs - Import, Cut, Export.

1. Import the organic asset

Drop a .glb, .gltf or .stl. GLB and GLTF keep their source colours. Colourless STL files are assigned a red moving top and a blue stationary bottom automatically, so you can always tell the halves apart.

Colours chooses how colour reaches the file. Keep the model's own 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 a printable palette picks printable colours for the screen too, so what you see is what exports; it has to guess which differences are paint and which are light. Either way you end up with fewer filaments than the screen suggests. Turn on Print colours under Preview options to see the paints.

Foot trim 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

Two ways to split the model, and one shortcut between them.

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

Switch position

Press Place on model and click a spot on the model, or type exact X, Y and Z coordinates. Reset to centre and Auto-fit undo a bad guess.

Nudge as you see it gives four arrows that move the switch 1 mm in the direction you see on screen - left really goes left, however the model is turned and however the view is orbited. The arrow keys do exactly the same job. The X and Y boxes above stay in the model's own millimetres, so a saved design keeps its placement.

Z drop lowers the switch interface into the model. What happens underneath is set by Z-depth behaviour: Extended stem reaches the top receiver down to the lowered switch, while Pass-through cavity nests the moving part into a cavity instead.

Seam and orientation controls

15. The intersection cut editor

This is the deepest part of the app, and the part worth reading before you use it. An intersection cut lets you say 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

Press Intersection cuts. The view swings face on to the plane you are drawing and stops orbiting, so a drag is a drawing stroke rather than a spin. Nothing rebuilds while you draw; the editor is the preview, and the model rebuilds once, when you press Apply.

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 one narrows the moving part further. Use one, two or all three; most designs need only XY. Switching planes preserves the other sketches, and the final cut uses the common overlap of every enabled plane.

The one press start: Centre plug

Centre plug - XY fills the top view with one round region and opens the editor on it. It arrives three fifths of the way across whatever you imported, so its millimetres follow the model rather than the other way round. It is an ordinary region, not a special mode - everything else in this chapter applies to it.

The drawing tools

Magnetic edge and Trace outline

Magnetic edge makes the pen and the lasso cling to the model's real silhouette, so you can follow an edge without tracing it accurately. Trace outline does the whole thing in one press: the model's own outline becomes the selection, ready to shrink with handles or flip with Outside moves. Trace outline is unavailable for a moment after import while the outline is still being computed.

Editing what you drew

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

Nothing you draw is thrown away. Every finished shape becomes a numbered chip under Selection regions, labelled with the tool that drew it. Click a chip to edit that region, or its cross to remove that one. Undo last region steps back one shape at a time - and it is a step, not a history, so there is no redo. Putting one back means drawing it again, or refilling the plane in one press with Centre plug or Trace outline. Clear active plane empties this plane and leaves the other two exactly as they were. Cancel leaves the editor and puts back the cut you had when you opened it.

Add and Subtract

Every new shape either joins the selection or is carved out of it, and you choose before you draw. Add grows the moving part; Subtract bites a notch out of it. The first shape on a plane is always additive - there is nothing to subtract from yet - so a plane that starts with a subtraction simply starts empty.

Which part actually moves

Cut depth

Full depth cuts all the way through. On the top plane the same checkbox reads Automatic depth, which puts the floor at the switch aware seam. Turn it off and Button floor chooses how deep the button reaches, so the moving part becomes a plug that stops at that floor rather than a slice through the model. The floor never sinks below the switch stack, so winding it down past that point buys nothing.

Depth is not free on the printer: a deep plug is a long wall sliding against a long wall, and every millimetre of it is a millimetre that can drag.

Flat floor, or a floor that follows the surface

Flat floor cuts level, so a domed model comes out squared off underneath - one broad level face that sits straight on its seam face on the print bed. Follow surface keeps the button a lid of one thickness whose underside follows the model's own skin, so the shape reads through and the base keeps a matching dish; the slider relabels itself Button thickness and has to stay thicker than the amount the surface drops across the switch.

Fit and release

Wall draft leans the cut wall so the button is narrowest at the bottom. Both sides lean together, so the closed fit is unchanged, but the walls part the moment the button rises instead of rubbing for the whole travel. A degree or two earns its keep on a deep plug, where an FDM printer's first layers are the widest.

Cut clearance is the sliding gap for this cut alone. Use the seam + lip gap keeps it in step with the two sliders below the editor; untick that and the slider takes over. Widen it if your printer prints tight and the button binds; tighten it if the button rattles. Neither control changes what you drew - they change how the printed part behaves the first time you press it.

The line that answers before you press Apply

Under the editor, one line reports where the mechanism has found room inside what you have drawn, in the form Switch at x 0, y 0, seam 26.5 mm. It recomputes as you draw and as you drag Shape size, so it is the fastest answer in the editor - there is no need to press Apply to find out. It says one of three things: a position, meaning the switch fits; no room for the guide lip, meaning it fits but the button rides on the switch stem alone with no collar guiding it; or that it has found nowhere at all, in which case it names the two ways out.

Step 3 - Apply, then read the check

Apply intersection cut is the moment the real boolean runs and the first time you see the true result - an intersection is the one thing that cannot be approximated in advance. The button stays greyed out until at least one enabled plane holds a finished region, so the usual reason it will not go is an open path: press Finish polyline to close it, or Trace outline to fill the plane in one press.

Navigation inside the editor: the wheel zooms, right or middle drag pans, and the view stays face on to the plane. On a touchscreen, one finger draws while two fingers pinch to zoom and drag to pan.

16. Reading the printability panel

The panel on the viewport is the readout that decides whether the export buttons come alive. A finished intersection cut opens with a tick and the word Printable, and then says, in order: how the two halves print, which planes defined the moving volume, and any number you overrode. A typical readout on a 40 mm imported model with a 3 degree draft and a 0.90 mm clearance reports a split MX-cross retention with a 0.2 mm sliding gap and 4 mm of travel, notes that the moving volume was defined by the intersection of XY, records the drafted cut wall and the per cut clearance you set instead of the seam and lip gap, and closes by confirming that the final STL and 3MF solids are watertight, manifold and one body per part.

When it says no

Every message the editor turns you back with names a direction. Read the verb - it is the control to move, and the way to move it.

Your model stays on screen uncut while you sort it out, and every message names Intersection cuts as the way back in. Quick flat cut is always one press away and keeps every sketch you drew, so trying it costs you nothing.

17. Saving, exporting and sharing

Four actions live in the export dock at the bottom of the viewport, also reachable from the Save and share button.

18. Printing and assembly

Slicing

• Open the .3mf and check both parts are on the plate, each as one body. The app already lays the STL zip flat; the 3mf arrives with colours assigned per part.
• A 0.2 mm layer height is a sensible default. Finer layers make the sliding surfaces smoother, which matters more than it does on ordinary prints.
• 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.

Assembly

1. Clean any stringing from inside the switch pocket and from the sliding walls. A binding clicker is more often a whisker of plastic than a wrong number.
2. Push the switch into the plate cutout in the base until it clips. It should need a firm press, not a hammer.
3. Press the button half down onto the switch stem so the cross socket engages, then check the travel.
4. 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

Clicker Wonderland - The Complete Guide · compiled from the application's own help, section walkthroughs and control reference · for Babah3D