romanmashta/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

Code Runing on 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 on your native platform. They are not complete guides, but include notes on the necessary libraries, compile flags, etc.

lvgljs

• ubuntu build Notes for sdl simulator
• macos x86 build Notes for sdl simulator
• ubuntu build Notes for platform arm

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 QuickJS: JavaScript engine libuv: platform abstraction layer curl: HTTP client txiki.js: Tiny JavaScript runtime