# Quick start

Keycloakify is a tool that enables to create keycloak themes for customizing of the look and feel of Keycloak's user-facing pages. You can preview these pages here:

{% embed url="<https://storybook.keycloakify.dev/>" %}

Why would I chose to use this third party tool insted of directly implementing [the theming system featured by Keycloak](https://www.keycloak.org/docs/latest/server_development/#_themes)?

* Keycloakify lets you use modern frontend technology: **TypeScript**, **React**, and **any styling solution or component library** you'd like, such as **Tailwind**, **MUI**, **shadcn/ui**, or just **plain CSS**. With the base theming system you have to write [FreeMarker](https://freemarker.apache.org/index.html) and integrating frontend technologies into a Java Stack isn't straight forward.
* Keycloakify makes it very easy to test your theme [inside](/keycloakify/v10/testing-your-theme/in-a-keycloak-docker-container.md) and [outside](/keycloakify/v10/testing-your-theme/in-storybook.md) Keycloak with hot reloading enabled.
* Keycloakify bundles the theme for you into a JAR that you can simply [import into Keycloak](/keycloakify/v10/importing-your-theme-in-keycloak.md).
* The Keycloak themes generated with Keycloakify are compatible with all Keycloak versions down to Keycloak version 11, by opposition to regular themes that must be updated to target a specific Keycloak version.
* Keycloakify themes implement real-time frontend validation out of the box. For example, when a user chooses a password that is too weak, they see the feedback message like *"the password must be at least 12 character long"* immediately and not after they have pressed the submit button.
* We're here to help! Either via [our Discord](https://discord.gg/kYFZG7fQmn) channel or [GitHub issues](https://github.com/keycloakify/keycloakify/issues/new).

First thing you want to do is to fork/clone the Keycloakify Vite[^1] starter template.

{% embed url="<https://github.com/keycloakify/keycloakify-starter>" %}

Then you can move on to the next section of the documentation:

{% content-ref url="/pages/6zsjToyFtGwfJpF6IgrG" %}
[Testing your Theme](/keycloakify/v10/testing-your-theme.md)
{% endcontent-ref %}

[^1]: There's also a Webpack based starter that you can find [here](https://github.com/keycloakify/keycloakify-starter-webpack).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.keycloakify.dev/keycloakify/v10/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.