minibed

minibed copied to clipboard

mini editable, customizable playground for web
Documentation »

Hi

This is minibed! - mini editable, customizable playground for web

Features

• [x] Free & Open Source
• [x] Live Edit
• [x] Multiple file support for per-languages
• [x] Remote files
• [x] Fully customizable

TO-DO

• [ ] Better error handling
• [ ] Support for preprocessors (babel, sass, ...)

Documentation

Documentation and examples are here: http://ned.im/minibed

Logo created by Karthik Srinivas from the Noun Project

Dependencies

• CodeMirror
  • 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

Basic Usage

import Minibed from 'minibed';

new Minibed({
    theme: 'dark',
    editorTheme: 'minibed-dark',
    files: {
      html: ['mini.html', 'bed.html'],
      js: ['mini.js', 'mini.es6'],
      css: ['mini.css', 'mini.scss', 'mini.less']
    },
    external: {
      js: [],
      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();

Development

$ npm run dev
$ npm test
$ npm run build

Development environment

• [x] Standard & Prettier
• [x] ES6 & Babel & Webpack
• [x] Sass
• [x] Autoprefixer
• [ ] Qunit & SauceLabs
• [ ] Pre-commit tests
• [ ] Travis CI