grapesjs/cli

GrapesJS CLI helper for the development

GrapesJS

GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates. To better understand this concept check the image below

Generally any 'template system', that you'd find in various applications like CMS, is composed by the structure (HTML), style (CSS) and variables, which are then replaced with other templates and contents on server-side and rendered on client.

This demos show examples of what is possible to achieve:
Webpage Demo - http://grapesjs.com/demo.html
Newsletter Demo - http://grapesjs.com/demo-newsletter-editor.html

Table of contents

• Features
• Download
• Usage
• Development
• Documentation
• API
• Testing
• Plugins
• Support
• Changelog
• Contributing
• License

Features

Blocks	Style Manager	Layer Manager

Code Viewer	Asset Manager

• Local and remote storage

• Default built-in commands (basically for creating and managing different components)

Download

• CDNs
  • UNPKG (resolves to the latest version)
    • https://unpkg.com/grapesjs
    • https://unpkg.com/grapesjs/dist/css/grapes.min.css
  • CDNJS (replace X.X.X with the current version)
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css
• NPM
  • npm i grapesjs
• GIT
  • git clone https://github.com/GrapesJS/grapesjs.git

For the development purpose you should follow instructions below.

Usage

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

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

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
  });
</script>

For a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html

Development

Clone the repository and install all the necessary dependencies (yarn is highly recommended)

$ git clone https://github.com/GrapesJS/grapesjs.git
$ cd grapesjs
$ yarn

Start the dev server

$ yarn start

Once the development server is started you should be able to reach the demo page (eg. http://localhost:8080)

Documentation

Check the getting started guide here: Documentation

API

API References could be found here: API-Reference

Testing

$ yarn test

Plugins

Official Plugins | Community Plugins

Wrappers

• @grapesjs/react - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.

Extensions

• grapesjs-plugin-export - Export GrapesJS templates in a zip archive
• grapesjs-plugin-filestack - Add Filestack uploader in Asset Manager
• grapesjs-plugin-ckeditor - Replaces the built-in RTE with CKEditor
• grapesjs-tui-image-editor - GrapesJS TOAST UI Image Editor
• grapesjs-blocks-basic - Basic set of blocks
• grapesjs-plugin-forms - Set of form components and blocks
• grapesjs-navbar - Simple navbar component
• grapesjs-component-countdown - Simple countdown component
• grapesjs-style-gradient - Add gradient type input to the Style Manager
• grapesjs-style-filter - Add filter type input to the Style Manager
• grapesjs-style-bg - Full-stack background style property type, with the possibility to add images, colors, and gradients
• grapesjs-blocks-flexbox - Add the flexbox block
• grapesjs-lory-slider - Slider component by using lory
• grapesjs-tabs - Simple tabs component
• grapesjs-tooltip - Simple, CSS only, tooltip component for GrapesJS
• grapesjs-custom-code - Embed custom code
• grapesjs-touch - Enable touch support
• grapesjs-indexeddb - Storage wrapper for IndexedDB
• grapesjs-firestore - Storage wrapper for Cloud Firestore
• grapesjs-parser-postcss - Custom CSS parser for GrapesJS by using PostCSS
• grapesjs-typed - Typed component made by wrapping Typed.js library
• grapesjs-ui-suggest-classes - Enable auto-complete of classes in the SelectorManager UI
• grapesjs-fonts - Custom Fonts plugin, adds a UI to manage fonts in websites
• grapesjs-symbols - Symbols plugin to reuse elements in a website and accross pages
• grapesjs-click - Grab and drop blocks and components with click (no more drag-and-drop)
• grapesjs-float - Anchor a floating element next to another element (selected component, ...)

Presets

• grapesjs-preset-webpage - Webpage Builder
• grapesjs-preset-newsletter - Newsletter Builder
• grapesjs-mjml - Newsletter Builder with MJML components

Find out more about plugins here: Creating plugins

Support

If you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via Open Collective

Thanks to BrowserStack for providing us browser testing services

License

BSD 3-clause

cli's Issues

Unexpected token '('

Hi,
I am running npx grapesjs-cli init -y --user=my-username on Mac OS and I am getting
Unexpected token '('

Any pointers in how to resolve the issue?
Best

Debugging grapesjs

What would be the recommended way of debugging the upstream grapesjs package to see how it interacts with your plugin? You can't really add any logging since it is being pulled in using a CDN.

This is just something I've ran into when trying to debug something in the grapes-mjml plugin.

[Feature] Install packages after create a new plugin.

Always, after a new plugin, i need to run npm install
It could be an option in the questions before create plugin, may i create a PR for it if you allow :)

Bug on startup the cli

Set to false when asked about choose between add custom component and add custom block, it generates the file with the include.

I can open a PR ASAP.

