This repository showcases how you can showcase your ClojureScript library and make it interactive using SCI.

To read the interactive version of this markdown file, go here.

To add an interactive ClojureScript snippet, you have to surround your code blocks with a div that has a class cljs-showcase, like the one below. You can add your own styling, of course.

(+ 1 2 3)

Use data attributes to customize behavior:

data-cljs-showcase-no-editable="true"

data-cljs-showcase-no-eval="true"

data-cljs-showcase-no-eval-on-init="true"

;; I will not evaluate until you trigger it!
(defonce eval-ct (atom 0))
(swap! eval-ct inc)
@eval-ct

Error messages also show up as results:

(require 'foo)

Promise values are resolved and their results are shown:

(-> (js/fetch "dude") (.then (fn [v] (.-status v))))

To add your own libraries, go to src/cljs_showcase/core.cljs

and use the SCI API to add your ClojureScript namespaces. E.g. to add medley, we run:

(def medley-ns (sci/copy-ns medley.core (sci/create-ns 'medley.core)))
(ctx-store/swap-ctx! sci/merge-opts {:namespaces {'medley.core medley-ns}})

After doing so, we can use medley interactively in a codeblock:

(require '[medley.core :as medley])
(medley/index-by :id [{:id 1} {:id 2}])

(ns-publics 'medley.core)