# \[APP\]\[Pro\] Dashboard Studio - A completely free-form dashboard designer

**URL:** <https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169>\
**Category:** Apps\
**Tags:** dashboard, homey-pro\
**Created:** [February 15, 2026, 7:45pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169 "2026-02-15T19:45:30Z")\
**Posts on this page:** 20\
**Page:** 34

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [April 10, 2026, 9:32am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/668 "2026-04-10T09:32:07Z")

</div>

Hi Olivier, at the moment I don’t really have the ambition to open up the source code to other developers yet. There are still too many things in the foundation that I want to overhaul or make more modular. For now I prefer to keep all the choices in my own hands. One of the important things I want to guard against is that I want to subtly push DS users towards a consistent style that fits the dashboard. Adding a widget that just dumps html snippets from other sources like websites would create a design that completely deviates from the rest. Every widget should basically be able to adopt the style of the template by default, like the colors, line weights and typography. It often bothers me with conventional dashboards that every developer makes their own widgets with their own explicit style. Individual widgets look fine on their own, but when you tie a full dashboard together with all kinds of different styles it becomes a big patchwork quilt.

Regarding the rtsp support I have been digging through the developer documentation, but I can’t find anywhere how to officially extract those webrtc streams. There is plenty of information on how to add cameras to Homey, but almost nothing on how to actually use those streams. Creating a widget that supports such a stream is probably not a problem, but there has to be a user friendly way to obtain that stream. If this all has to be done with workarounds or hacks, it will end up causing more frustration than fun for end users.

