# Adding custom blocks to GrapesJS builder
**URL:** https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608
**Category:** Product Support
**Tags:** mautic-4
**Created:** [April 6, 2022, 9:59am UTC](https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608 "2022-04-06T09:59:26Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@eibens](https://forum.mautic.org/u/eibens)
#### Post date: [April 6, 2022, 9:59am UTC](https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608/1 "2022-04-06T09:59:26Z")
Hello!
I am trying to configure the GrapesJS builder with custom blocks. This possibility is mentioned in the docs:
> GrapesJS comes with a set of built-in blocks, in this way you’re able to build your templates faster. If the default set isn’t enough you can always add your own custom blocks.
>
> from [Mautic docs](https://docs.mautic.org/en/builders)
Unfortunately, I was not able to find any more information on how to approach this. Here is a short [tutorial on adding custom code block](https://forum.mautic.org/t/fyi-custom-code-block-for-grapesjs-works-good-so-far-instructions-to-add/20956), but I am not sure how related this is to my problem. I also found a message on Slack that asked about adding custom blocks through a template.
Obviously, I can fork Mautic and build it into the GrapheJS plugin directly, but I was wondering what would be the least intrusive way of doing it.
Any help is appreciated!
**Your software**
My Mautic version is: 4
My PHP version is: 7.4
---
### Author:  [@jonathandhn](https://forum.mautic.org/u/jonathandhn)
#### Post date: [April 12, 2022, 11:05am UTC](https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608/2 "2022-04-12T11:05:36Z")
Hi, you could have a look at [GitHub - mautic/grapesjs-preset-mautic: GrapesJS preset configuration for the Mautic editor](https://github.com/mautic/grapesjs-preset-mautic) as they add mautic blocks to the grapejs editor this way
---
### Author:  [@eibens](https://forum.mautic.org/u/eibens)
#### Post date: [April 20, 2022, 9:25am UTC](https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608/3 "2022-04-20T09:25:47Z")
Thanks, jonathandhn!
There were additional requirements that made that approach infeasible. In particular, we wanted to give our designers full control, meaning they needed to be able to upload block definitions themselves. Our approach looks like this:
1. Use a one-time patch for the Mautic GrapesJS plugin.
2. Upload block definitions within the theme archives using the standard GUI.
## GrapesJS plugin patch
Put this somewhere after the initialization of the editor in the GrapesJS plugin, for example at the end of the [`launchBuilderGrapesjs` function in builder.js](https://github.com/mautic/mautic/blob/58d0f41495868bc4d48ec6752e6e9015f9880ef3/plugins/GrapesJsBuilderBundle/Assets/library/js/builder.js#L18).
```auto
// Get the GrapesJS editor.
const editor = ...; // depends on snippet location
// Find the theme ID from the selection field.
const themeSelect = document.getElementById("emailform_template");
if (themeSelect) {
const themeName = themeSelect.value;
// Load the blocks.json that contains the GrapeJS block config.
const url = `/themes/${themeName}/blocks.json`;
fetch(url).then((res) => res.json()).then((blocks) => {
// Replace default blocks with loaded blocks.
const bm = editor.BlockManager;
bm.getAll().reset();
for (const id in blocks) {
bm.add(id, blocks[id]);
}
}).catch(() => {
// Ignore if there is not blocks.json for this theme.
});
}
```
## Upload block definitions
Themes can now optionally include a `blocks.json` file that looks something like this:
```auto
{
"text": {
"label": "Text",
"content": "This is a paragraph.",
"attributes": {
"class": "fa fa-camera-retro"
}
},
"button": {
"label": "Button",
"content": "Click me now",
"attributes": {
"class": "gjs-fonts gjs-f-button"
}
}
}
```
---
### Author:  [@silavapi](https://forum.mautic.org/u/silavapi)
#### Post date: [April 21, 2022, 11:33am UTC](https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608/4 "2022-04-21T11:33:23Z")
@adiux something that might be of interest for the builder here?
---
### Author:  [@manjuok](https://forum.mautic.org/u/manjuok)
#### Post date: [September 6, 2022, 10:03am UTC](https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608/5 "2022-09-06T10:03:34Z")
> [@eibens](#):
>
> `const editor = ...; // depends on snippet location`
can you let me know what goes here
---
### Author:  [@abdulwahab](https://forum.mautic.org/u/abdulwahab)
#### Post date: [November 14, 2022, 3:09pm UTC](https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608/6 "2022-11-14T15:09:35Z")
How I can integrate this [grapesjs-preset-mautic](https://github.com/mautic/grapesjs-preset-mautic) into my mautic instance?
I cannot get it from Readme file which is given in the repo.
---
### Author:  [@juanlugo](https://forum.mautic.org/u/juanlugo)
#### Post date: [April 27, 2023, 3:39pm UTC](https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608/7 "2023-04-27T15:39:00Z")
Hi @manjuok,
I hope you are keeping well.
Did you find anything regarding this?
Kind regards,
Juan
---
### Author:  [@wadu](https://forum.mautic.org/u/wadu)
#### Post date: [June 21, 2024, 9:40am UTC](https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608/8 "2024-06-21T09:40:07Z")
How can I incorporate custom [webcam](https://webcammictest.io/) blocks into GrapesJS for creating templates? Considering the details from Mautic’s documentation and the suggested methods such as forking or directly developing a plugin, what would be the least disruptive approach?
---
### Author:  [@klaasvna](https://forum.mautic.org/u/klaasvna)
#### Post date: [April 25, 2025, 10:18pm UTC](https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608/9 "2025-04-25T22:18:31Z")
Hi all,
I see this topic has a lot of views. I’ve visited it more than once because i’m curious if someone had a simple explanation on how to get custom blocks into the grapesjsbuilder. It would make it a great feature!
My problem is that some of the provided answers/solutions are to technical for me and I can’t get it to work. Even my AI assistants get stuck and don’t know how to get it working. So is there someone who could make a simple tutorial for the less technical people around here? I would be very thankfull!
---
### Author:  [@honeypie](https://forum.mautic.org/u/honeypie)
#### Post date: [September 10, 2025, 9:10pm UTC](https://forum.mautic.org/t/adding-custom-blocks-to-grapesjs-builder/23608/10 "2025-09-10T21:10:05Z")
I also would like to know if it works and how it works !
Thank you