Using plugins¶

Enable and configure Silex plugins to extend editor functionality.

Overview¶

Plugins extend Silex by adding UI features, connectors, publication transformers, or custom behavior. They're loaded in both server and client configs as plugin modules (JavaScript objects with an init function).

Silex plugins fall into three categories: - Editor plugins — Extend GrapesJS functionality (blocks, commands, UI panels) - Server plugins — Add connectors, routes, or backend logic - Publication transformers — Customize how websites are compiled and published

Prerequisites¶

Basic understanding of server config and client config
Familiarity with npm packages

Available plugins¶

Silex includes built-in plugins. Enable them by adding to your config file.

Editor plugins¶

Plugins that extend the GrapesJS editor in the browser:

Plugin	npm package	Purpose
Custom Code	grapesjs-custom-code	Add custom HTML/CSS/JS blocks
CSS Variables	grapesjs-css-variables	UI for creating CSS custom properties
Tooltip	grapesjs-tooltip	Tooltips on hover
Data Source	grapesjs-data-source	CMS binding and expressions (built-in)

Server plugins¶

Plugins that extend the backend:

Plugin	Purpose
Dashboard	User dashboard (silex-dashboard)
FTP Connector	FTP storage and hosting
GitLab Connector	GitLab storage and hosting
Download Connector	ZIP download for publishing
Onboarding	User onboarding flow

Publication transformers¶

Built-in transformers for common publication needs:

Transformer	Purpose
Assets	Rewrite asset URLs for published sites
Custom Code	Include custom code blocks in output
Fonts	Embed web fonts

Loading plugins in server config¶

Add plugins to the server config file (.silex.js):

const dashboardPlugin = require('@silexlabs/silex-dashboard')
const customPlugin = require('./my-plugin')

module.exports = async function (config) {
  // Add dashboard
  await config.addPlugin(dashboardPlugin, {})

  // Add custom plugin with options
  await config.addPlugin(customPlugin, {
    apiKey: process.env.API_KEY,
    debug: true,
  })
}

Loading plugins in client config¶

Add editor plugins to the client config file (client-config.js):

import grapesJsCustomCode from 'grapesjs-custom-code'
import grapesJsTooltip from 'grapesjs-tooltip'

export default async function (config) {
  // Add plugins to GrapesJS
  config.grapesJsConfig.plugins = [
    ...config.grapesJsConfig.plugins,
    grapesJsCustomCode,
    grapesJsTooltip,
  ]

  // Plugin options
  config.grapesJsConfig.pluginsOpts = {
    ...config.grapesJsConfig.pluginsOpts,
    [grapesJsCustomCode]: {
      languages: ['javascript', 'css', 'html'],
    },
    [grapesJsTooltip]: {
      position: 'top',
    },
  }
}

Plugin configuration patterns¶

Environment-based configuration¶

Pass environment variables to plugins:

// .silex.js
const StripePlugin = require('./plugins/stripe-plugin')

module.exports = async function (config) {
  await config.addPlugin(StripePlugin, {
    apiKey: process.env.STRIPE_API_KEY,
    webhookSecret: process.env.STRIPE_WEBHOOK_SECRET,
  })
}

Set in .env:

STRIPE_API_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...

Conditional loading¶

Load plugins based on environment:

module.exports = async function (config) {
  // Only in production
  if (process.env.NODE_ENV === 'production') {
    const analyticsPlugin = require('./plugins/analytics')
    await config.addPlugin(analyticsPlugin, {})
  }

  // Only in development
  if (config.debug) {
    const debugPlugin = require('./plugins/debug')
    await config.addPlugin(debugPlugin, {})
  }
}

Plugin chains¶

Some plugins extend others. Load in order:

module.exports = async function (config) {
  // Core CMS plugin first
  const cmsPlugin = require('./plugins/cms-core')
  await config.addPlugin(cmsPlugin, {})

  // Extensions after core
  const cmsExtension = require('./plugins/cms-extension')
  await config.addPlugin(cmsExtension, {})
}

Plugin options¶

Common options patterns:

await config.addPlugin(myPlugin, {
  // Authentication
  apiKey: 'sk_live_...',
  clientId: 'client_id',

  // Behavior
  debug: true,
  cacheEnabled: false,
  cacheTtl: 3600,

  // UI
  position: 'sidebar',
  theme: 'dark',

  // Features
  enableFeatureX: true,
  featureYConfig: { /* ... */ },
})

Example: Adding Custom Code plugin¶

The Custom Code plugin lets editors add HTML, CSS, and JavaScript blocks:

// client-config.js
import grapesJsCustomCode from 'grapesjs-custom-code'

export default async function (config) {
  config.grapesJsConfig.plugins = [
    ...config.grapesJsConfig.plugins,
    grapesJsCustomCode,
  ]

  config.grapesJsConfig.pluginsOpts = {
    ...config.grapesJsConfig.pluginsOpts,
    [grapesJsCustomCode]: {
      languages: ['javascript', 'css', 'html'],
      defaultLanguage: 'html',
      showLabel: true,
    },
  }
}

Now the editor has a "Custom Code" block in the sidebar.

Example: Server plugin with connectors¶

Add a custom connector that talks to an external API:

// .silex.js
const MyApiConnector = require('./plugins/my-api-connector')

module.exports = async function (config) {
  await config.addPlugin(MyApiConnector, {
    apiUrl: process.env.MY_API_URL,
    apiKey: process.env.MY_API_KEY,
  })
}

The plugin registers a storage or hosting connector internally.

Third-party plugins¶

Search npm for community-maintained plugins:

npm search grapesjs
npm search silex

Install and use:

npm install my-grapesjs-plugin

Then load in your config:

import myPlugin from 'my-grapesjs-plugin'

export default async function (config) {
  config.grapesJsConfig.plugins.push(myPlugin)
}

Troubleshooting¶

Plugin not loading¶

Check:

Plugin is installed: npm ls plugin-name
Config file is being served: Browser DevTools → Network → client-config.js
No syntax errors in config: Check browser console for errors
Plugin path is correct (if local file)

Enable debug mode to see plugin initialization:

export default async function (config) {
  console.log('Loading plugins...')
  config.grapesJsConfig.plugins.push(myPlugin)
  console.log('Plugins loaded:', config.grapesJsConfig.plugins)
}

Plugin conflicts¶

If two plugins interfere (e.g., both add the same command):

Load them in a different order
Check plugin documentation for conflicts
Disable one and test

Memory/performance issues¶

If the editor becomes slow:

Reduce the number of plugins
Check browser DevTools → Performance tab
Profile with DevTools → Memory tab
Some plugins (especially complex UI) consume more resources