# \[HOW TO\] View your Homey v2 flows in a browser

**URL:** <https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427>\
**Category:** Questions & Help\
**Created:** [January 19, 2019, 8:58pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427 "2019-01-19T20:58:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [January 19, 2019, 8:58pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/1 "2019-01-19T20:58:18Z")

</div>

> _This post is not meant as a discussion but to explain how to view flows in a browser, I will ask a moderator to delete any post that starts a discussion about the missing web UI here.  
> You can obviously ask questions about the workings of **Homey v2 flow viewer** here._

> The used browser in the steps below is Google Chrome.

To view flows in a browser several steps have to be taken, I will describe how to do this in this post. This information is not new but scattered around the forum, thanks to anybody who post about this earlier.

These steps have to be taken to make viewing flows in a browser possible:

1. Download the pages making this possible
2. Find your IP address
3. Find your HomeyID
4. Find your bearer code
5. Insert information in the configuration file
6. Start viewing your flows

**Download the pages making this possible**

Go to the Github page where these files can be found:

> **[GitHub - irritanterik/homey-realtime-logpage: Realtime Homey Logger based on...](https://github.com/irritanterik/homey-realtime-logpage)**
>
> Realtime Homey Logger based on known socket.io namespaces - GitHub - irritanterik/homey-realtime-logpage: Realtime Homey Logger based on known socket.io namespaces

Click **Clone or download** and click on **Download ZIP**

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/a/abfe00a792723a8f28345bc935d2faaaddbe67e0.png)

Open the zip file and save the files to a location of your choice.

In order to make the pages work some information has to be added to the _config.js_ file, next step will be to collect all needed information.

**Find your IP address**

> Open your favorite text editor, for example Notepad, and copy paste the found information from the next steps into it.

Open Chrome and open the developer tools (_ctrl-shift-j_ on Windows, _cmd-option-j_ on Mac)  
Select the **Network** tab, enable **Hide data URLs** and click **All**

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/a/a2b257b8129240b03ea76ba76df2d87832a1b52e.png)

next navigate to [https://developer.athom.com](https://developer.athom.com), make sure you’re logged on, and see the info appear. Now search for a line that shows **me** and click on it.

> Check if the end of the **Request URL** in the right pane shows **sessions/session/me** because there can be several lines with **me**.

Now there are 2 options:

1. You are using a _Local connection_: you are in the same network as your Homey:  

2. You are using a _remote connection_: you are in another network, at a remote location for example:  

> The configuration for a _Remote Connection_ can also be used for a _Local Connection_

**Find your homeyID**

If you got the _Athom Cloud uri_ in the previous step you already have the homeyID, its the part in front of **.connect.athom.com**.  
If you’re using a local connection you have to find the **homeyID** in another **me** line, most likely the line below the one from the previous screenshot. Select that line, check the **Request URL** again for **sessions/session/me** and if it’s there scroll down in the right hand pane and look for **X-Homey-ID** in the **Response Headers**

Copy the value after **X-Homey-ID** to your text editor.

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/b/b54aeaa7a1f78641f7fb74f95670006c3fe62c3a.jpeg)

**Find your bearer code**

The **bearer** can be found in the same **me** line as the **homeyID**. Scroll down in the right hand pane and look for **autorization** in the **Request Headers** part.

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/e/e68869bc9dabf54cb827b8a4950ee3202c3ad9ed.jpeg)

Copy the text after **Bearer** to your text editor, make sure you copy the whole string, it’s 114 characters long!

Now that you have all needed information it’s time to get the pages to work!

**Insert information in the configuration file**

Go to the folder where you unzipped the files from step 1 and open the file _config.js_ in a text editor. Insert the information you collected in the previous steps and add them to the file between the `'` characters.

When using a _Local Connection_:

```auto
setup = {
  ip: '192.168.1.120', // Put your ip here or athom cloud uri,
  bearer_token: '52c9xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15ddb3ea5f', // Put your v2 token here (114 characters long)
  protocol: 'http', // Change to https if using athom cloud
  homeyId: '5axxxxxxxxxxxxxxxxxxxxa4' // Homey ID
}

```

When using a _Remote Connection_:

