# Homey components not showing in pairing HTML page

**URL:** <https://community.homey.app/t/homey-components-not-showing-in-pairing-html-page/141945>\
**Category:** Questions & Help\
**Created:** [August 20, 2025, 9:10am UTC](https://community.homey.app/t/homey-components-not-showing-in-pairing-html-page/141945 "2025-08-20T09:10:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ji\_aji](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ji_aji/32/121525_2.png) [@ji\_aji](https://community.homey.app/u/ji_aji)\
**Post date:** [August 20, 2025, 9:10am UTC](https://community.homey.app/t/homey-components-not-showing-in-pairing-html-page/141945/1 "2025-08-20T09:10:44Z")

</div>

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`:

```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`:

```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`:

```plaintext
📁 .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](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/9/c/9c03345c5fe3125ff92b16c3b5859fc17cf179c4.png)  
Thanks in advance — looking forward to learning from you all!

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [August 20, 2025, 9:14am UTC](https://community.homey.app/t/homey-components-not-showing-in-pairing-html-page/141945/2 "2025-08-20T09:14:13Z")

</div>

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](https://apps.developer.homey.app/advanced/custom-views/html-and-css-styling) (please don’t say “ChatGPT” 🙏🏻)

---

<div class="post-metadata">

**Author:** ![ji\_aji](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ji_aji/32/121525_2.png) [@ji\_aji](https://community.homey.app/u/ji_aji)\
**Post date:** [August 20, 2025, 9:26am UTC](https://community.homey.app/t/homey-components-not-showing-in-pairing-html-page/141945/3 "2025-08-20T09:26:51Z")

</div>

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 .
