Programmable Diagram and Infrastructure as Code with React

Diagram as Code

app.tsx
export default function App() {
    return (
        <WebApp>
            <Client />
            <Cloud>
                <PublicSubnet>
                    <LoadBalancer />
                    <Firewall />
                </PublicSubnet>
                <PrivateSubnet>
                    <Application />
                    <Postgres />
                </PrivateSubnet>
            </Cloud>
        </WebApp>
    );
}

Infrastructure as Code

supports

Instead of writing

HashiCorp configuration language (HCL)

You use full-fledged

programming languages TypeScript

app.tf.json
// Rendered from app.tsx
{
  "terraform": {
    "required_providers": {
      "aws": {
        "source": "aws",
        "version": "5.94.1"
  ...
  "resource": {
    "aws_subnet": {
      "aws_subnet_publicsubnet": {
        "cidr_block": "10.0.0.0/16"
    ...
    "aws_db_instance": {
      "aws_db_instance_postgres": {
        "engine": "postgres"
      }
    }
  }
}

Documentation as Code

You get Zero configuration site like this for free