diff --git a/reagent-reitit-demo/deps.edn b/reagent-reitit-demo/deps.edn
index 012b602..36c0fcb 100644
--- a/reagent-reitit-demo/deps.edn
+++ b/reagent-reitit-demo/deps.edn
@@ -1,6 +1,9 @@
 {:deps {org.clojure/clojure {:mvn/version "1.10.0"}
         org.clojure/clojurescript {:mvn/version "1.10.764"}
+
+        ;;ajax requests
         cljs-ajax {:mvn/version "0.8.1"}
+
         ;; react
         reagent {:mvn/version "0.9.1"}
         reagent-utils {:mvn/version "0.3.3"}
@@ -10,6 +13,10 @@
         metosin/reitit {:mvn/version "0.5.10"}
         metosin/reitit-spec {:mvn/version "0.5.10"}
         metosin/reitit-frontend {:mvn/version "0.5.10"}
+
+        ;; interactive code snippets
+        viebel/klipse {:mvn/version "7.10.4"}
+
         com.bhauman/figwheel-main {:mvn/version "0.2.11"}}
  :paths ["src" "resources"]
  :aliases {:prod {:main-opts ["-m" "figwheel.main" "-bo" "dev"]}}}
diff --git a/reagent-reitit-demo/resources/public/clojure-basics.org b/reagent-reitit-demo/resources/public/clojure-basics.org
index 4d55a8d..3ece2ff 100644
--- a/reagent-reitit-demo/resources/public/clojure-basics.org
+++ b/reagent-reitit-demo/resources/public/clojure-basics.org
@@ -56,41 +56,29 @@ Collections of data
 ;;#{1 2 1 3} how ever would through an error, using hash-set would remove the duplicate with out error.
 #+END_SRC
 
+* Clojure syntax
+You have basically just learnt the syntax, clojure's syntax is made from the same data structures described above this is meant literally and is called EDN.
 
-* Language syntax
-The clojure syntax is super simple it is always a function call followed by arguments, this applies for things like standard conditionals and, or, not etc
+The clojure language is super simple it is always a function call followed by arguments, this applies for things like standard conditionals =and=, =or=, =not= etc
 
 All functions return a value, this is always the last statement called inside the function.
 
 When ever you see an opening bracket the value after is always a function unless the bracket is preceded by a character in which case this is a macro a common macro is ='(1 2)= which is the same as typing (list 1 2) so a function is still the first parameter.
 
-** Basic data structures
-In clojure you will find you spend most of your time dealing with lists, vectors, maps and sets each has its own bracket notation in the language you can also call =vector=, =list=, =hash-map= and =hash-set= functions to the same effect, how ever it is far more convenient to use the shorthand.
-
 #+BEGIN_SRC clojure :tangle src/core.cljc
-(ns demo.core)
-;; lists are denoted with brackets, but remember to use '(
-;; or (list function) else the first value is a function call.
-'(1 2 3)
+;; this code add's two number together, its starts with a bracket and call a function called + with 2 parameters
+(+ 1 1)
 
-;; vectors are donoted with square brackets
-[1 2 3 4]
-
-;; hash-maps are denoted with curly braces
-;; they must always contain key value pairs.
-{:key-one 1 :key-two 2}
-
-;; sets also use curly braces but start with a #
-;; sets have to be unique so duplicates will throw an error
-#{1 2  3}
-
-;;#{1 2 1 3} how ever would through an error.
+;; this code now creates a list and does not execute the + function
+;; it now returns 3 items in the list the function and the two numbers
+(list + 1 1)
 #+END_SRC
 
+
 ** Maths
 All maths operators are also functions, meaning you start with the operation then the numbers to apply the operator against, opposed to many other languages where you would separate the numbers by operators.
 
-This goes back to function first then arguments.
+This goes back to function as the first item in a list then arguments.
 
 #+BEGIN_SRC clojure :tangle src/core.cljc
 ;; This is equivalend to 1 + 2 + 3 in other languages
diff --git a/reagent-reitit-demo/resources/public/rename-me-index.html b/reagent-reitit-demo/resources/public/rename-me-index.html
index 1996064..a46f977 100644
--- a/reagent-reitit-demo/resources/public/rename-me-index.html
+++ b/reagent-reitit-demo/resources/public/rename-me-index.html
@@ -27,12 +27,7 @@
       loading here
     </div>
     <script src="/cljs-out/dev-main.js" type="text/javascript"></script>
-    <script>
-    window.klipse_settings = {
-        selector: '.klipse', // css selector for the html elements you want to klipsify
-    };
-    </script>
-    <script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script>
+
 </body>
 
 </html>
diff --git a/reagent-reitit-demo/src/core.cljs b/reagent-reitit-demo/src/core.cljs
index 4669515..a7ff3ce 100644
--- a/reagent-reitit-demo/src/core.cljs
+++ b/reagent-reitit-demo/src/core.cljs
@@ -1,6 +1,8 @@
 (ns ^:figwheel-hooks core.demo
   (:require [reagent.core :as reagent]
             [ajax.core :refer [GET raw-response-format]]
+            [klipse.run.plugin.plugin]
+            [klipse.plugin :as klipse-plugin]
             ;[demo.org :refer [parse->to-hiccup parse-flat]]
             [cl-eorg.parser :as o :refer [parse parse-flat]]
             [cl-eorg.html :refer [org->replacements]]
@@ -188,6 +190,10 @@
   (mount-root-page))
 
 (defn startup! []
+  ;; this is used for interactive code only
+  (klipse-plugin/init #js {:selector ".klipse"
+                           :selector_reagent ".klipse-reagent"})
+
   (rfe/start!
    (rf/router routes {:data {:coercion rss/coercion}})
    (fn [m] (swap! site-state assoc :current-route m))