# JavaScript (/integration/bindings/javascript)



With [lv\_binding\_js](https://github.com/lvgl/lv_binding_js) you can use LVGL from within 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**

Features [#features]

* Support all LVGL built-in components
* Fully support LVGL flex and grid styles
* Support most LVGL styles, just write like HTML5 CSS
* Support dynamic image loading
* Fully support LVGL animations

Demo [#demo]

See the [demo](https://github.com/lvgl/lv_binding_js/tree/master/demo) folder

Building [#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 [#lvgljs]

* [Build Notes for embedded Linux device](https://github.com/lvgl/lv_binding_js/blob/master/doc/build/build-device.md)
* [Build Notes for SDL Simulator (Linux and macOS)](https://github.com/lvgl/lv_binding_js/blob/master/doc/build/build-simulator.md)

JS Bundle [#js-bundle]

* [JS Bundle build Notes](https://github.com/lvgl/lv_binding_js/blob/master/doc/build/js-bundle.md)

Components [#components]

* [View](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/View.md)
* [Image](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Image.md)
* [Button](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Button.md)
* [Text](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Text.md)
* [Input](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Input.md)
* [Textarea](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Textarea.md)
* [Switch](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Switch.md)
* [Checkbox](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Checkbox.md)
* [Dropdownlist](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Dropdownlist.md)
* [ProgressBar](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/ProgressBar.md)
* [Line](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Line.md)
* [Roller](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Roller.md)
* [Keyboard](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Keyboard.md)
* [Calendar](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Calendar.md)
* [Chart](https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Chart.md)

Font [#font]

* [Builtin-Symbol](https://github.com/lvgl/lv_binding_js/blob/master/doc/Symbol/symbol.md)

Animation [#animation]

* [Animation](https://github.com/lvgl/lv_binding_js/blob/master/doc/animate/animate.md)

Style [#style]

* [position-size-layout](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/position-size-layout.md)
* [boxing-model](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/boxing-model.md)
* [color](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/color.md)
* [flex](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/flex.md)
* [grid](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/grid.md)
* [font](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/font.md)
* [opacity](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/opacity.md)
* [display](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/display.md)
* [background](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/background.md)
* [scroll](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/scroll.md)
* [shadow](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/shadow.md)
* [recolor](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/recolor.md)
* [line](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/line.md)
* [transition](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/transition.md)
* [transform](https://github.com/lvgl/lv_binding_js/blob/master/doc/style/transform.md)

JSAPI [#jsapi]

* [network](https://github.com/lvgl/lv_binding_js/blob/master/doc/jsapi/network.md)
* [filesystem](https://github.com/lvgl/lv_binding_js/blob/master/doc/jsapi/fs.md)
* [dimension](https://github.com/lvgl/lv_binding_js/blob/master/doc/jsapi/dimension.md)

Thanks [#thanks]

**lvgljs** depends on following excellent work:

* [lvgl](https://github.com/lvgl/lvgl): Create beautiful UIs for any MCU, MPU and display type
* [QuickJS](https://bellard.org/quickjs/): JavaScript engine
* [libuv](https://github.com/libuv/libuv): platform abstraction layer
* [curl](https://github.com/curl/curl): HTTP client
* [txiki.js](https://github.com/saghul/txiki.js): Tiny JavaScript runtime