6 Demo

This page contains example Jank code — each block is evaluated during rendering, and the results appear below.

For examples of every supported ^:kind/... annotation (Mermaid, Graphviz, Vega-Lite, ECharts, Cytoscape, Highcharts, and more), see Kindly kinds — that page is also live.

6.1 Basics

(+ 1 2 3)

(str "Hello from " "Jank!")

"Hello from Jank!"

(defn square [x] (* x x))

#'user/square

(map square [1 2 3 4 5])

(1 4 9 16 25)

6.2 Stdout

Printed output appears alongside the return value:

(do (println "computing...") (* 6 7))

computing...

A hide-stdout=true fence attribute drops the captured stdout while keeping the value — handy when a noisy debug println is left in the code:

(do (println "debug — won't appear") (* 6 7))

6.3 C++ interop

Jank’s distinctive feature is seamless C++ interop — cpp/ forms construct values, call functions, and use operators from C++ inside a Jank expression. Values cross between Jank and C++ automatically.

A simple call into the C standard library:

(do
  (cpp/raw "#include <cmath>")
  (cpp/std.sqrtf (cpp/float. 2.0)))

1.414214

C++ operators compose with cpp/ values. Pythagoras’ theorem via cpp/+, cpp/*, and cpp/std.sqrtf:

(let [a (cpp/float. 3.0)
      b (cpp/float. 4.0)
      c2 (cpp/+ (cpp/* a a) (cpp/* b b))]
  (cpp/std.sqrtf c2))

5.000000

C++ functions integrate with regular Jank sequences. A Plotly chart whose y-values come from cpp/std.sinf:

(let [xs (vec (map #(* 0.1 %) (range 65)))
      ys (mapv #(cpp/std.sinf (cpp/float. %)) xs)]
  ^:kind/plotly
  {:data [{:x xs :y ys :type "scatter" :mode "lines" :name "sin(x)"}]
   :layout {:title "Sine wave computed via cpp/std.sinf"}})

For the full picture of Jank’s C++ interop — types, member access, library use — see the Jank book.

6.4 Hiccup

Annotate a vector with ^:kind/hiccup to render it as HTML:

^:kind/hiccup
[:svg {:width "300" :height "200" :xmlns "http://www.w3.org/2000/svg"}
  [:rect {:width "300" :height "200" :fill "#f0f0f0" :rx "10"}]
  [:circle {:cx "80" :cy "100" :r "50" :fill "steelblue"}]
  [:circle {:cx "160" :cy "100" :r "40" :fill "coral"}]
  [:circle {:cx "230" :cy "100" :r "30" :fill "mediumseagreen"}]
  [:text {:x "150" :y "180" :text-anchor "middle" :font-size "14" :fill "#333"}
    "Generated by Jank"]]

The long form ^{:kindly/kind :kind/hiccup} works too:

^{:kindly/kind :kind/hiccup}
[:div {:style "padding:12px; background:#f0f0f0; border-radius:8px;"}
  [:b "Hello"] " from " [:em "Kindly"] "!"]

Hello from Kindly!

6.5 HTML

Use ^:kind/html to render a computed string as raw HTML. Since strings can’t hold metadata, wrap the expression in a vector:

^:kind/html
[(str "<div style='padding:8px; border:2px solid #4a90d9; border-radius:8px;'>"
      "<b>Computed HTML</b> via <code>kind/html</code>"
      "</div>")]

Computed HTML via kind/html

6.6 Plotly.js chart

Use ^:kind/plotly with a map containing :data and :layout keys:

(let [xs (vec (map #(* 0.5 %) (range 20)))
      ys (vec (map #(+ (* % %) (* -0.5 %)) xs))]
  ^:kind/plotly
  {:data [{:x xs :y ys
           :type "scatter" :mode "lines+markers"
           :name "y = x^2 - 0.5x"}]
   :layout {:title "Quadratic from Jank"
            :xaxis {:title "x"}
            :yaxis {:title "y"}}})

width and height fence attributes resize the wrapper — useful for ECharts/Cytoscape (which need a sized container) or to constrain any chart kind:

^:kind/plotly
{:data [{:x [1 2 3 4 5] :y [4 1 5 3 2] :type "bar"}]
 :layout {:title "Sized 400×250 via fence attrs"}}

See Per-block options for the full set (timeout, hide-stdout, width, height) and precedence rules.

6.7 Markdown table

Use ^:kind/md to render a string as markdown:

^:kind/md
[(let [headers ["x" "x²" "x³"]
       rows (map (fn [x] [(str x) (str (* x x)) (str (* x x x))]) (range 1 8))
       header-line (str "| " (clojure.string/join " | " headers) " |")
       sep-line (str "| " (clojure.string/join " | " (map (fn [_] "---") headers)) " |")
       row-lines (map (fn [row] (str "| " (clojure.string/join " | " row) " |")) rows)]
   (clojure.string/join "\n" (concat [header-line sep-line] row-lines)))]

x	x²	x³
1	1	1
2	4	8
3	9	27
4	16	64
5	25	125
6	36	216
7	49	343

6.8 LaTeX math

Since kind/md output is processed as markdown, LaTeX math works via $$...$$ syntax. Quarto renders it with MathJax:

^:kind/md
[(str "$$\\sum_{k=1}^{n} k = \\frac{n(n+1)}{2}$$")]

\[\sum_{k=1}^{n} k = \frac{n(n+1)}{2}\]

You can also build formulas from computed values:

^:kind/md
[(let [n 10
       result (/ (* n (+ n 1)) 2)]
   (str "For $n = " n "$:\n\n"
        "$$\\sum_{k=1}^{" n "} k = \\frac{" n " \\cdot " (+ n 1) "}{2} = " result "$$"))]

For $n = 10$:

\[\sum_{k=1}^{10} k = \frac{10 \cdot 11}{2} = 55\]

Or use ^:kind/tex for a standalone formula:

^:kind/tex
["\\sum_{k=1}^{n} k^2 = \\frac{n(n+1)(2n+1)}{6}"]

\[\sum_{k=1}^{n} k^2 = \frac{n(n+1)(2n+1)}{6}\]

6.9 Annotating in library functions

Metadata doesn’t have to be in the code block — functions can attach it to their return values with with-meta. Define a bar-chart function that produces a Plotly chart and tags it as :kind/plotly:

^:kind/hidden
[(defn bar-chart [labels values]
   (with-meta
     {:data [{:x labels :y values :type "bar"}]
      :layout {:title "Bar Chart"}}
     {:kindly/kind :kind/plotly}))]

Now just call the function — no annotation needed at the call site:

(bar-chart ["apples" "bananas" "cherries"] [12 19 7])