Skip to main content
Visual CSS Theme Editor
payloadtwist

Design your Payload
admin panel visually

Tweak colors, typography, spacing, and components with real-time preview on a live Payload instance. Export clean CSS. No plugin required.

Open the EditorSee how it works
Scroll
How it works

Three steps to a custom admin

1

Open the editor

Visit /editor in your browser. Payload admin loads in a live iframe on the right.

2

Tweak visually

Adjust colors, fonts, spacing, radii, and individual components using visual controls.

3

Export your theme

Hit export. Copy the generated CSS. Paste it into your Payload project's custom.scss.

The Editor

Controls on the left. Live preview on the right.

localhost:3000/editor
payloadtwistv1.0
Export12
General
UI Elements
Fields
Views
Dashboard
Overlays
Color Scale
Theme Colors
--theme-bg
--theme-text
--theme-input-bg
Typography
DM Sans
Roundness
8px
Admin
Showcase
Custom
/admin
My Project
Dashboard
Posts
Media
Users
Settings
Posts
Create New
Getting Started with PayloadPublished
Customizing Your DashboardDraft
Working with CollectionsPublished

The editor runs alongside Payload in the same Next.js app — same-origin iframe, zero CORS issues

Features

Built for Payload's CSS architecture

PayloadTwist understands Payload's three-layer variable system — base palette, elevation aliases, and semantic theme vars — so your overrides are always correct.

Live Iframe Preview

Your Payload admin panel runs in a live iframe. Every tweak injects CSS in real-time — no reload, no rebuild.

16-Step Color Scale

A 3-anchor HSL interpolation engine generates all 16 base scale steps from your chosen colors. One change rethemes everything.

Dark Mode Aware

Understands Payload's 3-layer CSS system — auto-inverted elevations, explicit theme vars, and raw palette. Dark mode just works.

Google Fonts Picker

Browse and preview Google Fonts with a live dropdown. Pick a body font, a heading font — see it applied instantly.

Component Overrides

Go beyond variables. Target specific Payload components — buttons, nav, cards, fields — with visual controls per BEM block.

Export Clean CSS

Generates a minimal custom.scss with only your changes. Paste it into your Payload project — no plugin needed.

Under the Hood

How PayloadTwist works

A visual editor that injects CSS into a live Payload admin iframe — zero rebuilds, instant feedback.

Editor Interface

Color Scale

3-anchor HSL interpolation generates all 16 base color steps

Typography

Live Google Fonts preview with body & heading pickers

Layout & Components

Spacing, radii, z-index, and per-component BEM overrides

setVariable( name, value, mode )
State Management

Zustand Store

PayloadThemeConfig with light/dark maps, component overrides, undo/redo history (30 entries), and localStorage persistence

subscribe( config )
CSS Transform

CSS Generator

Diffs config against Payload defaults, builds minimal :root and [data-theme="dark"] blocks

Scale Generator

Two-segment HSL interpolation from 3 anchor colors into 16 smooth steps

Output

Live Iframe Injection

Injects <style> tags into the Payload admin iframe — same-origin, no CORS, instant preview

CSS Export

Generates clean custom.scss with only changed variables — paste into any Payload project

Payload's 3-Layer CSS System

PayloadTwist understands which variables to override and which to leave alone

1

Raw Palette

--color-base-0 → 1000

Editable
2

Elevation Aliases

--theme-elevation-*

Auto-inverted
3

Semantic Theme

--theme-bg, --theme-text

Light + Dark
Built With
Next.jsNext.js 15
ReactReact 19
TypeScriptTypeScript
Payload CMSPayload CMS
Tailwind CSSTailwind CSS
SQLiteSQLite
SassSCSS
Radix UIRadix UI
Google FontsGoogle Fonts
The Output

Clean CSS you own

PayloadTwist generates a minimal custom.scss containing only the variables you changed. Paste it into your Payload project and you're done.

custom.scss
generated by payloadtwist
/* Custom Payload CMS Theme */
/* Paste into your project's custom.scss */

:root {
  /* Base Color Scale */
  --color-base-0: #faf5f0;
  --color-base-500: #8b7355;
  --color-base-1000: #1a1510;

  /* Typography */
  --font-body: 'DM Sans', sans-serif;
}

/* Dark mode — only explicit overrides */
[data-theme="dark"] {
  --theme-bg: #0d0d0d;
  --theme-text: #f3f3f3;
}

Ready to twist?

Stop guessing CSS variable names. Open the editor, design your admin panel visually, and export clean overrides.

Open the Editor