lvgl/lv_binding_js

React bindings for LVGL ⚛️

lvgljs

Write LVGL with JavaScript. It uses React's virtual DOM concept to manipulate LVGL UI components, providing a familiar experience to users.

Code

Running on a real device

Table of Contents

• Features
• Demo
• Building
• Components
• Font
• Animation
• Style
• JSAPI
• Thanks

Features

• Support all lvgl built-in components
• Fully suport lvgl flex and grid style
• Support most lvgl style，just write like html5 css
• Support dynamic load image
• Fully support lvgl animation

Demo

Widgets

Calculator

Building

The following are developer notes on how to build lvgljs.
It is recommended that you first work with the simulator and only then try to compile for a target device.

lvgljs

• Simulator build notes
• Device build notes

JS Bundle

• JS Bundle build notes

Components

• View
• Image
• Button
• Text
• Input
• Textarea
• Switch
• Checkbox
• Dropdownlist
• ProgressBar
• Line
• Roller
• Keyboard
• Calendar
• Chart

Font

Buitin-Symbol

Animation

Animation

Style

• position-size-layout
• boxing-model
• color
• flex
• grid
• font
• opacity
• display
• background
• scroll
• shadow
• recolor
• line
• transition
• transform

JSAPI

• network
• filesystem
• dimension

Thanks

lvgljs depends on following excellent work:

• lvgl: Create beautiful UIs for any MCU, MPU and display type
• txiki.js: Tiny JavaScript runtime
  • QuickJS: JavaScript engine
  • libuv: platform abstraction layer
  • curl: HTTP client