Leva.cljs

Leva is a JavaScript library for building declarative GUIs with many different input types, like the one hovering on the right side of this page. Supported inputs range from numeric sliders and color pickers to complex plugins like this Bezier curve example.

Leva.cljs extends Leva with a set of React / Reagent components that make it easy to synchronize the state of the GUI with a ClojureScript atom.

Think of your GUI like an interactive, beautiful view onto your page's state.

Quickstart

Install Leva.cljs into your ClojureScript project using the instructions at its Clojars page:

Or grab the most recent code using a Git dependency:

;; deps
{io.github.mentat-collective/leva.cljs
  {:git/sha "$GIT_SHA"}}

Require leva.core in your ClojureScript namespace:

(ns my-app
  (:require [leva.core :as leva]
            [reagent.core :as reagent]))

Declare some state that you'd like to control with a GUI. Each entry's key becomes its label, and Leva infers the correct input from the value's type.

(defonce !synced
  (reagent/atom
   {:number 10
    :color {:r 10 :g 12 :b 4}
    :string "Hi!"
    :point {:x 1 :y 1}}))

Pass the atom to the leva/Controls component via the :atom key to add its entries to the Leva panel hovering on the right, and bidirectionally bind its state to the interactive state in the panel:

[leva/Controls
 {:folder {:name "Quickstart"}
  :atom !synced}]

See the project's interactive documentation notebook for more guides and examples.

Clerk Support

If you want to use Leva.cljs with Clerk, check out the leva/clerk template. This deps-new template will generate a Clerk project for you, fully configured to use Leva.cljs in your Clerk notebooks.

Interactive Documentation via Clerk

The project's interactive documentation was generated using Nextjournal's Clerk. If you'd like to edit or play with the documentation, you'll need to install

• node.js
• The clojure command line tool
• Babashka

Once this is done, run this command:

bb clerk-watch

This will open a browser window to http://localhost:7777 with the contents of the documentation notebook. Any edits you make to dev/leva/notebook.clj will be picked up and displayed in the browser on save.

Thanks and Support

To support this work and my other open source projects, consider sponsoring me via my GitHub Sponsors page. Thank you to my current sponsors!

I'm grateful to Clojurists Together for financial support during this library's creation. Please consider becoming a member to support this work and projects like it.

License

Copyright © 2022-2023 Sam Ritchie.

Distributed under the MIT License. See LICENSE.