diff --git a/docs/404.html b/docs/404.html index 658fd7930..59754189d 100644 --- a/docs/404.html +++ b/docs/404.html @@ -9,14 +9,14 @@ - - - + + + -

404

Looks like we've got some broken links.
+ - + diff --git a/docs/Home.html b/docs/Home.html index 902ac8a85..c6ef538f9 100644 --- a/docs/Home.html +++ b/docs/Home.html @@ -9,9 +9,9 @@ - - - + + + - + diff --git a/docs/api/asset.html b/docs/api/asset.html index 932ef576a..9c16bcf12 100644 --- a/docs/api/asset.html +++ b/docs/api/asset.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/assets.html b/docs/api/assets.html index e9bb624e6..927aa21eb 100644 --- a/docs/api/assets.html +++ b/docs/api/assets.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS

# AssetManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Assets
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  assetManager: {
    // options
  }
@@ -68,11 +68,11 @@ assetManager.});
 assetManager.add([{ src: 'img2.jpg' }, { src: 'img2.png' }]);
 
Returns Asset
 
# get
 
Return asset by URL
 
# Parameters
  
# Examples
 
const asset = assetManager.get('http://img.jpg');
-
Returns (Asset | null)
 
# getAll
 
Return the global collection, containing all the assets
 
Returns Collection<Asset>
 
# getAllVisible
 
Return the visible collection, which contains assets actually rendered
 
Returns Collection<Asset>
 
# remove
 
Remove asset
 
# Parameters
  
# Examples
 
const removed = assetManager.remove('http://img.jpg');
+
Returns (Asset | null)
 
# getAll
 
Return the global collection, containing all the assets
 
Returns Collection<Asset>
 
# getAllVisible
 
Return the visible collection, which contains assets actually rendered
 
Returns Collection<Asset>
 
# remove
 
Remove asset
 
# Parameters
  
# Examples
 
const removed = assetManager.remove('http://img.jpg');
 // or by passing the Asset
 const asset = assetManager.get('http://img.jpg');
 assetManager.remove(asset);
-
Returns Asset Removed asset
 
# getContainer
 
Return the Asset Manager Container
 
Returns HTMLElement (opens new window)
  

+

Returns Asset Removed asset

# getContainer

Return the Asset Manager Container

Returns HTMLElement (opens new window)

←

GrapesJS
- + diff --git a/docs/api/block_manager.html b/docs/api/block_manager.html index ba2453e37..568e306f1 100644 --- a/docs/api/block_manager.html +++ b/docs/api/block_manager.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS

# Blocks

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Blocks
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  blockManager: {
    // options
  }
@@ -83,7 +83,7 @@ blockManager.// You can also render your blocks outside of the main block container
 const newBlocksEl = blockManager.render(filtered, { external: true });
 document.getElementById('some-id').appendChild(newBlocksEl);
-
Returns HTMLElement (opens new window) Rendered element
  

+

Returns HTMLElement (opens new window) Rendered element

← →

- + diff --git a/docs/api/canvas.html b/docs/api/canvas.html index 6d33a3e15..9489f413b 100644 --- a/docs/api/canvas.html +++ b/docs/api/canvas.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS

# Canvas

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Canvas
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  canvas: {
    // options
  }
