Machine-translated draft — terminology + flow still being reviewed.

Keel Examples

Five runnable templates that demonstrate end-to-end Keel usage. Each folder under keel/apps/examples/ is a minimal self-contained project — keel.json + package.json + an app/ directory using @keel-ai/router’s file-based routing.

#ExampleSummaryModules
101-todo-list/Single-screen todo list with in-memory state. The smallest possible Keel app — one _layout.tsx, one index.tsx.none
202-chat-im/Two-tab chat shell; the list pushes to a dynamic [room].tsx route via useLocalSearchParams().@keel-ai/router tabs
303-ecommerce/3-tab e-commerce (Products / Cart / Me) with nested stacks under the products tab. Hard-coded catalog in data.ts.@keel-ai/router tabs + stack
404-wechat-pay-flow/Tap-to-pay flow. Calls pay() from keel-module-wechat; declares the native module in keel.json.keel-module-wechat
505-amap-nearby/Loads user location, queries AMap for nearby POIs, list view + detail via reverseGeocode().keel-module-amap

Running

cd keel/apps/examples/01-todo-list   # or any other
keel install
keel start

Then scan the QR from Keel Go on your phone. See keel-go for tester app setup.

Per-example setup notes

04 — WeChat Pay

Requires real WeChat OpenID credentials:

  1. Register at https://open.weixin.qq.com → create a mobile app
  2. Obtain AppID (e.g. wx1234567890abcdef)
  3. Set WECHAT_APPID in keel.json’s moduleConfig (see the keel-module-wechat reference)
  4. Server-side: implement WeChat unified-order (https://pay.weixin.qq.com/wiki/doc/api/) and return prepay_id to the client. Replace the stub params in app/index.tsx with real values.

05 — AMap Nearby

Requires an AMap API key:

  1. Register at https://lbs.amap.com/dev/ → create an app
  2. Add a Key with platform = iOS and Android
  3. Set in keel.json:
    {
      "modules": ["keel-module-amap"],
      "moduleConfig": {
        "keel-module-amap": { "apiKey": "YOUR_AMAP_KEY" }
      }
    }
  4. iOS: ensure NSLocationWhenInUseUsageDescription is set. Android: location permissions auto-merge from the module manifest.

CI

The gallery is auto-tested: each example must succeed at

keel build --platform=ios+android

If an API surface that examples use changes, update the relevant example(s) in the same PR or CI fails the gallery job.

Further reading

  • tutorial — SDK install, tester-app setup, first build
  • architecture — how the 5 layers fit together
  • modules — spec for the 5 first-class native modules