Open the editorEditor
The editor

Embedding a circuit on another site

Put a saved project, running, inside a blog post, a class site or a README, with the code from the share sheet's Embed row.

Open the editorAll the docs

Mokxi teamThe editor

Get the code

  1. Sign in and save the project. An embed points at a project on your account, so a project kept only in this browser cannot be embedded.
  2. Press Share, then Embed at the foot of the sheet.
  3. Set the size and the options. The preview under them is the embed itself.
  4. Pick HTML, Markdown or Link, press Copy code, and paste it into your page.

An embed needs a project that anyone with the link can open. On a private project of your own, the Embed row says what it will do first: Opens it to anyone with the link, then copies the code on a plan with link-only sharing, or Makes it public, then copies the code on Free. Signed out, the row says With a free account and asks you to sign in. A student in a class cannot embed: class projects stay private.

The options

Option Choices
Width Column width (the default), 480, 600 or 800 px wide
Height (px) 200 to 1200; 400 by default
Theme Reader's system, Light or Dark
Opens on The circuit, The code, or Both, side by side
Code opens on The main file or another tab, for a project with several files
Start running when it comes into view On by default
Hide the code Off by default; on, the Code tab is gone altogether
Show "Remix in Mokxi" On by default

The three formats:

  • HTML is an <iframe> for WordPress, Ghost, Notion, Medium's embed field and any web page.
  • Markdown is for a GitHub README, which shows no frames: a picture of the project that links to its page, where it runs.
  • Link is the embed's plain address, for anything that embeds by link.

The HTML looks like this:

<iframe src="https://mokxi.com/embed/abc123" width="100%" height="400"
  style="border:0;max-width:100%;border-radius:8px" loading="lazy"
  title="Traffic light, running in Mokxi"></iframe>

The options are written into the address, so you can also change them by hand: theme=dark, view=code or view=split, autorun=0, height=480, hideCode=1, start=notes.h and edit=0. Anything the embed does not understand falls back to the default, so a pasted embed keeps working.

What your readers see

  • The circuit, with a Run button that becomes Stop while it runs.
  • Circuit and Code tabs, or both side by side, unless you hid the code.
  • Remix in Mokxi, which opens a copy of their own in the editor.

The circuit runs your own sketch. When you open the Embed builder, Mokxi builds and stores the program for each board, and the line under the preview says Ready: the embed runs your own code. A board that could not be built shows Open in Mokxi to run in the embed instead of running anything else. Press Run in the editor to check the sketch, then open Embed again.

The embed shows the circuit running. To press its buttons, read the serial output or change the code, a reader opens it in Mokxi.

With Start running when it comes into view on, the circuit starts once the frame scrolls onto the screen, and the simulator is only downloaded then. A page with several embeds stays quick. A reader whose system asks for reduced motion gets the Run button instead.

Plans and the badge

Embedding is on every plan. On Free, the embed carries one quiet line under the circuit, Made with Mokxi · Build your own. Pro, the student price and Classroom embed with no line, and so does the Pro trial. A class student's or a child's work never shows the line or Remix in Mokxi.

The built-in projects can be embedded too, at /embed/example/<name>, for example https://mokxi.com/embed/example/traffic-light. A built-in project's embed carries the same line on every site but Mokxi's own.

A public project's own page has the embed code ready to copy, under its parts list: Put this circuit in your own page.

If it does not work

  • "This project is private or no longer exists." The project was made private, or deleted. Set its access level back to Link or Gallery in the share sheet, and the same code works again.
  • "Open in Mokxi to run" on a board. Its code was edited and has no stored build. Open the project, press Run, then open Share and Embed again.
  • The frame is blank in a README. GitHub does not show frames: use the Markdown format.
  • Changes do not show. The embed shows the project as it is saved now. Save, then reload the page with the embed.