Getting Started

Two ways to use the editor:

Online

Head to keycloak-theme-editor.org and start designing. No setup needed.

1. Pick a preset or start from scratch
2. Customize colors, fonts, radius, shadows, or write CSS directly
3. Upload your assets (logo, background, fonts)
4. Preview across viewports and dark mode
5. Export as .jar and deploy to Keycloak

Local CLI

Use the CLI when you need custom FreeMarker templates beyond what the web editor provides.

npx keycloak-theme-editor --pages ./my-theme

The CLI starts the editor locally and connects it to your theme directory. You edit FreeMarker templates in your IDE while using the visual editor for styling.

CLI Options

Option	Description
--pages <dir>	Path to your theme directory (auto-discovered if omitted)
--port <number>	Port to run the editor on (default: 4800)
--no-open	Don't open browser automatically

Scaffolding

Generate starter files for custom page mocks:

npx keycloak-theme-editor init [pages-dir]

This creates kc-page.ts and kc-page-story.ts in your theme directory.