Exporting PNG and SVG

A picture of the circuit, at what size, and which plans it is on.

Anybody can export, even signed out (see "Which plans" below for the one thing that actually changes: a small badge in the corner).

Where it is

Open Share in the editor's header. At the foot of the sheet, under the Copy link button, are three quiet lines: Export PNG, Export SVG and Embed.

What comes out

Every part in Mokxi is drawn as SVG already, by our own code, with no bitmaps anywhere. So an export is not a screenshot of the canvas: it is the same drawing, saved as a file that stands on its own.

Before it is written, the editor's own furniture comes off a copy of the drawing: the invisible rectangles a finger needs to hit a part, the selection outlines, the drag grips, the ring that follows the pointer over a pin, the padlock badges over locked parts, and the Double-click to type invitation on an empty sticky note. None of those were drawn on purpose and none of them belong in a picture.

Then every color and stroke the drawing depends on is written into the file itself, so the SVG opens correctly with no stylesheet attached, anywhere.

With no background

Every export sits on a light sheet by default, so it looks the same in a viewer, on a printer and in a dark-mode app. Tick No background, above the export buttons, and the sheet and the grid dots come off instead: the PNG is transparent everywhere the circuit is not, ready to drop onto a slide or a worksheet of another color, and the SVG has no background rectangle. The parts, the wires and the badge rule are the same either way.

The size

The view box is tight to the circuit plus 24 units of air on every side. So the file is the size of what you built, not the size of the window you built it in, and moving the canvas about before exporting changes nothing.

The PNG is that same drawing rasterized at twice the size, which at normal zoom gives a picture that still reads when it is dropped into a document or a slide.

The file is named after the project.

Which plans

Export carries no plan gate. A signed-out reader and a Free account both press the same button and get the same file; what changes is a small "made with mokxi.com" badge drawn in the bottom-right corner, on PNG and SVG alike. Pro, Teacher, Classroom and the student price pay that badge away and export a clean file instead, and so does a student in a class on Teacher or Classroom, for as long as they are in it. It is the same rule embedding already followed (see below): the badge is what a paid plan buys, not the feature itself.

A student in a class whose teacher pays for Classroom, or is inside the Classroom trial, exports clean too while they are in that class, and so does a teacher during their trial: Classroom is everything in Pro, for every seat.

Embedding works the same way, and needed no change here: anybody with a saved, public project can take the <iframe>; what a paid plan buys there is the badge coming off too. See sharing a project.

If the buttons are dim

The export buttons need a drawing to export. They are disabled until the canvas has one, which in practice means a project with at least one part in it.