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, all 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, or src/App.jsx in a JavaScript project) is pinned because 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 (this takes a click from you; 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 what it found and offers the fix.
  3. Live hot reload: once linked, every edit compiles to MQuickJS bytecode and pushes over USB. One burst of typing triggers 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. Installing turns off live development on the board. This is intentional: an installed app is the 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 go to any server.

One board for the whole site: the serial connection is shared across pages, 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 and 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, so one tab can't silently overwrite the other's work (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 become 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.

Documentation examples pause when they scroll out of view or the browser tab is hidden. The last canvas frame stays visible, and returning resumes the same application state. Offscreen widgets stop animation, simulator timers and hardware polling, and release their compiler workers. Examples you have not viewed yet wait to initialize.