Env Diff

Component

About

A side-by-side comparison of two sets of environment variables (e.g. staging vs production) that masks secret values by default and distinguishes a variable missing from one side from one that merely differs.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Env Diff to your project and fits it to your theme.

Code

How Env Diff is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { EnvDiff, type EnvEntry } from "@/components/ui/env-diff";

const staging: EnvEntry[] = [
  {
    key: "DATABASE_URL",
    value: "postgres://app@db.staging:5432/app",
    secret: true,
  },
  { key: "LOG_LEVEL", value: "debug" },
  { key: "NODE_ENV", value: "production" },
  { key: "REDIS_URL", value: "redis://cache.staging:6379" },
  { key: "SESSION_SECRET", value: "k3y-material-staging", secret: true },
  { key: "FEATURE_NEW_CHECKOUT", value: "true" },
];

const production: EnvEntry[] = [
  {
    key: "DATABASE_URL",
    value: "postgres://app@db.prod:5432/app",
    secret: true,
  },
  { key: "LOG_LEVEL", value: "info" },
  { key: "NODE_ENV", value: "production" },
  { key: "REDIS_URL", value: "redis://cache.prod:6379" },
  { key: "SESSION_SECRET", value: "k3y-material-prod\n", secret: true },
  { key: "SENTRY_DSN", value: "https://abc@sentry.io/42" },
];

export default function EnvDiffDemo() {
  return (
    <div className="w-full max-w-3xl">
      <EnvDiff
        left={staging}
        right={production}
        leftLabel="Staging"
        rightLabel="Production"
      />
    </div>
  );
}