Using plugins¶

Silex can load three kinds of plugins:

GrapesJS plugins run in the editor, in the browser. You load them in the client config.
Silex server plugins run in Node. You load them with the SILEX_SERVER_CONFIG environment variable. They add routes, connectors, or react to server events.
Publication transformers run in Silex, when you publish. They change the published files. You add them in the client config. See Publication transformers.

These two things are not Silex plugins:

Eleventy plugins run in the build of the published website, on the forge, after Silex has published. See Add a plugin.
The CI build runs the commands of build.json on the forge. See Customize the build.

Plugins already in Silex¶

Silex loads these GrapesJS plugins, among others. You do not need to add them:

Plugin	Purpose
`grapesjs-custom-code`	the HTML block for custom code
`@silexlabs/grapesjs-css-variables`	CSS variables
`@silexlabs/grapesjs-fonts`	the fonts dialog
`@silexlabs/grapesjs-symbols`	symbols
`@silexlabs/grapesjs-data-source` (when the CMS is on)	the CMS: data sources and expressions
`grapesjs-blocks-basic`, `grapesjs-plugin-forms`	basic and form blocks

The full list is in editor/grapesjs/index.ts.

Load a GrapesJS plugin¶

The client config runs in the browser without a bundler, so you cannot npm install a plugin and import it by name. Import it by URL instead. Many plugins on npm are available as ES modules on a CDN:

// client-config.js, set SILEX_CLIENT_CONFIG to its path
import tooltip from 'https://cdn.jsdelivr.net/npm/grapesjs-tooltip@0.1.8/+esm'

export default async function (config) {
  config.grapesJsConfig.plugins.push(tooltip)
  config.grapesJsConfig.pluginsOpts[tooltip.toString()] = {
    // options of the plugin, see its README
  }
  return {}
}

The URL must return an ES module. jsDelivr's /+esm builds one from the npm package, even a UMD or CommonJS one. A raw UMD file (dist/index.js) does not work.

To use a file you host yourself, serve it from a server plugin and import it by its path. See Serve a file for the editor.

Load a Silex server plugin¶

Point SILEX_SERVER_CONFIG to a JavaScript file. The file is a Silex plugin itself:

SILEX_SERVER_CONFIG=/path/to/server-config.js pnpm start

With Docker:

environment:
  SILEX_SERVER_CONFIG: /silex/server-config.js
volumes:
  - ./server-config.js:/silex/server-config.js:ro

From this file, load other plugins with config.addPlugin():

// server-config.js
const myPlugin = require('./my-plugin.js')

module.exports = async function (config) {
  await config.addPlugin(myPlugin, { greeting: 'Hello' })
  return {}
}

The second argument of addPlugin is passed to the plugin as options. Use require() or an absolute path: a relative path given as a string is not resolved from your file.

Silex also loads its own server config, server/deploy/.silex.js, after your file. It serves the editor and the dashboard, and adds the connectors set by STORAGE_CONNECTORS and HOSTING_CONNECTORS. See Server configuration.

Using plugins¶

Plugins already in Silex¶

Load a GrapesJS plugin¶

Load a Silex server plugin¶

See also¶