Respo
Guide
API Docs
Community
GitHub
Respo: a Virtual DOM library in ClojureScript.
Create elements in Clojure syntax:
(div {:class-name "demo"
      :style {:color :red
              :font-size 16
              :font-family "Josefin Sans"}
      :on-click (fn [event dispatch! mutate!])})

; respo.core/div
Nest child elements:
(div {}
  (span {})
  (div {}))

; respo.core/span
Add text nodes:
(div {}
  (<> "text")
  (<> "text with style" {:color :red}))

; respo.core/<>

Create Components

To define components, use defcomp, which is a Macro:
(defcomp comp-demo [p1 p2]
  (div {}
    (<> p1)
    (<> p2)))

(comp-demo :a :b)

; respo.core/defcomp
Use render! to mount a component. It also handles re-rendering if mounting already happened.
(defonce *store (atom {}))
(defn dispatch! [op op-data] (swap! *store assoc :a 1))

(render! mount-target (comp-container @*store) dispatch!)

; respo.core/render!
To hot replace app code, use render! function. clear-cache! for restting internal rendering caches:
(defn reload! []
  (clear-cache!)
  (render! mount-target (comp-container @*store) dispatch!))

; respo.core/clear-cache!

States Management

Respo uses an Atom to maintain global states. Global states and "Single Source of Truth" are preferred:
(defonce *store (atom {}))
(defn dispatch! [op op-data] (swap! *store assoc :a 1))

(add-watch *store :changes
           (fn []
               (render! mount-target (comp-container @*store) dispatch!)))
Respo has supports for component-level states. But states is designed in an awkward syntax in order to make sure it's consistent with "Single Source of Truth". Read about mutate! and cursor-> in the docs.

Ecosystem

During developing Respo, a bunch of libraries are added:
  • ui -- basic UI styles collected based on Flexbox
  • markdown -- subset Markdown syntax rendering to virtual DOM
  • router -- HTML5 router library decoupled from view part
  • alerts -- replacing alert/confirm/prompt components
  • feather -- icons library of feather
  • reel -- time travelling developing tool
  • global-popup and inflow-popup
  • value -- to display collections
  • form -- simple form library
  • message -- displaying message on top-right corner
  • You may also try Reacher which is a React wrapper.

    Try Respo

    Now it's your turn to read Guide and try Respo:
    For Advanced developers, probably the best way to understand Respo is to read code of how the author is using it. Contact me on Twitter anytime if you got questions.
    Send feedbacks on issues if you want to improve this page. Old versions.