Keycloakify
HomeGitHubStorybookAlternative to keycloak-js
v11
  • Documentation
  • Release Notes & Upgrade Instructions
  • FAQ
v11
  • Quick Start
  • CSS Customization
  • Testing your Theme
    • Outside of Keycloak
    • Inside of Keycloak
  • Deploying Your Theme
  • Integrating Keycloakify in your Codebase
    • Vite
    • Create-React-App / Webpack
    • yarn/npm/pnpm/bun Workspaces
    • Turborepo
    • Nx
    • Angular Workspace
  • Common Use Case Examples
    • Using a Component Library
    • Custom Fonts
    • Changing the background image
    • Adding your Logo
    • Using Tailwind
    • Dark Mode Persistence
  • Features
    • Internationalization and Translations
      • Basic principles
      • Previewing Your Pages in Different Languages
      • Adding New Translation Messages or Changing the Default Ones
      • Adding Support for Extra Languages
    • Theme Variants
    • Environment Variables
    • Styling a Custom Page Not Included in Base Keycloak
    • Integrating an Existing Theme into Your Keycloakify Project
    • Compiler Options
      • --project
      • keycloakVersionTargets
      • environmentVariables
      • themeName
      • startKeycloakOptions
      • themeVersion
      • accountThemeImplementation
      • postBuild
      • XDG_CACHE_HOME
      • kcContextExclusionsFtl
      • keycloakifyBuildDirPath
      • groupId
      • artifactId
      • Webpack specific options
        • projectBuildDirPath
        • staticDirPathInProjectBuildDirPath
        • publicDirPath
  • Page-Specific Guides
    • Registration Page
    • Terms and Conditions Page
  • Theme types
    • Differences Between Login Themes and Other Types of Themes
    • Account Theme
      • Single-Page
      • Multi-Page
    • Email Theme
    • Admin Theme
Powered by GitBook
On this page
  • Testing Outside of Keycloak
  • Testing Inside of Keycloak

Was this helpful?

Edit on GitHub

Testing your Theme

Last updated 4 months ago

Was this helpful?

Two important aspects for developing a good theme are how quickly you can see your changes on the screen and how easy it is to replicate a production environment locally.

Keycloakify provides two ways to test your theme:

Testing Outside of Keycloak

Keycloakify enables you to test your theme without requiring a real Keycloak instance to be involves.

This approach let you preview the pages in different configurations using mock data.

This is great for getting realtime feedback when designing your page and having a quick overview of how your theme looks like as a whole.

Testing Inside of Keycloak

Previewing your theme with mocks is great but at some point you have to make sure that everything works as expected in real environement.

Keycloakify let you with a simple command spin up a preconfigured Keyclaok instance in a Docker container to test your theme in real conditions.

Outside of Keycloak
Inside of Keycloak