# Environment Config Diff Visualizer Compare dev, staging, and production configuration bundles across JSON, YAML, TOML, or ENV formats and highlight drift, missing keys, and cleanup suggestions > Canonical page: https://elysiatools.com/en/tools/environment-config-diff-visualizer - **Category:** Development - **Keywords:** config diff, environment drift, env compare ## Overview Paste multiple config blocks into "Configuration Bundle" and separate them with headers in the form of === environment-name (format) ===. Supported header examples: - === dev (json) === - === staging (yaml) === - === prod (toml) === - === worker (env) === Supported formats: - JSON: use a normal JSON object such as {"PORT":3000,"feature":{"beta":true}} - YAML: use indented key/value pairs such as PORT: 3000 and feature: beta: true - TOML: use key/value syntax such as port = 3000 with tables like [feature] - ENV: use dotenv style lines such as PORT=3000 and API_URL=https://api.example.com Tips: - Add at least two blocks so the diff can compare environments. - Keep the same logical keys across environments when possible. - Secret-like keys are masked by default when "Mask Secret Values" is enabled. - Arrays and nested objects are flattened into dot-path keys in the report, for example database.host or services[0].url. ## Inputs - **Configuration Bundle** (textarea): === dev (yaml) === PORT: 3000 FEATURE_X: true === prod (env) === PORT=8080 FEATURE_X=false - **Mask Secret Values** (checkbox) - **Ignore Letter Case** (checkbox) - **Show Tree View** (checkbox) ## When to use - When preparing for a production deployment to ensure all required environment variables and feature flags match the staging environment. - When auditing legacy applications to identify unused, deprecated, or drifting configuration keys across multiple servers. - When migrating configurations between different formats (e.g., moving from JSON to YAML) and verifying that no key-value pairs are lost. ## How it works - Paste your configuration blocks into the text area, separating each environment with a header like === prod (env) === or === dev (yaml) ===. - Toggle options to mask secret values, ignore letter case, or display the results in a hierarchical tree view. - The tool parses the different formats, flattens nested objects into dot-path keys (e.g., database.host), and generates a visual HTML report. - Review the generated diff report to spot missing keys, mismatched values, and configuration drift across all provided environments. ## Use cases - Comparing local .env files against production Kubernetes ConfigMaps to catch missing variables before deployment. - Standardizing configuration structures across microservices by identifying inconsistent key naming conventions. - Reviewing feature flag toggles across dev, staging, and prod to ensure experimental features are not accidentally enabled in production. ## Frequently asked questions ### What configuration formats are supported? The tool supports JSON, YAML, TOML, and ENV formats. You can mix and match formats across different environments in the same comparison. ### How do I separate different environments in the input? Use a header format like === environment-name (format) === before each block, such as === dev (json) === or === prod (env) ===. ### Are my API keys and passwords safe? Yes. By default, the 'Mask Secret Values' option is enabled, which automatically hides the values of secret-like keys (e.g., tokens, passwords) in the output report. ### How does the tool handle nested JSON or YAML objects? Nested objects and arrays are flattened into dot-path keys, such as services[0].url or database.credentials.user, making it easy to compare deep structures. ### Can I compare more than two environments at once? Yes, you can paste as many environment blocks as you need. The visualizer will compare all of them side-by-side to highlight drift across your entire infrastructure. ## Related tools - [Config File Semantic Diff](https://elysiatools.com/en/tools/config-file-semantic-diff): Compare JSON, YAML, TOML, and dotenv configurations by key path while ignoring ordering and formatting noise. - [JSONata Query & Transform Studio](https://elysiatools.com/en/tools/jsonata-query-transform-studio): Preview JSONata-style queries and transformations, compare results across sample payloads, and export the transformed output as JSON, CSV, YAML, or Markdown - [BOM Character Remover](https://elysiatools.com/en/tools/data-bom-remover): Remove BOM (Byte Order Mark) characters from text and file content. Perfect for cleaning up text files that have encoding issues, fixing CSV imports, and preparing data for processing. Features: - Detect and remove UTF-8 BOM (EF BB BF) - Detect and remove UTF-16 BOM (FE FF or FF FE) - Detect and remove UTF-32 BOM (00 00 FE FF or FF FE 00 00) - Support multiple input formats - Visual BOM character display - Detailed detection report - Support for batch text processing Common Use Cases: - Fix CSV file import errors - Clean up text file encoding issues - Prepare data for JSON parsing - Fix XML parsing problems - Resolve API data encoding conflicts - Standardize text data format - [YAML-JSON Converter](https://elysiatools.com/en/tools/yaml-json-converter): Convert between YAML and JSON formats - [OpenAPI to TypeScript Generator](https://elysiatools.com/en/tools/openapi-to-typescript-generator): Convert OpenAPI or Swagger JSON/YAML specs into TypeScript API types, request payloads, and response models with configurable output and naming styles - [JSON Key Extractor](https://elysiatools.com/en/tools/json-key-extractor): Extract all keys from JSON objects with multiple output formats. Perfect for analyzing JSON structure, documentation generation, and understanding complex nested objects. - [ECharts Theme Token Extractor](https://elysiatools.com/en/tools/echarts-theme-token-extractor): Extract design tokens — colors, numbers, font sizes and strings — from an ECharts theme JSON and export them straight into your design system. Paste a theme object (the kind registered via echarts.init(dom, themeName)) and the tool walks every leaf, tagging each color (with optional named/rgb → hex normalization), spacing number, font size and string, then emits clean CSS variables, a Tailwind theme.extend config, Style Dictionary tokens.json, or SCSS variables. Bridges the gap between an ECharts visualization theme and Figma/CSS/Tailwind design tokens without copying each value by hand. - [Image Palette to Design Tokens](https://elysiatools.com/en/tools/image-to-design-tokens): Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each ## Samples - [Distributed Tracing Samples](https://elysiatools.com/en/samples/distributed-tracing-samples): Comprehensive distributed tracing examples using Jaeger, OpenTelemetry, and other modern observability tools for microservices architecture - [OpenAPI/Swagger Samples](https://elysiatools.com/en/samples/openapi-swagger): Comprehensive API documentation examples using OpenAPI 3.0 and Swagger specifications for RESTful services - [Parcel Bundler Samples](https://elysiatools.com/en/samples/parcel): Parcel zero-configuration bundler examples including project setup, plugins, and advanced configuration - [pnpm Package Manager Samples](https://elysiatools.com/en/samples/pnpm): Fast, disk space efficient package manager examples including monorepo management, workspace configuration, and advanced workflows ## Related content - [JSON Formatting, Diff, and Normalization Tools](https://elysiatools.com/en/hubs/json-format): Compare JSON formatting, diffing, log review, config comparison, and data-normalization tools in one hub for readable and reviewable JSON workflows. - [Configuration File Conversion and Environment Diff Tools](https://elysiatools.com/en/hubs/config-workflows): Parse .env files, convert YAML/TOML/HCL configs, merge config fragments, and compare environment drift in one configuration workflow hub. - [File and Data Diff & Comparison Tools](https://elysiatools.com/en/hubs/file-data-diff-comparison-tools): Compare two files, payloads, schemas, or datasets side by side and highlight what changed — across text, JSON, CSV/Excel, PDF, images, audio, databases, APIs, and configs. - [JSON Interchange and Format Translation Tools](https://elysiatools.com/en/hubs/json-convert): Compare JSON conversion tools for CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN, and related structured formats in one hub.