cljspad is a code playground for ClojureScript

• Reagent TodoMVC
• Read EDN from a public S3 bucket

cljspad leverages the cljs.js "Bootstrapped Compiler" at runtime to provide a sandboxed environment for code evaluation inside your browser.

Sandboxes contain a common set of libraries (eg, reagent, re-frame) available for use in the environment.

Sandboxed environments are versioned. Changes to the sandbox (library version bumps, additional libraries etc) constitute a new sandbox version.

This means that every version of the cljspad sandbox contains stable, known versions of packaged ClojureScript libraries. GitHub gists are saved against a sandbox version, meaning your gist should never break as cljspad progresses.

You can view the sandbox changelog by visiting the releases page.

Code gets evaluated by pressing the 'Run' button

To render something (eg a React component) to the right-hand pane, a render function has been provided for each library:

(require '[sandbox.reagent :refer [render]])

(defn my-component []
  [:div {} "Hello world"])

(render [my-component])

sandbox.user contains a few hepler functions:

If you would like to style the right-hand pane, you can use the inject-stylesheet fn

(inject-stylesheet "https://path/to/stylesheet.css")

If you want to output a simple value to the sandbox DOM without depending on React/etc:

(write-output "Hello world")

See the datascript example

To load a GitHub gist into cljspad:

Gist: https://gist.github.com/wavejumper/05fca1e4d543078227e24081c2f2764c

Becomes: https://cljspad.dev/gist/05fca1e4d543078227e24081c2f2764c

The above link will always load the gist against the latest version of cljspad

To load a gist against a specific version of cljspad:

https://cljspad.dev/gist/1/05fca1e4d543078227e24081c2f2764c

Where the path param /1/ is the version of the sandbox

cljspad will load the first file in the gist containing a .cljs extension.

If no files are found with a .cljs extension, the first file from the API response will be loaded instead.

cljspad can be embedded into your website via an iframe:

<iframe src="https://cljsfiddlle.dev/embed/gist/GIST_ID" width="100%" height="400px" style="border:1px solid #ccc;"></iframe>

See CONTRIBUTING.md