diff --git a/docs/getting-started.md b/docs/getting-started.md
index f0f1af10c..c0555e60b 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -8,11 +8,11 @@ meta:
# Getting Started
-This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the [final result](#final-result)
+This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the [final result](#final-result).
## Import the library
-Before you start using GrapesJS, you'll have to import it. Let's import the latest version
+Before you start using GrapesJS, you'll have to import it. Let's import the latest version:
```html
@@ -100,7 +100,7 @@ const editor = grapesjs.init({
-As you can see we add our blocks via the initial configuration. Obviously there might be a case in which you would like to add them dynamically, in this case you have to use the [Block Manager API](api/block_manager.html)
+As you can see we add our blocks via the initial configuration. Obviously there might be a case in which you would like to add them dynamically, in this case you have to use the [Block Manager API](api/block_manager.html):
```js
editor.BlockManager.add('my-block-id', {
@@ -110,16 +110,16 @@ editor.BlockManager.add('my-block-id', {
})
```
::: tip
-If you want to learn more about blocks we suggest to read its dedicated article: [Block Manager Module](modules/Blocks.html)
+If you want to learn more about blocks we suggest to read its dedicated article: [Block Manager Module](modules/Blocks.html).
:::
## Define Components
Technically, once you drop your HTML block inside the canvas each element of the content is transformed into a GrapesJS Component. A GrapesJS Component is an object containing information 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 in the View. Therefore, if you add a new attribute to the model, it will be available in the export code (which we will learn more about later), and the element you see in the canvas will be updated with new attributes.
This isn't totally out of the ordinary, but the unique thing about Components that you can create a totally decoupled View. This means you can show the user whatever you desire regardless of what is in the Model. For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If you want to learn more about Custom Components, you should check out [Component Manager Module](modules/Components.html).
-GrapesJS comes with a few [built-in Components](modules/Components.html#built-in-component-types) that enable different features once rendered in the canvas. For example, by double clicking on an image component you will see the default [Asset Manager](modules/Assets.html), 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 customization and [replaceable](guides/Replace-Rich-Text-Editor.html).
+GrapesJS comes with a few [built-in Components](modules/Components.html#built-in-component-types) that enable different features once rendered in the canvas. For example, by double clicking on an image component you will see the default [Asset Manager](modules/Assets.html), 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](guides/Replace-Rich-Text-Editor.html).
-As we have seen before you can create Blocks directly as Components
+As we have seen before you can create Blocks directly as Components:
```js
editor.BlockManager.add('my-block-id', {
// ...
@@ -142,10 +142,10 @@ editor.BlockManager.add('my-block-id', {
})
```
::: tip
-Check out the [Components API](api/components.html) to learn how to interact with components dynamically
+Check out the [Components API](api/components.html) to learn how to interact with components dynamically.
:::
-An example on how to select some inner component and replace its children with new contents
+An example of how to select some inner component and replace its children with new contents:
```js
// The wrapper is the root Component
@@ -239,12 +239,12 @@ editor.on('abort:export-template', () => console.log('Command aborted'));
```
::: tip
-Check out the [Panels API](api/panels.html) to see all the available methods
+Check out the [Panels API](api/panels.html) to see all the available methods.
:::
## Layers
-Another utility tool you might find useful when working with web elements is the layer manger. It's a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it
+Another utility tool you might find useful when working with web elements is the layer manger. It's a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it.
```html{4,5,6,7,8,9,10,11}
@@ -296,7 +296,7 @@ const editor = grapesjs.init({
## Style Manager
Once you have defined the structure of the template the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.
-Let's start by adding one more panel inside the `panel__right` and another one in `panel__top` which will contain a Layer/Style Manager switcher
+Let's start by adding one more panel inside the `panel__right` and another one in `panel__top` which will contain a Layer/Style Manager switcher:
```html{3,8}
@@ -424,10 +424,10 @@ editor.Commands.add('show-styles', {
-Inside Style Manager definition we use `buildProps` which helps us create common properties from [available built-in objects](modules/Style-manager.html#built-in-properties) then in `properties` we can override same objects (eg. passing another `name` to change the label) identified by `property` name. As you can see from `custom-prop` example it's a matter of defining the CSS `property` and the input `type`. We suggest to check a more complete example of Style Manager properties usage from the [webpage preset demo](https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1000)
+Inside Style Manager definition we use `buildProps` which helps us create common properties from [available built-in objects](modules/Style-manager.html#built-in-properties) then in `properties` we can override same objects (eg. passing another `name` to change the label) identified by `property` name. As you can see from `custom-prop` example it's a matter of defining the CSS `property` and the input `type`. We suggest to check a more complete example of Style Manager properties usage from the [webpage preset demo](https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1000).
::: tip
-Check the [Style Manager API](api/panels.html) to see how to update sectors and properties dynamically
+Check the [Style Manager API](api/panels.html) to see how to update sectors and properties dynamically.
:::