KLIPSE is a simple client-side code evaluator pluggable on any web page.
The klipse plugin is a
The code evaluation is done in the browser: no server is involved at all!
With the klipse plugin, the code is evaluated as you type...
Here is a live demo of the embedding of klipse in a web page.
evaland pretty printing of the result is done with pretty-format
The code editing inside the interactive snippets is powered by CodeMirror.
In order to integrate the klipse plugin on a blog, library documentation or any other web page, you have to follow 3 simple steps.
Make sure you have
<!DOCTYPE html> at the top of your html file and
<meta charset="utf-8"> right after your
<head> (It is required in order to display properly the CodeMirror elements used by Klipse.)
Add css and custom configuration somewhere in the page (it could be in the
<head> or in the
<body>) before the
<script> element of step #3.
The selector keys are per language (see below for a list of supported languages) and the value are the CSS selector of the elements that you want to klipsify.
Here is an interactive guide of the klipse snippets.
If you want to use an older version of Klipse, see Use Older Versions.
Here is the full interactive guide of the klipse
Pay attention: for clojure interactive snippets, you must use the non-minified version of klipse as for the moment, self-host cljs doesn't support advanced compilation!
Here is the full interactive guide of the klipse
You can manipulate the DOM inside KLIPSE: here is a tutorial.
Note: Code Snippets in Reason version 3 will automagically be upgraded to latest Reason version once a new version of Reason is released.
We have 4 kinds of ReasonML snippets:
If your site runs under
https, you need to load the klipse plugin from
https://storage.googleapis.com/app.klipse.tech instead of
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:
Additionaly, you can configure CodeMirror input (snippet source code) and output (snippet evaluation) by setting
For instance, you can modify the
autoCloseBrackets like this:
windowklipse_settings =codemirror_options_in:indentUnit: 8lineWrapping: truelineNumbers: trueautoCloseBrackets: truecodemirror_options_out:lineWrapping: truelineNumbers: true
print_length: (default 1000) max number of items in collections to display - useful to prevent browser stuck when evaluating infinite sequences like
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
undefined) the code is run in a loop every
"") 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-2, or for performing any other setup operations that need to be done on a per-snippet basis.
true, asynchronous calls to
console.logappend their result to the result cell
Here is a live demo of the different snippet level configuration options.
The following data attributes are supported on a klipse snippet DOM element:
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
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
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.
Each klipse snippet is associated with 4 HTML elements:
klipse-containerand is accessible inside the klipse snippet through the global variable
klipse_container(the global variable is dynamically bound to the correct klipse container).
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
.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:
Each code snippet is wrapped into a CodeMirror editor.
klipse_editors. This is an array that contains the CodeMirror editors wrapping the original code snippets. For instance, you can modify the content of the code snippet
i by calling:
klipse_editors[i].setValue('let a = 1');
Here is a jsfiddle that shows it in action.
For instance, The urls are for the version
You can download klipse with
In order to serve Klipse from your own server, you have to:
If you need more assets that are usually dynamically loaded by klipse, please download them manually.
Here is the information about the Klipse app
The Web REPL is live at http://app.klipse.tech
Here is the manual for the KLIPSE web repl.
Languages supported in the REPL:
See the LICENSE file for license rights and limitations (GNU General Public License v3.0).