The Klipse plugin is a client-side code evaluator.

This means that inside a web page, you are not limited to manipulate data, but you can also manipulate the DOM.

In this article we will show 4 approaches for manipulating the DOM with Clojure using Klipse:

  • reagent
  • the Klipse container
  • the html editor type
  • a custom DOM element

1. Reagent

(require '[reagent.core :as r])

[:div
  "Hello "
  [:strong "World!"]]

For a full explanation about using reagent inside Klipse, have a look at Interactive reagent snippets.

And if you want very cool material about reagent, read this series of reagegent deep dive and How to use a charting library in Reagent.

2. The Klipse container

Each Klipse snippet is associated with a container - a DOM element that is just below the Klipse snippet and accessible with js/klipse-container and js/klipse-container-id:

(set!
 (.-innerHTML js/klipse-container)
 "<div style='color: blue;'> Hello <b>Container</b>!</div>")

(set!
  (.-innerHTML (js/document.getElementById js/klipse-container-id))
  "<div style='color: red;'> Hello <b>Container Id</b>!</div>")

3. Html editor type

You can also have a Klipse snippet with data-editor-type="html": the evaluation of the snippet will be the innerHTML of the result box.


"Hello <strong>HTML editor</strong>"

4. A custom DOM element

Another thing you can do is to add a DOM element to you page (a div a canvas or anything you want) and to manipulate it with your klipse snippet.

In this page we have inserted a <div id="my-custom-container"> just above the Klipse snippet.

(set!
  (.-innerHTML (js/document.getElementById "my-custom-container"))
  "<div style='color: green;'> Hello <b>Custom Container</b>!</div>")

There are a couple of blog posts with lots of creative stuff using this approach: