strapi-plugin-css-editor

Strapi CSS Editor Plugin

A custom field plugin for Strapi that allows administrators to write and manage CSS directly from the Strapi admin panel.

Features

• 🎨 Custom field for CSS editing
• 🌈 Theme selection capabilities
• 🖥️ Full-screen editing mode
• ✅ Compatible with both Strapi v4 and v5

Installation

For Strapi v5

# Using npm
npm install strapi-plugin-css-editor

# Using yarn
yarn add strapi-plugin-css-editor

# Using pnpm
pnpm add strapi-plugin-css-editor

For Strapi v4

# Using npm
npm install strapi-plugin-css-editor@^4

# Using yarn
yarn add strapi-plugin-css-editor@^4

# Using pnpm
pnpm add strapi-plugin-css-editor@^4

Configuration

Enable the plugin

For Strapi v4

Add the following to config/plugins.js (create it if it doesn't exist):

module.exports = {
  // ...
  'css-editor': {
    enabled: true,
  },
  // ...
};

For Strapi v5

Add the following to config/plugins.ts (create it if it doesn't exist):

export default {
  // ...
  'css-editor': {
    enabled: true,
  },
  // ...
};

Usage

Adding CSS Editor Field to Content Types

1. Navigate to Content-Type Builder in your Strapi admin panel
2. Edit the content type where you want to add the CSS editor
3. Click "Add another field"
4. Under "Custom Fields" section, select "CSS Editor"
5. Configure the field name and other settings
6. Save your content type

Using the CSS Editor Field

When editing content:

1. The CSS Editor field provides a code editor interface
2. Write your CSS code in the editor
3. Use the theme selector to switch between themes
4. Click the full-screen button for a larger editing area
5. Changes are saved along with your content

Troubleshooting

Common Issues

• Field not appearing: Make sure the plugin is properly installed and enabled in your configuration
• Styling not applying: Verify that your frontend is correctly pulling and applying the CSS values from your content

License

This plugin is released under the MIT License.

Author

Created and maintained by NewProWeb.