LVGL Editor v0.1 is released!

Announcements
1

We are proud to announce the release of LVGL Editor v0.1! :tada:

You can Download it and Get Started at GitHub - lvgl/lvgl_editor

This video provides a step-by-step guide to all the support features, including:

  • Installation
  • Getting the examples
  • Components and Widgets with custom code
  • Figma plugin
  • Online preview

We received many amazing questions in the comments of the Preview video. Let us address them here as well:

:technologist: Who is the target audience for this tool?
We believe designers should use designer tools, and developers should use developer tools. That’s why we developed this editor specifically for developers, with a strong focus on seamless integration with Figma.

:magic_wand: Will you add drag-and-drop features?
Not in the traditional sense, but we aim to make the Editor highly user-friendly without requiring knowledge of specific commands or keywords. This will be achieved through extensive auto-complete functionality, context-sensitive help boxes, and minor features that allow you to use the tool effectively without reading lengthy documentation.

:globe_with_meridians: Why did you choose XML instead of HTML, JSON, or YAML?
While all web developers are familiar with XML due to HTML, we didn’t want to be constrained by the HTML standard. XML is also widely used and well-suited for describing UIs, making it a battle-tested and flexible choice.

:green_apple: Will there be a Mac version?
Yes, as well as a VSCode plugin. Mac support is a bit more complex than other platforms, but we’re actively working on it.

:calendar: What is the release schedule?
We plan to release v0.2 and v0.3 every three months, culminating in v1.0 by September 2025. In v0.2, we will introduce numerous UX-related features to make the Editor more intuitive and user-friendly.

:unlock: Is this tool open-source?
No, the tool is closed-source. However, we will provide a free version suitable for makers and small companies. We also plan to support open-source projects in some form (details TBD).

:open_file_folder: Will LVGL remain open-source in the future?
Absolutely! LVGL will continue to be free and open-source under the MIT license.

:man_office_worker: How is this tool related to SquareLine?
Like many other solutions (e.g., GuiGuider, EEZStudio), SquareLine Studio also uses LVGL under the hood. For context, LVGL worked with SquareLine with the hope that it could become an Official LVGL UI Editor. However in January 2024 following key differences in our visions we decided to part ways. As a result, LVGL is no longer associated with SquareLine Studio.

:hugs: How can I tell you my feedback or report issues?
Please leave your feedback in: Issues · lvgl/lvgl_editor · GitHub
See you on GitHub! :blush:

3 Likes
4

It doesn’t do anything. It says to open a project and that is the only thing to click on. I don’t have a project made and there is no option to create a new project. When I do click on open a project it tell me to select a folder and I do and when I click on the OK button it drops me back to the UI editor where it states that I have not opened a project and there is a button to select a directory. it is stuck in that endless loop with nothing else to click on.

5

Hey,

See my comment here.

6

I seen it. I didn’t even think about opening an issue. I am brain dead today…

7

Cool, I am gonna try it asap!

8

I looked at this and my first thoughts were, what is it, how is it used and how is it implemented; the 30,00O foot view, or the view of the forest. Then I saw the video and thought, that will explain it, However, the video immediately dives into the trees and never comes out before I got bored with it and gave up because it wasn’t answering the top level question. Why should I invest my time in trying to understand this product?

You guys do brilliant detailed work but a simple explanation is needed. What is it? What does it do? How is it used? How is it implemented?

9

Thanks for the feedback! I’ll try to do it better next time!

I wonder exactly what context did you miss:

What is it?

UI Editor for LVGL

What does it do?

It’s really not explained very well. I should have also mention that why is it useful/better/etc than plain LVGL. What problems it solves.

How is it used?

IMO this the whole video is about how to use it.

How is it implemented?

To what extent would it be interesting? E.g. mention that it’s Node.JS + Electron?

10

@kisvegabor Is the GUI editor live rendering is implemented using CSS or its doing native pixel rendering using a simulator?

Is the XML being compiled in realtime to C to render using a simulator or the styles are converted to some HTML CSS?

11

Ok, so it is a UI Editor for LVGL. Got it!

Is it along the lines of Squareline? I haven’t tried Squareline because the new pricing structure has made it too expensive for a hobbyist, but what it claims to do is interesting.

