Roadmap

[artf]

This issue is a rough outline of some improvements/features we'd like to add to the editor.
To keep things cleaner it's better to open a new issue for any discussion about a related feature (then linked here) and use this one just for general questions/requests.
Don't hesitate to propose other stuff for the list and, of course, any kind of help is extremely welcome.
Each section is ordered by priority (discussable).

Features

• Improve dragging process I would like to ask how to solve the block component is not padding difficult to drag into the screen? #113
• Auto scroll the canvas while dragging components Auto scroll while dragging  #102
• Add the possibility to group Blocks
• At the moment, once the Style Manager is configured it remains static, so for each selected component you will get the same set of style properties. Would be cool to set specific properties for different components
• Drag and drop images outside browser directly to GrapesJs [Sugestion] Drag and drop images outside browser directly to GrapesJs #198
• Replace the built-in RTE with pell, same concept but much smaller and with more reliable API than the current one. The execCommand API is not perfect and not even works consistently on all browsers in the same way, but I think it's ok as a default/built-in WYSIWYG editor
  https://github.com/artf/grapesjs/wiki/API-Rich-Text-Editor
• New propagate property on components Prevent editing some components #422
• Add the possibility to create custom style properties in Style Manager
  Not yet documented but grapesjs-style-gradient might be a good point from where to start
• Keymap module API-Keymaps
• Undo Manager module (with its own APIs) API-Undo-Manager
• Add HTML5 D&D support
• GrapesJS uses the built-in CSS parser of the browser (to have less dependencies) but each browser has its own set of rules. It might be an option to attach custom parsers https://github.com/artf/grapesjs/releases/tag/v0.14.33
• Logger module https://github.com/artf/grapesjs/releases/tag/v0.14.33
• Absolute/Designer mode With this mode enabled the user should be able to move components "freely" inside the canvas (relying on absolute positioning) Absolute/Designer mode #1936
• I18n module https://github.com/artf/grapesjs/releases/tag/v0.15.9
• Custom color picker. eg. as with RTE using editor.setCustomRte() it might be editor.setCustomColorPicker()
• Custom Code Editor
• Namespaced CSS in output Namespace CSS? #391
• Make the editor more Accessible Needs Accessibility Review #654

Plugins

• Image editor grapesjs-aviary
• Form Components/Blocks grapesjs-plugin-forms
• Add gradient style property grapesjs-style-gradient
• Flexbox block example grapesjs-blocks-flexbox
• Bootstrap Blocks z1lk/grapesjs-blocks-bootstrap4
• Custom Code, block and component grapesjs-custom-code
• Template Manager, on start up shows a modal with templates (eg. by categories and with thumbnails) to choose or you can just import your own or start with a blank one. (grapesjs-template-manager)[https://github.com/Ju99ernaut/grapesjs-template-manager]
• Page Manager Page manager #3411

Codebase

• Get rid of jquery. The data() method is probably the only one which is strictly required by the editor
• Get rid of grunt in favor of npm scripts
• Get rid of requirejs in favor of webpack as a bundler
• Enable to write ES6
• Get rid of font-awesome https://github.com/artf/grapesjs/releases/tag/v0.15.9

[aloksharma1]

are you on gitter, also how about adding bootstrap support in the roadmap?

[artf]

are you on gitter

not yet :)

Exactly, what do you mean by 'adding bootstrap'? If you're talking about loading external styles inside the template, you're already able to do so, check this issue for example

[aloksharma1]

i mean adding bootstrap components in drag-drop builder, for easy build up of websites.

[artf]

well, yeah, I add it to plugins

[givanz]

Hi

Congratulations, GrapeJs looks awesome, the most feature rich and cleanly coded open source online html editor by far.

There are some features that might make it even better in my option, here are some of my proposals.

