CloudPebble Web IDE

CloudPebble Saved

JSwatchface.js

Tab indent Ctrl / comment EscTab leave

Ln 1, Col 1 0 lines Spaces: 2 JavaScript Not built yet

Emulator

Idle Time 2 · 200x228

ReadyPress Run

↑↓ up, down →Enter select ←Esc back

Like it? Wear it on a real Pebble

Quick reference

The face API

This browser IDE runs a small JavaScript face API so you can sketch ideas fast. For the full PebbleOS SDK, open the official CloudPebble.

Lifecycle

draw(ctx, w, h, time)

Required. Paints one frame. ctx is a 2D canvas sized to the screen, time is a Date.

update(time)

Optional. Runs right before every draw. Keep your state math here so draw only paints.

onButton(name)

Optional. Gets "up", "select", "down", or "back". The screen redraws right after.

const fps = 30

Optional. Redraws per second, 1 to 30. Leave it out and the face ticks once a second, the way e-paper likes it.

Watch globals

ROUND

True on Round 2 (260x260, clipped to a circle). False on Time 2 (200x228).

FONTS.display / mono / body

Font stacks for ctx.font: Unbounded, JetBrains Mono, and Manrope.

vibrate("short" | "long" | "double")

Buzzes the motor. The emulator shakes the watch so you can feel it with your eyes.

backlight()

Lights the screen for three seconds.

console.log(...)

Prints to the console with the line it came from. Release builds strip it.

PLATFORM

"time2" or "round2", when you need more than ROUND.

Rules of the wrist

64 colors: every channel is 00, 55, AA, or FF. Other colors snap to the nearest one.
No fetch, XMLHttpRequest, import, eval, document, or window. The build rejects them.
Use w and h instead of hardcoded sizes, so one face fits both watches.
A frame that takes longer than 1.5 s trips the watchdog and stops your code.

Full developer docs Official CloudPebble

How it works

Write it. Run it. Wear it.

A sketchpad for watchfaces with no install, no account, and nothing to configure. Open the page and your first face is already ticking.

Write

A proper code editor: syntax colors, brackets that close themselves, auto-indent, comment toggling, bracket matching, and autosave to this browser.

Build

The build service checks your face the way the watch would: a missing draw(), unbalanced braces, APIs the wrist does not have. Errors land on the exact line, warnings glow amber.

Run

The emulator runs your code at native resolution, 200x228 for Pebble Time 2 and 260x260 for Round 2, snapped to 64 e-paper colors. Press a side button and it answers.

Locked sandboxCode runs in an isolated frame with no access to this page, your cookies, or the network helpers.
WatchdogA loop that never ends gets stopped after 1.5 seconds, and the console tells you where it was stuck.
AutosaveEvery keystroke is kept in this browser. Close the tab, come back tomorrow, keep going.
Share linksThe code rides inside the link itself, so a friend gets their own copy with one click.

Starters

Seven faces, ready to fork.

Each one is written against the same four hooks, so reading them is the fastest way to learn the API. Open one, break it, make it yours.

The whole API

It fits on a postcard.

Four hooks, two helpers, one canvas. If you have ever drawn a rectangle in a browser, you already know most of it.

draw paints the screen, every second or up to 30 times a second.
update keeps your math apart from your pixels.
onButton hears the four physical buttons.
vibrate and backlight talk to the hardware.

Open the editor Read the docs

const fps = 1;                  // 1 to 30 redraws per second

function update(time) {         // state math, before each frame
}

function draw(ctx, w, h, time) {   // 200x228 or 260x260
  ctx.fillStyle = ROUND ? "#ff5500" : "#000000";
  ctx.fillRect(0, 0, w, h);
}

function onButton(name) {       // "up" "select" "down" "back"
  if (name === "select") vibrate("short");
  if (name === "up") backlight();
}

Go further Official CloudPebble Ready for the full PebbleOS SDK? Take your idea to the official CloudPebble at cloudpebble.repebble.com. Open CloudPebble Learn Developer docs Guides and references for watchfaces, apps, and the 100% open-source PebbleOS underneath them. Read the docs Show off The forum Post a share link, trade tricks for tiny screens, and see what everyone else is building. Visit the forum

Hardware

Your code deserves a wrist.

Everything you run here was sized for these two screens. Physical buttons, always-on e-paper, and batteries measured in weeks.

Shipping now

Pebble Time 2

1.5" 64-color e-paper touchscreen at 200x228, up to 30 days per charge, heart rate, and four physical buttons.

$225

Details

Shipping now

Pebble Round 2

Color e-paper across the whole face at 260x260, 8.1 mm thin, about two weeks per charge, buttons plus touch.

$199