JavaScript

With lv_binding_js you can write lvgl with JavaScript.

It uses React's virtual DOM concept to manipulate lvgl UI components, providing a familiar React-like experience to users.

Code

Code Running on Real Device

Table of Contents

• Features

• Demo

• Building

• Components

• Font

• Animation

• Style

• JSAPI

• Thanks

Features

• Support all lvgl built-in components

• Fully support lvgl flex and grid style

• support most lvgl style, just write like html5 css

• support dynamic load image

• Fully support lvgl animation

Demo

See the demo folder

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

• Builtin-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