Manipulating the DOM with Clojure using Klipse

Sep 10, 2020 • Yehonathan Sharvit

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

xxxxxxxxxx

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

the evaluation will appear here (soon)...

xxxxxxxxxx

[: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:

xxxxxxxxxx

(set!

 (.-innerHTML js/klipse-container)

 "<div style='color: blue;'> Hello <b>Container</b>!</div>")

xxxxxxxxxx

the evaluation will appear here (soon)...

xxxxxxxxxx

(set!

 (.-innerHTML (js/document.getElementById js/klipse-container-id))

 "<div style='color: red;'> Hello <b>Container Id</b>!</div>")

xxxxxxxxxx

the evaluation will appear here (soon)...

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.

xxxxxxxxxx

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

xxxxxxxxxx

(set!

 (.-innerHTML (js/document.getElementById "my-custom-container"))

 "<div style='color: green;'> Hello <b>Custom Container</b>!</div>")

xxxxxxxxxx

the evaluation will appear here (soon)...

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

to stay up-to-date with the coolest interactive articles around the world.

Discover more cool interactive articles about javascript, clojure[script], python, ruby, scheme, c++ and even brainfuck!

Give Klipse a Github star to express how much you appreciate Code Interactivity.

Feel free to email me [email protected] for getting practical tips and tricks in writing your first interactive blog post.