Hi! this is minibed!
It's mini, editable, customizable playground for web.
Free & Open Source Live Edit Multiple file support for per-languages Remote files Fully customizable

Example Usage

minibed is dependent to CodeMirror. So you need to include CodeMirror and it's some of modes/addons. Full list is below;

Dependencies
  - codemirror.js
  - codemirror.css
  - mode/javascript/javascript
  - mode/htmlmixed/htmlmixed
  - mode/jsx/jsx
  - mode/xml/xml
  - mode/css/css
  - addon/scroll/simplescrollbars
  - addon/edit/matchbrackets
  - addon/edit/closetag
  - addon/edit/closebrackets
import Minibed from 'minibed'; // or include minibed.js & minibed.css

new Minibed({
    container: '#example-1',
    theme: 'dark',
    editorTheme: 'minibed-dark',
    files: {
      html: ['mini.html', 'bed.html'],
      js: ['mini.js', 'mini-2.js'],
      css: ['mini.css']
    },
    external: {
      js: [
          '//cdn.rawgit.com/needim/noty/master/lib/noty.js'
      ],
      css: [
          '//cdn.rawgit.com/needim/noty/master/lib/noty.css'
      ]
    },
    settings: {
      readOnly: false, // true, nocursor, false
      scrollLock: false,
      lineWrapping: true,
      lineNumbers: true,
      tabSize: 2,
      css: {
        base: 'none', // normalize, reset
      }
    },
    notes: [] // array of strings, like footer notes, they are gonna be paragraphs
}).show();
  • 0.0.2-beta

    Some styling issues fixed

  • 0.0.1-beta

    Pre-release