> [@Olivier67](#):
>
> I can also look into camera management, as I have an application in development for Homey that takes a Frigate RTSP stream (because Homey internally transcodes the stream) and injects it into a Homey dashboard.

This is also about embedding other sources into homey, not getting this out of Homey 😅 But if you can provide me with a piece of sample code that extracts the web rtc stream (in a Homey-legal way) that would definitely help development. 🙂

A calendar is definitely something I want to add, but I want to keep Dashboard Studio as passive and universal as possible at its core. In the Homey backend I also want to keep everything purely focused on passing through data and I don’t want to integrate specialized flowcards for things like iCloud data. What we could do is collaborate. For example, you could expand your calendar app with flows that extract the data, like “the next X appointments” for example, and make it available as csv or json. Preferably in a universal format. I haven’t dived into the world of calendar data formats yet, but I am sure some big company already thought out a smart standard. I shall take a look at what kind of interesting data your Homey widget can pull when I have the time, but right now I am very busy for the coming month.

---

<div class="post-metadata">

**Author:** ![Icube0815](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/icube0815/32/121095_2.png) [@Icube0815](https://community.homey.app/u/Icube0815)\
**Post date:** [April 10, 2026, 9:40am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/669 "2026-04-10T09:40:44Z")

</div>

Hi Satoer,

did some screenshots and tested on a second iPad Air (IOS 12.5.8). Same behavior.

The whole button is missing, same for push button and switch. Going to your page with all the button shows also no buttons / switches (screenshot):

 ![IMG_3650](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/2/82393a9b3f6ffba3990ed508acff4ddc0dd2b653.jpeg)

Screenshot local demo page on homey opened from IOS 12:

 ![IMG_3648](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/3/4/34db293e1fffae65be695e59755ad05a995b8874.jpeg)

(missing option to add switch / button in edit mode, of course I use a PC to edit, so not important)

 ![IMG_3649](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/c/4/c4c9d0083b61b93ed8c601835c7d717be585c543.jpeg)

(missing button in upper right corner)

 ![IMG_3653](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/7/775997c19400f84a1eb5002223e0b4b0e98359c0.jpeg)

(missing button in lower left corner)

My test page on IOS 12:

 ![IMG_3652](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/e/7efb2018854981bb62052ce7aee383735462b1b3.jpeg)

Same page on IOS 16 and IOS 26:

 ![IMG_3647](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/0/4/044a8567752e0ce4b26651467adb9056d85318d2.jpeg)

Hope that helps to identify reason.

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [April 10, 2026, 10:10am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/670 "2026-04-10T10:10:38Z")

</div>

> [@Icube0815](#):
>
> The whole button is missing, same for push button and switch. Going to your page with all the button shows also no buttons / switches (screenshot):

Thanks for the screenshots. It is so weird though because another user seems to have no problems with the same device:

> [@Jos\_Stultjens](#):
>
> Displaying/using buttons/switches/sliders on my iPad Air with iOS 12.5.8 is no problem.

It would be nice to see the console errors, but I do not think those are accessible on an old iPad. I actually got my hands on a test iPad Air 2 still running iOS 12 (so not the iPad Air 1) from a developer friend of mine to fix previous problems. However, I do not have that device at the moment, so I cannot test it myself. It is funny to see that the Barbie Theme is actually being used by users! 🤣

---

<div class="post-metadata">

**Author:** ![Icube0815](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/icube0815/32/121095_2.png) [@Icube0815](https://community.homey.app/u/Icube0815)\
**Post date:** [April 10, 2026, 10:59am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/671 "2026-04-10T10:59:24Z")

</div>

Did a facroy reset of the iPad Air (A1474) on iOS 12.5.8, still same behavior.

So if it works for @Jos_Stultjens there might be a setting required?

Unfortunately I don’t have an Mac, so I cannot turn on Safari developer mode.

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [April 10, 2026, 11:52am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/672 "2026-04-10T11:52:52Z")

</div>

> [@Icube0815](#):
>
> Did a facroy reset of the iPad Air (A1474) on iOS 12.5.8, still same behavior.

Found the original post when I implemented iOS 12 support:

> [@Satoer](#):
>
> Found an ipad Air 2 test device running iOS 12.4
> 
> ![afbeelding](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/b/c/bc49024bad5556ebbf056c86c732aecf81ef409b.jpeg)
> 
> Got it running 👍  
> The dashboard works well enough, but the editor is a bit of a mess. The editor is not intended for iPad use anyway so should be no problem. Give it a shot and let me know how it runs on your iPad Air 1. I’m guessing the performance won’t be great since the Air 2 handles it fine, but the Air 1 only has half the RAM (1 GB vs 2 GB) and half the CPU power (4 cores instead of 8). I’d also suggest avoiding those curved animated arrows. There is definitely room for improvement, though. Dashboard Studio basically runs the entire app in the browser, so for the sake of these older devices, it might be worth pulling it apart and separating the dashboard viewer from the editor. That said, it’s a pretty massive architectural change and probably a lot of work just to support a 13-year-old device! 😅

Buttons visible 👍 This is just a stock ipad.

There have been quite a few updates to DS since then. They even overhauled the button widget, so it’s possible that broke things in the meantime. @Jos_Stultjens, are you running the latest version 1.6.0? Just a heads up that if you aren’t, updating might actually break the iPad dashboard 😅

@Iceball Can you check out [this website? This is the old 1.4.2 version of Dasboard studio.](https://satoer.com/dashboardstudio/olddemo/) If the buttons are visible there, then I’ll know the issue is definitely related to the latest improvements.

---

<div class="post-metadata">

**Author:** ![Icube0815](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/icube0815/32/121095_2.png) [@Icube0815](https://community.homey.app/u/Icube0815)\
**Post date:** [April 10, 2026, 12:08pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/673 "2026-04-10T12:08:09Z")

</div>

I can confirm, working with old 1.4.2 version:

 ![IMG_1587](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/0/b/0bba5cb62846d5755019fa83febbb0f1e67c4fba.jpeg)

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [April 10, 2026, 12:17pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/674 "2026-04-10T12:17:42Z")

</div>

Thanks, I will try to fix the problem 👍

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [April 10, 2026, 12:25pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/675 "2026-04-10T12:25:19Z")

</div>

Follow up question:  
Do the menu widgets work?  
Can you screenshot [this dashboard](https://satoer.com/dashboardstudio/demo/?page=16) for me?  
The dropdown will probably not work because it is activated by a button, but I’m wondering if you see that horizontal menu.

---

<div class="post-metadata">

**Author:** ![Icube0815](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/icube0815/32/121095_2.png) [@Icube0815](https://community.homey.app/u/Icube0815)\
**Post date:** [April 10, 2026, 12:58pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/676 "2026-04-10T12:58:45Z")

</div>

None of the widgets of this page are visible:

 ![IMG_1588](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/4/5/4559e107dc256a8b40f8266123e3cb8107468402.jpeg)

---

<div class="post-metadata">

**Author:** ![Amersfoort](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@Amersfoort](https://community.homey.app/u/Amersfoort)\
**Post date:** [April 10, 2026, 3:40pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/677 "2026-04-10T15:40:49Z")

</div>

I’m using Raw svg code in 2 images with the following snippet code.

```auto
{
  "snippetHeader": "Dashboard Studio Snippet",
  "snippetType": "widget-snippet",
  "snippetFormatVersion": 1,
  "version": "1.6.3",
  "source": {
    "dashboardName": "Dash3",
    "page": 1,
    "createdAt": "2026-04-10T15:28:53.239Z"
  },
  "master": {
    "currentPage": 1
  },
  "widgets": {
    "image_799582892": {
      "type": "image",
      "overrides": {
        "x": 240,
        "y": 410,
        "width": 710,
        "height": 60,
        "zIndex": 1,
        "page": "1",
        "sourceType": "svg",
        "url": "images/placeholder.png",
        "svgRaw": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 730 20\" width=\"730\" height=\"20\">\n <defs>\n <linearGradient id=\"rainbowGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stop-color=\"hsl(0, 100%, 50%)\" />\n <stop offset=\"16.67%\" stop-color=\"hsl(60, 100%, 50%)\" />\n <stop offset=\"33.33%\" stop-color=\"hsl(120, 100%, 50%)\" />\n <stop offset=\"50%\" stop-color=\"hsl(180, 100%, 50%)\" />\n <stop offset=\"66.67%\" stop-color=\"hsl(240, 100%, 50%)\" />\n <stop offset=\"83.33%\" stop-color=\"hsl(300, 100%, 50%)\" />\n <stop offset=\"100%\" stop-color=\"hsl(360, 100%, 50%)\" />\n </linearGradient>\n <filter id=\"glow\">\n <feGaussianBlur stdDeviation=\"6\" result=\"blur\"/>\n <feMerge>\n <feMergeNode in=\"blur\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"730\" height=\"20\" rx=\"0\" ry=\"0\" fill=\"url(#rainbowGradient)\" filter=\"url(#glow)\"/>\n</svg>",
        "moveX": 0,
        "moveY": 0,
        "label": "",
        "liveRefresh": false,
        "refreshInterval": 1,
        "intervalUnit": "seconds",
        "metaName": "Second"
      },
      "bindings": {}
    },
    "image_436964341": {
      "type": "image",
      "overrides": {
        "x": 240,
        "y": 340,
        "width": 710,
        "height": 60,
        "zIndex": 1,
        "page": "1",
        "sourceType": "svg",
        "url": "images/placeholder.png",
        "svgRaw": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 730 20\" width=\"730\" height=\"20\">\n <defs>\n <linearGradient id=\"rainbowGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stop-color=\"#cce7f6\" />\n <stop offset=\"100%\" stop-color=\"#ffbf00\" />\n </linearGradient>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"730\" height=\"20\" rx=\"0\" ry=\"0\" fill=\"url(#rainbowGradient)\"/>\n</svg>\n",
        "moveX": 0,
        "moveY": 0,
        "label": "",
        "liveRefresh": false,
        "refreshInterval": 1,
        "intervalUnit": "seconds",
        "metaName": "First"
      },
      "bindings": {}
    }
  }
}

```

One image should be this:  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/1/715c59c1c9596c4cb8f405bd90fc40cc20d533a1.png)  
And the other one like this:  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/optimized/3X/7/1/71212b1751280c7f8979cb6221b419e82bd52317_2_690x77.png)

Somehow these svg images are linked, so I see two times the same image, depending on the defining order. It sounds strange and it is strange to me. I would like to know what is happening, and how to solve this.

EDIT:  
The solution is: both had a linearGradient called “rainbowGradient”. When I change this name in one of the svg’s the problem has solved.  
Apparently, these SVG codes do not work completely independently of each other.

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [April 10, 2026, 5:43pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/678 "2026-04-10T17:43:31Z")

</div>

> [@Amersfoort](#):
>
> The solution is: both had a linearGradient called “rainbowGradient”. When I change this name in one of the svg’s the problem has solved.

Another thing to keep in mind: SVG IDs and variables are shared across the entire dashboard page, regardless of which page you are on. They aren’t bound to a specific widget. In the first version, I actually wrote code to make them unique to every widget, but in the final build, I decided against it. I deemed it unnecessary and thought making it optional would be a bit too nerdy. Plus, it would probably just confuse users who actually want those IDs to work dashboard-wide and can’t figure out why they aren’t syncing up.

---

<div class="post-metadata">

**Author:** ![Jos\_Stultjens](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jos_stultjens/32/12687_2.png) [@Jos\_Stultjens](https://community.homey.app/u/Jos_Stultjens)\
**Post date:** [April 10, 2026, 6:24pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/679 "2026-04-10T18:24:16Z")

</div>

I did update the dashboard before I read this message and now it indeed does not show the buttons anymore.

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [April 10, 2026, 6:41pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/680 "2026-04-10T18:41:12Z")

</div>

Don’t worry, already found the problem. Next (test) update it will be fixed.

---

<div class="post-metadata">

**Author:** ![Vierlijner](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/vierlijner/32/81523_2.png) [@Vierlijner](https://community.homey.app/u/Vierlijner)\
**Post date:** [April 10, 2026, 7:50pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/681 "2026-04-10T19:50:47Z")

</div>

Satoer, Is it possible to invert the boolean value without a homey value, but in the dashboard? For example I use sometimes the visable of disabled state, but from the device I have the allowed or enabled state. Now I have a flow to invert these, but it feels as overkill.

Edit: But I also understand that your UI will get complexer and harder to maintain.

---

<div class="post-metadata">

**Author:** ![Satoer](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/satoer/32/38113_2.png) [@Satoer](https://community.homey.app/u/Satoer)\
**Post date:** [April 10, 2026, 8:02pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/682 "2026-04-10T20:02:58Z")

</div>

Not possible right now, but I understand the problem. Had the same annoyance a couple of times also. Did not found a neat solution for it though. seems overkill to add an invert option for every boolean setting, and only do the most used settings also feels a bit inconsistent. Maybe add support for an /invert or -invert behind the topic? Not sure about that though, might clash with MQTT standards. 🤔 Also this would be a bit “insider” knowledge. Then again, local topics are also a bit hidden. Well… that are my thoughts so far, any ideas?

---

<div class="post-metadata">

**Author:** ![Vierlijner](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/vierlijner/32/81523_2.png) [@Vierlijner](https://community.homey.app/u/Vierlijner)\
**Post date:** [April 10, 2026, 8:24pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/683 "2026-04-10T20:24:22Z")

</div>

In code NOT is used, but also ! or ~. But I see the change/ extend the MQTT topic string feels not ok.

---

<div class="post-metadata">

**Author:** ![Vierlijner](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/vierlijner/32/81523_2.png) [@Vierlijner](https://community.homey.app/u/Vierlijner)\
**Post date:** [April 10, 2026, 8:33pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/684 "2026-04-10T20:33:24Z")

</div>

When I enable locked then I can change the output topic from a switch for example, but when I leave (Tab) then all the switch options are gone and only the widget info options are there. Then I have to unlock again so I can edit again.

Change directly when I lock (so no edits can be made).

The other way around also, when I unlock I can’t still make edits. I have to unselect the widget and come back and then it’s OK.

---

<div class="post-metadata">

**Author:** ![Vierlijner](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/vierlijner/32/81523_2.png) [@Vierlijner](https://community.homey.app/u/Vierlijner)\
**Post date:** [April 10, 2026, 8:43pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/685 "2026-04-10T20:43:03Z")

</div>

It would be nice if I can block/ lock the switch action from a user (based on a state) in runtime, not in dev mode. I still want to show it, but don’t allow the trigger/ on click.

---

<div class="post-metadata">

**Author:** ![Rob\_G](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/rob_g/32/79108_2.png) [@Rob\_G](https://community.homey.app/u/Rob_G)\
**Post date:** [April 11, 2026, 10:55am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/686 "2026-04-11T10:55:01Z")

</div>

Hi @Satoer I’ve been less involved for a while, so maybe my question was already discussed.  
I know you built a menu feature that allows dropdown menus etc. I like to build an option where I can press a button that opens kind of a dropdown menu, but not with menu options/buttons, but with my own custom controls. Kind of a “hidden” option menu for secondary controls.  
I could of course have all the controls in the option menu to respond to the logic state of the button that opens them (hide/show), but I was wondering if there is an easier solution. Unfortunately, I cannot control the visibility of a group. That would be a solution for me.

---

<div class="post-metadata">

**Author:** ![Amersfoort](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@Amersfoort](https://community.homey.app/u/Amersfoort)\
**Post date:** [April 11, 2026, 11:04am UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/687 "2026-04-11T11:04:41Z")

</div>

Same kind of question here:  
I have an air conditioner with 5 modes in a single capability, one at the time. I would like to configure one of those modes using a drop-down menu. I also want to be able to see the current mode. Do I need to create various flows, or is there a smarter way? What is the best practice?

In the Demo dashboard, I see an example of a Dropdown menu, but without the underlying functionality.

[Previous page](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169.md?page=33)

[Next page](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169.md?page=35)
