Jotted

Environment for showcasing self-hosted HTML, CSS and JavaScript snippets, with editable source.

npm install jotted
bower install jotted
Download View on GitHub

Features

  • Lightweight: No dependencies, uses textareas for editing by default.
  • Plugins: Flexible plugin architecture for custom editors, preprocessors or anything else.
  • Code editors: Includes plugins for code editors like Ace and CodeMirror.
  • Preprocessors: Includes plugins for preprocessors (ES6, CoffeeScript, Less, Stylus, Markdown).

Browser support

  • Modern browsers
  • iOS 5+
  • Android 4+
  • IE 9+

Demos

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.