Star

Manipulating the DOM with Clojure using Klipse

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>")
""

The reason, we have the "" at the end of the snippet is to prevent from the evaluation of the code to be presented in the result box.

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:

comments powered by Disqus