DocsOpen the editorEditor

The screen, part by part

The editor is a header, a canvas, a code pane and a serial monitor. This is what every control on it does.

The header

Left to right, on a wide screen:

  • The wordmark goes home. Once you are signed in it goes to your account and your projects instead.
  • Save, a split button. The wide half writes the project; the chevron opens the rest: Save a copy, Save to my account, and a Built-in projects submenu with the circuits that ship with Mokxi. The label under it says what state the project is in, from Saved to Saving to unsaved changes.
  • Run, which starts and stops the simulation. It turns into Stop while a circuit is running.
  • Share, which opens the share sheet: a link, the public or private switch, the embed code, PNG and SVG export, and the live collaboration links.
  • The heart, which marks a project as a favorite.
  • The project title, with a pencil beside it to rename it.
  • SPICE, a badge you can press. It says in five paragraphs what the engine does and does not do, on the canvas and in a SPICE deck, which is the same thing What Mokxi simulates says at length.
  • The engine badge, which reads engine: loading until the wasm engine is up, and then says which engine is running.
  • The readout, which is two numbers: simulated seconds, and speed against real time. 1.00x means the circuit is keeping up with the clock on the wall.
  • The theme toggle, Docs, and your account.

On a phone the header keeps the wordmark, Save, Run and a menu button; the rest of that row is inside the menu.

The canvas

The left pane. The breadboard, the parts and the wires live here, on a dotted ground. In its top-left corner is a small toolbar: Run, Undo, Redo, + to add a part, and a more menu holding zoom, fit, rotate, delete, select all, the layers panel and the grid switch. Every item in that menu names its keyboard shortcut, and keyboard shortcuts lists them all.

Select a part or a wire and its properties open beside it: resistance, LED color, wire color, a wire label, rotate and delete. See the properties panel.

The code pane

The right pane. It is one project per board: a file strip with tabs, a board picker when the diagram has more than one board, and the editor itself. A diagram with no board at all still has a sketch, so you can write code before you decide what runs it. Building happens in the tab, and the Build tab shows the steps and any diagnostics. See the code editor and compiling.

The serial monitor

The strip along the bottom. Anything a board writes to its UART appears there, and the input line sends bytes back to it. When two boards are talking, each line is prefixed with the board it came from. The log keeps the last two thousand lines.

Moving the walls

The bar between the canvas and the code pane, and the bar above the serial monitor, are both draggable. Where you leave them is remembered in this browser, so the next visit opens the same shape. Out of the box the canvas takes 58 per cent of the width and the serial monitor is 180 pixels tall.

The help button

Bottom right, on every page and in the editor: a speech bubble that opens search over these articles and every question the site answers, and a message form that reaches us if the answer is not here.