Very good job guys, been waiting for this moment for couple of years. Incredible that such a wonder as LVGL still remains free and open source. Thanks to all collaborators 😊
Awesome! Sterling effort. I understand some of the comments about it basically being an XML to C converter (ish) but as a developer I consider the XML approach clean and easily maintainable by people of all levels. Thanks for all your hard work.
incredible job guys, thank you for providing community with such a great tool like lvgl! we all appreciate your work and truly wish you all the best! thank you!
Dear LVGL developers, I've been programming 25 years, and the problem that causes me the most headaches is good UI. Have never found anything that hits that sweet spot across all platforms, from embedded, to the browser. But this actually does! I wanted to say thank you for everything you've done, this is truly amazing.
Thank you for the kind words! :) In your sentence "across all platforms, from embedded, to the browser" I understand the "embedded" part but I'm very curious how you mean the "browser" part, as this is an area which we are not focusing actively on. So what is your browser related use case with LVGL?
That's amazing! I had a similar idea to create something like this and was even working on it. I'll try to contribute if I can. Thank you for bringing this tool to life!
That is amazing! As a coding guy this is the perfect way for me to get to my ui! What does the "This Widgets are very similar" at 5:50 mean? Can you describe the difference between self made Widgets and the LVGL Widgets?
Happy to hear it! ^^ It means that the generated widget also uses LVGL classes, they have a constructor, destructor, event handler, and a struct (e.g. lv_slider_t) where you can store widget specific data.
Looks great! But I’m curious, why isn’t there a 60Hz preview option? It would be super helpful for designing smooth animations and transitions. Any plans to add that?
Of course, animation support is also on the roadmap, but to be honest we are still not sure how to approach them in the best way. We have a few ideas in mind, but nothing is decided yet. What do you exactly mean by 60Hz preview option?
I am interested in how many LVGL customers have separate UI design teams. Several companies have tried to go down the route of separating UI design from coding and I can't think of many (any) that still do this.
We have the opposite experience. Even small companies without designers are creating designs in Figma. Maybe these designs are done by engineers or managers, but it's still easier for them to use a tool where there are no technical limitation and they can explore freely. So we clearly the emerging trend of using Figma for design.
I am so curious about XML, Why don't use HTML which is friendly for UI desinger, If I hire a web UI desinger for LVGL project, most of time they only know HTLM
LVGL supports a lot of HTML/CSS like features but there are some differences too. In order to don't limit ourselves to the HTML standard, we have created a HTML-ish XML syntax which has a smooth learning curve for web developers too. Although it cannot be seen this video yet, but the XML editor will have a lot of auto complete features to make the development intuitive.
Just adding in again but I think you may wish to give serious consideration to either making a separate UI designer, or incorporating that into this. What you’ve effectively done here is build an xml editor that will let coders use xml instead of C to make lvgl UIs. That great but that’s NOT what the community is really looking for, nor is it a replacement for square line now you’ve parted ways. What pretty much everyone I’ve chatted with has said is “a WYSIWYG editor would be great”. Something with an animation editor/timeline creator cos animating by hand in code is just horrible, a full on point-and-click ui designer so I can see in real time where my widgets are, not need to change the code, recompile, load onto the device/simulator, look at it, go back to the code, move 2 pixels up, etc etc I’m not being critical of the work done here. It’s very good for what it is. But it’s not what is needed. An xml-to-c bridge is possibly what some companies would like for their pipeline, but a lot of actual users would love a UI editor, like square line tried and failed to be. Something that can read your code, display the UI on screen, and turn that UI into new code once you’re done moving stuff around.
Wooah, that's Great! Can we create TFT display UIs with this IDE easily? I couldn't create my TFT Display UIs easily with Squareline Studio. It always gives legal library compatibility issues.
> Can we create TFT display UIs with this IDE easily? That's the goal 😊 What was the exact problem with SquareLine? I'd like to make sure that we don't do the same mistake. 😀
I see a lot of uncertainty about the business model on the forums, hopefully the free version will be good enough for small businesses, or you can allow a low cost monthly subscription. The Squareline studio comes up to like 700$ USD (Paid at once) for a year which is pretty hard to justify when trying to develop a product, theres a thousand other things to pay for, such as real physical hardware, production tooling , labor etc. My subscription is ending in 3 months and i really really dont want to be hostage to a high-cost software.
We have added a description about the planned business model here: github.com/lvgl/lvgl_editor?tab=readme-ov-file#business-model So basically what SquareLine knows now should be included in the free version. We would like to ask a licensing fee for high-end features such as collaboration features, multi-language support, etc. These are typically required for larger companies where a few thousand USD is not an issue.
I think it would be valuable if there was a objects area with each possible object (widget type, style etc.) was available as a list with some description, with the built in widgets there could also be a small example preview and small descriptive text (What it's used for etc.). Make it searchable and context aware, ie. shows only relevant objects depending on where you are in the xml file. If you drag the object into the xml area the basic XML tag could be created. This would make it A LOT more easier for new users and also easy the mental load on more experienced users. A nice compromise when not doing full WYSIWYG IMHO.
We are thinking about something similar too. However a context sensitive menu might work better. If you click inside the tag you will be prompted with the possible widgets/components that you can create. If you click inside e.g. a slider you will see the possible slider properties. Same for the styles. Regarding the description, we are perfectly on the the same page. Help description should be built in to the editor. E.g. if you hover on a slider tag a style property a description tool tip should appear.
@@lvgl I think you ideas are fine, and would make coding a lot more efficient, but they don't solve the main problem for newbies, simply not knowing what widgets are available and what is possible with them. Examples of course helps to a degree, but going back and forth isn't very effective. So I still think that a side pane with widgets and information might have a value. What do you think?
It's certainly doable. LVGL has a lot drivers built in (DRM, Wayland, Windows, etc.) It's not as complete as Gnome for desktop development, but for embedded-like application LVGL's is definitely a good choice.
@@lvgl I understood it this way, that LVGL was primary created for embedded applications. Few years back, when I was searching for desktop GUI and LVGL didn't support desktop very well. But know I see this is changing. Gnome is heavy. I prefer something lightweight. LVGL seems to be perfect. Now I saw, that even you yourself build desktop apps with LVGL. Am I right? In any way, Thank you!
@@Zero-oq1jk I see now! We definitly planning to add some more desktop features, such as feature rich text editor. with hot key support, but it's for 2025 or 2026. Note that the editor is not created with LVGL but with Electron, Node.JS and React. The preview part is compiled to WebAssembly using Emscripten, so it's really LVGL but running as part of a webpage. github.com/lvgl/lv_web_emscripten/
UI editor is great, but really, the biggest problem with LVGL is the lack of docs. I just spent 3 days coding a custom widget and it's insanely hard when there's no docs, no examples, no emo code, and no support for C at all. If anyone else reads this and is also stuck, the lvgl_conf.h file needs the "allow private api" setting enabled, or custom widgets don't work.
Thank you for the quick feedback! I think you are right. Now we don't have a dedicated docs to create a new widget. My approach was that the existing widgets serve as good examples to get started, but it's definitely not replacing a detailed docs. We will prioritize it!
@@lvgl thanks; my example was just an example tho of the state of the lvgl documentation - what is there is good, but the docs are missing in places and the examples code is quite often not well documented either so you're left to sort of try everything until you stumble upon what works. More examples, better code documentation and maybe even detailed example projects would be helpful. Eg. here's how to draw things, here's how you create a custom widget, here's how a full example project looks - Adafruit do this really well and I se in LVGL so much potential, and better docs are at the heart of that. Also, I'm going to released my widget code onto the forums once I've got it working better. I can see (after exhaustive searching) only TWO other custom widgets with actual code for any version of LVGL. Mine is a circular keyboard, since so many LVGL uses will use a circular display, like smartwatches and gauges, having a radial keyboard seems like a no brainer...
Its good to see we have new ui editor but im preferre squarline studio more, for example im a professional game developer that works with unity engine and for ui i can make whole a ui pagr under 5 minute, i think its better to instead of code we have professional drag and drop editors to make ui, although im conider to make one for my self that generates lvgl code, i gonna happy if i can help lvgl team
Thank you for sharing your honest opinion! We needed to realize that there is no one size fit all solution. That is we can't create a tool which fits for everyone. As SquareLine is already a low code/no code tool, we wanted to address a different market. Also thank you for offering your help. In few days we will release v0.1. It'd be amazing if you could try it out and tell us what about think. The more feedback we hear the better the tool we can develop. :)
Amazing question: at the beginning of 2024 we have decided the part our ways with SquareLine because we couldn't agree on some conceptual and business related matter. However, we didn't want to let you without an official LVGL editor tool so we started to explore the possibilities and eventually begun the development. It seems we need to create a follow up video to answer the great questions that you have asked here :)
You make this statement.. " You can recompile the editor to make it contain the new widgets' code." No I can't because it is closed source. so that's not an option.
The part you can recompile is LVGL + Your widgets + A few internal helper functions. The word "Editor" was really inaccurate here. "Preview" or "Engine" could have been better. Sorry the confusion.
Wait its not OSS? Thats disappointing to see. Not because I need it to be free but because it now means I must rely on upstream bugfixes and support. Lame
UI editors are supposed to be mostly point and click to change things. This seems like it's mostly typing xml code with a preview window and not a whole lot of point and click. Your largest user base is going to be people that are not experienced in writing a whole lot of code. This is why the point and click needs to be first and foremost and the code editor should be second. It looks like you are placing priority on the code editor which is basically making an LVGL specific IDE at this point and not really a UI editor.
We might add a basic mouse handling to reposition and resize the widgets, however priority is clearly not this. While we were developing LVGL UI's we have faced the limitations of writing code (you need to re-compile/re-flash to see the result) and the drag-and-drop UI editors (not developer friendly and limited features). These are some of the issues that we wanted to solve. Having a textual editing with good auto completion to create widgets and adjust properties is not that different form a property panel in other tools, but it gives you a lot more freedom: - Simple version tracking - Easily adjustable hierarchy - Simple AI integration - Use of already existing tooling (XML libs)
@@lvgl visual code studio does all of that pretty well. What suqareline did was provide a UI editor where I could see my widgets, move them around whenever necessary, add screens and make simple code functions and export it all ready to actually code in a proper IDE. What utility does this offer any lvgl user who doesn’t need or care about xml, but needs a replacement for squareline?
You are wrong. LVGL by it's very concept requires you to be able to code. And LVGL is mostly used by developers, to make their lives easier when creating embedded UIs. The guys from LVGL did a great job
@iliasalaur We also think that there is no one size fit all. It seems to us there are these categories of users: 1. Designer: They have nothing to do with LVGL -> Use Figma 2. Hobbyist without developer skills: Need no-code/low-code tools -> Use SquareLine or EEZ Studio. 3. Hobbyist with technical skills: Use LVGL as it is or the free version of our tool to speed up up the development 4. Small companies: Use LVGL and the free version of our tool to speed up up the development 5. Larger companies with designers: Use LVGL and buy a licence for this tool for better collaboration features 6. Enterprise companies: Use LVGL and plugin-able version of our tool for deep customization I think most of questions are about group #2. In short - To be honest we don't see a big business value in this group - We are good at understanding and serving developers needs, so this group would be a new and somewhat unknown to us Therefore our focus in mostly on #3-6, and providing a best effort level support for #2.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
Very good job guys, been waiting for this moment for couple of years. Incredible that such a wonder as LVGL still remains free and open source.
Thanks to all collaborators 😊
Thank you so much! Trying our best! 😊
Awesome! Sterling effort. I understand some of the comments about it basically being an XML to C converter (ish) but as a developer I consider the XML approach clean and easily maintainable by people of all levels. Thanks for all your hard work.
incredible job guys, thank you for providing community with such a great tool like lvgl! we all appreciate your work and truly wish you all the best! thank you!
Thank you! ^^
Dear LVGL developers, I've been programming 25 years, and the problem that causes me the most headaches is good UI. Have never found anything that hits that sweet spot across all platforms, from embedded, to the browser. But this actually does! I wanted to say thank you for everything you've done, this is truly amazing.
Thank you for the kind words! :)
In your sentence "across all platforms, from embedded, to the browser" I understand the "embedded" part but I'm very curious how you mean the "browser" part, as this is an area which we are not focusing actively on. So what is your browser related use case with LVGL?
Very impressed, looking forward starting to play around with it!
Thank you! ^^
This looks really interesting! - will look forward to trying it out.
Very impressive addition to a great framework
That's amazing! I had a similar idea to create something like this and was even working on it. I'll try to contribute if I can. Thank you for bringing this tool to life!
Amazing! Thank you for offering you help! I'm sure that there will be many ways to contribute in the near future ❤
It looks very nice. I hope this can work together with coding assistance tools like Cursor and Copilot.
Actually having a textual representation of the UI makes it quite straightforward to use AI tools with it. Even normal chatgpt when it learns our XML.
That is amazing! As a coding guy this is the perfect way for me to get to my ui! What does the "This Widgets are very similar" at 5:50 mean? Can you describe the difference between self made Widgets and the LVGL Widgets?
Happy to hear it! ^^ It means that the generated widget also uses LVGL classes, they have a constructor, destructor, event handler, and a struct (e.g. lv_slider_t) where you can store widget specific data.
Looks great! But I’m curious, why isn’t there a 60Hz preview option? It would be super helpful for designing smooth animations and transitions. Any plans to add that?
Of course, animation support is also on the roadmap, but to be honest we are still not sure how to approach them in the best way. We have a few ideas in mind, but nothing is decided yet. What do you exactly mean by 60Hz preview option?
where can I download and try the editor?
I am interested in how many LVGL customers have separate UI design teams. Several companies have tried to go down the route of separating UI design from coding and I can't think of many (any) that still do this.
We have the opposite experience. Even small companies without designers are creating designs in Figma. Maybe these designs are done by engineers or managers, but it's still easier for them to use a tool where there are no technical limitation and they can explore freely.
So we clearly the emerging trend of using Figma for design.
I am so curious about XML, Why don't use HTML which is friendly for UI desinger, If I hire a web UI desinger for LVGL project, most of time they only know HTLM
LVGL supports a lot of HTML/CSS like features but there are some differences too. In order to don't limit ourselves to the HTML standard, we have created a HTML-ish XML syntax which has a smooth learning curve for web developers too.
Although it cannot be seen this video yet, but the XML editor will have a lot of auto complete features to make the development intuitive.
Just adding in again but I think you may wish to give serious consideration to either making a separate UI designer, or incorporating that into this.
What you’ve effectively done here is build an xml editor that will let coders use xml instead of C to make lvgl UIs.
That great but that’s NOT what the community is really looking for, nor is it a replacement for square line now you’ve parted ways.
What pretty much everyone I’ve chatted with has said is “a WYSIWYG editor would be great”. Something with an animation editor/timeline creator cos animating by hand in code is just horrible, a full on point-and-click ui designer so I can see in real time where my widgets are, not need to change the code, recompile, load onto the device/simulator, look at it, go back to the code, move 2 pixels up, etc etc
I’m not being critical of the work done here. It’s very good for what it is. But it’s not what is needed. An xml-to-c bridge is possibly what some companies would like for their pipeline, but a lot of actual users would love a UI editor, like square line tried and failed to be. Something that can read your code, display the UI on screen, and turn that UI into new code once you’re done moving stuff around.
thank you so much and again this is amazing! do you consider adding micropython support?
Yes! ^^ We are contact with core Micropython developers who will helps us with the Micropython code export part.
@@lvgl fantastic!
Wooah, that's Great! Can we create TFT display UIs with this IDE easily? I couldn't create my TFT Display UIs easily with Squareline Studio. It always gives legal library compatibility issues.
> Can we create TFT display UIs with this IDE easily?
That's the goal 😊
What was the exact problem with SquareLine? I'd like to make sure that we don't do the same mistake. 😀
I see a lot of uncertainty about the business model on the forums, hopefully the free version will be good enough for small businesses, or you can allow a low cost monthly subscription. The Squareline studio comes up to like 700$ USD (Paid at once) for a year which is pretty hard to justify when trying to develop a product, theres a thousand other things to pay for, such as real physical hardware, production tooling , labor etc. My subscription is ending in 3 months and i really really dont want to be hostage to a high-cost software.
We have added a description about the planned business model here: github.com/lvgl/lvgl_editor?tab=readme-ov-file#business-model
So basically what SquareLine knows now should be included in the free version. We would like to ask a licensing fee for high-end features such as collaboration features, multi-language support, etc. These are typically required for larger companies where a few thousand USD is not an issue.
I think it would be valuable if there was a objects area with each possible object (widget type, style etc.) was available as a list with some description,
with the built in widgets there could also be a small example preview and small descriptive text (What it's used for etc.).
Make it searchable and context aware, ie. shows only relevant objects depending on where you are in the xml file.
If you drag the object into the xml area the basic XML tag could be created.
This would make it A LOT more easier for new users and also easy the mental load on more experienced users.
A nice compromise when not doing full WYSIWYG IMHO.
We are thinking about something similar too. However a context sensitive menu might work better. If you click inside the tag you will be prompted with the possible widgets/components that you can create. If you click inside e.g. a slider you will see the possible slider properties. Same for the styles.
Regarding the description, we are perfectly on the the same page. Help description should be built in to the editor. E.g. if you hover on a slider tag a style property a description tool tip should appear.
@@lvgl I think you ideas are fine, and would make coding a lot more efficient, but they don't solve the main problem for newbies, simply not knowing what widgets are available and what is possible with them.
Examples of course helps to a degree, but going back and forth isn't very effective. So I still think that a side pane with widgets and information might have a value.
What do you think?
I think we are on the same page. I hope we can add something like this in the next release.
So is LVGL ready for build also Desktop apps for Linux/Windows not just embedded? I want to consider it as lightweight alternative for Gnome.
It's certainly doable. LVGL has a lot drivers built in (DRM, Wayland, Windows, etc.) It's not as complete as Gnome for desktop development, but for embedded-like application LVGL's is definitely a good choice.
@@lvgl I understood it this way, that LVGL was primary created for embedded applications. Few years back, when I was searching for desktop GUI and LVGL didn't support desktop very well. But know I see this is changing. Gnome is heavy. I prefer something lightweight. LVGL seems to be perfect. Now I saw, that even you yourself build desktop apps with LVGL. Am I right? In any way, Thank you!
@@Zero-oq1jk I see now! We definitly planning to add some more desktop features, such as feature rich text editor. with hot key support, but it's for 2025 or 2026.
Note that the editor is not created with LVGL but with Electron, Node.JS and React. The preview part is compiled to WebAssembly using Emscripten, so it's really LVGL but running as part of a webpage. github.com/lvgl/lv_web_emscripten/
Wow, Gábor! That's pretty impressive! What is it that is displaying the application window? An executable or browser?
Thank you Vic :)
It's Electron + Node.JS based.
UI editor is great, but really, the biggest problem with LVGL is the lack of docs. I just spent 3 days coding a custom widget and it's insanely hard when there's no docs, no examples, no emo code, and no support for C at all.
If anyone else reads this and is also stuck, the lvgl_conf.h file needs the "allow private api" setting enabled, or custom widgets don't work.
Thank you for the quick feedback!
I think you are right. Now we don't have a dedicated docs to create a new widget. My approach was that the existing widgets serve as good examples to get started, but it's definitely not replacing a detailed docs. We will prioritize it!
@@lvgl thanks; my example was just an example tho of the state of the lvgl documentation - what is there is good, but the docs are missing in places and the examples code is quite often not well documented either so you're left to sort of try everything until you stumble upon what works. More examples, better code documentation and maybe even detailed example projects would be helpful. Eg. here's how to draw things, here's how you create a custom widget, here's how a full example project looks - Adafruit do this really well and I se in LVGL so much potential, and better docs are at the heart of that.
Also, I'm going to released my widget code onto the forums once I've got it working better. I can see (after exhaustive searching) only TWO other custom widgets with actual code for any version of LVGL. Mine is a circular keyboard, since so many LVGL uses will use a circular display, like smartwatches and gauges, having a radial keyboard seems like a no brainer...
@@wizarddrongo
Docs: Noted, thank you.
Your widgets: I'd love to see your circular keyboard! 😍
What do you mean by "no support for C at all"? Isn't LVGL all C?
@@Zero-oq1jk I meant there's no support for custom widgets in C in teh docs - the micropython docs have an example code but there's nothing in the C.
Its good to see we have new ui editor but im preferre squarline studio more, for example im a professional game developer that works with unity engine and for ui i can make whole a ui pagr under 5 minute, i think its better to instead of code we have professional drag and drop editors to make ui, although im conider to make one for my self that generates lvgl code, i gonna happy if i can help lvgl team
Thank you for sharing your honest opinion! We needed to realize that there is no one size fit all solution. That is we can't create a tool which fits for everyone. As SquareLine is already a low code/no code tool, we wanted to address a different market.
Also thank you for offering your help. In few days we will release v0.1. It'd be amazing if you could try it out and tell us what about think. The more feedback we hear the better the tool we can develop. :)
Is this opem source?
Nope, the editor itself is closed, however the XML loading is already part of LVGL: docs.lvgl.io/master/details/other-components/xml.html
I’m new but don’t understand the difference and relationship between this and squareline studio…
Amazing question: at the beginning of 2024 we have decided the part our ways with SquareLine because we couldn't agree on some conceptual and business related matter. However, we didn't want to let you without an official LVGL editor tool so we started to explore the possibilities and eventually begun the development.
It seems we need to create a follow up video to answer the great questions that you have asked here :)
Yes a breakaway from Squareline studio.
In a good or bad way? 😄
You make this statement.. " You can recompile the editor to make it contain the new widgets' code." No I can't because it is closed source. so that's not an option.
The part you can recompile is LVGL + Your widgets + A few internal helper functions. The word "Editor" was really inaccurate here. "Preview" or "Engine" could have been better. Sorry the confusion.
Wait its not OSS? Thats disappointing to see. Not because I need it to be free but because it now means I must rely on upstream bugfixes and support. Lame
UI editors are supposed to be mostly point and click to change things. This seems like it's mostly typing xml code with a preview window and not a whole lot of point and click.
Your largest user base is going to be people that are not experienced in writing a whole lot of code. This is why the point and click needs to be first and foremost and the code editor should be second. It looks like you are placing priority on the code editor which is basically making an LVGL specific IDE at this point and not really a UI editor.
As far as I understood this tool is intended for developers (who can code), and figma is meant for UI designers.
We might add a basic mouse handling to reposition and resize the widgets, however priority is clearly not this.
While we were developing LVGL UI's we have faced the limitations of writing code (you need to re-compile/re-flash to see the result) and the drag-and-drop UI editors (not developer friendly and limited features).
These are some of the issues that we wanted to solve. Having a textual editing with good auto completion to create widgets and adjust properties is not that different form a property panel in other tools, but it gives you a lot more freedom:
- Simple version tracking
- Easily adjustable hierarchy
- Simple AI integration
- Use of already existing tooling (XML libs)
@@lvgl visual code studio does all of that pretty well.
What suqareline did was provide a UI editor where I could see my widgets, move them around whenever necessary, add screens and make simple code functions and export it all ready to actually code in a proper IDE.
What utility does this offer any lvgl user who doesn’t need or care about xml, but needs a replacement for squareline?
You are wrong. LVGL by it's very concept requires you to be able to code. And LVGL is mostly used by developers, to make their lives easier when creating embedded UIs. The guys from LVGL did a great job
@iliasalaur We also think that there is no one size fit all. It seems to us there are these categories of users:
1. Designer: They have nothing to do with LVGL -> Use Figma
2. Hobbyist without developer skills: Need no-code/low-code tools -> Use SquareLine or EEZ Studio.
3. Hobbyist with technical skills: Use LVGL as it is or the free version of our tool to speed up up the development
4. Small companies: Use LVGL and the free version of our tool to speed up up the development
5. Larger companies with designers: Use LVGL and buy a licence for this tool for better collaboration features
6. Enterprise companies: Use LVGL and plugin-able version of our tool for deep customization
I think most of questions are about group #2. In short
- To be honest we don't see a big business value in this group
- We are good at understanding and serving developers needs, so this group would be a new and somewhat unknown to us
Therefore our focus in mostly on #3-6, and providing a best effort level support for #2.
looks to me that someone recently invested in LVGL and my question is how the "cash grab" is going to look.