Home pageGimlet

Helm React UI: a React component to render UIs for Helm Charts

Laszlo Fogas
Laszlo Fogas

Helm is the de-facto standard for packaging applications for Kubernetes. Its usage is ubiquitous and sentiment against its serverside component - Tiller - is fading since the 3.0 release.

Helm is facing another issue nowadays.

The amount of Helm charts is increasing and as it is a community effort, the quality of charts vary, so as their structure. It is a considerable effort to understand what a given chart bundles and what knobs it exposes to its users.

The practice to document these knobs is an extensive list of values that the user can set. Helm React UI is here to improve this practice.

Helm React UI is a project to allow the configuration of Helm values on a UI

Helm React UI generates a UI based on the Helm schema file - if there is one available. It is for users to better discover the possible configuration options, and it also allows an alternative path to Helm.

The project is hosted at https://github.com/gimlet-io/helm-react-ui

A practical example project is available too. The project, that produced the following screen:

Helm React UI screen

It is a React component

import HelmUI from 'helm-react-ui'


It takes

  • the schema as input,
  • a json object that helps to generate better UIs than the json schema would allow on its own
  • and you can feed in an existing Helm values.json

It also has an event handler to keep track of UI changes.

See the example code here.

The helm-ui.json

Generating UIs from json schema is a practically doable task, but the schema alone doesn't allow the kind of fine-tuning that is needed for useful UIs.

When I set out to implement Helm React UI I was warned on Twitter.

Rightly so. Helm schemas are large, and rendering all fields at once results in UIs that are difficult to comprehend.

Thankfully, this problem was solved already in the React component I use. With react-jsonschema-form I could attach the required metadata to further customize the chart appearance.

Furthermore, I introduced a new metadata format for Helm charts to drive their appearance in Helm React UI. It's the helm-ui.json, that you should place next to the values.schema.json file and follow the following structure:

    "schemaIDs": [
    "uiSchema": {
      "#/properties/replicas": {
        "ui:widget": "range"
    "metaData": {
      "name": "Basics",
      "icon": "M17 8l4 4m0 0l-4 4m4-4H3"

It is an array of objects with three fields

  • the sub-schemas to render on a screen
  • the uiSchema to fine tune field rendering, options are from react-jsonschema-form
  • and metadata to render the navigation frame

See a full example here.

Eventually a helm-ui.json file will be part of the common Helm Charts, to allow Helm React UI to render them.

Putting Helm React UI in practice

Besides the Helm React UI component, I also launch today a tool that packages it in a practical form: a CLI.

It's the Gimlet CLI that has a chart configure command to generate a Helm values.yaml file for a given chart.

It launches a browser tab where you can discover and set the deployment options.

$ gimlet chart configure onechart/onechart
šŸ‘©ā€šŸ’» Configure on
šŸ‘©ā€šŸ’» Close the browser when you are done
Browser opened

gimlet chart configure

Browser closed
šŸ“ Generating values..
  repository: myapp
  tag: 1.0.0
  host: myapp.local
  tlsEnabled: true
replicas: 2

It works with any chart that has a JSON schema defined and an accompanying helm-ui.json.

onechart/onechart is one such chart, and you can use it to see Helm React UI in action. It is also a handy chart if you need to deploy something quickly, or looking for an alternative for the lengthy Kubernetes yaml format.

Learn more

  • You can discover the source code of Helm React UI
  • See an example to include it in your project
  • Learn more about OneChart, the chart that has a schema and a helm-ui.json today

More from our blog

Clickops over gitops

Doing cloud operations by clicking on a dashboard that generates a stream of infrastructure as code changes.

The how and why we built our SaaS platform on Hetzner and Kubernetes

Hetzner is 5 times cheaper for us than the hyperscalers. This blog posts enumerates the how and why we built our SaaS on a discount bare metal provider. Gotchas included.

Announcing the Gimlet SaaS Early Access

We have something really exciting to share with you: Gimlet is going SaaS. In other words, you will be able to use Gimlet's unparalleled Kubernetes deploy experience with even fewer clicks than before.

How Flux broke the CI/CD feedback loop, and how we pieced it back together

A green build used to mean a successful deploy. But then gitops came and broke this heuristic.

Are you sure none of your containers run as root?

The Kyverno policy engine just arrived in Gimlet Stack. Let's see how you can be certain that none of the containers run as root in your Kubernetes cluster.