It's a mini editable, customizable playground for web
JavaScript CSS HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github
demo
lib
src
test
.babelrc
.codeclimate.yml
.editorconfig
.gitignore
.travis.yml
Gruntfile.js
LICENSE.txt
README.markdown
bower.json
composer.json
minibed-live.gif
minibed-logo.svg
package.json
postcss.config.js
webpack.config.js

README.markdown

mini editable, customizable playground for web
Documentation »

GitHub release Bower version NPM version Packagist version
Dependencies Dev Dependencies
Travis NPM Downloads Contributors


Hi

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


Features

  • Free & Open Source
  • Live Edit
  • Multiple file support for per-languages
  • Remote files
  • 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
  • Standard & Prettier
  • ES6 & Babel & Webpack
  • Sass
  • Autoprefixer
  • Qunit & SauceLabs
  • Pre-commit tests
  • Travis CI

JavaScript Style Guide