Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time
September 22, 2022 11:45
September 13, 2022 16:56
September 14, 2022 14:24
September 14, 2022 13:49
September 14, 2022 12:21
September 22, 2022 11:50
September 22, 2022 11:50
September 13, 2022 13:54

GrapesJS Preset Webpage


From the v1.* we don't include other plugins in this one anymore, so if you need them, you have to include them manually in your project. If you want to replicate the editor from the demo, please check the source of the demo here


  • Plugin name: grapesjs-preset-webpage
  • Commands:
    • gjs-open-import-webpage Opens a modal for the import
    • set-device-desktop Set desktop device
    • set-device-tablet Setup tablet device
    • set-device-mobile Setup mobile device
    • canvas-clear Clear all components and styles inside canvas
  • Blocks:
    • link-block
    • quote
    • text-basic


Option Description Default
blocks Which blocks to add ['link-block', 'quote', 'text-basic']
block Add custom block options, based on block id (blockId) => ({})
modalImportTitle Modal import title 'Import'
modalImportButton Modal import button text 'Import'
modalImportLabel Import description inside import modal ''
modalImportContent Default content to setup on import model open. Could also be a function with a dynamic content return (must be a string) eg. modalImportContent: editor => editor.getHtml() ''
importViewerOptions Code viewer (eg. CodeMirror) options {}
textCleanCanvas Confirm text before cleaning the canvas 'Are you sure to clean the canvas?'
showStylesOnChange Show the Style Manager on component change true
useCustomTheme Load custom preset theme true


  • CDN
  • NPM
    • npm i grapesjs-preset-webpage
  • GIT
    • git clone


Directly in the browser

<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-preset-webpage.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      plugins: ['grapesjs-preset-webpage'],
      pluginsOpts: {
        'grapesjs-preset-webpage': {
          // options

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-webpage';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),


Clone the repository

$ git clone
$ cd grapesjs-blocks-basic

Install it

$ npm i

Start the dev server

$ npm start

Build before the commit. This will also increase the patch level version of the package

$ npm run build


BSD 3-Clause