When I said “How is it used” I did not mean the details of “how to use it” which is what the video does. I meant is it a stand-alone product or does it have to be integrated into an IDE like VSCode or Visual basic. BTW, trying to load the LVGL simulator into VSCode was a twenty hour fail. I then tried loading it into Visual Studio which was straight forward, but trying to find the example files and run them was an undocumented ten hour fail as far as I could tell. It was far, far from simple like maybe how the Arduino IDE works. Load an example.ino and off you go studying the code and running it. In the LVGL simulator implementation on Visual Studio the main.ccp files are buried deep in the structure and seem to be intertwined with the files that run the simulator. It is very confusing!

How it is implemented is another miscommunication. The question is again. As a LVGL UI editor Is it a standalone product that makes it simple to load LVGL examples, review the code and run them (i.e. a user friendly LVGL IDE.) Attempting to load LVGL into an IDE that implements an LGVL simulator has been a fruitless time sync.

What I am asking for is the top-level description. The problem it needs to solve is what is missing from LVGL, an easily downloaded and installed open source LVGL IDE that allows the user to focus on coding an LVGL GUI and simulate it instead of having to learn multiple IDEs and then attempt to configure them to implement an LVGL simulator on one.

Hopefully, the LVGL code will be in functions that can be called from commonly used MCU IDEs.

Thanks for getting back to me

12

@hnelectronix

Is the GUI editor live rendering is implemented using CSS or its doing native pixel rendering using a simulator?

The preview is rendered by LVGL. So it’s pixel perfect.

Is the XML being compiled in realtime to C to render using a simulator or the styles are converted to some HTML CSS?

With a new feature LVGL you can load XMLs directly. So we re running LVGL in the preview and “just” load the XMLs.

13

I see now.

Yes, it’s similar to SquareLine, but SquareLine is a low-code tool focusing on drag-and-drop (mouse) input, while we are targeting developers and building a developer friendly tool which works well with developer workflows (writing code, version tracking, external XML tooling, GitHub CI/CD etc).

Now it’s a standalone desktop app, but v0.2 should be work as VSCode plugin and hopefully as an Eclipse plugin too.

But it’s not an IDE. You can edit UIs, export code, which can be loaded in to and IDEs (just like any other code).

Regarding the VSCode problem, please open an issue in its repo. If something is not documented correctly, we’d be happy to update it.

14

Thanks Kisvegabor,

That explanation helps. Does it have a simulator?

I was actually attempting to use the LVGL simulator on PC with platformIO in VSCode and continually got compile errors. The simulator window would flash up briefly and close. Just the fact that it is using three “platforms” seems to make it prone to the experience I had.

Again, what I hope to find is much less effort and complexity in configuring an environment to allow me to focus on coding and simulating a UI that can be included as callable functions in arduino projects. Hopefully a standalone version that allows exporting the UI code will eliminate the configuration issues.

15

Never-mind the question about the simulator. I watched the video. :blush:

1 Like
16

If it could become a VSCode plugin, that would be fantastic!
Since I always use a Windows development environment and my computer is under management, and I have never used Docker before, installing Docker is very difficult. I have not yet completed the first step of the tutorial. I saw your comment saying that it will not rely on Docker in the future, and I look forward to that day.

17

Another question, can the UI created with the editor be exported as C files only, without referencing any XML-related files?

18

The single fear I have with the mechanics of the editor is the XML loading by LVGL. If you have an involved UI that XML is going to be large and it is going to take up a whole lot of flash and also RAM when parsing the XML files. We are working with already tight resources on these MCU’s and due to how fat XML is it could cause problems to work within the resource limitations of an MCU.

Maybe using a standard that is more light weight. Something like YAML comes to mind. It is a seasoned format and I believe it has all of the data types that would be needed to get the job done. It is far easier to parse and it is going to have a smaller code footprint both on the actual written YAML code but also the parsing code.

Also remember what is good in a simulator is not always good in production. What I mean by that is if you are using a 3rd party library to parse the XML data getting that library to compile for an MCU can sometimes be a really big headache. as an example, Compile LVGL with rlottie for the ESP32 using the esp-idf. You would have to write a whole new build script for rlottie so it will work with the esp-idf build system.

I don’t think you would have coded an XML parser specifically for LVGL. I could be wrong…

19

I really like the runtime xml loading feature. For my own project this means, instead of language bindings I could just use an xml injector.

Question 1: will it support partial replacement of nodes through xml (like innerHTML in JavaScript) ? - Maybe this is already possible, but I did not spot it in the docs yet?

Question 2: Is it possible (or will it be possible) to set the widget id through xml? id=“…” ?

20

To answer my own 2nd question: there is no way to set id through xml yet. I am preparing a pull request for this.

PR issued: feat(xml): allow to set obj id through xml by gabordemooij · Pull Request #7633 · lvgl/lvgl · GitHub