Codegen converts the canvas design into C source code that runs on the target device. This guide covers code generation features, configuration options, and integration points.
Overview
After designing screens in the editor, anyui-LIVE generates the screen implementations and converts assets into a generated/ directory of output artifacts. The generated code is self-contained and can be integrated into final firmware.
The pipeline is described here; the assets it consumes are defined in the image guide and the font library guide.
Generated output
Codegen produces the following:
| Output | Description |
|---|---|
| Screen source files | C files implementing each screen and the setup_ui() entry point, under generated/. |
| Asset sources | Converted images and fonts under generated/. |
| Header files | Declarations for screens, components, and generated variables. |
| Custom event files | custom/custom_event.h and custom/custom_event.c for your own event declarations and handler code. |
| Project files | Files at the export root, such as Makefile, lv_conf.h, and, on versions that size the window there, main.c. |
Most of this output is generated automatically. As a rule, do not edit files under generated/; regenerate them from the editor instead. The exception is custom/custom_event.h and custom/custom_event.c, which are provided for your own event code. In the desktop app, later exports keep your edits in those files. Project files at the export root, such as lv_conf.h or main.c, remain the place for project-specific integration and device settings.
When you export, anyui-LIVE first regenerates the generated sources so the output always reflects the current design. In the desktop app, this also removes stale generated files from the project folder, so deleted screens, fonts, and images do not keep compiling.
Exporting
- Web app - Export regenerates the source bundle and downloads it as a ZIP archive named after the project, target version, and export time.
- Desktop app - Export writes the files into the export folder configured for the target version; the write happens in place, with no ZIP to unpack. See Settings and Desktop.
The desktop app can also compile the exported code and run the simulator; see Simulator.
Configuration options
Codegen behavior is controlled through project configuration:
| Option | Description |
|---|---|
| Resolution | Target resolution used when generating screen layout. |
| Color depth | Stored with the project for runtime configuration (8, 16, or 32 bits); image-decoding support is planned. |
| LVGL version | LVGL version used for generated code. |
| Export folder | Desktop app only: where each version writes its generated sources. |
See the Project Settings for where these options are configured.
Integration points
The generated code integrates with the rest of the system through well-defined entry points:
setup_ui()- call this to initialize the UI from your application.generated/- copy these files into your project build.
These integration points are the basis of the transplant guide, which explains moving generated code to a target device.
Related guides
- Image - how image assets are converted.
- Font library - how font libraries are converted.
- Workspace - where projects are created and configured.
- Overview - the screens that codegen compiles.
- Code viewer - reading the generated source inside the editor.
- Preview - the simulated code produced by codegen.
- Transplant - integrate generated code into a target project.
- Simulator - run generated code on a local machine.