Demos

• Ace Editor - Using the Ace editor and plugin.
• CodeMirror Editor - Using the CodeMirror editor and plugin.
• Markdown - Using the Markdown plugin.
• Less - Using the Less plugin.
• Stylus - Using the Stylus plugin.
• CoffeeScript - Using the CoffeeScript plugin.
• ES2015 - Using the Babel plugin for ES6/2015 JavaScript support.
• External files - Loading external files, instead of using inline content.
• Console Plugin - Using the Console plugin, for a lightweight JavaScript console running in the iframe context.
• Play Plugin - The Play plugin disables auto-run and adds a Run button to manually update the preview.
• Pen Plugin - Different layout with the result on top, and side by side, resizable columns.
• Bin Theme - Using the bin theme, for side by side editing.

How to use

Quick use

<link rel="stylesheet" href="jotted.css">
<script src="jotted.js"></script>

<div id="editor"></div>
<script>
  new Jotted(document.querySelector('#editor'), {
    files: [{
      type: 'html',
      url: 'index.html'
    }]
  })
</script>

Options

Initialize Jotted with new Jotted(elementNode, optionsHash).

The first argument is a DOM container where the editor will be created. The second argument is a hash of options.

Available options are:

files

Type: Array Default: []

Array of Objects specifying files that will be loaded. Objects inside the array must follow this pattern:

{
  type: "html", // can be "html", "css", or "js"
  url: "/index.html", // load the file from a url (restricted by the same-domain policy), OR
  content: "<h1>HTML Content</h1>" // insert file content as string
}

Use either url or content, not both.

showBlank

Type: Boolean Default: false

Specifies if panes/tabs without content/files should be visible.

runScripts

Type: Boolean Default: true

Specifies if script tags inside HTML content should be ran.

pane

Type: String Default: result

Specifies which pane/tab should be the default one opened. Can be result, html, css or js.

debounce

Type: Number Default: 250

Sets the debounce interval used by the change event (eg. render changes in the Result pane after a change in an editor).

plugins

Type: Array Default: []

Array of Strings or Objects setting the plugins used by this editor instance.

If String, specify plugin name.

If Object, follow this pattern:

{
  name: 'less', // plugin name
  options: {} // options hash to be passed to plugin
}

Example

new Jotted(document.querySelector('#demo'), {
  files: [{
    type: 'css',
    url: 'index.styl'
  }, {
    type: 'html',
    content: '<h1>Demo</h1>'
  }],
  showBlank: true,
  plugins: [
    'stylus',
    {
      name: 'codemirror',
      options: {
        lineNumbers: false
      }
    }
  ]

Plugin API

For creating custom plugins see the docs on the Plugin API.