Homey components not showing in pairing HTML page

Questions & Help
1

Hi everyone,

I’m a total beginner and just started learning Homey app development today.
I’m trying to create the simplest pairing page, but the Homey components like <homey-text> and <homey-number> for IP and Port just don’t show up.

Here is my driver.compose.json:

{
  "id": "wifi-light-v2",
  "name": {
    "en": "WiFi Smart Bulb v2"
  },
  "class": "light",
  "capabilities": [
    "dim",
    "onoff"
  ],
  "platforms": [
    "local"
  ],
  "connectivity": [
    "lan"
  ],
  "pair": [
    {
      "id": "enter-credentials",
      "type": "html",
      "name": {
        "en": "Enter Info"
      },
      "description": {
        "en": "Please enter IP and Port"
      }
    }
  ]
}

And here is my enter-credentials.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Enter WiFi Bulb Info</title>
  <script src="/homey.js" data-origin="pair"></script>
</head>
<body>
  <h1>Enter WiFi Bulb Information</h1>

  <!-- Homey official components -->
  <homey-text id="bulb_ip" label="Bulb IP" placeholder="192.168.1.100"></homey-text>
  <homey-number id="bulb_port" label="Port" value="80"></homey-number>

  <button id="save">Save</button>

  <script>
    Homey.setTitle('Enter WiFi Bulb Information');

    document.getElementById('save').addEventListener('click', async () => {
      const bulb_ip = Homey.getValue('bulb_ip');
      const bulb_port = Homey.getValue('bulb_port');

      if (!bulb_ip) {
        return Homey.alert('Please enter Bulb IP');
      }

      const portNumber = Number(bulb_port);
      if (!Number.isInteger(portNumber) || portNumber < 1 || portNumber > 65535) {
        return Homey.alert('Please enter a valid port (1-65535)');
      }

      try {
        await Homey.emit('save', { bulb_ip, bulb_port });
        Homey.done();
      } catch (err) {
        Homey.alert(err && err.message ? err.message : String(err));
      }
    });
  </script>
</body>
</html>

And here is my directory structure:

📁 .homeycompose  
    📄 app.json  
    📁 capabilities  
    📁 discovery  
    📁 drivers  
        📁 settings  
        📁 templates  
    📁 flow  
        📁 actions  
        📁 conditions  
        📁 triggers  
    📁 locales  
    📁 screensavers  
    📁 signals  
        📁 433  
        📁 868  
        📁 ir  
📁 drivers  
    📁 wifi-light-v2  
        📁 assets  
            📁 images  
        📄 device.js  
        📄 driver.compose.json  
        📄 driver.js  
        📁 pair  
            📄 enter-credentials.html

homey
homey1872×1275 271 KB

Thanks in advance — looking forward to learning from you all!

2

Where did you find that <homey-text> and <homey-number> are a thing? I can’t find any reference to those tags on the HTML & CSS Styling page (please don’t say “ChatGPT” :folded_hands:t2:)

1 Like
3

Ah, you’re absolutely right — I just realized those tags aren’t part of the official docs .

To be honest, I was using plain HTML at first, and when the inputs didn’t respond as expected, I turned to GPT for help. It suggested using <homey-text> and <homey-number>, and I went with it without double-checking the documentation. That was totally on me — I rushed ahead instead of taking time to explore the SDK properly.

Thanks a lot for pointing it out. I really appreciate the nudge to slow down and dig into the docs first. Lesson learned .

1 Like