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:
- the Klipse container
- a custom DOM element
(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
(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
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: