grapesjs/grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding

GrapesJS

GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates. To better understand this concept check the image below

Generally any 'template system', that you'd find in various applications like CMS, is composed by the structure (HTML), style (CSS) and variables, which are then replaced with other templates and contents on server-side and rendered on client.

This demos show examples of what is possible to achieve:
Webpage Demo - http://grapesjs.com/demo.html
Newsletter Demo - http://grapesjs.com/demo-newsletter-editor.html

Table of contents

• Features
• Download
• Usage
• Development
• Documentation
• API
• Testing
• Plugins
• Support
• Changelog
• Contributing
• License

Features

Blocks	Style Manager	Layer Manager

Code Viewer	Asset Manager

• Local and remote storage

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

Download

• CDNs
  • UNPKG (resolves to the latest version)
    • https://unpkg.com/grapesjs
    • https://unpkg.com/grapesjs/dist/css/grapes.min.css
  • CDNJS (replace X.X.X with the current version)
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css
• NPM
  • npm i grapesjs
• GIT
  • git clone https://github.com/GrapesJS/grapesjs.git

For the development purpose you should follow instructions below.

Usage

<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 editor = grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
  });
</script>

For a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html

Development

Clone the repository and install all the necessary dependencies (yarn is highly recommended)

$ git clone https://github.com/GrapesJS/grapesjs.git
$ cd grapesjs
$ yarn

Start the dev server

$ yarn start

Once the development server is started you should be able to reach the demo page (eg. http://localhost:8080)

Documentation

Check the getting started guide here: Documentation

API

API References could be found here: API-Reference

Testing

$ yarn test

Plugins

Official Plugins | Community Plugins

Wrappers

• @grapesjs/react - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.

Extensions

• grapesjs-plugin-export - Export GrapesJS templates in a zip archive
• grapesjs-plugin-filestack - Add Filestack uploader in Asset Manager
• grapesjs-plugin-ckeditor - Replaces the built-in RTE with CKEditor
• grapesjs-tui-image-editor - GrapesJS TOAST UI Image Editor
• grapesjs-blocks-basic - Basic set of blocks
• grapesjs-plugin-forms - Set of form components and blocks
• grapesjs-navbar - Simple navbar component
• grapesjs-component-countdown - Simple countdown component
• grapesjs-style-gradient - Add gradient type input to the Style Manager
• grapesjs-style-filter - Add filter type input to the Style Manager
• grapesjs-style-bg - Full-stack background style property type, with the possibility to add images, colors, and gradients
• grapesjs-blocks-flexbox - Add the flexbox block
• grapesjs-lory-slider - Slider component by using lory
• grapesjs-tabs - Simple tabs component
• grapesjs-tooltip - Simple, CSS only, tooltip component for GrapesJS
• grapesjs-custom-code - Embed custom code
• grapesjs-touch - Enable touch support
• grapesjs-indexeddb - Storage wrapper for IndexedDB
• grapesjs-firestore - Storage wrapper for Cloud Firestore
• grapesjs-parser-postcss - Custom CSS parser for GrapesJS by using PostCSS
• grapesjs-typed - Typed component made by wrapping Typed.js library
• grapesjs-ui-suggest-classes - Enable auto-complete of classes in the SelectorManager UI
• grapesjs-fonts - Custom Fonts plugin, adds a UI to manage fonts in websites
• grapesjs-symbols - Symbols plugin to reuse elements in a website and accross pages
• grapesjs-click - Grab and drop blocks and components with click (no more drag-and-drop)
• grapesjs-float - Anchor a floating element next to another element (selected component, ...)

Presets

• grapesjs-preset-webpage - Webpage Builder
• grapesjs-preset-newsletter - Newsletter Builder
• grapesjs-mjml - Newsletter Builder with MJML components

Find out more about plugins here: Creating plugins

Support

If you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via Open Collective

Thanks to BrowserStack for providing us browser testing services

License

BSD 3-clause

grapesjs's Issues

Variable Undefined

It can't understand grapesjs for some reason. Says can't find variable.

<title>Title</title><script src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="../grapesjs/dist/grapes.min.js"></script>

<script type="text/javascript"> document.addEventListener("DOMContentLoaded", function() { var editor = grapesjs.init({ container : '#gjs', components: '

Hello world!

', style: '.txt-red{color: red}', }); }); </script>

Install failed

.....

[email protected] install D:\nodejs\Project\grapesjs\grapesjs\node_modules\grunt-mocha\node_modules
\grunt-lib-phantomjs\node_modules\phantomjs
node install.js

PhantomJS not found on PATH
Download already available at C:\Users\ADMINI1\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows
.zip
Verified checksum of previously downloaded file
Extracting zip contents
Removing D:\nodejs\Project\grapesjs\grapesjs\node_modules\grunt-mocha\node_modules\grunt-lib-phantom
js\node_modules\phantomjs\lib\phantom
Copying extracted folder C:\Users\ADMINI1\AppData\Local\Temp\phantomjs\phantomjs-1.9.8-windows.zip-
extract-1455857895368\phantomjs-1.9.8-windows -> D:\nodejs\Project\grapesjs\grapesjs\node_modules\gr
unt-mocha\node_modules\grunt-lib-phantomjs\node_modules\phantomjs\lib\phantom
Writing location.js file
Done. Phantomjs binary available at D:\nodejs\Project\grapesjs\grapesjs\node_modules\grunt-mocha\nod
e_modules\grunt-lib-phantomjs\node_modules\phantomjs\lib\phantom\phantomjs.exe

[email protected] postinstall D:\nodejs\Project\grapesjs\grapesjs
node_modules/.bin/bower install --config.interactive=false

'node_modules' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! weird error 1
npm ERR! not ok code 0

Unable to select a layer if no previously selected element

Hi - please have a look: https://cl.ly/2S2t1V27300Z
It's reproducible at http://grapesjs.com/demo.html

If I hadn't selected an element I can't select anything in Layer palette.

Image component works only the first time

When Using the image component I noticed that is only possible to upload/add new images when adding the image component for the first time. When using it again it is no longer possible to add new images.

Update: Perhaps it is more a problem of the AssetsView than the Image component

Cancel adding a component

Is there a way to cancel adding a component, for example to limit the number of components of one type in the canvas or when something went wrong while adding the component (for example when no image has been selected)

PHP CMS template

Congrats for your great and promising web template platform!

I would like to design a PHP template for CMS using this web platform that has got the following structure regarding nested div components:

These classes are defined via an external CSS file that is linked by <link rel="stylesheet" href=
According to your wikis this could be accomplished with

The real problem that lies to me is how can i set up the Style Manager and when i select a specific component a specific class via external CSS pops up in the class box of Style Manager. In other words i want to appear for the selected external div component only the simple_wrapper class according to the structure and etc.
Afterwards i want inside these div components to place PHP output code for display of content such as:

or for modules:

Is that possible, any code help?

Regards

HTML Parser does not honor custom added component types

I am currently trying to implement by own custom component type and it seems to me that the html parser does not honor custom component types with their isComponent method and therefore they are not recognized as components. Can you reproduce this?

State drop down menu text

I have spent little time trying to solve the issue without luck, so not much help:)

The issue is text within the state drop down menu is invisible. Have tracked it to following CSS:

.wte-clm-tags .wte-clm-field select, .wte-clm-tags .wte-sm-field select, .wte-sm-sector .wte-clm-field select, .wte-sm-sector .wte-sm-field select {
    background: 0 0;
    border: none;
    color: transparent;
    width: 100%;
    padding: 2px 10px 2px 0;
    text-shadow: 0 0 0 rgba(255,255,255,.7);
    position: relative;
    z-index: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Seems the "color:transparent" is causing issue but changing to <#color> did not solve. Wish I could be more help...

Using Chrome latest if that helps.

Woody

Translation

Ciao artf, thanks for GrapeJS, it's awesome! Anything planned regarding translation? It'd be the cherry on top of the GrapeJS Mailtrain integration. 😉

remove html tag from template

Hi @artf
In grapesjs editor i want to remove <img> tag of template before save template, how can i do that ? (we can delete img tag using editor ui , but i want to remove img tag code side , is it have any function to remove tag?)
In drag and drop blockManager , can i get drop event ?

Suggestion - Undo Button

Great project! Already have plans to use this in the classroom.

Something I noticed while trying was lack of undo button/function or step back (or am I missing it?). Accidentally deleted top section and no way to get it back.

Also, maybe a "clear and start new project". Cannot start new project with reload...

Thanks much for sharing this excellent tool. I am betting the my classroom will get a lot of use out of it!

Recommended back-end

Any recommended backends that are fast and trouble free to get up and running? Crowd favorites?

Use case to host a few static pages, not edited often.. possible blog post?

Share code with Silex

Hi @artf

Great project ! It is a different approach than Silex which is all about absolute positioning, but it has a common ground. As the main developer of Silex, I believe we could get organized and share some code! :)

I'm thinking Silex could use your great Style Manager if we make it an npm module. And if you want I could help you integrate Cloud Explorer to manage files like or you can use Responsize if you want your users to preview the page (if you are interested, then I should add the ability to give it the HTML instead of an URL)

Do not hesitate if you see something we can share :)

How can i export to html code?

How can i export to html code?
use , need add some div outer the code?

Bug in adding a new css rule with selectors

In css_composer/main.js line 173 (add):

rule.get('selectors').add(selectors);

returns selectors with empty ids..

instead

selectors.each(function(selector){ rule.get('selectors').add(selector); });

seems to work.

Uncaught RangeError: Maximum call stack size exceeded when trying to reorder layers

I drop 2 boxes to the canvas then go to Layers panel and when start dragging an item this exception is thrown. This doesn't happen always.

You can write at Doc where to add the jquery?

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

"Call stack size exceeded"

Hi! Firstly thank you for creating this amazing project. We've been trying to use it, like you mentioned, as a page builder for a CMS project that we have.

We're trying to save data to RemoteStorage, and we opted to save the components and styles in JSON format, instead of saving rendered HTML and CSS. However, the build code in JsonGenerator.js runs recursively until we hit a "Call stack size exceeded" error in Chrome. This is happening with the default demo site in the repository.

Would you have any ideas how we can make this recursive operation more efficient?

Suggestions - css background-size, DOM editor control, breakpoints

Would love to see this or add it myself. Maybe a quick fast track on on how to add new styling elements? I'd like to add a select field for background-size, define the options array (cover, contain, custom -> being a conditional set of inputs for w/h/px/%/center/top...etc).

Also, if the code and css was editable too, that would make this pretty amazing. It's pretty easy to make the codemirror objects update the DOM and even execute new scripts. Emmet.io is another thing that comes to mind. Rapid development from the editors, refinement and real-time testing with the gui.

var js_editor = $('#js-editor .CodeMirror')[0].CodeMirror;

js_editor.on('change', function(cm, change){
            //update content after 2 seconds            
            $('#js-editor iframe').contents().find('#custom-js').remove(); //needed to execute new js

            delay(function(){
                //update the DOM preview from editor contents
                $('#js-editor iframe').contents().find('body').append('<script type="text/javascript" id="#custom-js">'+cm.getValue()+'</script>');
            }, 2000);
        });

I also have some ideas for enhancing the breakpoints.

How do you load in templates and change html associated with drag and drop buttons

I am trying to preload templates and change the drag and drop button html

Asset Manager store function

When using remote storage for asset handling, I believe there is a bug in the store function inside the AssetsView.js file.

Replacing:
this.storagePrv.store(this.storeName, JSON.stringify(this.collection.toJSON()) );

With:

var a = [];
a[this.storeName] = JSON.stringify(this.collection.toJSON());
this.storagePrv && this.storagePrv.store(a)

seems to fix it, but have only tested with remote storage.

want to get edit content when that page close or refresh tab event

problem is when close the grapesjs editor without save it lose the edit content using grepesjs, how can we get the edit content until close it ?
when close tab below event fire , how to get that event?

Security

How secure is this? I.e. Will it run the risk of code injection etc. if exposed to public on a website?

How to upload image to Template

i tried to add image to template using grapesjs but that occur error,

How to add select filed in header bar on editor

How can I add select filed on header bar

please give me a solution for my problem

I want to add custom UI element on your header bar in editor,How can i do it?

Instanciation problem: grapesjs.init is not a function

Dear Sir,

I really apologize for my stupid question

• I've basically installed grapesjs via Bower:
  bower install grapesjs
• Then I've tried to setup my page following your instructions :

<html>
<head>
<title>Test GrapeJS</title>

<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="./bower_components/grapesjs/dist/css/grapes.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="./bower_components/grapesjs/dist/grapes.min.js"></script>
</head>
<body>

<div id="gjs"></div>

<script type="text/javascript">

  var editor = grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
  });

</script>

</body>
</html>

But, when I try the page, I've got a grapesjs.init is not a function error in the console and nothing more happens.

Is it that the instanciation of the editor has changed in the latest versions or have I stupidely missed something important ?

Your work seems really great.

Sincerly

François

Can we use grapesjs for editing and saving existing template.

I have installed graphesjs and created custom template newly.but I want to edit existing template by using grapesjs.Is that feature include this awesome liabary? Is that can be achieve.?

PhantomJS warnings when running tests

This warning was thrown when running tests and caused the test to be aborted. I tried resolving the issue myself by looking over the tests but I'm very inexperienced with them.

How load new html template into editor

I have loaded html template into editor initialy

<div id="gjs">
<!-- html content-->
</div>

script

    var editor = grapesjs.init({
        container: '#gjs',
        fromElement: true,
        plugins: ['gjs-plugin-export'],
        pluginsOpts: {
            'gjs-plugin-export': {
                btnLabel: 'EXPORT',
                preHtml: '<!doctype><html><head><link rel="stylesheet" href="./css/style.css"></head><body>'
            }
        }
    });

how I update editor content with new template by replacing existing template. Is there any quick method for that in grapejs.
I use select option to load html template.I want to dyanamically apply html template into this editor content.

Thanks in advance.

we need documentation for this library..this is awesome web editor.

cat not use jQuary plugin to template

I am using grapejs to load my html template and editing that template.In my template I use jQuery plugin.And also we use jQuery for building up editor using grapejs. In that case there is happen conflict
between those jQuery loading on time.
i had error like this

how to void that kind of issue,
can we use jquary for template ?
if it is , how can i achieve ?

Dropping line is not shown in Layers panel when moving a layer

This issue was introduced recently. Layers panel had before a green line that shows a target position for drop. Now it doesn't have it.

can not use external link library

i try to add bootstrap library is not working for me , that show grapesjs error like this

couldnt make it work

hi,
i followed the instructions of installation here is the error log i get;

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]prebuild: [email protected]
6 silly lifecycle [email protected]prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]build: [email protected]
8 verbose lifecycle [email protected]build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]build: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users[UserName]\Documents\GitHub\grapesjs\node_modules.bin;C:\Windows\system32;C:\Windows;C:\Windows\system32\wbem;C:\ProgramData\Oracle\Java\javapath;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Microsoft\Web Platform Installer;C:\Program Files\Microsoft SQL Server\120\Tools\Binn;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit;C:\Program Files\Microsoft SQL Server\110\Tools\Binn;C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files\Git\cmd;C:\Program Files\nodejs;C:\Users[UserName]\AppData\Roaming\npm
10 verbose lifecycle [email protected]build: CWD: C:\Users[UserName]\Documents\GitHub\grapesjs
11 silly lifecycle [email protected]build: Args: [ '/d /s /c', 'grunt build' ]
12 silly lifecycle [email protected]build: Returned: code: 6 signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: grunt build
14 verbose stack Exit status 6
14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:232:16)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at EventEmitter.emit (events.js:185:7)
14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at ChildProcess.emit (events.js:185:7)
14 verbose stack at maybeClose (internal/child_process.js:821:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\Users[UserName]\Documents\GitHub\grapesjs
17 error Windows_NT 6.1.7601
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
19 error node v5.5.0
20 error npm v3.3.12
21 error code ELIFECYCLE
22 error [email protected] build: grunt build
22 error Exit status 6
23 error Failed at the [email protected] build script 'grunt build'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the grapesjs package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error grunt build
23 error You can get their info via:
23 error npm owner ls grapesjs
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Reload after importing newsletter template removes inline css styles.

Hi!,

I really appreciate you for this great project! :)