Can the components tab be changed to show as a panel on the left? Most editors have properties and blocks shown at the same time for easier editing (jetstrap, http://ionic.io/products/creator etc).

When I click on a block, for example on map block (after adding it), I must click settings to see the block settings and to configure the map, I think that it would be easier for blocks to show settings by default or even better have only one tab for both settings and style and show settings first.

Can the interface colors/theme be easily changed by editting a scss/less file or something similar? to have different themes like one with white background.

Is it possible to toggle the elements grids (dashed boxes) by config or button? It looks cleaner without them and if it used mainly for editing editing blocks and not html elements (regular users without css/html knowledge) it might not be very useful.

Is it possible to have an option to limit highlighting/editing to only some elements (only blocks without html elements for example) on the page? I plan to use grapejs in an open source cms I'm developing and this option is helpful to limit editing only to blocks for users that are not familiar with html/css.

Is there any documentation/examples on how to add new blocks or change settings?

Thanks.

[artf]

Thanks @givanz for your kind words and suggestions.
About blocks, shown always on the left, could be a cool idea but not in the way how the canvas is now rendered. I'd like to keep canvas as wide as possible and with another side panel the view will be too much squashed. But this is just my opinion, you could easily move the block container wherever you want.

I definitely agree about 'Settings panel', I think an additional option could be a solution. Anyway I've not yet figured out the best/easiest way to manage the UI (panels, buttons, etc.) for devs, therefore all that part it's just a default set (but can be easily moved around with js).

No 'theme' options for the moment, but you can easily change the entire UI with few CSS changes

#gjs-rte-toolbar, .gjs-bg-main, .gjs-clm-select option, .gjs-clm-tags .gjs-sm-colorp-c, .gjs-editor, .gjs-mdl-dialog, .gjs-nv-item .gjs-nv-title-c, .gjs-off-prv, .gjs-pn-panel, .gjs-select option, .gjs-sm-sector .gjs-sm-colorp-c, .gjs-sm-select option, .gjs-sm-unit option, .sp-container, .gjs-block {
    background-color: white;
}
#gjs-rte-toolbar .gjs-rte-btn, .gjs-btn-prim, .gjs-btnt, .gjs-clm-tags .gjs-sm-composite.gjs-clm-field, .gjs-clm-tags .gjs-sm-field.gjs-sm-composite, .gjs-clm-tags .gjs-sm-stack #gjs-sm-add, .gjs-color-main, .gjs-mdl-dialog, .gjs-off-prv, .gjs-pn-btn, .gjs-pn-panel, .gjs-sm-sector .gjs-sm-composite.gjs-clm-field, .gjs-sm-sector .gjs-sm-field.gjs-sm-composite, .gjs-sm-sector .gjs-sm-stack #gjs-sm-add {
    color: #777;
}
.gjs-btnt.gjs-pn-active, .gjs-color-active, .gjs-pn-btn.gjs-pn-active, .gjs-pn-btn:active, .gjs-block:hover {
    color: #59a6e6;
}
.gjs-btnt.gjs-pn-active, .gjs-pn-btn.gjs-pn-active {
    background-color: rgba(0, 0, 0, 0.03);
}

You can already disable dashed boxes in demo

For creating new Blocks I suggest you check this wiki there you should also find how to change components properties (eg. make element not editable)

[meteorsnows]

For Absolute/Designer mode, There is feature like Smart Guide Line / Snapping to Object, which Simex also not having this feature.

One picture worth thousand word, that align feature most of us used in Microsoft Office to align object:
https://www.edrawsoft.com/flowchart.php
http://www.guidingtech.com/52926/smart-guide-optimization-powerpoint/

[artf]

thanks @meteorsnows, smart guides and snapping are definitely a must in Designer mode so I've already considered it

[ShinJii89]

Hi,
Are you planning add possibility to paste for example in import javascript code? Because now when I import some page with html, css & javascript, your builder cut off all JS code :D

[artf]

@ShinJii89 Scripts are just ignored by configurations.
If you want to try it in the demo, you have to paste this in devtools:

editor.getConfig().allowScripts = 1