simpleui tutorial examples full docs source motivation simpleui within Clojure youtube

SimpleUI is a web UI framework for fast product development and even faster page load times. It uses htmx on the frontend, the following examples are interactive.

Basic example

Try entering text below and clicking Submit.

(defcomponent ^:endpoint hello [req my-name]
  [:div#hello "Hello " my-name])

(def ring-handler
 (fn [req]
   ;; page renders initial html
   (page
     [:form.hello {:hx-patch "hello" :hx-target "#hello"}
      [:label "What is your name?"]
      [:input.mr {:type "text" :name "my-name"}]
      [:input {:type "submit"}]
      (hello req "")])))

What is your name?

Hello

---

The core of SimpleUI is the defcomponent macro which expands to both:

• An ordinary function
• A rest endpoint. Arguments are bound based on the http parameter my-name.

defcomponent enables developers to quickly build rich user interfaces with no javascript. All code is on the server backend and yet it feels the same as frontend code.

Getting started

Getting started is easy with clojure tools and the excellent kit framework.

clojure -Ttools install com.github.seancorfield/clj-new '{:git/tag "v1.2.404"}' :as new
clojure -Tnew create :template io.github.kit-clj :name yourname/guestbook
cd guestbook
make repl

(kit/sync-modules)
(kit/install-module :kit/simpleui)

Quit the process, make repl then

(go)

Visit localhost:3000. To reload changes

(reset)

Architecture

Javascript Apps

SimpleUI

SimpleUI uses Hypermedia as the Engine of Application State (HATEOAS), the web as it was originally supposed to be. Application state is implicitly stored in the html itself, not in a separate javascript layer. By extending the original html model instead of building a javascript layer over top, we get simplicity and much faster page load times.

Casting parameters

You have clicked me 0 times!

---

Click the above div to increment the counter.

(defcomponent ^:endpoint click-div [req ^:long num-clicks]
  [:form {:id id :hx-get "click-div" :hx-trigger "click"}
   [:input {:type "hidden" :name "num-clicks" :value (inc num-clicks)}]
   "You have clicked me " num-clicks " times!"])

(def ring-handler
 (fn [req]
   ;; page renders initial html
   (page
     (click-div req 0))))

SimpleUI uses native html forms, so data is submitted as strings. We can cast it as necessary. Supported casts include ^:long, ^:boolean and ^:double. See documentation for details.

Further reading

Please see the examples or full documentation.