My problem is that on newsletter editor, when I import a newsletter template, all inline styles are removed after reloading the page.

overide upload image event and store to local

@artf hi sir,thank for nice builder.but i have litle problem,how overide event upload image or show modal for asset manager in edit image.me use gh-pages branch

Disable editing html element

Hi, nice day for you. I have problem with disable editing specific html element in grapejs editor.

I have some labels, those are cannot be editing by user.It should be fixed.

How we do that in grape editor.

Thanks

Adding a new component

I’m trying to implement a new component to add following kind of component to the dom.

<div class=”myclass”>
   <script src=”http://myurl.com/12345”></script>
</div>

Here the src of the script tag is a variable parameter, which is responsible for loading an advertisement from an external server

I tried to created a new Drag & Drop Block Component by following the Image component

After drag and drop Advert component show pop up(similar to the image component) and I want to add the src url. This url resolves to a javascript code.

After double clicking the invocation code , that generate the below script

This is the script generated

I want to find out a way of wrapping this script inside a div (as mentioned in the beginning) before actually appending it to the src code. Idea is to provide a preview like below.

Appreciate if you could shed some light to find a way to achieve this.

This is the configuration for block manager

{
id: 'video',
label: 'Video',
attributes: {class:'fa fa-youtube-play'},
content: {
		type: 'video',
		src: 'img/video2.webm',
		style: {
			height: '350px',
			width: '615px',
		}
	},
},{
id: 'advert',
label: 'Advert',
attributes: {class:'fa fa-bullhorn'},
content: {
	style: {color: 'black'},
	type:'advert',
	activeOnRender: 1
},
}

