Hue JavaScript Example

This example uses the Hue API v.1 and the JS fetch command to make HTTP calls to a Hue bridge.

NOTE: To make this page work, the computer on which you're viewing the page needs to be on the same local network as the Hue bridge that you wish to access.

See the HTML source code here

Here is a more minimal HTML/JSS page for controlling a bridge.

Step 1: Your Bridge's address


Step 2: Your Bridge Username

If You Do Not Have A Username For The Bridge

When you first connect your app to a hue bridge, the bridge issues you an app username. It's a long string of text that you'll use for subsequent requests. To create a new user on a bridge, you need to give the hue a devicetype. The devicetype doesn't matter much for programming, so if you don't know what to put, use your name, as it's easier to keep track that way.
  1. To make a new username, enter devicetype:
  2. then press the button on the bridge...
  3. then within 30 seconds, press this button:
  4. If you succeed, the results will appear below, and also in the username field.

If You Have A Username For The Bridge

The following functions require the bridge IP address and a valid app username.

To get the whole system status as a long JSON object, click this button:

To change an individual light:




Messages from the bridge will appear here