⌚ Tela IDE

Desktop development environment for Tela OS — a declarative UI framework for ESP32 smartwatches.

Write apps in HTML + Lua, preview them instantly in the built-in emulator, then push to your watch over USB.

Features

• Live emulator — pixel-accurate watch screen (410×502) with full Lua VM (WebAssembly)
• Code editor — Monaco (VS Code engine) with syntax highlighting and validation
• Serial connection — push/pull apps to ESP32 over USB
• CSS engine — tag selectors, class selectors, compound selectors, specificity cascade
• Full Lua API — state, navigate(), focus(), setAttr(), getAttr(), canvas.*, json.*, fetch(), os.date()
• Typed state — bool, int, float, string with correct Lua semantics

Quick Start

git clone https://github.com/OpenTela/TelaIDE.git
cd TelaIDE
npm install
npm start

Note: Serial port features require a native rebuild:

npx electron-rebuild

Usage

Emulator only (no device needed)

1. Launch the app
2. Click any app in the launcher, or create a new one
3. Edit code → Run to preview instantly

With ESP32 watch

1. Connect watch via USB
2. Click 🔌 Connect → select COM port
3. Apps sync automatically — Pull from watch, Push to watch

App Format

Tela apps are single HTML files with a declarative structure:

<app>
  <ui default="/main">
    <page id="main">
      <label align="center" y="20%" font="48" color="#fff">{time}</label>
      <button x="10%" y="70%" w="80%" h="40" bgcolor="#06f" onclick="doSomething">
        Click me
      </button>
    </page>
  </ui>

  <state>
    <string name="time" default="00:00"/>
  </state>

  <script language="lua">
    function doSomething()
      state.time = os.date("%H:%M")
    end
  </script>

  <style>
    button { border-radius: 8; }
  </style>
</app>

See the full spec: UI HTML Specification

Project Structure

TelaIDE/
├── src/
│   ├── index.html      # IDE interface (launcher, editor, toolbar)
│   ├── main.js         # Electron main process
│   ├── preload.js      # IPC bridge (serial, filesystem)
│   ├── runtime.html    # Watch emulator screen
│   ├── runtime.js      # Emulator engine (parser, CSS, widgets, Lua bridge)
│   ├── wasmoon.js      # Lua VM — WebAssembly build of Lua 5.4
│   └── glue.wasm       # Lua VM binary
├── package.json
├── start.bat           # Windows shortcut
└── .gitignore

Runtime

The emulator runtime (runtime.html + runtime.js + wasmoon.js + glue.wasm) can be used standalone — in any WebView, browser, or mobile app. No Electron required.

Tech Stack

• Electron — desktop shell
• Monaco Editor — code editing
• Wasmoon — Lua 5.4 via WebAssembly
• SerialPort — USB communication with ESP32

License

MIT