pitch-io/uix

Quick Start

The simplest way to start a new project with UIx is to use create-uix-app CLI:

npx create-uix-app@latest my-app # bare-bones project
npx create-uix-app@latest my-app --re-frame # adds re-frame setup
npx create-uix-app@latest my-app --fly-io # creates full stack app with Fly.io
npx create-uix-app@latest MyApp --react-native # setup cljs project in existing React Native project
npx create-uix-app@latest MyApp --expo # create a new React Native project using Expo

Or just drop these files into your project

  1. deps.edn
    {:deps {thheller/shadow-cljs {:mvn/version "3.2.1"}
        com.pitch/uix.core {:mvn/version "1.4.7"}
        com.pitch/uix.dom  {:mvn/version "1.4.7"}}}
  2. shadow-cljs.edn
    {:deps true
 :builds
 {:app {:target :browser
        :modules {:main {:entries [app.core]
                         :init-fn app.core/start}}
        :output-dir "out"
        :asset-path "/out"
        :devtools {:preloads [uix.preload]}}}}
  3. index.html
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
  </head>
  <body>
    <div id="root"></div>
    <script src="/out/main.js"></script>
  </body>
</html>
  4. src/app/core.cljs
    (ns app.core
  (:require [uix.core :as uix :refer [defui $]]
            [uix.dom]))

(defui button [{:keys [on-click children]}]
  ($ :button.btn {:on-click on-click} children))

(defui app []
  (let [[state set-state!] (uix/use-state 0)]
    ($ :<>
      ($ button {:on-click #(set-state! dec)} "-")
      ($ :span state)
      ($ button {:on-click #(set-state! inc)} "+"))))

(defonce root (uix.dom/create-root (js/document.getElementById "root")))

(defn start []
  (uix.dom/render-root ($ app) root))
  5. Install and run
    npm i -D react@19.2.0 react-dom@19.2.0 react-refresh process
clojure -M -m shadow.cljs.devtools.cli watch app
  6. Production build
    clojure -M -m shadow.cljs.devtools.cli release app

Starter templates