KLIPSE is a simple client-side code evaluator pluggable on any web page.

KLIPSE is both a web REPL and a plugin.

The klipse plugin is a javascript tag that transforms static code snippets of an html page into live and interactive snippets:

1. Live: The code is executed in your browser
2. Interactive: You can modify the code and it is evaluated as you type

The code evaluation is done in the browser: no server is involved at all!

The code editing is done with CodeMirror.

The Web REPL is live at http://app.klipse.tech

Here is the manual for the KLIPSE web repl.

Languages supported in the REPL: clojure and clojurescript.

With the klipse plugin, the code is evaluated as you type...

Javascript	Ruby

PHP	Clojure

• javascript: evaluation is done with the javascript function eval and pretty printing of the result is done with pretty-format
• clojure[script]: evaluation is done with Self-Hosted Clojurescript
• ruby: evaluation is done with Opal
• PHP: evaluation is done with Uniter
• python: evaluation is done with Skulpt
• scheme: evaluation is done with BiwasScheme

Here is a live demo of the embedding of klipse in a web page.

• javascript: A new way of blogging about javascript
• ruby: A new way of blogging about ruby
• clojure[script]: [How to klipsify a clojure[script] blog post] (http://blog.klipse.tech/clojure/2016/06/07/klipse-plugin-tuto.html)
• PHP: A new way of blogging about PHP

In order to integrate the klipse plugin on a blog, library documentation or any other web page, add the following javascript tag at the end of the page body according to the language of the code snippets:

<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">

<script>
    window.klipse_settings = {
        selector_eval_js: '.language-klipse-eval-js', // 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>

Here is a jsfiddle with the klipse plugin for javascript. And here are detailed explanations about a javascript live code editor in a blog post.

<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">

<script>
    window.klipse_settings = {
        selector_eval_ruby: '.language-klipse-eval-ruby', // 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>

<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">

<script>
    window.klipse_settings = {
        selector_eval_scheme: '.language-klipse-eval-scheme', // 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>

<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">

<script>
    window.klipse_settings = {
        selector_eval_php: '.language-klipse-eval-php', // 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>

<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css">

<script>
    window.klipse_settings = {
        selector: '.language-klipse'// css selector for the html elements you want to klipsify
    };
</script>
<script src="https://storage.googleapis.com/app.klipse.tech/plugin/js/klipse_plugin.js"></script>

If your site runs under https, you need to load the klipse plugin from https://storage.googleapis.com/app.klipse.tech instead of http://app.klipse.tech.

The reason is that the klipse plugin is hosted on Google Cloud Storage and for the moment SSL is not supported for custom domains.

The klipse plugin is configurable both at the level of the page and at the level of the snippet.

Here are the settings for the klipse plugin a page level:

window.klipse_settings = {
          eval_idle_msec: 20, // idle time in msec before the snippet is evaluated
          selector_js: '.language-klipse-js', // selector for javascript evaluation snippets
          selector: '.language-klipse', //selector for clojure evaluation snippets
          selector_eval_js: '.language-klipse-eval-js', // selector for clojure transpilation snippets
          selector_eval_ruby: '.language-klipse-eval-ruby' //selector for ruby evaluation snippets
};

Additionaly, you can configure CodeMirror input (snippet source code) and output (snippet evaluation) by setting codemirror_options_in and codemirror_options_out:

Currently, we support all the settings CodeMirror Configuration settings and part of the Addons settings: matchBrackets and autoCloseBrackets.

For instance, you can modify the identUnit, lineWrapping, lineNumbers and autoCloseBrackets like this:

window.klipse_settings = {
    codemirror_options_in: {
        indentUnit: 8,
        lineWrapping: true,
        lineNumbers: true,
       autoCloseBrackets: true
    },
    codemirror_options_out: {
        lineWrapping: true,
        lineNumbers: true
    }
}

• print_length: (default 1000) max number of items in collections to display - useful to prevent browser stuck when evaluating infinite sequences like (range)
• beautify_strings: (default false) when evaluation result is a string - display the "interior" of the string without escaping the quotes.

The following attributes can be added to the DOM element of the snippet:

• data-eval-idle-msec: (default 20) idle time in msec before the snippet is evaluated
• data-loop-msec: (default undefined) the code is run in a loop every data-loop-msec msec

• data-external-libs: comma separated list of javascript libraries to load before snippet evaluation

Here is a live demo of the diffeent snippet level configuration options.

The following data attributes are supported on a klipse snippet DOM element:

• data-static-fns: (default false) set to true for using static dispatch
• data-external-libs: comma separated list of github repositories to resolve dependencies: you need to provide the full list of dependencies (including the dependencies of dependencies recursively). See for instance Lambda Caclulus with clojure and Klipse
• data-print-length: (default 1000) max number of items in collections to display - useful to prevent browser stuck when evaluating infinite sequences like (range)
• data-preamble: (default "") A string containing Clojurescript source code that should be run before the contents of this snippet, eg "(reset! canvas-id :canvas-2)". Useful for hiding implementation details from readers in blog posts, like e.g. setting a canvas-id atom to :canvas-2, or for performing any other setup operations that need to be done on a per-snippet basis.
• data-beautify-strings: (default false) when evaluation result is a string - display the "interior" of the string without escaping the quotes.
• data-verbose: (default false) passed to boostrapped eval and compile :verbose opts
• data-max-eval-duration: (default 1000) max number of milliseconds the snippet code is allowed to run synchronously before being interrupted.
• data-compile-display-guard: (default false) when true, display the anti-starvation code inside result of compilation

The Klipse plugin can be easily styled with CSS, which can be applied both to the Klipse plugin's own elements, and to the CodeMirror editor's elements. Much of the styling you'll apply will be to CodeMirror, as it contains all the CSS classes to style the code itself. Surrounding CodeMirror is the Klipse plugin, the styles of which control the plugin's borders, and the executed code's output.

You can change the theme of the CodeMirror editor simply by modifying its CSS. If you don't want to create your own theme, Farhad Gayour has an awesome list of ready-made themes you can select from. Have a look at the different themes by selecting them from the drop-down. Once you've found one you like, head to the theme repo to copy the CSS, paste it into a CSS file, and link to it from the HTML page containing your Klipse plugin.

To change the style of the Klipse plugin's borders and the console output, you'll need to add a few extra style rules to your CSS file. These are:

• .CodeMirror - modify the plugin's borders and CodeMirror's containing div
• .CodeMirror:last-child::before - modify the console's title (i.e. the bit that says Output:)
• .CodeMirror:last-child - modify the console area (i.e. the area beneath Output:)

You can see an example of styling Klipse in demos/styling. And here is a live demo

Here are a couple of examples of blogs using the klipse plugin:

• clojure: Procedural Dungeon Generation: A Drunkard's Walk in ClojureScript
• clojure: Island Generator
• clojurescript transpiled: blog.ducky.io - More about protocols in ClojureScript
• ruby: jessewaites.com - interactive ruby snippets
• clojure: z.caudate.me - live documentation with klipse
• ruby, javascript, clojure: blog.klipse.tech
• clojure documentation: Anonymous functions in clojure
• javascript: Untangled.io - Advanced ES6 destructuring techniques with live examples
• clojure: Klipse for Kids: A fun way to learn computer programming
• javascript Immutable.js: An Introduction with examples written for humans
• clojure: Yet another scheme dialect written in Clojure and ClojureScript
• javascript: Try Partial Lenses with KLIPSE

Ask us any question about the klipse plugin (integration, feature requests...) on

Here is the information about the Klipse app

See the LICENSE file for license rights and limitations (GNU General Public License v3.0).