This project is not covered by Drupal’s security advisory policy.
Stylify lets trusted users edit CSS directly on the page they are viewing, with live preview and scoped stylesheets. CSS is stored in the database and rendered on matching pages for all visitors.
Unlike theme-only CSS editors, Stylify supports multiple stylesheet scopes on a single page:
- Global — site-wide front-end CSS
- Admin global — administrative interface CSS
- Route / View — CSS for the current route or Views display
- Entity type — all nodes (or other entities) of a type
- Content type — all content of a specific bundle (e.g. all Blog posts)
- Individual entity — a single node or entity (e.g.
node:123)
Features
- On-page CSS editor with Ace syntax highlighting (lazy-loaded)
- Live preview while editing
- Locking workflow so only one user edits a stylesheet at a time
- Granular permissions (global, admin, entity scopes)
- Central admin UI to list, edit, export, and import stylesheets
- Cache-aware stylesheet delivery with cache tag invalidation
- CSRF protection and flood control on editor API endpoints
- Basic CSS validation (blocks some dangerous patterns)
- Empty stylesheets are not attached to pages (performance)
Editor workflow
- Open any page where you have permission to edit CSS.
- Click CSS Editor in the bottom-right corner.
- Choose the stylesheet scope (Global, node, Content type, etc.).
- Click Edit to acquire a lock and start editing.
- Changes preview live on the page.
- Click Save to store changes, then Save & close to release the lock.
Administration
Go to Configuration → System → Stylify stylesheets to:
- View all saved stylesheets
- Edit or delete CSS without opening the on-page editor
- Export a single stylesheet or export all as JSON
- Import stylesheets from JSON
Go to Configuration → System → Stylify Settings to release stale editor locks.
Requirements
- Drupal 10 or Drupal 11
- No contributed module dependencies
Security notice
Custom CSS affects every visitor who can see the page. Treat Stylify permissions like code deployment rights. Only grant them to trusted administrators. CSS validation reduces some risks but does not make untrusted CSS safe.
Similar modules
Stylify is intended for context-aware, database-stored CSS with route/entity/content-type scoping. If you only need theme-level custom CSS, consider the CSS Editor module.
Third-party libraries
Includes Ace Editor 1.36.5 (BSD 3-Clause License).
Project information
- Project categories: Content display
- Created by jitendra verma on , updated
This project is not covered by the security advisory policy.
Use at your own risk! It may have publicly disclosed vulnerabilities.