How to support multiple languages?

Hi,

I've just found this amazing project, and I wonder is there any document about how to support multiple languages for it?

OnUnload warning message, even if already saved.

Even if i have already saved the editor's modifications by calling editor.store(), i get the warning on page unload.
I guess the warning should appear only if the changes are not already saved.

where can i get code after edit using grapesjs

want to get edited code for save that file to another location

evaluate/help/reuse this nice library

We need to let user be able to create nice website/pages, without technical knowledge. A lot of project are reinventing the wheel, and I really think we should mutualize effort around a nice library and reuse that library.

I will ping other projects to see what they think about collaborating here.

We already know Silex is in, let 's see for others, I'll complete the following list.

• Silex
• Mautic
• Odoo
• elementor for WordPress response
• Tailor for WordPress

Possible to apply changes to only one class?

Hello,

I'm wondering is it possible to apply changes to interface to only one class?

Now I get:

Is it possible via the interface achieve, without the another classes? like so:

.quote-special {
font-size:20px;
}

Add new Components to editor

i need to Add new components to editor like Image drag and drop , mynew components contain script like this

<script src = 'https://www.exsample.net/advert/api/zone/5/invocationcode'></script>

(this script show image)

how to add button to open box toolbar ?
how to add setting that component ?

i tried to this way

