Building a website builder with React

#react #webdev #javascript #tutorial

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

grapesjs-preset-webpage gives us a basic set of blocks we can use on the template builder
grapesjs-plugin-forms this plugin contains block for form elements, like buttons, dropdowns
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

Top comments (3)

Mausam Giri • Mar 23 '23 • Edited

`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)
}, [])