How to configure webpack

Hello, I have cloned your repo and I am trying to integrate a react component within the components.js file, just to test that I can integrate a simple functional react component.
However, I am unable to update the webpack module rules to include presets for react.

Any tips?

Vite

Hi, is possible to use vue-cli with a vite application? When i try give me this error:
aught SyntaxError: The requested module '/src/plugins/about1Block/dist/index.js' does not provide an export named 'default'

copy-webpack-plugin doesn't work

I'm trying to copy some files from node_modules into my dist directory with copy-webpack-plugin but it gives the following error:

> grapesjs-cli build --patch=false


Start building the library...

/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/grapesjs-cli/src/build.js:106
            const result = stats.toString(statConf);
                                 ^

TypeError: Cannot read properties of undefined (reading 'toString')
    at /home/amir/projects/DigiNote/GrapesJsComponents/node_modules/grapesjs-cli/src/build.js:106:34
    at /home/amir/projects/DigiNote/GrapesJsComponents/node_modules/webpack/lib/webpack.js:148:8
    at /home/amir/projects/DigiNote/GrapesJsComponents/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.shutdown (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/webpack/lib/Cache.js:150:23)
    at /home/amir/projects/DigiNote/GrapesJsComponents/node_modules/webpack/lib/Compiler.js:1225:15
    at Hook.eval [as callAsync] (eval at create (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/tapable/lib/Hook.js:18:14)
    at Compiler.close (/home/amir/projects/DigiNote/GrapesJsComponents/node_modules/webpack/lib/Compiler.js:1218:23)

And this is how I'm using the copy-webpack-plugin:

...
  plugins: [
      ...config.plugins,
      new CopyPlugin({
        patterns: [
          {
            from: './node_modules/bootstrap/dist/css/bootstrap.min.css',
            to: './dist',
          },
        ],
      }),
    ],
...

[ERROR] Compilation Error During Serve

I took this compilation error during serve. How can I fix this error?

Start the development server...

(node:4468) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'createSnapshot' of undefined
    at C:\Users\Furkan\Desktop\template editor\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:13:36
    at new Promise (<anonymous>)
    at Object.createSnapshot (C:\Users\Furkan\Desktop\template editor\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:12:10)
    at C:\Users\Furkan\Desktop\template editor\node_modules\html-webpack-plugin\lib\cached-child-compiler.js:219:35
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:4468) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:4468) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from undefined
i ｢wds｣: Content not from webpack is served from C:\Users\Furkan\Desktop\template editor

Starting server on http://localhost:8081

C:\Users\Furkan\Desktop\template editor\node_modules\webpack\lib\Dependency.js:311
                throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
    at ProvidedDependency.set (C:\Users\Furkan\Desktop\template editor\node_modules\webpack\lib\Dependency.js:311:9)
    at iterationDependencies (C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\Compilation.js:940:21)
    at C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\Compilation.js:950:8
    at C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\NormalModuleFactory.js:409:6
    at C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\NormalModuleFactory.js:155:13
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
    at C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\NormalModuleFactory.js:138:29
    at C:\Users\Furkan\Desktop\template editor\node_modules\grapesjs-cli\node_modules\webpack\lib\NormalModuleFactory.js:346:9
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

does not provide an export named 'default'

I'm trying to use the cli to build a plugin for my own use, copying the dist folder and trying to import it returns the error:

Uncaught SyntaxError: The requested module '/src/plugins/cubosuite-form/dist/index.js?t=1671817004952' does not provide an export named 'default'.

I'm trying to use it with vite, how would I make it use the default export?

Failing webpack/declaration build does not cause cli process to exit with non-zero code

We noticed when the webpack build fails or the typescript declaration emitting step fails, the cli process does not exit with a non-zero code. This is problematic in a CI context as the CI pipeline will continue running the next steps in the job/next job as it doesn't detect the failure.

The following updates should probably be made:

• Catch errors thrown by buildDeclaration
• If an error is caught by buildDeclaration or the errors variable has a truthy value, add code to call process.exit with a non-zero code.

Building locales fails on windows.

I tried moving grapesjs-mjml to the cli, but having the following issue:

Issue is this line: https://github.com/artf/grapesjs-cli/blob/master/src/build.js#L29

Start building locale files...
(node:14876) UnhandledPromiseRejectionWarning: Error: Command failed: rm -rf locale
'rm' is not recognized as an internal or external command,
operable program or batch file.

    at ChildProcess.exithandler (child_process.js:308:12)
    at ChildProcess.emit (events.js:314:20)
    at ChildProcess.EventEmitter.emit (domain.js:486:12)
    at maybeClose (internal/child_process.js:1047:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)

Process finished with exit code 0

should probably use something like rimraf package to make it crossplatform

