---
layout: main.html
title: ''
---

<link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css">
<script src="bower_components/codemirror/lib/codemirror.js"></script>
<script src="bower_components/codemirror/mode/javascript/javascript.js"></script>
<script src="bower_components/codemirror/mode/css/css.js"></script>
<script src="bower_components/codemirror/mode/xml/xml.js"></script>
<script src="bower_components/codemirror/mode/htmlmixed/htmlmixed.js"></script>

<header class="header-home">
  <div class="gl container">
    <div class="gl-cell header-details">
      <h1 class="logo-jotted">
        <a href="./">
          <img src="images/logo-jotted.png" width="298" height="66" alt="Jotted">
        </a>
      </h1>

      <p class="header-tagline">
        Environment for showcasing self-hosted HTML, CSS and JavaScript snippets, with editable source.
      </p>

      <div class="header-get">
        <pre><code><a href="https://www.npmjs.com/package/jotted/">npm</a> install jotted</code></pre>
        <pre><code><a href="http://bower.io/">bower</a> install jotted</code></pre>
      </div>

      <a href="https://github.com/ghinda/jotted/archive/master.zip" class="button button-primary">
        Download
      </a>

      <a href="https://github.com/ghinda/jotted" class="button">
        View on GitHub
      </a>

    </div>
    <div class="gl-cell header-demo">

      <div id="j-header"></div>

    </div>
  </div>
</header>

<div class="container">

  <section>
    <div class="gl">
      <div class="gl-cell section-features gl-md-8">
{{#markdown}}
  ## Features

  * **Lightweight:** No dependencies, uses `textarea`s for editing by default.
  * **Plugins:** Flexible plugin architecture for custom editors, preprocessors or anything else.
  * **Code editors:** Includes plugins for code editors like [Ace](https://ace.c9.io/) and [CodeMirror](https://codemirror.net/).
  * **Preprocessors:** Includes plugins for preprocessors (ES6, CoffeeScript, Less, Stylus, Markdown).
{{/markdown}}
      </div>

      <div class="gl-cell">
        <h2>
          Browser support
        </h2>

        <div class="browsers-supported">

          <ul class="gl gl-sm">
            <li class="gl-cell">
              <img src="images/logo-browser-modern.png" class="logo-browser">
              Modern browsers
            </li>
            <li class="gl-cell">
              <img src="images/logo-safari-ios.png" class="logo-browser">
              iOS 5+
            </li>
            <li class="gl-cell">
              <img src="images/logo-android.png" class="logo-browser">
              Android 4+
            </li>
            <li class="gl-cell">
              <img src="images/logo-ie.png" class="logo-browser">
              IE 9+
            </li>
          </ul>

        </div>
      </div>

  </section>

  <section>
{{#markdown}}
## Demos

* [Ace Editor](demos/ace.html) - Using the Ace editor and plugin.
* [CodeMirror Editor](demos/codemirror.html) - Using the CodeMirror editor and plugin.
* [Markdown](demos/markdown.html) - Using the Markdown plugin.
* [Less](demos/less.html) - Using the Less plugin.
* [Stylus](demos/stylus.html) - Using the Stylus plugin.
* [CoffeeScript](demos/coffeescript.html) - Using the CoffeeScript plugin.
* [ES2015](demos/es2015.html) - Using the Babel plugin for ES6/2015 JavaScript support.
* [External files](demos/files.html) - Loading external files, instead of using inline content.
* [Console Plugin](demos/console.html) - Using the Console plugin, for a lightweight JavaScript console running in the iframe context.
* [Play Plugin](demos/play.html) - The Play plugin disables auto-run and adds a Run button to manually update the preview.
* [Pen Plugin](demos/pen.html) - Different layout with the result on top, and side by side, resizable columns.
* [Bin Theme](demos/theme-bin.html) - Using the *bin* theme, for side by side editing.
{{/markdown}}
  </section>

  <section>

{{#markdown}}

## How to use

### Quick use

``` html
<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 `Object`s 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 `String`s or `Object`s 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

``` javascript
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
      }
    }
  ]
```
{{/markdown}}
  </section>

  <section>
{{#markdown}}
## Plugin API

For creating custom plugins see the docs on the [Plugin API](https://github.com/ghinda/jotted#plugin-api).
{{/markdown}}
  </section>

  <footer class="footer">
    <div class="gl">

      <div class="gl-cell">

        <p>
          Source code available on GitHub: <a href="https://github.com/ghinda/jotted">ghinda/jotted</a>.
        </p>

        <p>
          Jotted is a project by
          <a href="https://ghinda.net">Ionuț Colceriu</a>.
        </p>

      </div>

      <div class="gl-cell">
        <p>
          Licensed under the MIT license.
        </p>
      </div>

    </div>
  </footer>
</div>
