HTMLCompare

Name: HTMLCompare
Brand: Liveezy Studios

HTMLCompare is a professional-grade, browser-based code comparison and visualization tool created by Liveezy Studios.

It allows users to instantly detect, align, and visualize the differences between two blocks of HTML (or any text-based code) — complete with color-coded diffing, inline search, navigation markers, and live side-by-side previews rendered in real time.

Built entirely with Vanilla JavaScript, HTMLCompare delivers a fast, portable, and offline-capable experience for developers, designers, and web analysts.

Users can edit, compare, and preview HTML simultaneously, making it ideal for debugging layout discrepancies, merging template changes, or verifying code versions.

Every difference is mapped, highlighted, and synchronized across both panels with real-time search, navigation shortcuts, and even floating Picture-in-Picture (PIP) preview windows for direct visual comparison of rendered results.

Intelligent Code Diffing

Uses the diff.js library to compare code line-by-line.
Highlights added, removed, and unchanged sections in real time.
Synchronizes scrolling between panels for perfect alignment.

Dual-Panel Comparison

Side-by-side diff viewer with color-coded highlights:
- Green for identical lines
- Red for removed lines
- Blue for inserted lines
Scroll-linked navigation ensures consistent line tracking across both panels.

Search and Navigation

Real-time keyword search with highlighting and navigation buttons (Prev / Next).
Auto-focuses the corresponding code regions and scrolls them into view.
Integrated mini-map sidebar for visual navigation through large files.

Floating PIP Previews

Two independent resizable preview windows (Preview 1 and Preview 2) render each code block as a live HTML document.
Each window supports drag, resize, minimize, and maximize modes.
Perfect for side-by-side design validation and UI inspection.

Interactive Line Mapping

Linked diff navigation via arrow buttons and minimap markers.
Clickable “scanline” overlay allows manual scrolling through diffs.
Auto-locates the nearest diff region during scrolling.

Responsive Interface

Fully adjustable layout that scales from large desktop monitors to compact laptop screens.
Minimal dark UI optimized for long coding sessions.
Monospace typography for accurate alignment.

Offline Operation

Entirely client-side; no server calls or external uploads.
Runs seamlessly as a single .html file, completely self-contained.
Safe for local or secure environments.

Technologies Used

HTML5, CSS3, JavaScript (Vanilla) — core logic and UI structure.
diff.js (v5.2.0) — open-source text diffing engine.
DOM APIs — dynamic rendering and element synchronization.
Iframes — live HTML rendering within PIP preview windows.
Custom JavaScript logic for navigation, search highlighting, and line tracking.

$5.00