Welcome to SquareLine Vision Documentation
SquareLine Vision is a revolutionary UI development tool that transforms the way developers create embedded user interfaces, from initial concept to final product deployment. This comprehensive documentation will guide you through every aspect of the platform, helping you build sophisticated, interactive embedded GUIs with unprecedented ease and efficiency.
What is SquareLine Vision?
SquareLine Vision is a powerful, browser-based visual development environment designed specifically for creating embedded user interfaces. Built on the robust LVGL (Light and Versatile Graphics Library) framework, it bridges the gap between design creativity and embedded system constraints, enabling developers to create professional-grade UIs without deep graphics programming knowledge.
Key Capabilities
- Visual Interface Design: Drag-and-drop widget placement with real-time preview
- Cross-Platform Export: Generate optimized code for various embedded platforms
- Interactive Prototyping: Test your UI behavior directly in the browser
- Asset Management: Seamlessly integrate custom fonts, images, and resources
- Animation System: Create smooth, engaging animations with timeline-based controls
- Event-Driven Architecture: Define complex user interactions without coding
- Collaborative Development: Multi-user project sharing and version control
Who Should Use This Documentation?
This documentation is designed for:
- Embedded Systems Developers looking to create professional UIs quickly
- Product Designers wanting to prototype interactive embedded interfaces
- IoT Engineers building connected devices with visual interfaces
- Hardware Developers integrating display solutions into their products
- Students and Educators learning embedded GUI development
- Teams collaborating on embedded interface projects
Getting Started
Quick Navigation
| Section | Description | Best For |
|---|---|---|
| Onboarding | Step-by-step introduction to Vision | New users |
| Quick Start Guide | Build your first thermostat interface | Hands-on learners |
| Launcher | Project management and workspace | All users |
| Widget Types | Complete widget reference | Interface builders |
| Events & Actions | Interactive behavior system | Advanced users |
Learning Path
- Start Here: Watch our comprehensive tutorial video below
- Follow Along: Complete the onboarding process
- Build Something: Try the quick start guide
- Go Deeper: Explore advanced features like animations and global styles
- Deploy: Learn about exporting to your target platform
Core Features Overview
Visual Design Environment
Create stunning interfaces using an intuitive drag-and-drop editor with real-time preview capabilities. No graphics programming required.
Comprehensive Widget Library
Access a full range of UI components from basic panels and labels to advanced controls like sliders, dropdowns, and keyboards.
Event-Driven Interactions
Define complex user interactions using our visual event system. Connect triggers (clicks, gestures, value changes) to actions (screen transitions, animations, property changes).
Advanced Animation System
Bring your interfaces to life with timeline-based animations. Create smooth transitions, dynamic effects, and engaging user feedback.
Multi-Platform Export
Generate optimized LVGL code for various platforms including Arduino, ESP32, desktop applications, and custom embedded systems.
Collaboration Tools
Work together with team members using built-in project sharing, version control, and multi-user editing capabilities.
Platform Architecture
SquareLine Vision consists of two main components:
Launcher
Your project management hub where you can:
- Create new projects from templates
- Import and organize existing projects
- Manage account settings and licenses
- Access learning resources and community support
Application Interface
The main development environment featuring:
- Canvas: Visual design workspace with zoom and pan controls
- Hierarchy Panel: Project structure and widget organization
- Inspector Panel: Detailed property controls and customization
- Styles Panel: Visual appearance management and theming
- Events Panel: Interactive behavior configuration
- Assets Panel: Resource management for fonts and images
Supported Platforms & Export Options
SquareLine Vision supports a wide range of target platforms:
- Desktop Development: CMake/Eclipse/VSCode with SDL
- Arduino Ecosystem: ESP32, Raspberry Pi Pico, Arduino GIGA R1
- Custom Embedded Systems: Any LVGL-compatible platform
- Prototyping: Direct browser-based testing and simulation
SquareLine Vision Tutorial
Get started with our comprehensive video tutorial that covers the fundamentals:
SquareLine Vision Beta Tutorial - Getting Started with the Basics
7-minute comprehensive introduction covering interface basics, widget creation, styling, events, and project export.
Community & Support
Getting Help
- Discord Community: Connect with other developers and get real-time support
- Documentation: Comprehensive guides and API references (you're here!)
- Video Tutorials: Step-by-step learning content
- Bug Reports: Direct feedback system built into the platform
Contributing
SquareLine Vision thrives on community feedback. Help us improve by:
- Reporting bugs and issues through the built-in system
- Sharing your projects and templates with the community
- Providing feedback on new features and improvements
- Participating in beta testing programs
What's Next?
Ready to start building? Here are your next steps:
- Create your first project - Choose a board and configure your settings
- Explore the interface - Get familiar with panels and tools
- Build a sample project - Follow our thermostat tutorial
- Learn advanced features - Discover animations, global styles, and complex interactions
- Export your work - Deploy to your target platform