# How grapesjs-preset-mautic can be used in mautic instance?

**URL:** https://forum.mautic.org/t/how-grapesjs-preset-mautic-can-be-used-in-mautic-instance/26080
**Category:** Product Support
**Tags:** mautic-4
**Created:** [November 14, 2022, 3:13pm UTC](https://forum.mautic.org/t/how-grapesjs-preset-mautic-can-be-used-in-mautic-instance/26080 "2022-11-14T15:13:34Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![abdulwahab](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/abdulwahab/32/505_2.png) [@abdulwahab](https://forum.mautic.org/u/abdulwahab)
#### Post date: [November 14, 2022, 3:13pm UTC](https://forum.mautic.org/t/how-grapesjs-preset-mautic-can-be-used-in-mautic-instance/26080/1 "2022-11-14T15:13:34Z")

</div>

How can I integrate this [grapesjs-preset-mautic](https://github.com/mautic/grapesjs-preset-mautic) into my mautic instance?  
I cannot get it from the Readme file given in the repo.

Objective: The main objective of using [grapesjs-preset-mautic](https://github.com/mautic/grapesjs-preset-mautic) is to add custom blocks in my mautic grapesjs builder.

How I can achieve that?

---

<div class="post-metadata">

### Author: ![techbill](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/techbill/32/8325_2.png) [@techbill](https://forum.mautic.org/u/techbill)
#### Post date: [November 14, 2022, 4:01pm UTC](https://forum.mautic.org/t/how-grapesjs-preset-mautic-can-be-used-in-mautic-instance/26080/2 "2022-11-14T16:01:18Z")

</div>

I could be wrong but when I read what it adds, it look like it already have those included in default Mautic 4 GrapesJS.

Are you missing something in your GrapesJS?

---

<div class="post-metadata">

### Author: ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)
#### Post date: [November 15, 2022, 10:03am UTC](https://forum.mautic.org/t/how-grapesjs-preset-mautic-can-be-used-in-mautic-instance/26080/3 "2022-11-15T10:03:08Z")

</div>

You can follow this tutorial to add new blocks:

> **[Building Custom Blocks in Grapesjs Dynamically From Canvas](https://esketchers.com/building-custom-blocks-in-grapesjs-dynamically/)**
>
> In this guide, you will see how to set up and take full advantage of the building custom blocks in GrapesJS dynamically from canvas. Read More about it!

---

<div class="post-metadata">

### Author: ![abdulwahab](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/abdulwahab/32/505_2.png) [@abdulwahab](https://forum.mautic.org/u/abdulwahab)
#### Post date: [November 15, 2022, 10:15am UTC](https://forum.mautic.org/t/how-grapesjs-preset-mautic-can-be-used-in-mautic-instance/26080/4 "2022-11-15T10:15:50Z")

</div>

@techbill I cannot see in mautic grapesjs builder where it can add custom blocks.

---

<div class="post-metadata">

### Author: ![abdulwahab](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/abdulwahab/32/505_2.png) [@abdulwahab](https://forum.mautic.org/u/abdulwahab)
#### Post date: [November 15, 2022, 10:18am UTC](https://forum.mautic.org/t/how-grapesjs-preset-mautic-can-be-used-in-mautic-instance/26080/5 "2022-11-15T10:18:09Z")

</div>

@joeyk Thanks for your reply. I was looking for something that can work within the mautic for custom blocks. I think this link works for website or for external sources not for mautic instance.  
Please help me if this tutorial can be used along with mautic instance.

Thanks in advance.

---

<div class="post-metadata">

### Author: ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)
#### Post date: [November 15, 2022, 10:19am UTC](https://forum.mautic.org/t/how-grapesjs-preset-mautic-can-be-used-in-mautic-instance/26080/6 "2022-11-15T10:19:53Z")

</div>

Mautic uses grapesjs as email builder.  
It’s a third party vendor basically.  
In order to add new blocks to the grapesjs builder you need to modify the grapesjs builder.  
I hope that makes sense.

---

<div class="post-metadata">

### Author: ![abdulwahab](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/abdulwahab/32/505_2.png) [@abdulwahab](https://forum.mautic.org/u/abdulwahab)
#### Post date: [November 15, 2022, 10:26am UTC](https://forum.mautic.org/t/how-grapesjs-preset-mautic-can-be-used-in-mautic-instance/26080/7 "2022-11-15T10:26:52Z")

</div>

Thanks @joeyk . I got your point.  
So, following this tutorial can I use **grapesjs-preset-mautic** instead of **grapesjs-preset-webpage**?

---

<div class="post-metadata">

### Author: ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)
#### Post date: [November 15, 2022, 10:39am UTC](https://forum.mautic.org/t/how-grapesjs-preset-mautic-can-be-used-in-mautic-instance/26080/8 "2022-11-15T10:39:18Z")

</div>

I don’t know your skills, but this is a good starting point.  
I encourage you to duckduckgo the interwebs to learn how to code with grapesjs.
