⌚ Kovo

Write Xiaomi Vela smartwatch apps with React-style TSX, Hooks & modern tooling.

Kovo is a compile-time engine that transforms standard React functional components (useState, useRef, custom hooks) into native Xiaomi Vela QuickApp .ux files — with zero runtime overhead.

⚡ Quick Start

Scaffold a new project instantly:

npx create-kovo-ux

      ⌚  create-kovo-ux v0.1.0

  ◆  What is your project name?
  │  my-watch-app
  │
  ◆  Which template would you like to use?
  │  ● Basic — Single page, counter, minimal setup
  │  ○ Multi-Page — Dashboard with navigation, components & settings
  │  ○ Fetch — Multi-page + HTTP networking (GET, POST, PUT, DELETE)
  │
  ◆  Install dependencies?
  │  Yes
  │
  ■  Done! Your Kovo project is ready. ⌚

Then launch the live smartwatch emulator:

cd my-watch-app
bun run dev:emulator

✨ Features

• ⚛️ React-style TSX — Write functional components with useState, useRef, and custom hooks
• 🔄 Zero-runtime overhead — All hooks are inlined at compile time into native QuickApp VM objects
• 🎨 OLED-optimized design — 466x466 dark mode UI with vibrant neon accents out of the box
• 📡 Network integration — @system.fetch support with GET/POST/PUT/DELETE
• 🧪 168+ automated tests — Comprehensive compiler test suite
• ⌚ Zero-config emulator — Auto-detects, patches, and launches Vela Virtual Devices
• 📱 QR deploy to real watches — Push apps to physical Xiaomi smartwatches via Bluetooth

📦 Templates

| Template | Description | | :--- | :--- | | Basic | Single page counter with useState and haptic feedback | | Multi-Page | Dashboard, settings, demo pages, StatCard component, router navigation | | Fetch | Everything in Multi-Page + HTTP networking page (GET, POST, PUT, DELETE) |

🛠️ Commands

bun run dev:emulator     # Launch live hot-reloading emulator
bun run build            # Transpile TSX → .ux files
bun run aiot:build       # Build signed .rpk binary
bun test                 # Run 168+ compiler tests

📖 Write Your First Page

import { useState } from 'kovo-ux';
import vibrator from '@system.vibrator';

export const style = `
  .page {
    width: 466px; height: 466px;
    background-color: #06080c;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .title { font-size: 22px; color: #38bdf8; font-weight: bold; }
  .btn { width: 200px; height: 48px; border-radius: 24px;
    background-color: #052e16; border-color: #16a34a;
    color: #4ade80; font-size: 15px; font-weight: bold; }
`;

export default function MyPage() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
    vibrator.vibrate({ mode: 'short' });
  }

  return (
    <div className="page">
      <text className="title">Count: {count}</text>
      <input className="btn" type="button" value="⚡ +1" onClick={increment} />
    </div>
  );
}

This compiles to a native .ux file with data: { count: 0 } and top-level methods — zero runtime overhead!

📚 Documentation

See the full documentation in docs/:

• Getting Started
• Compiler Architecture
• JSX & Templates
• State & Hooks
• Styling & Design
• System APIs & Networking
• Testing & CLI Tools
• API Reference & Cheatsheet

⌚ Supported Devices

| Device | Network | QuickApp | | :--- | :--- | :--- | | Xiaomi Watch S4 / S5 | ✅ | ✅ | | REDMI Watch 5 / 6 | ✅ | ✅ | | Xiaomi Watch S3 | ✅ | ✅ | | Xiaomi S1 Pro | ✅ | ✅ | | Redmi Watch 4 | ❌ | ✅ | | Xiaomi Band 8-10 | ❌ | ⚠️ |

📄 License

MIT