Source: https://mokxi.com/docs/editor/on-a-phone
Updated: 2026-09-27

Getting started The editor Placing parts Wiring Sticky notes Drawing on the canvas Tidying up Pinned comments Frames Reusable blocks Making chips The code editor and compiling Run and the serial monitor The serial plotter The operating point, sweeps and frequency response The debugger Ask: questions about your circuit WiFi, simulated The properties panel Undo, copy and paste Keyboard shortcuts Saving and autosave Sharing a project Exporting PNG and SVG SPICE netlists Working on a phone Install it as an app Boards Parts Accounts and plans Live collaboration Classrooms Lessons and the learning game Troubleshooting Reference

Docs / The editor / Working on a phone

# Working on a phone

The stacked layout, the bottom sheet, and two fingers on the canvas.

## The layout

Below 700 pixels wide the editor rearranges itself rather than shrinking. The
canvas takes the window. The header keeps four things: the wordmark, Save, Run
and a menu button holding everything else. The code editor, the serial monitor
and the Build tab become one bottom sheet with tabs, and the part panel comes up
from the bottom of the screen instead of docking to the left.

Every target is at least 44 pixels, and no page on the site scrolls sideways.

## Two fingers

Put two fingers on the canvas and it pinches. The point of the circuit under the
midpoint between your fingers stays under it while you move: spreading zooms in,
pinching zooms out, and moving both fingers pans.

Whatever the first finger had started is put back before the pinch begins. A
half-dragged part goes home, a held pushbutton lets go, and a wire being drawn is
dropped. That is deliberate: the second finger means you wanted to look at
something, not that you wanted to finish the drag.

Lifting one finger ends the gesture and leaves the view where it is. The finger
still on the glass does nothing until it presses again.

## One finger

One finger drags a part, draws a wire from a pin, or pans the empty canvas,
exactly as a mouse does. Everything in the editor is built on pointer events, so
there is nothing that needs hover to be discovered and nothing a finger cannot
reach.

Hold a tile in the part panel for a moment and its description appears.

## Typing

The code editor works with the on-screen keyboard and starts at a readable 14
pixel visual size. Pinch with two fingers or use the minus, percentage and plus
controls below the code to move from 11 to 22 pixels. Long lines stay whole and
pan sideways. The editable layer remains at Safari's 16 pixel focus threshold,
so tapping into code does not enlarge or move the whole page.

## The rest of the site

Every page works at phone width. Worth knowing:

- a section's button moves under that section's content rather than sitting
under the heading;

- the parts bench is two tiles across and shows eight at a time behind a Show
more that says how many are left;

- plan cards, project cards and board tiles read centered;

- the footer's four link lists sit two across under the brand;

- the help button clears the home indicator at the bottom of the screen.

## Is a phone enough?

For reading a circuit, changing a value and pressing Run, yes. For laying out a
board of forty parts, a larger screen is easier, and the same project opens on
both: the account carries it between them. See
saving and autosave.

You can also add Mokxi to the home screen so it opens like an app:
install it as an app.

### On this page

The layout Two fingers One finger Typing The rest of the site Is a phone enough?