At first look you might probably think it's just yet another kind of page/HTML builder, but actually is something more. GrapesJS is the first, multi-purpose, Web Builder Framework, which means it allows you easily create your, drag & drop enabled, builder of "THINGS". For "THINGS" we consider anything web structure related, so HTML at first, but don't just think about web pages, we use HTML-like structure basically everywhere: Newsletters, Native Mobile Applications (eg. [React Native](https://github.com/facebook/react-native)), Native Desktop Applications (eg. [Vuido](https://vuido.mimec.org)), PDFs (eg. [React PDF](https://github.com/diegomura/react-pdf)), etc. So, for everything you can imagine as a set of elements like `<tag some="attribute">... other nested elements ...</tag>` you can create easily a GrapesJS builder around it and then use it independently in some of your applications.
At first look you might probably think it's just yet another kind of page/HTML builder, but actually is something more. GrapesJS is the first, multi-purpose, Web Builder Framework, which means it allows you easily create your, drag & drop enabled, builder of "THINGS". For "THINGS" we consider anything web structure related, so HTML at first, but don't just think about web pages, we use HTML-like structure basically everywhere: Newsletters (eg. [MJML](https://mjml.io/)), Native Mobile Applications (eg. [React Native](https://github.com/facebook/react-native)), Native Desktop Applications (eg. [Vuido](https://vuido.mimec.org)), PDFs (eg. [React PDF](https://github.com/diegomura/react-pdf)), etc. So, for everything you can imagine as a set of elements like `<tag some="attribute">... other nested elements ...</tag>` you can create easily a GrapesJS builder around it and then use it independently in some of your applications.
GrapesJS comes along with different features and tools which enable you to craft easy to use builders, which will allow your users to create complex HTML templates without any knowledge of coding.
@ -11,49 +11,38 @@ GrapesJS comes along with different features and tools which enable you to craft
## Why GrapesJS?
The development of the framework is started by the need to replace common WYSIWYG editors, which are good for content editing but inappropriate for creating HTML structures
Mainly, GrapesJS was designed to be used inside some CMS to speed up the creation of dynamic templates and replace common WYSIWYG editors, which are good for content editing but inappropriate for creating HTML structures. Then, with the same concept, instead of creating just an application we decided to create a framework that could be extended and used by everyone for any kind purpose.
## Demos
To show up what GrapesJS is capable of we have created some presets to use as official demos. You can actually use them as a starting point for your editors, so just clone and extend them as you wish. For a quick start with GrapesJS check below.
To show up of what GrapesJS is capable of we have created some presets to use as official demos.
In this guide we will see how to create a completely customized page builder from scratch. You can check the final result here.
## Canvas
The first step is to define the interface of our editor and for this purpose we gonna use Panels API.
Find a common style for the ui of any project is not an easy taks thats why grapesjs preferes to keep this process as simple as possible, by providing few helpers but letting the user define the interface in a more flexible way.
The main part of the GrapesJS editor is the canvas, this os where you gonna creare the structure of your templates and you definitly can miss it. Let's try to initiate the editor with just the canvas and no panels.
Finding a common structure for the UI of any project is not an easy task that's why GrapesJS prefers to keep this process as simple as possible, by providing just few helpers but letting the user define the interface in a more flexible way.
The main part of the GrapesJS editor is the canvas, this is where you gonna create the whole structure of your templates and you definitely can't miss it. Let's try to initiate the editor with just the canvas and no panels.
With just the canvas you're already able to move, copy and delete components on the structure. For now we just see the example template taken from the container. Let's see now how can we create and drag custom blocks into our canvas.
BLOCKS
## Blocks
A block in Grapesjs is just a draggable peace of HTML, so it can be an image, a button, or an entire section with videos, forms and iframes. Let's start from creating another container and append inside ir few basic blocks which we can later use to build more complex structures.
-- add block, image, text and button blocks, put the block container under the canvas
@ -64,7 +42,7 @@ As you see we added our blocks via the initial configuration, which is ok, but o
Now that we have blocks we can drag them inside our canvas and building complex structures.
COMPONENTS
## Components
Tecnically, once you drop your HTML block inside the canvas each element of the content is transformed in Grapesjs Component, which is an object containing informations about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected to the View, so, for example, if you add a new attribute to the model, not only it will be available in the export code (will see later how to get it) but also the element you see in the canvas is updated with new attributes.
While this is a common behaviour what is cool about the Components is that you can create a totally decoupled view and show to the editor user what you desire, like for example, just by dragging a placeholder text you can fetch and show instead a dynamic content in the canvas. If want to get more about Custom Components and how to create and extend them, we recommend to checke Component GUIDE.
Grapesjs comes already with few [Built-in Components] which enabel different core features once rendered in canvas. Just to mention few of them, by double clicking on the image component you will see show up the default [Asset Manager], which you can customize or integrate you own, by double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customizable and replaceable.
@ -75,7 +53,7 @@ If you prefer you can also create Blocks directly with the component type by pas
-- add block as image type object
PANELS
## Panels
Now that we have a canvas and custom blocks let's see how to create a new panel with some buttons inside which trigger commands (from the core or custom one).
-- show addPanel with toggle-borders, export-code and custom alert show selected JSON + panel style
@ -87,13 +65,14 @@ Try to use Commands when it's possible because you are able to track them global
Check the [Commands page] to learn more about their creation.
LAYERS -- show image
## Layers
-- show image
Another utility tool you might find useful when working with web elements is a layer manger. It's just a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where to render it
-- show how to enable LM
-- HINT: create resizable panels
STYLE MANAGER
## Style Manager
An important step in any web project is the style definition and with the built-in style manager module you're able to do so freely and quickly.
The style manager is composed by style properties and grouped by sectors, so let's see how to define a basic set of them.
@ -104,11 +83,10 @@ Each component can also indicate what to style and what not.
-- Example component with limit styles
TRAITS
## Traits
Most of them time you would style your components and you would place them somewhere in the structure, but sometimes your components might need custom attributes or even behaviours
DEVICES
## Devices
Grapesjs implements also a built-in module witch allows you to work with responsive templates easily. Let's see how to define different devices
-- config devices, desktop, tablet and mobile
@ -125,7 +103,7 @@ If you want to enable a mobile-first approch just change your configurations in
-- show mobile first config
STORAGE
## Storage
Once you get all the tools you need for styling and managing your components the last part would to setup the storing and loading process.
Grapesjs implements 2 simple type of storages, the local (by using localStorage, active by default) and the remote one.
Those are enough to cover most of the cases, but it's also possible to add new storage implementations (eg. think about IndexedDB), if you want you can read more about [Storages here].
@ -134,7 +112,7 @@ Let's see how can we setup a simple remote storage.
-- Add remote storage, see old getting started
THEMING
## Theming
One last step that might actually improve a lot the personality of you editor is how it's look visually. To achive an easy to use theming we have adapted an atomic design for this purpose. To customize the main palette of colors all you have to do is to change some CSS, or variables if you work in SCSS
Artur Arseniev
8 years ago