@@ -79,7 +79,7 @@ canvas.scrol
     .testp { color: blue; }
   `,
 });
-
Returns Frame
  

+

Returns Frame

← →

- + diff --git a/docs/api/commands.html b/docs/api/commands.html index 25189270d..eeb4dd5ff 100644 --- a/docs/api/commands.html +++ b/docs/api/commands.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/component.html b/docs/api/component.html index e92a71457..c2dee3413 100644 --- a/docs/api/component.html +++ b/docs/api/component.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/components.html b/docs/api/components.html index 9bd0de13c..83e14cfbc 100644 --- a/docs/api/components.html +++ b/docs/api/components.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/css_composer.html b/docs/api/css_composer.html index 5bc7beb9c..71fd61b53 100644 --- a/docs/api/css_composer.html +++ b/docs/api/css_composer.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS

# Css

This module manages CSS rules in the canvas. -You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  cssComposer: {
    // options
  }
@@ -68,12 +68,12 @@ console.log<
 console.log(rules.map(rule => rule.toCSS()))
 // All rules in the project
 console.log(css.getRules())
-
Returns Array (opens new window)<CssRule>
 
# remove
 
Remove rule, by CssRule or matching selector (eg. the selector will match also at-rules like @media)
 
# Parameters
  
# Examples
 
// Remove by CssRule
+
Returns Array (opens new window)<CssRule>
 
# remove
 
Remove rule, by CssRule or matching selector (eg. the selector will match also at-rules like @media)
 
# Parameters
  
# Examples
 
// Remove by CssRule
 const toRemove = css.getRules('.my-cls');
 css.remove(toRemove);
 // Remove by selector
 css.remove('.my-cls-2');
-
Returns Array (opens new window)<CssRule> Removed rules
 
# clear
 
Remove all rules
 
# Parameters
 
  • opts   (optional, default {})
 
Returns this

+

Returns Array (opens new window)<CssRule> Removed rules

# clear

Remove all rules

# Parameters

  • opts (optional, default {})

Returns this

←

GrapesJS

# CssRule

Extends StyleableModel

# Properties

# getAtRule

Returns the at-rule statement when exists, eg. @media (...), @keyframes

# Examples

const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
+     (opens new window) 
   
 
# CssRule
 
Extends StyleableModel
 
# Parameters
 
  • props CssRuleProperties
    •  
  • opt any  (optional, default {})
 
# Properties
  
# getAtRule
 
Returns the at-rule statement when exists, eg. @media (...), @keyframes
 
# Examples
 
const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
  atRuleType: 'media',
  atRuleParams: '(min-width: 500px)'
 });
 cssRule.getAtRule(); // "@media (min-width: 500px)"
-
Returns String (opens new window)
 
# selectorsToString
 
Return selectors of the rule as a string
 
# Parameters
  
# Examples
 
const cssRule = editor.Css.setRule('.class1:hover', { color: 'red' });
+
Returns String (opens new window)
 
# selectorsToString
 
Return selectors of the rule as a string
 
# Parameters
  
# Examples
 
const cssRule = editor.Css.setRule('.class1:hover', { color: 'red' });
 cssRule.selectorsToString(); // ".class1:hover"
 cssRule.selectorsToString({ skipState: true }); // ".class1"
-
Returns String (opens new window)
 
# getDeclaration
 
Get declaration block (without the at-rule statement)
 
# Parameters
  
# Examples
 
const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
+
Returns String (opens new window)
 
# getDeclaration
 
Get declaration block (without the at-rule statement)
 
# Parameters
  
# Examples
 
const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
  atRuleType: 'media',
  atRuleParams: '(min-width: 500px)'
 });
@@ -53,12 +53,12 @@ console.log<
 console.log(state?.getLabel());
 
Returns ([State] | null)
 
# getComponent
 
Returns the related Component (valid only for component-specific rules).
 
# Examples
 
const cmp = rule.getComponent();
 console.log(cmp?.toHTML());
-
Returns ([Component] | null)
 
# toCSS
 
Return the CSS string of the rule
 
# Parameters
  
# Examples
 
const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
+
Returns ([Component] | null)
 
# toCSS
 
Return the CSS string of the rule
 
# Parameters
  
# Examples
 
const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
  atRuleType: 'media',
  atRuleParams: '(min-width: 500px)'
 });
 cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}"
-
Returns String (opens new window) CSS string
  

+

Returns String (opens new window) CSS string

← →

- + diff --git a/docs/api/device.html b/docs/api/device.html index 60cc575e3..23dab96aa 100644 --- a/docs/api/device.html +++ b/docs/api/device.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/device_manager.html b/docs/api/device_manager.html index 1e38645f5..70235cefe 100644 --- a/docs/api/device_manager.html +++ b/docs/api/device_manager.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS

# Devices

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Devices
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  deviceManager: {
    // options
  }
 })
 
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
 
const deviceManager = editor.Devices;
-
# Available Events
 
  • device:add - Added new device. The Device is passed as an argument to the callback
    •  
  • device:remove - Device removed. The Device is passed as an argument to the callback
    •  
  • device:select - New device selected. The newly selected Device and the previous one, are passed as arguments to the callback
    •  
  • device:update - Device updated. The updated Device and the object containing changes are passed as arguments to the callback
    •  
  • device - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback
 
# Methods
  
# add
 
Add new device
 
# Parameters
  
# Examples
 
const device1 = deviceManager.add({
+
# Available Events
 
  • device:add - Added new device. The Device is passed as an argument to the callback
    •  
  • device:remove - Device removed. The Device is passed as an argument to the callback
    •  
  • device:select - New device selected. The newly selected Device and the previous one, are passed as arguments to the callback
    •  
  • device:update - Device updated. The updated Device and the object containing changes are passed as arguments to the callback
    •  
  • device - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback
 
# Methods
  
# add
 
Add new device
 
# Parameters
  
# Examples
 
const device1 = deviceManager.add({
  // Without an explicit ID, the `name` will be taken. In case of missing `name`, a random ID will be created.
  id: 'tablet',
  name: 'Tablet',
@@ -68,7 +68,7 @@ console.log<
 const device = deviceManager.get('some-id');
 deviceManager.select(device);
 
# getSelected
 
Get the selected device
 
# Examples
 
const selected = deviceManager.getSelected();
-
Returns Device
  

+

Returns Device

←

GrapesJS

+

Returns String (opens new window)

← →

- + diff --git a/docs/api/frame.html b/docs/api/frame.html index 15b1fdbf5..d0d7cd412 100644 --- a/docs/api/frame.html +++ b/docs/api/frame.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/i18n.html b/docs/api/i18n.html index 93ced4d07..19cfd35ea 100644 --- a/docs/api/i18n.html +++ b/docs/api/i18n.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS

# I18n

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# I18n
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  i18n: {
    locale: 'en',
    localeFallback: 'en',
@@ -72,7 +72,7 @@ obj.t
 // -> outputs `Msg hello`
 obj.t('msg2', { l: 'it', params: { test: 'hello' } });  // custom local
 // -> outputs `Msg hello it`
-
Returns String (opens new window)
  

+

Returns String (opens new window)

← →

- + diff --git a/docs/api/index.html b/docs/api/index.html index 194b47f59..a90c41721 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/keymaps.html b/docs/api/keymaps.html index 935d5ae93..f314fb21d 100644 --- a/docs/api/keymaps.html +++ b/docs/api/keymaps.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/layer.html b/docs/api/layer.html index 995923154..de99c3390 100644 --- a/docs/api/layer.html +++ b/docs/api/layer.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/layer_manager.html b/docs/api/layer_manager.html index e326e5cf7..60a54afb2 100644 --- a/docs/api/layer_manager.html +++ b/docs/api/layer_manager.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/modal_dialog.html b/docs/api/modal_dialog.html index 389f6b786..3fe2a2d02 100644 --- a/docs/api/modal_dialog.html +++ b/docs/api/modal_dialog.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/page.html b/docs/api/page.html index 04b464826..76834a2ec 100644 --- a/docs/api/page.html +++ b/docs/api/page.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/pages.html b/docs/api/pages.html index 5aed71216..57f896cc2 100644 --- a/docs/api/pages.html +++ b/docs/api/pages.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/panels.html b/docs/api/panels.html index 2c1bf7d35..a7f5d47d6 100644 --- a/docs/api/panels.html +++ b/docs/api/panels.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS

# Panels

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Panels
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  panels: {
    // options
  }
@@ -86,7 +86,7 @@
 
 const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton');
 
Returns (Button | null) Removed button.
 
# getButton
 
Get button from the panel
 
# Parameters
  
# Examples
 
var button = panelManager.getButton('myPanel','myButton');
-
Returns (Button | null)
  

+

Returns (Button | null)

← →

- + diff --git a/docs/api/parser.html b/docs/api/parser.html index f4d134389..a262c8e7d 100644 --- a/docs/api/parser.html +++ b/docs/api/parser.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS

# Parser

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Parser
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  parser: {
    // options
  }
@@ -52,11 +52,11 @@
 // This will preserve the original format as, from the XML point of view, is a valid format
 
Returns Object (opens new window) Object containing the result { html: ..., css: ... }
 
# parseCss
 
Parse CSS string and return an array of valid definition objects for CSSRules
 
# Parameters
  
# Examples
 
const res = Parser.parseCss('.cls { color: red }');
 // [{ ... }]
-
Returns Array (opens new window)<Object (opens new window)> Array containing the result
  

+

Returns Array (opens new window)<Object (opens new window)> Array containing the result

←

- + diff --git a/docs/api/property.html b/docs/api/property.html index 805aff2aa..5d2e2f7c0 100644 --- a/docs/api/property.html +++ b/docs/api/property.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/property_composite.html b/docs/api/property_composite.html index 445b6ed8f..5e7e17474 100644 --- a/docs/api/property_composite.html +++ b/docs/api/property_composite.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/property_number.html b/docs/api/property_number.html index 9c1e6e281..2eaf70901 100644 --- a/docs/api/property_number.html +++ b/docs/api/property_number.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/property_select.html b/docs/api/property_select.html index f921578dc..3374aee54 100644 --- a/docs/api/property_select.html +++ b/docs/api/property_select.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/property_stack.html b/docs/api/property_stack.html index 38c402031..5d52a0f07 100644 --- a/docs/api/property_stack.html +++ b/docs/api/property_stack.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/rich_text_editor.html b/docs/api/rich_text_editor.html index f6b58979c..a19ddffdd 100644 --- a/docs/api/rich_text_editor.html +++ b/docs/api/rich_text_editor.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS

# RichTextEditor

This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the HTML Editing APIs (opens new window). -It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  richTextEditor: {
    // options
  }
@@ -105,7 +105,7 @@ rte.add// {name: 'bold', ...}
 
Returns Object (opens new window)
 
# getAll
 
Get all actions
 
Returns Array (opens new window)
 
# remove
 
Remove the action from the toolbar
 
# Parameters
  
# Examples
 
const action = rte.remove('bold');
 // {name: 'bold', ...}
-
Returns Object (opens new window) Removed action
 
# getToolbarEl
 
Get the toolbar element
 
Returns HTMLElement (opens new window)

+

Returns Object (opens new window) Removed action

# getToolbarEl

Get the toolbar element

Returns HTMLElement (opens new window)

←

GrapesJS
- + diff --git a/docs/api/selector.html b/docs/api/selector.html index 51e7cc6eb..86bb25300 100644 --- a/docs/api/selector.html +++ b/docs/api/selector.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/selector_manager.html b/docs/api/selector_manager.html index ddadc2d53..310ce27eb 100644 --- a/docs/api/selector_manager.html +++ b/docs/api/selector_manager.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS

# Selectors

Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take + (opens new window)

# Selectors

Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take a look at this code:

span > #send-btn.btn{
  ...
 }
 
<span>
   <button id="send-btn" class="btn"></button>
 </span>
-

In this scenario we get:

  • span -> selector of type tag
  • send-btn -> selector of type id
  • btn -> selector of type class

So, for example, being btn the same class entity it'll be easier to refactor and track things.

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+

In this scenario we get:

  • span -> selector of type tag
  • send-btn -> selector of type id
  • btn -> selector of type class

So, for example, being btn the same class entity it'll be easier to refactor and track things.

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
  selectorManager: {
    // options
  }
@@ -71,13 +71,15 @@ selectorManager.]);

Returns Array (opens new window)<State>

# getSelected

Get commonly selected selectors, based on all selected components.

# Examples

const selected = selectorManager.getSelected();
 console.log(selected.map(s => s.toString()))
-

Returns Array (opens new window)<Selector>

# addSelected

Add new selector to all selected components.

# Parameters

# Examples

selectorManager.addSelected('.new-class');
-

# removeSelected

Remove a common selector from all selected components.

# Parameters

# Examples

selectorManager.removeSelected('.myclass');
-

# getSelectedTargets

Get the array of currently selected targets.

# Examples

const targetsToStyle = selectorManager.getSelectedTargets();
+

Returns Array (opens new window)<Selector>

# getSelectedAll

Get selected selectors.

# Examples

const selected = selectorManager.getSelectedAll();
+console.log(selected.map(s => s.toString()))
+

Returns Array (opens new window)<Selector>

# addSelected

Add new selector to all selected components.

# Parameters

# Examples

selectorManager.addSelected('.new-class');
+

# removeSelected

Remove a common selector from all selected components.

# Parameters

# Examples

selectorManager.removeSelected('.myclass');
+

# getSelectedTargets

Get the array of currently selected targets.

# Examples

const targetsToStyle = selectorManager.getSelectedTargets();
 console.log(targetsToStyle.map(target => target.getSelectorsString()))

Returns Array (opens new window)<(Component | CssRule)>

# setComponentFirst

Update component-first option. If the component-first is enabled, all the style changes will be applied on selected components (ID rules) instead -of selectors (which would change styles on all components with those classes).

# Parameters

# getComponentFirst

Get the value of component-first option.

Returns Boolean (opens new window)

# getAll

Get all selectors

Returns Collection<Selector>

+of selectors (which would change styles on all components with those classes).

# Parameters

# getComponentFirst

Get the value of component-first option.

Returns Boolean (opens new window)

# getAll

Get all selectors

Returns Collection<Selector>

←

GrapesJS
- + diff --git a/docs/api/storage_manager.html b/docs/api/storage_manager.html index 6a70b5a82..edf9b2fc9 100644 --- a/docs/api/storage_manager.html +++ b/docs/api/storage_manager.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/style_manager.html b/docs/api/style_manager.html index 9c71c2505..b119d05f8 100644 --- a/docs/api/style_manager.html +++ b/docs/api/style_manager.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/api/undo_manager.html b/docs/api/undo_manager.html index 6634aee8b..754943db3 100644 --- a/docs/api/undo_manager.html +++ b/docs/api/undo_manager.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
GrapesJS

# FAQ

Coming soon

- + diff --git a/docs/getting-started.html b/docs/getting-started.html index b64f722bf..941f41222 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -10,9 +10,9 @@ - - - + + +
GrapesJS

+

And here is our final result:

Hello World Component!

← →

- + diff --git a/docs/guides/Custom-CSS-parser.html b/docs/guides/Custom-CSS-parser.html index e9af2849c..181f2b0ad 100644 --- a/docs/guides/Custom-CSS-parser.html +++ b/docs/guides/Custom-CSS-parser.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/guides/Replace-Rich-Text-Editor.html b/docs/guides/Replace-Rich-Text-Editor.html index 05d0f1ab6..1bb497cf1 100644 --- a/docs/guides/Replace-Rich-Text-Editor.html +++ b/docs/guides/Replace-Rich-Text-Editor.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/index.html b/docs/index.html index 1a59b28c5..edd154613 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS

# Introduction

# What is GrapesJS?

At first glance one might think this is just another page/HTML builder, but it's something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things". By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. MJML (opens new window)), Native Mobile Applications (eg. React Native (opens new window)), Native Desktop Applications (eg. Vuido (opens new window)), PDFs (eg. React PDF (opens new window)), 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 your applications. + (opens new window)

# Introduction

# What is GrapesJS?

At first glance one might think this is just another page/HTML builder, but it's something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things". By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. MJML (opens new window)), Native Mobile Applications (eg. React Native (opens new window)), Native Desktop Applications (eg. Vuido (opens new window)), PDFs (eg. React PDF (opens new window)), 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 your applications. GrapesJS ships with features and tools that enable you to craft easy to use builders. Which allows your users to create complex HTML-like templates without any knowledge of coding.

# Why GrapesJS?

GrapesJS was designed primarily for use inside Content Management Systems 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. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose.

# Quick Start

To showcase the power of GrapesJS we have created some presets.

You can actually use them as a starting point for your editors, so, just follow the instructions on their repositories to get a quick start for your builder.

# Download

Latest version: npm (opens new window)

You can download GrapesJS from one of these sources

  • CDNs
    • unpkg
      • https://unpkg.com/grapesjs
      • https://unpkg.com/grapesjs/dist/css/grapes.min.css
    • cdnjs
      • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js
      • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css
  • npm
    • npm i grapesjs
  • git -
    • git clone https://github.com/artf/grapesjs.git

# Changelog

To track changes made in the library we rely on Github Releases (opens new window)

+

# Changelog

To track changes made in the library we rely on Github Releases (opens new window)

Getting Started →

- + diff --git a/docs/modules/Assets.html b/docs/modules/Assets.html index 39c19b88e..55d51f57d 100644 --- a/docs/modules/Assets.html +++ b/docs/modules/Assets.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/Blocks.html b/docs/modules/Blocks.html index de00f0ea0..540edefdc 100644 --- a/docs/modules/Blocks.html +++ b/docs/modules/Blocks.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/Commands.html b/docs/modules/Commands.html index bcc341373..b9c0d6e23 100644 --- a/docs/modules/Commands.html +++ b/docs/modules/Commands.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/Components-js.html b/docs/modules/Components-js.html index ea0ed371c..a24510bc3 100644 --- a/docs/modules/Components-js.html +++ b/docs/modules/Components-js.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/Components.html b/docs/modules/Components.html index 473f54254..421d32663 100644 --- a/docs/modules/Components.html +++ b/docs/modules/Components.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/I18n.html b/docs/modules/I18n.html index ece2fbb21..4a9d77c6f 100644 --- a/docs/modules/I18n.html +++ b/docs/modules/I18n.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/Layers.html b/docs/modules/Layers.html index 7f71e9806..2fc50641d 100644 --- a/docs/modules/Layers.html +++ b/docs/modules/Layers.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/Modal.html b/docs/modules/Modal.html index e9371dec7..02c2ec0b4 100644 --- a/docs/modules/Modal.html +++ b/docs/modules/Modal.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/Plugins.html b/docs/modules/Plugins.html index b8100fb93..83bace799 100644 --- a/docs/modules/Plugins.html +++ b/docs/modules/Plugins.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/Selectors.html b/docs/modules/Selectors.html index 258821f03..9cd78afab 100644 --- a/docs/modules/Selectors.html +++ b/docs/modules/Selectors.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/Storage.html b/docs/modules/Storage.html index d305aefc5..d06f2d4a0 100644 --- a/docs/modules/Storage.html +++ b/docs/modules/Storage.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/Style-manager.html b/docs/modules/Style-manager.html index 18789be82..52e775981 100644 --- a/docs/modules/Style-manager.html +++ b/docs/modules/Style-manager.html @@ -9,9 +9,9 @@ - - - + + +
GrapesJS
- + diff --git a/docs/modules/Traits.html b/docs/modules/Traits.html index 289b23619..fc7bcc0d2 100644 --- a/docs/modules/Traits.html +++ b/docs/modules/Traits.html @@ -9,9 +9,9 @@ - - - + + +