M5Stack boards in the browser: Cardputer ADV and Core, no rewrites needed

M5Stack boards come with everything you need already soldered on: a screen, buttons, a speaker, a battery. That’s great for prototyping, but it makes simulation a hard problem — there’s no breadboard to blame when something doesn’t work. The simulator has to get every detail right, or the whole exercise is pointless.

So the challenge we set was simple: can M5Stack’s own example sketches run in the browser without changing a single line? Turns out, yes. Here’s what that took and what you can actually do with it.

Wiring and supported boards

The simulator includes two M5Stack boards, each with its own pinout and peripherals:

• M5 Cardputer ADV — ESP32-S3, 1.14″ 240×135 LCD, 56-key keyboard, BMI270 IMU, ES8311 codec (mic + speaker), IR emitter, microSD slot, and battery. In the simulator, the screen renders on the board, the keyboard accepts clicks or your physical keyboard, the speaker plays through your computer, and the mic streams from your computer’s mic when you enable the Mic toggle. The Sensors button tilts the IMU and sets battery level. The IR emitter flashes a dot on the board. The microSD is a real FAT image with an upload panel. Wi-Fi and MicroPython work; BLE does not.
• M5Stack Core (Basic v2.7) — classic 54×54 mm stackable ESP32, 2″ 320×240 LCD, three front buttons (active-low), speaker, TF slot, Grove port. The M-Bus pins are printed on all four edges and are wireable, so you can connect external parts just like a DevKit.

Both boards use the same Arduino C++ and MicroPython environments as the physical hardware. Hovering over a board in the component picker shows a datasheet with pinout and links to M5Stack’s shop.

The sketch

Here’s the official M5Stack display test for the Cardputer ADV, exactly as it runs in the simulator. No modifications needed.

// M5Cardputer ADV display test — runs unmodified in the simulator
#include <M5Cardputer.h>

void setup() {
  auto cfg = M5.config();
  M5Cardputer.begin(cfg);
  M5Cardputer.Display.setRotation(1);
  M5Cardputer.Display.fillScreen(TFT_BLACK);
}

void loop() {
  // Draw random colored rectangles and text forever
  M5Cardputer.Display.fillRect(random(240), random(135), random(100), random(50),
                               random(0xFFFF));
  M5Cardputer.Display.setCursor(random(240), random(135));
  M5Cardputer.Display.setTextColor(random(0xFFFF), TFT_BLACK);
  M5Cardputer.Display.print("Sensbench");
  delay(100);
}

How it works

The simulator compiles your sketch against the same arduino-esp32 core and M5Cardputer library you’d use in the Arduino IDE. When the board boots, it queries the hardware — panel ID, GPIO signature, keyboard scan, I2C codec — and the simulator answers exactly like the real hardware. That’s why M5Stack’s libraries work without edits: they’re talking to a faithful hardware model.

For the Cardputer ADV, the simulator emulates the LCD at full 240×135 resolution, the keyboard (both clicking on-screen and typing on your physical keyboard), the speaker via your computer’s audio, the microphone (when enabled), the IMU (via the Sensors button), the IR emitter (flashes a dot), and the microSD (real FAT image). The Core board emulates the 320×240 LCD, the three active-low buttons, the speaker, and the TF slot.

The Chain RGB and Mono Matrix modules are also in the catalog, driven as plain WS2812 matrices on their DIN pin. The official UART-based Chain protocol isn’t emulated yet — that’s on the roadmap.

Honest notes: what the simulator won’t tell you

Let’s be clear about the gaps. BLE is not emulated on either board. The Chain modules only work as direct WS2812 matrices — if you rely on the UART protocol, you’ll need real hardware. The microphone and speaker depend on your computer’s audio devices; if those aren’t working, the simulation won’t either. And while the IMU tilt works, it’s a simple button toggle, not a physics simulation — you can’t spin the board in 3D.

Also, cold builds take a few minutes because they compile the full core and libraries. Warm builds are faster, but don’t expect instant. And the simulator won’t catch timing issues that only show up on real silicon — like interrupt latency or power consumption.

When it doesn’t work

• Symptom: No display output → Cause: Check that the sketch calls M5Cardputer.begin() or M5.begin(). The simulator needs that to initialize the LCD.
• Symptom: Keyboard input not registering → Cause: Make sure the board has focus (click on it) and that you’re using the correct key event API.
• Symptom: Speaker silent → Cause: Your browser may be blocking audio. Check the audio icon in the tab and your system volume.
• Symptom: Mic not picking up → Cause: Enable the Mic toggle in the canvas header and grant browser permission for the mic.
• Symptom: Build fails → Cause: Check for missing libraries or outdated API calls. The simulator uses the same compiler as Arduino IDE, so errors should match.

Next steps

Try the official examples in the gallery — there are 15 for the Cardputer ADV, 9 for the Core, and 5 for the Chain matrices. Modify them, or start from scratch. The simulator is free, and you can open projects directly from the component picker.

Open the simulator and see what your M5Stack code does before you buy the hardware.