Building a website builder with React
Tags: react, webdev, javascript, tutorial
Published: 2023-02-28 17:31:19

---
title: Building a website builder with React
published: true
date: 2023-02-28 14:07:16 UTC
tags: react,webdev,javascript,tutorial
canonical_url: https://blog.rrrm.co.uk/post/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


```bash
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

```javascript

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

```javascript
      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 

```javascript

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

![](https://sli1n332.directus.app/assets/dd0841e0-7d1f-4ec9-9bef-76595b85a5bc)

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


![](https://sli1n332.directus.app/assets/a5d692c3-69e9-4f3d-8e8d-713460e0f593)
Repo: [https://github.com/rafaelmagalhaes/website-builder](https://github.com/rafaelmagalhaes/website-builder)