SyntaxError: Invalid or unexpected token?

getting /grapesjs-my-plugin/node_modules/path-scurry/node_modules/lru-cache/dist/cjs/index.js:52
this.signal.onabort?.(reason);
^

SyntaxError: Invalid or unexpected token
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)

Ability to extend webpack config

Hi @artf, awesome project.

It would be cool to use grapesjs-cli within the grapesjs-mjml project, however I don't think this is currently possible since we don't have a way to extend the webpack config with additional options.

Is this something still on the roadmap?

@vue/cli does something like this using webpack-merge: https://cli.vuejs.org/guide/webpack.html#simple-configuration

Plugin not found

Hi,
First, thank you for this amazing piece of work.
We are now in the process of developing a simple chart plugin. Our proof of concept works in development, but we are actually struggling to build and make it "seen" as a plugin.

The output of npx grapesjs-cli build -v is:

Start building the library...

Build config:
 { _: [ 'build' ],
  v: true,
  verbose: true,
  stats: '{}',
  patch: true,
  config: '{}',
  babel: '{}',
  targets: '> 0.25%, not dead',
  entry: 'src/index',
  output: 'dist',
  '$0': 'node_modules/.bin/grapesjs-cli' }

Patch the version

Webpack config:
 { entry: '/Users/xxx/Sites/grapesjs-zing-donut/src/index',
  mode: 'production',
  devtool: 'source-map',
  optimization:
   { minimizer:
      [ TerserPlugin {
          options:
           { test: /\.m?js(\?.*)?$/i,
             chunkFilter: [Function: chunkFilter],
             warningsFilter: [Function: warningsFilter],
             extractComments: false,
             sourceMap: true,
             cache: false,
             cacheKeys: [Function: cacheKeys],
             parallel: false,
             include: undefined,
             exclude: undefined,
             minify: undefined,
             terserOptions:
              { output:
                 { quote_style: 3,
                   preamble: '/*! grapesjs-zing-donut - 1.0.2 */' } } } } ] },
  output:
   { path: '/Users/xxx/Sites/grapesjs-zing-donut/dist',
     filename: 'grapesjs-zing-donut.min.js',
     library: 'grapesjs-zing-donut',
     libraryTarget: 'umd' },
  module:
   { rules:
      [ { test: /\.js$/,
          loader: 'babel-loader',
          include: /src/,
          options:
           { presets:
              [ [ '@babel/preset-env', { targets: '> 0.25%, not dead' } ] ],
             plugins: [ '@babel/plugin-transform-runtime' ],
             cacheDirectory: true } } ] },
  plugins: [] }

Stats config:
 { hash: false,
  colors: true,
  builtAt: false,
  entrypoints: false,
  modules: false }

Version: webpack 4.41.5
Time: 1000ms
                         Asset      Size  Chunks                   Chunk Names
    grapesjs-zing-donut.min.js  5.18 KiB       0  [emitted]        main
grapesjs-zing-donut.min.js.map  13.4 KiB       0  [emitted] [dev]  main


Start building locale files...

Locale files building completed successfully!


Building completed successfully!

Then in a CodePen https://codepen.io/yumyo/pen/wvByzpP we have:

<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs"></script>
<script src"https://s3-us-west-2.amazonaws.com/s.cdpn.io/67133/grapesjs-zing-donut.min.js"></script>

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

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      plugins: ["grapesjs-zing-donut"],
  });
</script>

As visible in console we get `"Plugin grapesjs-zing-donut not found".
The complete plugin code can be seen here https://github.com/yumyo/grapesjs-zing-donut
Any help would be highly appreciated!

Init new plugin

when i try to init the project
i have this error

/Volumes/SSDInternal/Node/editorgrapejs/samplePlugin/node_modules/path-scurry/node_modules/lru-cache/dist/cjs/index.js:52
this.signal.onabort?.(reason);
^

SyntaxError: Invalid or unexpected token
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)

( node 18.16.0 , macos )

Unexpected token 'export' on webpack.config.js

Error log:

❯ npx grapesjs-cli serve


Start the development server...


/path-to-my-project/webpack.config.js:1
export default ({ config }) => {
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at z (/path-to-my-project/node_modules/grapesjs-cli/dist/cli.js:2:3246)
    at /path-to-my-project/node_modules/grapesjs-cli/dist/cli.js:2:5256

Input code in build process

Hello Artf!

Here at my work, my web app loads all the files first at client-side, so i need to put a variable at the end of js files so the system knows it was loaded. Something like:
ControlLoading.isLoading = true;

Is there a way to edit the webpack builder of a plugin to add this while building?

after npm build locale file es.js getting replaced with initial code

I have put some translations on en.js whenever I build with npm build the contents in en.js is replaced with default contents .