Workspace User Guide

The workspace is the core working area of BEKEN LVGL UI Designer. This guide provides detailed information about the functions and usage of each module in the workspace.

📐 Workspace Layout

The workspace is divided into 5 main functional areas:

UI Designer Interface

Five Main Areas

  1. Canvas Area - Core area for visual design
  2. Component Library - Rich UI component library
  3. Component Tree - Component hierarchy management
  4. Properties Panel - Property and style editing
  5. Event System - Component interaction event configuration
  6. Multi-language Feature - Multi-language configuration and usage
  7. Timeline Animation - Animation tracks and keyframes
  8. Custom Characters - Custom character configuration and management
  9. Custom Code - In-designer custom code and external IDE regions
  10. Toolbar - Project management, resource management, preview, and common functions
  11. Archives and History - Save the current version, inspect archives, and restore versions
  12. AI Design - Design UI with AI tools

Keyboard Shortcuts

For a complete list of keyboard shortcuts, please refer to the Shortcuts documentation.

📚 Detailed Documentation

Click the links below to view detailed instructions for each module:

Core Function Modules

  • 🎨 Canvas Area
  • View control (zoom, pan, grid)
  • Rulers and guidelines
  • Component operations (add, select, move, resize)

  • Component alignment, layering, locking and hiding

  • 🧩 Component Library

  • System component library (30+ components)
  • Component categories and search

  • Create and use custom component library

  • 🌲 Component Tree

  • Page management (create, switch, delete, rename)
  • Component hierarchy display

  • Component operations (select, rename, drag and reorder)

  • ⚙️ Properties Panel

  • Basic property editing
  • Style editor (parts, states)

  • Style library functions

  • 🎯 Event System

  • Event editor usage
  • Event types and action types

  • Event configuration and examples

  • 🌍 Multi-language Feature

  • Enable multi-language in project settings
  • Configure languages and translations in asset manager
  • Enable translation in component properties

  • Use multi-language in event actions

  • ⏱️ Timeline Animation

  • Manage animation tracks and keyframes
  • Configure property changes over time
  • Preview and tune animation behavior

  • Trigger animations through events

  • 🔤 Custom Characters

  • Enable/disable custom characters feature
  • Configure characters and character ranges
  • FontAwesome icon support

  • Sync function to auto-generate configuration

  • 🔧 Custom Code

  • In-designer: page, event, call function
  • External IDE: BEKEN_USER_CODE regions

  • Code Editor editable scope

  • 🛠️ Toolbar

  • Project information and save status
  • Edit operations (undo/redo)
  • View control
  • Resource manager

  • Preview and code generation

  • 📦 Archives and History

  • Save the current project version
  • Inspect archived versions and switch pages in preview

  • Restore to a selected archived version

  • 🤖 AI Design

  • Launch Cursor / Codex / TRAE / TRAE CN from the toolbar
  • MCP and Skill environment setup
  • Describe UI requirements in natural language
  • Confirm changes and troubleshooting

Other

Related Documents: Back to Home | Getting Started | FAQ