# Custom app UI for MQTT based app **URL:** \ **Category:** Developers\ **Created:** [August 19, 2023, 4:42pm UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499 "2023-08-19T16:42:40Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Stuart\_McGurnaghan](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stuart_mcgurnaghan/32/78863_2.png) [@Stuart\_McGurnaghan](https://community.homey.app/u/Stuart_McGurnaghan)\ **Post date:** [August 19, 2023, 4:42pm UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/1 "2023-08-19T16:42:40Z")
Hi, just embarking on an MQTT based client app that has a keypad style interface with 16 buttons and a two line text display giving feedback. It’s a security keypad but looks pretty much like a calculator. We currently have this implemented in Home-Assistant, but would like to offer in Homey, as many of our users struggle with the Home-Assistant setup. I have the MQTT buttons and display communication working, but am at the point where I’m struggling to find an example of a customised app user interface with multiple buttons and a text display. I’d be grateful for any pointers or advice. ---
**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 19, 2023, 5:22pm UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/2 "2023-08-19T17:22:22Z")
> [@Stuart\_McGurnaghan](#): > > of a customised app user interface There’s no such thing with Homey. The only thing that comes somewhat close is to create an [app settings page](https://apps.developer.homey.app/advanced/custom-views/app-settings) (however, its purpose is really meant for, as the name suggests, application settings and not for controlling devices). ---
**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:** [August 19, 2023, 7:34pm UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/3 "2023-08-19T19:34:43Z")
You can create a page with a bunch of buttons on, but they will be arranged in two columns. The message display would be on the next tab and is pretty limited. So not a great choice. ---
**Author:** ![Stuart\_McGurnaghan](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stuart_mcgurnaghan/32/78863_2.png) [@Stuart\_McGurnaghan](https://community.homey.app/u/Stuart_McGurnaghan)\ **Post date:** [August 19, 2023, 7:47pm UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/4 "2023-08-19T19:47:41Z")
Oh, no. that sounds really limited. Are there really no apps that require more than a few buttons or a single slider? Are there any work arounds or the possibility of a request for enhancement ? ---
**Author:** ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)\ **Post date:** [August 19, 2023, 11:11pm UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/5 "2023-08-19T23:11:54Z")
Maybe it’s not what you looking for, I’m not a dev, but I’d like show some apps with imho creative settings/configuration pages > ![Screenshot_20230820-005631_Homey](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/f/c/fc126d4d2532ab0b243899159ed2a7111e0bd966.jpeg) Even landscape is possible ![Screenshot_20230820-010914_Chrome~01](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/2/5/25cbbc3fceb49de2f46192f757b9aa86bef5aa0d.jpeg) ---
**Author:** ![Baldhor](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/baldhor/32/27028_2.png) [@Baldhor](https://community.homey.app/u/Baldhor)\ **Post date:** [August 20, 2023, 12:10am UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/6 "2023-08-20T00:10:02Z")
Which app is this? I made a driver very complicated for ESPhome devices trying to use Homey “styles”, but the result is terrible lol ---
**Author:** ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)\ **Post date:** [August 20, 2023, 12:14am UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/7 "2023-08-20T00:14:39Z")
> [@Baldhor](#): > > Which app is this Take another look 😊 (it’s 2 different apps btw) ---
**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, 2023, 6:34am UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/8 "2023-08-20T06:34:33Z")
> [@Baldhor](#): > > trying to use Homey “styles” I gave up on those for HomeKitty and created my own styling (more iOS-like, which fits HomeKitty better too): ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/5/3/53ee8db27f8eee6710b275c81b9a27849da48d6c.png) You should be able to use any styling library you want (Bootstrap, Tailwind, etc), and also most JS libraries (I use, amongst other things, [`petite-vue`](https://github.com/vuejs/petite-vue) to handle the navigation, buttons, switches, etc). Just realise that all those resources will be part of your app and may cause it to grow in size (hence my choice for `petite-vue` and not the full-fledged Vue). ---
**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:** [August 20, 2023, 7:17am UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/9 "2023-08-20T07:17:47Z")
I should point out for clarity that I was referring to Device Settings pages and not the app configuration page. ---
**Author:** ![RonnyW](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ronnyw/32/10879_2.png) [@RonnyW](https://community.homey.app/u/RonnyW)\ **Post date:** [August 20, 2023, 7:31am UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/10 "2023-08-20T07:31:25Z")
And all html based settings pages (app settings, device repair) are not really useful to control a device 😉 So current state is: Homey only offers button/sensor views in device details showing a 2 column style you can’t change (it’s mobile app or WebApp style). ---
**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, 2023, 7:47am UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/11 "2023-08-20T07:47:49Z")
> [@RonnyW](#): > > And all html based settings pages (app settings, device repair) are not really useful to create a device Not to _create_ a device, but to control it. Still not ideal but at least it allows you to create a custom layout. ---
**Author:** ![RonnyW](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/ronnyw/32/10879_2.png) [@RonnyW](https://community.homey.app/u/RonnyW)\ **Post date:** [August 20, 2023, 7:55am UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/12 "2023-08-20T07:55:10Z")
You are right. I meant ‘control’. I corrected it in my post above. ---
**Author:** ![Stuart\_McGurnaghan](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/stuart_mcgurnaghan/32/78863_2.png) [@Stuart\_McGurnaghan](https://community.homey.app/u/Stuart_McGurnaghan)\ **Post date:** [August 20, 2023, 6:02pm UTC](https://community.homey.app/t/custom-app-ui-for-mqtt-based-app/87499/13 "2023-08-20T18:02:55Z")
Okay, I have a basic keypad. Still a bit of work to do. It’s not so good that the user needs to find the app config page to get to this, but at least it offers some sort of work around. Hopefully the UI will become more flexible in the future… ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/7/67e079c1142ab6a61d70d38616fb1c82c4974c38.png)