pebble
  • Tutorials
  • Get the SDK
  • Guides
  • Documentation
  • Examples
  • Community
  • Blog
  • More
Privacy
Cookies
Publish

Guides

  • Table of Contents
  • Alloy
    • Getting Started with Alloy
    • Piu UI Framework
    • Poco Graphics
    • Sensors and Input
    • Storage
    • Networking
    • App Messages
    • Watchfaces
    • Animations
    • Port (Custom Drawing)
    • Advanced Networking
    • Native Functions (FFI)
    • Dictation
    • Wakeups
    • Vibration
    • Device Info and App Events
  • App Resources
  • Best Practices
  • Communication
  • Debugging
  • Design and Interaction
  • Events and Services
  • Graphics and Animations
  • Pebble Packages
  • Pebble Timeline
  • Tools and Resources
  • User Interfaces

Alloy

Alloy is a JavaScript framework for building Pebble apps, based on the Moddable SDK. Alloy provides developers a mix of standard Web APIs, standard Embedded JavaScript APIs from ECMA-419, and dedicated Pebble OS APIs. It allows you to write apps using modern JavaScript (ES2025, ES6++) with powerful UI frameworks and access to Pebble hardware features.

Platform Support: Alloy currently supports Emery (Pebble Time 2) and Gabbro (Pebble Round 2).

Key Features

  • Modern JavaScript: Write apps using ES modules, classes, async/await, and other modern JavaScript features
  • Two UI Frameworks: Choose between Piu (declarative, component-based) or Poco (procedural, low-level graphics)
  • Hardware Access: Full access to accelerometer, battery, buttons, compass, and other Pebble sensors
  • Network Communication: Built-in support for HTTP requests, WebSockets, and watch-phone messaging
  • Persistent Storage: Simple APIs for storing data locally using localStorage, key-value storage, or files

Getting Started

To create a new Alloy project:

$ pebble new-project --alloy my-app

This creates a new project with the standard Alloy structure:

my-app/
  src/
    embeddedjs/
      main.js           # Watch code (runs on Pebble)
    pkjs/
      index.js          # Phone code (for networking, location)
    c/
      mdbl.c            # C code as entry point for embeddedjs (usually no need to modify)
  resources/            # App resources (images, fonts)
  package.json          # App manifest

Alloy apps have two JavaScript environments: embeddedjs runs on the watch, while pkjs runs on the connected phone for network and location services.

Hello World

The simplest Alloy app:

console.log("Hello, Pebble!");

Guides

  • Advanced Networking - Low-level HTTP and WebSocket clients for advanced networking needs.

  • Animations - Create smooth animations using Timeline and easing functions.

  • App Messages - Send and receive messages between the watch and the phone.

  • Device Info and App Events - Query watch and screen properties, respond to app lifecycle events, and control the backlight in Alloy apps.

  • Dictation - Capture speech as text in Alloy apps using the dictation API.

  • Getting Started with Alloy - Learn how to create your first Alloy app for Pebble.

  • Native Functions (FFI) - Call native C functions directly from JavaScript in your Alloy app using the Foreign Function Interface.

  • Networking - Make HTTP requests and use WebSockets via the phone proxy.

  • Piu UI Framework - Build declarative user interfaces with the Piu framework.

  • Poco Graphics - Low-level graphics rendering with the Poco framework.

  • Port (Custom Drawing) - Combine Piu's declarative UI with custom drawing using Port.

  • Sensors and Input - Access Pebble sensors and handle button input in Alloy apps.

  • Storage - Persist data between app launches using localStorage, key-value storage, or files.

  • Vibration - Provide haptic feedback in Alloy apps using the vibration motor.

  • Wakeups - Schedule your Alloy app to launch at a future time using wakeups.

  • Watchfaces - Build custom watchfaces with Alloy.

Example Apps

The Moddable Pebble Examples repository contains a collection of examples covering all aspects of Alloy development. Here's a categorized overview:

Fundamentals

Example Description
hellopebble "Hello, world" - the simplest starting point
hellotimer Using setTimeout
hellomodule Loading multiple modules
hellotypescript TypeScript with the Pebble Button class

Storage

Example Description
hellokeyvalue ECMA-419 Key-Value Storage for persistent data
hellolocalstorage Web standard localStorage for persisting strings
hellofiles File system storage

Sensors & Input

Example Description
helloaccelerometer Subscribing to accelerometer readings
hellobattery Battery and charging status
hellolocation GPS location via phone
hellobutton Pebble button events
hellopoco-drag Touch events with the ECMA-419 touch driver

Piu UI Framework

Example Description
hellopiu-text Dynamic text layout with different fonts
hellopiu-pebbletext Text using Pebble built-in fonts
hellopiu-balls Classic bouncing balls demo
hellopiu-coloredsquares Drawing colored squares
hellopiu-gbitmap Pebble GBitmap PNG images as Piu textures
hellopiu-jsicon Moddable SDK bitmaps as Piu textures
hellopiu-port Animated graph using Piu Port
hellopiu-timeline Easing equations with Timeline animation

Piu Watchfaces

Example Description
cupertino Classic macOS watch cursor as a watchface
london Big Ben (color watches only)
helsinki Minimal design with per-model assets
redmond Classic Windows clock
zurich Iconic Swiss railway clock

Poco Renderer

Example Description
hellopoco-text Text rendering with Moddable SDK fonts
hellopoco-pebbletext Text rendering with Pebble built-in fonts
hellopoco-gbitmap Rendering GBitmap resources
hellopoco-pebblegraphics Lines, round rectangles, and circles
hellopoco-qrcode Dynamic QR code generation
hellopoco-pdc Rendering PDC (SVG) images
hellopoco-pdc-rotate Spinning a PDC image
hellopoco-pdc-scale Animated PDC scaling with easing
hellopoco-pdc-sequence PDC image sequence animation
hellowatchface Simple watchface app

Communication

Example Description
hellomessage Watch-phone messaging via app_message
helloconnected Phone connection status notifications
hellofetch HTTP requests using the fetch() API
hellohttpclient HTTP requests using ECMA-419 HTTP Client
hellowebsocket WebSocket using the Web standard API
hellowebsocketclient WebSocket using ECMA-419 WebSocket Client

Sensor Visualizations (Piu)

Example Description
compass Compass visualization (Emery only)
gravity Accelerometer visualization (Emery only)
tic-tac-toe Touch game using Piu Behavior touch events

Device, Events & Feedback

Example Description
helloinfo Watch, screen, and device information
helloappevents App focus and display resize events
hellowakeup Scheduling the app to launch later with wakeups
hellodictation Capturing speech as text with dictation
hellovibes Haptic feedback with the vibration motor
hellolight Controlling the backlight

Native Code

Example Description
helloffi Calling native C functions from JavaScript (FFI)

Additional Resources

  • Moddable SDK Documentation - Comprehensive documentation for Piu, Poco, and other modules