react-hclRender Terraform HCL from TSX.

A TSX authoring layer for rendering Terraform configuration.

Author in TSX, render HCL

Use components, props, conditionals, and loops to describe configuration, then generate plain Terraform .tf files.

Components compile away

Custom components run during generation. The output contains primitive Terraform blocks, not a new runtime abstraction.

Keep Terraform semantics

Refs and tf helpers emit Terraform references and expressions while Terraform CLI still handles validation, planning, state, and apply.

Why react-hcl?

CDK-style tools often model infrastructure through imperative construction APIs. react-hcl treats Terraform configuration as a render target instead.

For example, this TSX:

tsx

import { Resource } from "react-hcl";

export default (
  <Resource
    type="aws_s3_bucket"
    label="assets"
    bucket="my-assets"
  />
);

Generates this HCL:

hcl

resource "aws_s3_bucket" "assets" {
  bucket = "my-assets"
}

Start Here

Getting Started walks through installation, init, generation, and Terraform validation.
Concepts explains how components, refs, expressions, and output order work.