googleask / grapesjs

Free and Open source Web Template Editor. Next generation tool for building templates without coding

GrapesJS

GrapesJS is a free and open source Web Template Editor for building HTML templates to be used inside sites, webapps, newsletters or anything else related with HTML. Be aware that is not a 'Website Builder' but a tool to create only structure and containers for contents. The great thing about GrapesJS is that you can customize it, extend it or even integrate it with your applications.

Try it here: http://grapesjs.com/demo.html

Features

• Style Manager, for component styling
  

• Layer Manager, that comes handy with nested elements
  

• Code Viewer
  

• Asset Manager, for uploading and managing images
  

• Local and remote storage

• Default built-in commands (basically for creating and managing different components)

Installation

You can get GrapesJS with bower install grapesjs or via git clone https://github.com/artf/grapesjs.git to directly use it. For development purpose you should follow instructions below.

Development

GrapesJS uses RequireJS to organize its files inside src folder and Grunt for build them to dist

Clone the repository and enter inside the folder

$ git clone https://github.com/artf/grapesjs.git
$ cd grapesjs

Install all necessary dependencies

$ npm install

Build GrapesJS

$ npm run build

Launch server, which also gonna watch some files, and try out the demo on localhost:8000

$ npm run dev

Tests are already available inside browser on localhost:8000/test

If Grunt is already installed globally you could change the port by using grunt dev --port 9000

Usage

JQuery is the only hard dependency so you have to include it before use GrapesJS.

<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>

After that include scripts from GrapesJS with all your configurations and render it.

<link rel="stylesheet" href="path/to/grapes.min.css">
<script src="path/to/grapes.min.js"></script>
<div id="gjs"></div>

<script type="text/javascript">
  var gjs  = new GrapesJS({
      container : '#gjs',
  });
  gjs.render();
</script>

Unfortunately with the configuration above you wouldn't see a lot. This because GrapesJS it self is simply empty, adding panels, buttons and other stuff will be your job (actually it's not empty but you need buttons to show them up). The section below will explain some basic configurations but for a more practical example I suggest to look up the code inside this demo: http://grapesjs.com/demo.html

Configuration

For now I only show up some general settings, for more details check source or demo. Examples will be available soon

var config = {

  // Prefix to use inside local storage name
  storagePrefix:      'wte-',

  // Where to render editor (eg. #myId)
  container:          '',

  // Enable/Disable the possibility to copy (ctrl + c) and paste (ctrl + v) elements
  copyPaste         : true,

  // Enable/Disable undo manager
  undoManager:        true,

  //Indicates which storage to use. Available: local | remote | none
  storageType:        'local',

  //Configurations for Asset Manager (check src/asset_manager/config/config.js)
  assetManager:       {},

  //Configurations for Style Manager (check src/style_manager/config/config.js)
  styleManager:       {},

  //Configurations for Layers (check src/navigator/config/config.js)
  layers:             {},

  //Configurations for Storage Manager (check src/storage_manager/config/config.js)
  storageManager:     {},

  //Configurations for Rich Text Editor (check src/rich_text_editor/config/config.js)
  rte:                {},

  //Configurations for Components (check src/dom_components/config/config.js)
  components:         {},

  //Configurations for Panels (check src/panels/config/config.js)
  panels:             {},

  //Configurations for Commands (check src/commands/config/config.js)
  commands:           {},

};

API

At the moment render() is the only available method but others will be public very soon...

Testing

ATTENTION: tests are pretty far away from being complete

Tests are run by PhantomJS using Mocha (with Chai and Sinon help)

$ npm run test

Contributing

Any kind of help is welcome. At the moment there is no generic guidelines so use usual pull requests (with a little bit of parsimony)

License

BSD 3-clause