diffctl

A powerful tool for comparing and managing configuration differences across environments

Published on Jan 03, 2025

Reading time: 2 minutes.

Built with

Python
Git
Bash

diffctl

A smart, sysadmin-friendly diff checker for text and JSON. Built for Linux admins and power users, diffctl provides intelligent, side-by-side and unified diffing for text and JSON, with a modern UI and Docker support.

What is diffctl?

diffctl is a web-based tool that provides intelligent diffing capabilities for text and JSON content. It features automatic mode detection, real-time comparison, and a modern responsive interface.

Key Features

  • Intelligent Mode Detection: Automatically detects whether input is text or JSON
  • Text Diff Mode: Compare plain text with line-by-line difference highlighting
  • JSON Diff Mode: Compare JSON objects with structured property-by-property comparison
  • Multiple View Modes: Unified view and side-by-side comparison
  • Real-time Comparison: Instant diff results as you type
  • Dark/Light Theme: Toggle between themes with persistent user preference
  • Docker Support: Easy deployment with Docker and Docker Compose

Installation

Prerequisites

  • Docker and Docker Compose installed on your system

Quick Start with Docker

  1. Clone the repository:
1
2

git clone https://github.com/Lforlinux/diffctl.git
cd diffctl
  1. Build and run with Docker Compose:
1

docker-compose up --build
  1. Open your browser and navigate to http://localhost:3000

Option 2: Local Development

Prerequisites

  • Node.js (version 16 or higher)
  • npm or yarn

Installation

  1. Clone the repository:
1
2

git clone https://github.com/Lforlinux/diffctl.git
cd diffctl
  1. Install dependencies:
1

npm install
  1. Start the development server:
1

npm run dev
  1. Open your browser and navigate to http://localhost:5173

Usage

Text Comparison

  1. Enter your original text in the left textarea
  2. Enter your modified text in the right textarea
  3. The tool will automatically detect it as text mode
  4. Click “Compare” to see the differences
  5. Switch between “Unified View” and “Side-by-Side View”

JSON Comparison

  1. Enter your original JSON in the left textarea
  2. Enter your modified JSON in the right textarea
  3. The tool will automatically detect it as JSON mode
  4. Click “Compare” to see structured property differences
  5. View added, removed, and modified properties

Theme Toggle

  • Click the theme toggle button in the top-right corner
  • Your preference is saved and will persist across sessions

Tech Stack

  • React 18: Modern React with hooks
  • Vite: Fast build tool and dev server
  • Tailwind CSS: Utility-first CSS framework
  • Custom Diff Logic: Proprietary text and JSON comparison algorithms

Features in Detail

Intelligent Mode Detection

The tool automatically analyzes both inputs to determine if they contain:

  • JSON: Valid JSON objects or arrays with high confidence
  • Text: Plain text content with line breaks and natural language

Diff Statistics

For each comparison, the tool provides:

  • Lines/Properties Added: Count of new content
  • Lines/Properties Removed: Count of deleted content
  • Percentage Changed: Overall change percentage
  • Mode-specific Metrics: Different stats for text vs JSON

View Modes

  • Unified View: Single pane showing all changes with +/- indicators
  • Side-by-Side View: Two panes showing original vs modified side by side

Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Live Demo: https://l4linux.com/diffctl/
Source Code: https://github.com/Lforlinux/diffctl