```auto
setup = {
  ip: '5axxxxxxxxxxxxxxxxxxxxa4.connect.athom.com', // Put your ip here or athom cloud uri,
  bearer_token: '52c9xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx15ddb3ea5f', // Put your v2 token here (114 characters long)
  protocol: 'https', // Change to https if using athom cloud
  homeyId: '5axxxxxxxxxxxxxxxxxxxxa4' // Homey ID
}

```

After adding the information, save the file.

**Start viewing your flows**

Now you’re ready to view your flows! Open the **flowview.html** file from the folder where you unzipped the files from step1

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/9/9aaf3999826a74c3920dcc56fa79bdbe5c167d1a.jpeg)

If the page does not look like like the screenshot above but like the one below there is an error in the information put into the **config.js** file. Please go trough the steps again.

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/b/b19cb9fa44c066f53edc8dcdd6803afb44e879e6.png)

> **Disclaimer:**  
> I did not write the **Homey 2 flow viewer** all work has been done by @Erik van Dongen and all credits should go to him! Remember he is just another community developer, he doesn’t work for Athom and has developed this in his free time.

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [January 19, 2019, 8:58pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/2 "2019-01-19T20:58:37Z")

</div>

## Q & A

**Q** : My Homey is still on 1.5.13, can I use **Homey 2 flow viewer**?  
**A** : No, while development was started when Homey firmware was at 1.x it has now evolved so its compatible with V2 only.

**Q** : Do I have to be connected to the same network as my Homey to use **Homey 2 flow viewer**?  
**A** : No, when you are away from home you can connect by using the _Athom Cloud uri_. How to find that is described in the first post.

**Q** : Can you add flows with **Homey 2 flow viewer**?  
**A** : No that’s not supported, only some minor editing functionality is available.

**Q** : Can I enable or disable a flow with **Homey 2 flow viewer**?  
**A** : Yes you can do this by clicking the checkbox in the flow name bar:

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/9/9aa4bdcebaf106466d1df78be1147139bde6b82a.png)

**Q** : Can I rename or move a flow with **Homey 2 flow viewer**?  
**A** : Yes you can do this by clicking the pencil in the flow name bar:

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/b/bf86bf4140e8f91712440a18731ebede9d1a2a78.png)

Type the new name in the _Name_ field and/or select a different _Folder_ and click on _Save_

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/f/f8d9e7386f3252db357fc7cdbed7094b98d03383.png)

Alternatively you can move to a folder by click (and holding) the _folder_ icon in the flow name bar and dragging the flow to the desired folder in the **Folders** bar on the left.

**Q** : Can I delete flows with **Homey 2 flow viewer**?  
**A** : Yes you can do this by clicking the **x** in the flow name bar:  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/4/49a811521927dd36ae842189ebc02f34762e03c4.png)

**Q** : Can I test a flow with **Homey 2 flow viewer**?  
**A** : Yes you can do this by clicking the _play_ icon in the flow name bar:  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/7/7bc5b3b15bab990f8fe20fe1685541e2d0a6141b.png)

Alternatively you can click on the _play_ icon in any available flowcard. This way you can either run the complete flow by clicking the _play_ icon on the trigger card in the _When_ column or you can selectively run an action by clicking the _play_ icon on the action card you want to run in the _Then_ column.  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/0/0d4c6f78b82f77356688b367ce9e04729bc834af.png)

**Q** : Can I add Folders with **Homey 2 flow viewer**?  
**A** : Yes you can do this by clicking the _Add folder_ icon in the _Folders_ sidebar. Next a dialog will open where you have to type the desired name and select where the folder should be created.

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/f/fda75719941dbf576dcea3f2b0695fb03f49a1f8.png)

**Q** : Can I change the name or move a folder with **Homey 2 flow viewer**?  
**A** : Yes you can do this by clicking the _Edit folder_ icon in the _Folders_ sidebar. Next a dialog will open where you can select the folder you want to change.

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/2/2004a7c6b96937f8299f9050e221a049d7d2d208.png)

After clicking **Next** another dialog will open where you can change the name and/or move the folder to different location.

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/4/476a96112bde65930768ea94452c6573ba0d58be.png)

**Q** : Can I delete a folder with **Homey 2 flow viewer**?  
**A** : No, not yet. That function will follow later.

---

<div class="post-metadata">

