├── .github └── workflows │ └── publish-tests.yml ├── .gitignore ├── .nojekyll ├── README.md └── examples ├── components ├── README.md ├── checkbox │ ├── checkbox.xml │ ├── checkbox_gen.c │ └── checkbox_gen.h ├── column │ ├── column.xml │ ├── column_gen.c │ └── column_gen.h ├── header │ ├── header.xml │ ├── header_gen.c │ └── header_gen.h ├── icon │ ├── icon.xml │ ├── icon_gen.c │ └── icon_gen.h ├── row │ ├── row.xml │ ├── row_gen.c │ └── row_gen.h ├── setclock │ ├── setclock.xml │ ├── setclock_gen.c │ └── setclock_gen.h ├── subtitle │ ├── subtitle.xml │ ├── subtitle_gen.c │ └── subtitle_gen.h └── title │ ├── title.xml │ ├── title_gen.c │ └── title_gen.h ├── examples.c ├── examples.h ├── examples_gen.c ├── examples_gen.h ├── fonts ├── Inter-SemiBold.ttf ├── Inter_SemiBold_ttf_data.c └── README.md ├── globals.xml ├── images ├── README.md ├── bell-solid.png ├── bluetooth-brands.png ├── img_bell_data.c ├── img_bluetooth_data.c ├── img_wifi_data.c └── wifi-solid.png ├── project.xml ├── screens ├── README.md └── settings │ ├── settings.xml │ ├── settings_gen.c │ └── settings_gen.h ├── ui.c ├── ui.h └── widgets └── README.md /.github/workflows/publish-tests.yml: -------------------------------------------------------------------------------- 1 | name: Publish Examples 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | workflow_dispatch: 8 | 9 | jobs: 10 | build-and-deploy: 11 | runs-on: ubuntu-latest 12 | permissions: 13 | contents: write 14 | pages: write 15 | id-token: write 16 | 17 | steps: 18 | - name: Checkout current repository 19 | uses: actions/checkout@v4 20 | with: 21 | path: "current-repo" 22 | 23 | - name: Set up Docker 24 | uses: docker/setup-buildx-action@v3 25 | 26 | - name: Pull Docker image 27 | run: docker pull lvglio/emscripten-sdl2:0.1.0 28 | 29 | - name: Setup Node.js 30 | uses: actions/setup-node@v4 31 | with: 32 | node-version: "18" 33 | 34 | - name: Clone editor-online-preview repository 35 | run: | 36 | git clone https://github.com/lvgl-private/editor-online-preview.git /tmp/online-preview 37 | 38 | - name: Clone latest LVGL 39 | run: | 40 | # Create runtime directory 41 | mkdir -p /tmp/runtime 42 | # Copy resources to runtime directory 43 | cp -r /tmp/online-preview/runtime/* /tmp/runtime/ 44 | # Clone LVGL PR 45 | git clone https://github.com/lvgl/lvgl.git /tmp/runtime/lvgl 46 | 47 | - name: Prepare preview files 48 | run: | 49 | mkdir -p /tmp/online-preview/project 50 | cp -r current-repo/* /tmp/online-preview/project/ 51 | rm -rf /tmp/online-preview/project/runtime 52 | 53 | - name: Generate manifest file 54 | run: | 55 | cd /tmp/online-preview 56 | node generateProjectManifest.js ./project/ project/ 57 | 58 | - name: Build LVGL library 59 | run: | 60 | docker run --rm \ 61 | -v /tmp/runtime:/work \ 62 | -w /tmp \ 63 | lvglio/emscripten-sdl2:0.1.0 \ 64 | sh -c 'apt-get update && \ 65 | apt-get install -y python3-venv && \ 66 | cd /work/lib && \ 67 | mkdir -p /tmp/build && cd /tmp/build && \ 68 | emcmake cmake /work/lib && \ 69 | emmake make -j$(nproc)' 70 | 71 | - name: Build runtime 72 | run: | 73 | # Create build directory 74 | mkdir -p /tmp/build 75 | 76 | # Run CMake in Docker 77 | docker run --rm \ 78 | -v /tmp/runtime:/work \ 79 | -v /tmp/online-preview/runtime:/output \ 80 | -v /tmp/build:/build \ 81 | -v /tmp/online-preview/project/examples:/user_src \ 82 | -w /build \ 83 | lvglio/emscripten-sdl2:0.1.0 \ 84 | sh -c 'emcmake cmake -DPROJECT_NAME=lved-runtime \ 85 | -DOUTPUT_DIR=/output \ 86 | -DLVGL_SRC_DIR=/work/lvgl \ 87 | -DLVGL_CONF_DIR=/work/conf \ 88 | -DUSER_SRC_DIR=/user_src \ 89 | -DCMAKE_C_FLAGS="-I/user_src" \ 90 | /work && \ 91 | cat /user_src/examples_gen.h && \ 92 | emmake make -j8' 93 | 94 | - name: Upload artifact 95 | uses: actions/upload-pages-artifact@v3 96 | with: 97 | path: /tmp/online-preview 98 | 99 | - name: Deploy to GitHub Pages 100 | uses: actions/deploy-pages@v4 101 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | project_local.xml -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # LVGL's UI Editor 2 | 3 | This repository contains public content related to the LVGL Editor. 4 | 5 | 6 | ## Introduction 7 | 8 | LVGL's UI editor is a work-in-progress tool designed to help UI developers create embedded UIs faster and more maintainably. The key features of this tool are: 9 | 10 | - **Component-oriented**: Various UI elements can be implemented as reusable components. 11 | - **XML-based**: Components are described in an HTML-like syntax. 12 | - **Instant preview**: Components can be previewed as you edit them. 13 | - **Figma support**: LVGL's Figma plugin helps quickly extract styles from any Figma elements. 14 | - **Online preview**: A CI action converts XML files into a website for easy preview. 15 | - **Custom widget creation**: Unlike components, widgets have C logic. You can recompile the editor to include new widgets' code. 16 | - **C export**: Both components and widgets can be exported to C, enabling seamless integration into your application, just like handwritten code. 17 | - **Runtime XML loading**: Components can be loaded from XML at runtime without recompiling the firmware. 18 | 19 | This tool is **developer-centric**, designed for those who bring designer-created UIs to life. It’s not a drag-and-drop tool for designers but assumes users are comfortable with writing and managing code. The editor complements your workflow, enabling seamless transitions between generated and handwritten code. Use it where it’s more efficient, and code directly when better suited. 20 | 21 | We believe designers should work freely in tools like Figma, focusing on creativity without limitations. LVGL's editor helps developers structure and implement these designs in a maintainable, scalable way. Our goal is to bridge the gap, empowering both designers and developers to excel in their roles. 22 | 23 | --- 24 | 25 | This video provides a step-by-step guide to all the supported features. A new video for v0.2 is coming soon. 26 | 27 | [![image](https://github.com/user-attachments/assets/2c72c3c9-44fa-4ae4-8616-867e2efe3209)](https://www.youtube.com/watch?v=YEoHK5P0ASE) 28 | 29 | ## Get Started 30 | 31 | 1. **Install Docker**: Docker is required to compile your code and integrate it into the editor. Find the Docker installation guide [here](https://docs.docker.com/engine/install/). On Windows make sure that `Docker Desktop` is running. 32 | 2. **Download and install the Editor.** Find the installers [here](https://github.com/lvgl/lvgl_editor/releases). 33 | 3. **Fork and clone this repository** to experiment with its CI actions and online preview features. In the repository settings set the source of `Pages` to `GitHub Action`, and on the `Actions` page enable actions. 34 | 4. **Open the editor** and load the example folder. 35 | 5. **Prepare the Project** Generate C code by clicking the ![image](https://github.com/user-attachments/assets/f2c720b6-19cf-4abd-a79b-ac31b2cc0fec) 36 | `Generate Code` button first and click ![image](https://github.com/user-attachments/assets/8cb7fb0b-bde3-4be7-af31-10131c5c9476) 37 | `Compile Project` button after that to recompile the Editor's preview with the new C code. 38 | 6. **Edit components**: Open `button_default.xml` and make edits. Save the file (Ctrl+S) to update the preview. Learn more about LVGL's XML language [here](https://docs.lvgl.io/master/details/other-components/xml.html). 39 | 7. **Edit a widget**: Open `slider_box.xml` (a widget) and click "Compile Code." It will compile the C code alongside the widget's XML. Feel free to edit the C code and recompile it. 40 | 8. **Check out Fonts and Images**: Open `globals.xml` to see how images and fonts are handled. 41 | 9. **Open the [Figma project](https://www.figma.com/design/itmQpC9m5HessaOZFbYTwK/Example?node-id=0-1&t=oWqPUdcRyVYtRgAY-0)** and duplicate it. 42 | 10. **Use the Figma to LVGL plugin**: Open our plugin, modify the design, and update the XMLs with the new styles. 43 | 11. **Try the online preview**: Commit and push your changes. Wait for the CI to run and check the online preview. 44 | 12. **Open an issue** if you encounter problems or get stuck. 😊 45 | 46 | ## Current Status and Future Plans 47 | 48 | This is an early preview of the UI editor, so only core functionalities are supported at this moment. 49 | The goal is to demonstrate the development direction and gather feedback for adjustments. 50 | 51 | **Note**: This version is for preview purposes only and not suitable for production. 52 | 53 | ### Currently Supported Features 54 | 55 | - Most of the built-in widgets (`lv_obj`, `lv_label`, `lv_slider`, `lv_button`, `lv_chart`, `lv_scale` etc.). 56 | - Load XML components at runtime from files or data (part of LVGL as an open-source MIT-licensed feature). 57 | - Style sheets and local styles supporting most of the style properties. 58 | - Nest components and widgets at any depth. 59 | - Dynamically instantiate XML components in C. 60 | - Register images and fonts accessible by name in XML 61 | - Use constants for widget and style properties. 62 | - Define, pass, and use parameters for components. 63 | - XML auto-completion, and syntax error highlighting. 64 | - Inspector mode to drag and resize the widgets by mouse 65 | - Event and subject handling. 66 | - VSCode plugin 67 | - Update style properties from Figma 68 | 69 | Please refer to the examples to learn the XML syntax or read [this page](https://docs.lvgl.io/master/details/auxiliary-modules/xml/index.html) for more information. 70 | 71 | ### Future Plans 72 | 73 | We aim to release v0.3 in **July 2025**, which will include: 74 | 75 | - Translation support. 76 | - Eclipse plugin 77 | - Link images to Figma 78 | - Theme switching support 79 | - Debug panel to adjust subject 80 | - Animations 81 | 82 | ## Business Model 83 | 84 | During development, everything will be free. After v1.0 (targeted for **Q3 2025**), we plan to introduce the following models (subject to change): 85 | 86 | ### Free Version: 87 | - No limitations on the number of components. 88 | - No access to the Figma plugin or online preview. 89 | - No support for custom widgets (i.e., recompiling the editor). 90 | - No multi-language UI translation support. 91 | - Some advanced features may be disabled. 92 | 93 | **Target Audience**: Makers and small companies. 94 | 95 | ### Yearly Subscription 96 | - Access to all editor features (e.g., multi-language support, custom widgets). 97 | - Figma plugin and online preview support. 98 | - Free for open-source projects (requires regular updates to ensure the project remains open-source). 99 | 100 | **Target Audience**: Teams with designers and developers requiring collaboration. 101 | 102 | ### Enterprise Version: 103 | - Plugin support for deep customization (e.g., custom buttons, themes, XML processing, code export hooks). 104 | - Integration with custom applications or CI workflows via CLI. 105 | - Collaborative development, including feature development as a service. 106 | - Custom pricing based on specific needs. 107 | 108 | **Target Audience**: Large enterprise companies and vendors requiring custom tools and features. 109 | 110 | ## Contribution 111 | 112 | Just like LVGL, we are developing this tool for you. We want to add the features you need, not just what we think is useful. 113 | 114 | Please open an issue in this repository to share your feedback. Your input will help shape the development of LVGL's UI Editor! 115 | 116 | Thank you! ❤️ 117 | -------------------------------------------------------------------------------- /examples/components/README.md: -------------------------------------------------------------------------------- 1 | Create XML files here that start with a `` tag -------------------------------------------------------------------------------- /examples/components/checkbox/checkbox.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |