Contributing

Dev setup

git clone https://github.com/kathari00/keycloak-theme-editor.git
cd keycloak-theme-editor
npm install
npm run dev

Open the URL shown in terminal (default: http://localhost:5173).

Requirements

• Node.js 18+ (20+ recommended)
• JDK 25+ and Maven: only needed for preview artifact generation

Scripts

Command	Description
npm run dev	Dev server
npm run build	Type-check + production build
npm run build:cli	Build the CLI bundle
npm run build:jar	Build the Java preview renderer JAR
npm run test:run	Run tests once
npm run lint	ESLint
npm run sync:keycloak	Sync upstream Keycloak templates into public/keycloak-upstream/
npm run generate:preview	Regenerate preview pages.json

How the codebase is organized

src/
  app/              # Editor shell and wiring
  components/       # Sidebar, topbar, panels
  features/
    assets/         # Upload and asset management
    editor/         # CSS editing, undo/redo, style layers
    presets/        # Preset selection logic
    preview/        # Iframe preview and generated artifacts
    theme-export/   # JAR/folder export and import

public/
  keycloak-dev-resources/   # Base theme resources

bin/
  cli.ts            # CLI entry point

tools/
  keycloak-sync/        # Upstream template sync
  preview-renderer/     # Java-based preview generation