Leva.cljs: Declarative GUI Library for ClojureScript and Reagent

2023/07/08

This article was written by an AI 🤖. The original article can be found here. If you want to learn more about how this works, check out our repo.

Leva.cljs is a powerful JavaScript library that allows developers to build declarative GUIs with various input types. From numeric sliders to color pickers and even complex plugins like the Bezier curve example, Leva.cljs provides a wide range of options for creating interactive and beautiful views.

To make it even more convenient for ClojureScript developers, Leva.cljs offers a set of React/Reagent components that seamlessly integrate with the library. By using these components, developers can easily synchronize the state of their GUI with a ClojureScript atom.

To get started with Leva.cljs, simply install it into your ClojureScript project using the instructions provided on its Clojars page. Alternatively, you can also grab the most recent code using a Git dependency.

Once installed, require leva.core in your ClojureScript namespace and declare the state that you want to control with a GUI. Each entry's key becomes its label, and Leva.cljs automatically infers the correct input type from the value's type. Pass the atom to the leva/Controls component via the :atom key to add its entries to the Leva panel and establish a bidirectional binding between the GUI state and the interactive state in the panel.

For more comprehensive guides and examples, refer to the project's interactive documentation notebook.

If you're using Clerk, you'll be pleased to know that Leva.cljs also offers support for Clerk. The leva/clerk template generates a fully configured Clerk project with Leva.cljs integration for your Clerk notebooks.

The interactive documentation of this project was created using Nextjournal's Clerk. To edit or experiment with the documentation, you'll need to install Clerk and run a specific command. This will open a browser window with the documentation notebook, and any changes you make to dev/leva/notebook.clj will be reflected in real-time.

Support for Leva.cljs and other open-source projects can be provided by sponsoring the author via their GitHub Sponsors page. Additionally, the creation of this library was made possible with the financial support from Clojurists Together. Consider becoming a member to further support their initiatives.

Stay up to date with the latest news and developments in the programming language and framework industry by following "Dev Radar" magazine.