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. Smallest possible Keel app — one _layout.tsx, one index.tsx.none
202-chat-im/Two-tab chat shell; list pushes to a dynamic [room].tsx route via useLocalSearchParams().@keel-ai/router tabs
303-ecommerce/3-tab e-commerce (商品 / 购物车 / 我的) with nested stacks under the products tab. Hardcoded catalog in data.ts.@keel-ai/router tabs + stack
404-wechat-pay-flow/Tap-to-pay flow. Calls pay() from keel-module-wechat; declares native module in keel.json.keel-module-wechat
505-amap-nearby/Loads user location, queries 高德地图 for nearby POIs, list view + detail with 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.md 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 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 stub params in app/index.tsx with real values.

05 — AMap Nearby

Requires a 高德 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 examples use changes, update the relevant example(s) in the same PR or CI fails the gallery job.

Further reading