**Author:** ![SpaceCosmos](https://avatars.discourse-cdn.com/v4/letter/s/cc9497/32.png) [@SpaceCosmos](https://community.homey.app/u/SpaceCosmos)\
**Post date:** [January 20, 2019, 2:07pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/3 "2019-01-20T14:07:20Z")

</div>

Great write up @DaneedeKruyff. But I just can’t seem to find the **HomeyID** anywhere. Any pointers? (Tried Opera, Chrome and Firefox.)

**[EDIT:]**  
I found it, it’s visible under the _ **HOST:** _ value under the _ **GET** _ request. Or under _ **:authority:** _ under the **_me_** request. And it usually something like this **[5acxxxxxxxxxxxxxxx88.connect.athom.com](http://5acxxxxxxxxxxxxxxx88.connect.athom.com)**.

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [January 21, 2019, 8:33am UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/4 "2019-01-21T08:33:44Z")

</div>

There are indeed several places where the **homeyID** can be found I only mentioned one, close to where the other info can be found, to not overcomplicate the instructions.

---

<div class="post-metadata">

**Author:** ![bvdbos](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bvdbos/32/2352_2.png) [@bvdbos](https://community.homey.app/u/bvdbos)\
**Post date:** [January 21, 2019, 9:19am UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/5 "2019-01-21T09:19:02Z")

</div>

Do we even need the Homey-ID? I changed mine and it still worked…

---

<div class="post-metadata">

**Author:** ![Adrian\_Rockall](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/adrian_rockall/32/13209_2.png) [@Adrian\_Rockall](https://community.homey.app/u/Adrian_Rockall)\
**Post date:** [January 21, 2019, 1:28pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/6 "2019-01-21T13:28:40Z")

</div>

I spent a while trying to locate the IP address but it turns out mine browser trace was showing my cloud URI which also works.  
Thanks for the explain though as it got me started.

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [January 21, 2019, 6:29pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/7 "2019-01-21T18:29:24Z")

</div>

@bvdbos, you are right the **homeyID** seems not to be needed to use **Homey v2 flow viewer**. Maybe @Erik can elaborate.

---

<div class="post-metadata">

**Author:** ![Erik](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/erik/32/9865_2.png) [@Erik](https://community.homey.app/u/Erik)\
**Post date:** [January 21, 2019, 6:56pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/8 "2019-01-21T18:56:21Z")

</div>

@DaneedeKruyff @bvdbos  
Based on reversed engineering the flow test api the HomeyID is needed in setting up the test sockets. But indeed, when using the flowviewer on a local netwerk this HomeyID seems optional for now.

---

<div class="post-metadata">

**Author:** ![Vonkenboer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/vonkenboer/32/4465_2.png) [@Vonkenboer](https://community.homey.app/u/Vonkenboer)\
**Post date:** [January 21, 2019, 7:21pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/9 "2019-01-21T19:21:14Z")

</div>

Confirmed working on a Linux machine using firefox/chromium.

Nice! 👍

---

<div class="post-metadata">

**Author:** ![Lars\_Machiels](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/lars_machiels/32/10295_2.png) [@Lars\_Machiels](https://community.homey.app/u/Lars_Machiels)\
**Post date:** [January 21, 2019, 8:04pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/10 "2019-01-21T20:04:35Z")

</div>

Great initiative BTW. The moment I can create new flows I might even consider moving to 2.0.

---

<div class="post-metadata">

**Author:** ![Stefan\_Gorissen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stefan_gorissen/32/7101_2.png) [@Stefan\_Gorissen](https://community.homey.app/u/Stefan_Gorissen)\
**Post date:** [January 23, 2019, 9:33am UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/11 "2019-01-23T09:33:06Z")

</div>

This is a great tool.

Although it doesn’t seem to load all my flows.  
At the bottom of the page it keeps displaying “flows: loading…”.

It may have something to do with a bug in Homey.  
I accidentally deleted a folder which contained 2 other folders which in turn contained several flows.  
The folders are gone, but the flows inside those folders are still there and fully functional.  
The problem now is that said flows are invisible. Therefore I cannot move, disable or edit them anymore.

When I create a new flow and add a “start een flow” card to the “Then” section, I can still select the ghost-flows.

Is it possible to still show these ghost flows? That way I can delete them from your tool until Homey releases an update with this bug fixed.

Thx!

---

<div class="post-metadata">

**Author:** ![anon8748058](https://avatars.discourse-cdn.com/v4/letter/a/ebca7d/32.png) [@anon8748058](https://community.homey.app/u/anon8748058)\
**Post date:** [January 23, 2019, 3:52pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/12 "2019-01-23T15:52:26Z")

</div>

Terrific! 🙂  
Thank you for your great effort @Erik and @DaneedeKruyff for writing it all out!

This tool is very helpful for me. Looking forward to any extended features if any are planned!

---

<div class="post-metadata">

**Author:** ![bvdbos](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/bvdbos/32/2352_2.png) [@bvdbos](https://community.homey.app/u/bvdbos)\
**Post date:** [January 23, 2019, 6:07pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/13 "2019-01-23T18:07:25Z")

</div>

Do you see the flows in [https://developer.athom.com/tools/api-playground](https://developer.athom.com/tools/api-playground) if you uncomment the `Homey.flow.getFlows();` ?

---

<div class="post-metadata">

**Author:** ![Stefan\_Gorissen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stefan_gorissen/32/7101_2.png) [@Stefan\_Gorissen](https://community.homey.app/u/Stefan_Gorissen)\
**Post date:** [January 24, 2019, 9:07am UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/14 "2019-01-24T09:07:52Z")

</div>

Yes, all the flows are visible in the API-playground.

I managed to edit most of the flows through the “APPS” section in the homey-app.  
You can see all the flows where a specific app is used.

The flows that don’t use any app are permanently “ghosted”.  
For now that doesn’t matter. It’s only LED-ring animation when someone is awake or comes home.

I’ve already reported this to Athom. They said they are aware of the bug and they hope to solve it in the next update.

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [February 3, 2019, 1:00pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/15 "2019-02-03T13:00:11Z")

</div>

Little added functionality:

Number of flows in a folder are shown

![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/7/72f0591741cad23e0647427225b08462c67ccc5c.png)

Tokens are now shown in the same colors that represents the type, just as in the Homey app.  
 ![31](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/5/5aedfedc41c3b609e4f6b7704d56288cab4bc2bd.png)

And when you hover your mouse over them you can see the type and an example of what the token contains.  
 ![26](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/4/4cfc0cfe684b8317530bd23523ea6ebfd0786b07.png)

---

<div class="post-metadata">

**Author:** ![Anton](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/anton/32/10134_2.png) [@Anton](https://community.homey.app/u/Anton)\
**Post date:** [February 4, 2019, 4:01pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/16 "2019-02-04T16:01:29Z")

</div>

![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/7/73b017cf8befc5ad223a843eb52863ad5842e996.png)

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [February 5, 2019, 6:49pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/17 "2019-02-05T18:49:29Z")

</div>

Little added functionality:

You can now add folders by clicking on the _Add folder_ icon. Editing can be done by clicking the _Edit folder_ icon.

Please read the **[Q&A](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/2)** for more information.

![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/4/411390ebe1ddcb22ee8b38f8c6b1d1d8b9a0bf19.png)

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [February 5, 2019, 6:52pm UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/18 "2019-02-05T18:52:39Z")

</div>

@Anton, there will be most likely an error in the console.

Open the `Developer Tools` in your browser (preferably Chrome) and select the `console` tab. Next copy the error and post it here please.

---

<div class="post-metadata">

**Author:** ![Anton](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/anton/32/10134_2.png) [@Anton](https://community.homey.app/u/Anton)\
**Post date:** [February 6, 2019, 7:37am UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/19 "2019-02-06T07:37:34Z")

</div>

![2019-02-06_07-07-52](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/2/2d70c89b9b89d435fd669c895b5189378dcc8c27.jpeg)

---

<div class="post-metadata">

**Author:** ![Menne\_Talsma](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/menne_talsma/32/8752_2.png) [@Menne\_Talsma](https://community.homey.app/u/Menne_Talsma)\
**Post date:** [February 7, 2019, 9:38am UTC](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427/23 "2019-02-07T09:38:10Z")

</div>

THIS LOOKS GREAT.!!!  
although I’m already stuck in step2 (ipadres) (me is new at this)

this is what i get in the developer tools… I get the Homey-ID insteed of my Homey’s IP adres

Do i Need to be @home (on my wifi) for this to work?  
btw: i can also find my homey IP by looking in my router… will that do?

thnaks for thegood work though… looking forward to getting it working

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/c/c353afc9f14706aeb59d3b3ee786d37b1fed8239.png)

[Next page](https://community.homey.app/t/how-to-view-your-homey-v2-flows-in-a-browser/7427.md?page=2)
