Stylify
Stylify allows trusted users to edit CSS directly on the page they are viewing, with live previews and granular control over which pages or content types the styles apply to. It stores CSS in the database and supports multiple scopes, from global styles to styles for individual content items.
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).