LVGL Live Preview

Live preview for LVGL C code with automatic hot-reload in VS Code

Overview

LVGL Live Preview is a Visual Studio Code extension that provides real-time preview of LVGL (Light and Versatile Graphics Library) C code. It compiles your LVGL code using Emscripten to WebAssembly and displays the result in a live webview panel with automatic reloading on file changes.

Features

• 🚀 Live Preview: See your LVGL UI in real-time as you code
• 🔄 Hot Reload: Automatic recompilation and refresh on file save with full WASM module reloading
• 🎨 Interactive: Full mouse/touch input support
• ⚙️ Configurable: Customize display size, LVGL version, and compiler optimization
• 📦 Zero Setup: Emscripten SDK is downloaded and installed automatically
• 🎯 Single File: Works with single C files containing LVGL code
• 🔍 Error Reporting: Inline diagnostics for compilation errors
• ♻️ Reliable Reloading: Webview recreation ensures clean module reloading on every change

Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "LVGL Live Preview"
4. Click Install

From Source

git clone https://github.com/TheMasterCoder007/lvgl-live-preview.git
cd lvgl-live-preview
npm install
npm run compile

Then press F5 to run the extension in development mode.

Quick Start

1. Create a new C file with LVGL code
2. Define a lvgl_live_preview_init() function (required entry point)
3. Press Ctrl+Shift+L or run "LVGL: Start Live Preview" from the command palette
4. Wait for Emscripten to download (first time only, ~200MB)
5. Your LVGL UI will appear in a webview panel!

Example Code

#include "lvgl.h"

void lvgl_live_preview_init(void) {
    // Create a simple button
    lv_obj_t *btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, 120, 50);
    lv_obj_center(btn);

    lv_obj_t *label = lv_label_create(btn);
    lv_label_set_text(label, "Hello LVGL!");
    lv_obj_center(label);
}

Requirements

• Required Entry Point: Your C file must define a void lvgl_live_preview_init(void) function. This is where you initialize your LVGL UI.
• LVGL API: Use standard LVGL API calls. The extension supports LVGL v8.x and v9.x.
• Single File: Currently, only single-file previews are supported (multi-file support is planned for the future).

Configuration

Access settings via File > Preferences > Settings and search for "LVGL Preview":

Commands

How It Works

1. Emscripten Setup: Downloads and installs Emscripten SDK on first use
2. LVGL Download: Downloads specified LVGL version from GitHub
3. Library Compilation: Compiles LVGL library to static library (cached per version/settings)
4. User Code Compilation: Compiles your C file with LVGL
5. WASM Generation: Links everything into WebAssembly + JS glue code
6. Preview: Displays in webview with SDL2 canvas rendering
7. Hot Reload: Watches file changes, recompiles, and fully reloads the WASM module through webview recreation

Technical Details: Hot Reload Architecture

The extension uses webview recreation to ensure reliable WASM module reloading:

• Initial load creates a webview panel with the WASM module
• On file changes, the entire webview is disposed and recreated
• Each reload gets a completely fresh JavaScript execution context
• This prevents runtime state conflicts and memory leaks from Emscripten's persistent globals
• The recreation is fast (~100ms) and provides a clean slate for each reload

This approach solves the common problem of Emscripten modules failing to reload due to persistent global state by letting VS Code handle the cleanup automatically.

Troubleshooting

Emscripten Download Fails

• Check your internet connection
• Try clearing the cache: Run "LVGL: Clear Cache"
• Manually download from the output channel for details

Compilation Errors

• Ensure you have defined lvgl_live_preview_init() function
• Check the Problems panel (Ctrl+Shift+M) for detailed errors
• View the LVGL Preview output channel for compiler messages

Preview Not Updating

• Check that Auto Reload is enabled in settings
• Manually save the file (Ctrl+S)
• Try "LVGL: Force Rebuild" command

Performance Issues

• Lower the optimization level to -O0 for faster compilation
• Reduce display dimensions in settings
• Close other resource-intensive applications

Roadmap

• [ ] Multi-file project support
• [ ] Custom lv_conf.h GUI editor

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the GNU General Public License - see the LICENSE file for details.

Acknowledgments

• LVGL - The awesome graphics library
• Emscripten - The WebAssembly compiler toolchain
• VS Code Extension API

Support

• 📚 LVGL Documentation
• 💬 LVGL Forum
• 🐛 Report Issues

Made with ❤️ for the LVGL community