Define and manage CSS custom properties (design tokens) for colors, sizes, and typography directly within GrapesJS.

This code is part of a larger project: about Silex v3

• DEMO on CodePen
• Npm package

• Manage CSS variables from a modal dialog (colors, sizes, font families)
• Responsive variables with per-breakpoint values (one column per device)
• Style Manager integration: assign variables to properties via a "+" dropdown
• Variable pills in the Style Manager showing the applied variable name
• Drag-to-reorder variables in the modal
• Duplicate and rename variables
• Preset variables for first load
• i18n support (English and French included)
• Undo/redo support
• Variables are saved and restored with site data

Choose one of the following methods:

<script src="https://unpkg.com/@silexlabs/grapesjs-css-variables"></script>

npm i @silexlabs/grapesjs-css-variables

git clone https://github.com/silexlabs/grapesjs-css-variables.git

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/@silexlabs/grapesjs-css-variables"></script>

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

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['@silexlabs/grapesjs-css-variables'],
});

Open the CSS Variables dialog:

editor.runCommand('open-css-variables')

Customize the plugin by passing options:

plugins: ['@silexlabs/grapesjs-css-variables'],
pluginsOpts: {
  '@silexlabs/grapesjs-css-variables': {
    presets: [
      { name: 'primary', value: '#3498db', type: 'color' },
      { name: 'spacing', value: '16px', type: 'size' },
      { name: 'heading', value: '"Inter", sans-serif', type: 'typo' },
    ],
  },
},

Use the plugin with modern JavaScript imports:

import grapesjs from 'grapesjs';
import plugin from '@silexlabs/grapesjs-css-variables';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container: '#gjs',
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: {
      prefix: '',
      enableColors: true,
      enableSizes: true,
      enableTypography: true,
    },
  },
});

To contribute, follow these steps:

1. Clone the Repository:

   git clone https://github.com/silexlabs/grapesjs-css-variables.git
   cd grapesjs-css-variables

2. Install Dependencies:

   npm install

3. Start Development Server:

   npm start

4. Build the Plugin:

   npm run build

GPL-3.0