Building a website builder with React

In this blog post, we will explore how to create a website builder using React and GrapesJS. React is a popular JavaScript library for building user interfaces, while GrapesJS is an open-source web page builder that allows users to create custom web pages through a drag-and-drop interface. By combining the two, we can create a powerful and customizable website builder that is both user-friendly and efficient. We will start by setting up a new React project and integrating GrapesJS into our application. By the end of this tutorial, you will have a fully functional website builder built with React and GrapesJS, ready to be deployed and used for creating custom web pages.

Creating the project

npx create-react-app my-app

let's install the required packages

npm i grapejs grapesjs-blocks-basic grapesjs-plugin-forms grapesjs-preset-webpage

1. grapesjs-preset-webpage gives us a basic set of blocks we can use on the template builder
2. grapesjs-plugin-forms this plugin contains block for form elements, like buttons, dropdowns
3. grapesjs-preset-webpage allow us to set mobile, desktop views and includes extra blocks, and allows us to export and import HTML

Inside app.js we can include the imports required

import {useEffect} from "react";

import 'grapesjs/dist/css/grapes.min.css' // import grapejs styles

import grapesjs from "grapesjs";  

// import plugins we just installed
import websitePlugin from 'grapesjs-preset-webpage';
import basicBlockPlugin from 'grapesjs-blocks-basic'
import formPlugin from 'grapesjs-plugin-forms'

We can now initiate the grapejs plugin

      grapesjs.init({
         container: '#gjs'
         plugins: [websitePlugin,basicBlockPlugin,formPlugin],
       })

we have the container option we need to pass the id of the HTML element we want grapejs to render too

the plugins option is a list of plugins from grapejs we can add them there

complete code

import {useEffect} from "react";

import grapesjs from "grapesjs";
import 'grapesjs/dist/css/grapes.min.css'
import websitePlugin from 'grapesjs-preset-webpage';
import basicBlockPlugin from 'grapesjs-blocks-basic'
import formPlugin from 'grapesjs-plugin-forms'


function App() {

    useEffect(() => {
       grapesjs.init({
         container: '#gjs',
         width: '100%',
         plugins: [websitePlugin,basicBlockPlugin,formPlugin],
       })
    },[])

    return (
        <div id="gjs"></div>
    );
}

export default App;

if we run the project we should see a blank canvas ready to create a website

It is also possible to customise it and have it look to match your needs I will drop and example bellow

Repo: https://github.com/rafaelmagalhaes/website-builder

Comments

[Mausam Giri]

`import React,{ useEffect, useState } from 'react'
import 'grapesjs/dist/css/grapes.min.css';
import grapesJS from 'grapesjs';
import grapesJSMJML from 'grapesjs-mjml';

import './App.css'

function App() {
const [editors, setEditor] = useState(null);

useEffect(() => {
const editor =
grapesJS.init({
fromElement: true,
container: '#email-editor',
height: "100svh",
plugins: [grapesJSMJML],
pluginsOpts: {
[grapesJSMJML]: {/* ...options */}
},
});
console.log('editor.addComponents', editor.addComponents);
editor.addComponents(
<mjml>
<mj-body>
<mj-section></mj-section>
</mj-body>
</mjml>
)
setEditor(editor)
}, [])

return (

)
}

export default App`

[ersath]

hello im recently find this now i want add save button if a user clicks i could save the data to my database i don't know how to do that

[Mausam Giri]

Here's my code. I don't know why it's not working with mjml please help me to get one. I want to use GrapeJS with mjml but it's working as intended.