Skip to main content

Kog Studio

Kog Studio is a complete development environment that runs entirely in your browser — write a Kog app, watch it live in the simulator, and put it on a real board, without installing a single tool.

Open Kog Studio →

Projects and files​

Studio is project-based, like a real IDE:

  • Create projects from templates — the counter, tic-tac-toe, the widget gallery, and more — or start blank. Keep as many projects as you like and switch between them from the Explorer.
  • Multiple files per project. Add .tsx/.ts (or .jsx/.js) files and import between them with relative imports (import { helper } from './helpers'). The entry file (src/App.tsx) is pinned — it's what boots on the device.
  • Auto-save, always. There is no Save button: edits persist to your browser as you type. ⌘S forces an immediate save and an immediate reload if you don't want to wait for the idle debounce.
  • Export / import. Any project can be downloaded as a .kogproj.json file and imported on another machine (or kept as a backup).

The simulator​

Every edit compiles in your browser (the same compiler the CLI uses) and hot-reloads the on-page simulator moments after you stop typing. Compile errors show in the Problems panel without disturbing the running app; runtime errors show as a redbox with the stack. Pick your board's display (CYD 320×240 or the round 412×412) in the preview header.

Run on your board​

Chrome or Edge

Device features use the Web Serial API, so they need Chrome or Edge on desktop. Everything else — projects, editing, the simulator — works in any modern browser.

The Device panel owns the whole board lifecycle:

  1. Connect — pick the serial port (a click you make; pages can never open ports on their own).
  2. Install firmware — first-time flash for a blank board, with every image part verified against its SHA-256 before writing. If Studio detects a board that can't link — no Kog firmware, a retired engine, or a firmware/page version skew — it tells you exactly that and offers the fix.
  3. Live hot reload — once linked, every edit compiles to MQuickJS bytecode and pushes over USB. One burst of typing = one reload: Studio waits for you to stop typing before pushing, so a slow board never queues a storm of reloads. The board's console.log and errors stream back into the Device console.
  4. Install app to device (OTA) — make the current app permanent: it's staged to flash, survives reboots and runs standalone. Note that installing turns off live development on the board (that's the point — it's a production posture). To develop again, use Re-enable dev mode or re-flash.
  5. Wi-Fi setup — send network credentials to the board over USB. They're written straight into the board's flash and never leave your computer.

One board, whole page: the serial connection is shared, so the same board stays linked as you navigate — including when you jump from a docs example into Studio.

Where your work lives​

Projects are stored in this browser (IndexedDB) — per-browser, per-device. Clearing site data removes them, and private windows may not persist at all (Studio warns you when storage isn't available). Use Export for anything you'd miss. Cloud sync is on the roadmap; the storage layer is built for it.

If you open the same project in two tabs, the second tab becomes read-only with a Take over button — no silent last-write-wins corruption.

"Open in Studio"​

Every editable example in these docs has an Open in Studio ↗ button — it forks the example (including your edits) into a new Studio project, so a playground sketch can graduate into a real app without copy-paste.

First steps​

Open Studio and take the built-in tour (the ? in the status bar replays it any time). If you'd rather work locally with the CLI, start with Installation — Studio and the CLI build the exact same bundles.