var domComponents = editor.DomComponents;
.......
domComponents: {
components: '<script src = "https://www.exsample.net/advert/api/zone/5/invocationcode"></script>',
}
.....

how can i add modal pop up after drop component to our template ?
(like image drop component)

Undo on style changes

While Undo works fine when adding/removing elements, it doesn't seem to work for style changes (eg change text to bold or italics).

Problem occurs from upload image from Assests Manger in grapejs

I have problem with image uploading section in assets manager.I have go though your override method of uploadFile in fileUploader.js. I uploaded selected image in our server. I applied that image uploaded api endpoint in config file.Image is uploaded is fine..but I want to get that image data into frontend.
I want to know about what is the response type of image uploading api. because we want response in our side. Is it image data, or image url? Can you help me on this situation.following is code section.that is ajax call how uploading image api in your code.

			$.ajax({
				url			: this.config.upload,
				type		: 'POST',
				data		: formData,
				beforeSend	: this.config.beforeSend,
				complete	: this.config.onComplete,
				xhrFields	: {
					onprogress: function (e) {
						if (e.lengthComputable) {
							/*var result = e.loaded / e.total * 100 + '%';*/
						}
					},
					onload: function (e) {
					    //progress.value = 100;
					}
				},
				cache: false, contentType: false, processData: false
			}).done(function(data){
                                // what is type of this data.data object.
				target.add(data.data);
			}).always(function(){
				//turnOff loading
			});

