automation

Build websites with GrapesJS

Name: Build websites with GrapesJS
Author: GrapesJS

Create templates without coding with GrapesJS, used by developers with 26k+ GitHub stars, ideal for founders needing a no-code solution.

26,063 stars4,636 forksTypeScriptQuality 9/10Updated 7/24/2026100% free · open source

What it does

GrapesJS is a free and open-source web builder framework that allows founders to create templates without coding, ideal for building custom web applications.

Install / run

npm install grapesjs

When to use it

•You need to create a custom website or web application without extensive coding knowledge
•You want to build a prototype or MVP quickly without worrying about the underlying code
•You need to create a web page or template that can be easily edited or customized by non-technical team members

Quick start

1Import GrapesJS in your HTML file by adding the script tag: <script src='https://unpkg.com/grapesjs'></script>
2Create a container element in your HTML file where the editor will be rendered, for example: <div id='gjs'></div>
3Initialize the GrapesJS editor by calling the `getEditor` function and passing the container element: const editor = grapesjs.init({ container: '#gjs' })
4Configure the editor by passing options to the `init` function, such as setting the height and width of the canvas: const editor = grapesjs.init({ container: '#gjs', height: '100vh', width: '100%' })
5Start building your template by adding components, such as text, images, or buttons, using the editor's interface

Ready-to-paste prompt

const editor = grapesjs.init({ container: '#gjs', components: '<div style="width: 100%; height: 100vh; background-color: #f0f0f0;"></div>' })

Heads up: Make sure to include the GrapesJS CSS file in your HTML file to ensure proper styling of the editor, you can do this by adding the following link tag: <link rel='stylesheet' href='https://unpkg.com/grapesjs/dist/css/grapes.min.css'>

Saves to your device