Get Changes as JSON from edior in grapejs

Basically I am using json configs to keep attributes of each UI component of the template.Following is the configs that I kept.

{
	"registration": {
		"form": "signup-form",
		"fields": [{
			"id": "signup-input-username",
			"name": "input-username",
			"label": "User name",
			"type": "text",
			"placeholder": "This is test username"
		}, {
			"label": "Password",
			"id": "signup-input-password",
			"name": "input-password",
			"type": "password",
			"placeholder": "This is password"
		}],
		"controls": {
			"submit": {
				"id": "btn-signin-form",
				"name": ""
			},
			"cancel": {
				"id": "",
				"name": ""
			}
		}
	}
}

In this case, I create my registration form dynamically from that config json.And that form html load into the grapejs editor.and change whatever thing we want through the grapejs editor.
And As example, I want to change label name and save it as html. BTW I want get those changes into my config json. It goes trouble to me becuase I only know to get editing changes as html using getHTML() method in grapejs.

If there any capability to get those changes into (outside as json) my configs without html

Appreciate your help.

Thanks
sandun.

Is it possible to group blocks

Hi, I have passion for the fantastic plugin. However, is it possible to group blocks? Will you please give me a hit to do this, I will do the rest?

Regards,
Bhoot

mod is not defined

I found error the mod method is not defined on line:2 grapes.min.js.
Below the error message:
Uncaught ReferenceError: mod is not defined
what the solution to fix that error?

bower install issues, how to properly install grapesjs

Hello, i'm very impressed with your work about this builder

My issue is that i'm struggling to make it work with my current project. When i install the builder with "bower install grapesjs" i can't use it, it seems that some styles are missing and it seems not complete.

For example i can't drag and drop a Hero section, it just draws 4-5 horizontal lines without styling.

When i use it with "git clone" and "npm install" afterwards it works great !

What's the proper way to use grapesjs it if i don't want to use it for development of the source ? is there any way for "bower install grapesjs" do all the work itself ?

thanks !

Help with new component type

Hi,

I need your help with new components again. I tried the following: I want to add a new component which creates a resizable div which is tagged with two HTML attributes. The one is a marker to recognize the div when parsing HTML and the other one is user defined when adding or double-clicking the component.

I followed your tutorial and looked at existing component types and somehow gotten it to work. But somehow I modify the default component type which leads to side effects of my new component.

Every component which is added after I added my custom one, gets the attributes of the new custom component. So I somehow modify the default component type with my code. To reproduce the problem add the "Test" component and then a Text component. Then take a look at the HTML of the Text component which looks like the following:

<div testmarker="test" class="c574" onmousedown="return false" testvalue="123"><div style="text-align: center;">Test: 123</div></div>
<div testmarker="test" testvalue="123" class="c600" contenteditable="true">Insert your text here</div>

There you see that even the Text component has the testmarker and the testvalue which is obviously wrong.

I created a Gist ( https://gist.github.com/sebastianha/48ed97a33a979945ae0a8b4587076409 ) with the demo.js file, perhaps you could take a look and spot my problem? That would be very nice.