@constructive-io/visual-diff

@constructive-io/visual-diff

beautiful visual diff

Syntax highlighting for terminal and HTML output

Beautiful visual diff with syntax highlighting for terminal and HTML output.

Features

• Line-by-line diff computation with LCS algorithm
• Syntax highlighting for 15+ languages (JavaScript, TypeScript, Python, SQL, Go, Rust, and more)
• Beautiful terminal output with ANSI colors
• HTML output with dark/light mode support
• 6 built-in themes (default, github, monokai, dracula, nord, minimal)
• Customizable themes and styling
• Side-by-side and unified diff views
• Parse and create unified diff format

Installation

npm install @constructive-io/visual-diff
# or
pnpm add @constructive-io/visual-diff
# or
yarn add @constructive-io/visual-diff

Quick Start

import { diff, renderTerminal, renderHtml } from '@constructive-io/visual-diff';

const oldCode = `function hello() {
  console.log("Hello");
}`;

const newCode = `function hello() {
  console.log("Hello, World!");
}`;

// Compute the diff
const result = diff(oldCode, newCode);

// Render to terminal with syntax highlighting
console.log(renderTerminal(result, { 
  language: 'javascript',
  theme: 'dracula'
}));

// Render to HTML
const html = renderHtml(result, {
  language: 'javascript',
  darkMode: true
});

API

Diff Functions

diff(oldContent, newContent, options?)

Computes the diff between two strings.

const result = diff(oldContent, newContent, {
  context: 3,           // Number of context lines (default: 3)
  ignoreWhitespace: false,  // Ignore whitespace differences
  ignoreCase: false     // Ignore case differences
});

diffFiles(oldContent, newContent, oldFile, newFile, options?)

Computes diff with file metadata and auto-detected language.

const result = diffFiles(
  oldContent,
  newContent,
  'src/old.ts',
  'src/new.ts'
);
// result.language will be 'typescript'

Render Functions

renderTerminal(result, options?)

Renders diff to terminal with ANSI colors.

const output = renderTerminal(result, {
  theme: 'github',        // Theme name or custom theme
  showLineNumbers: true,  // Show line numbers
  syntaxHighlight: true,  // Enable syntax highlighting
  language: 'typescript', // Override language detection
  colorize: true          // Enable ANSI colors
});

renderHtml(result, options?)

Renders diff to HTML.

const html = renderHtml(result, {
  theme: 'monokai',
  darkMode: true,
  className: 'my-diff',
  inlineStyles: true,
  syntaxHighlight: true
});

renderHtmlDocument(result, options?)

Renders a complete HTML document with the diff.

renderHtmlSideBySide(result, options?)

Renders diff in side-by-side layout.

Themes

Built-in themes:

• default - Clean default theme
• github - GitHub-style colors
• monokai - Monokai editor theme
• dracula - Dracula theme
• nord - Nord color palette
• minimal - Minimal styling

Custom Themes

import { createTheme } from '@constructive-io/visual-diff';

const myTheme = createTheme('custom', {
  added: { fg: 'cyan', bold: true },
  removed: { fg: 'yellow' },
  syntax: {
    keyword: { fg: 'magenta', bold: true },
    string: { fg: 'green' }
  }
});

renderTerminal(result, { theme: myTheme });

Syntax Highlighting

Supported languages:

• JavaScript / TypeScript
• Python
• JSON
• HTML / XML
• CSS / SCSS
• SQL
• YAML
• Markdown
• Go
• Rust
• Java
• C / C++
• Shell / Bash

Language Detection

import { detectLanguage } from '@constructive-io/visual-diff';

detectLanguage('file.ts');  // 'typescript'
detectLanguage('file.py');  // 'python'
detectLanguage('file.sql'); // 'sql'

Unified Diff Format

import { createUnifiedDiff, parseUnifiedDiff } from '@constructive-io/visual-diff';

// Create unified diff string
const unified = createUnifiedDiff(result);

// Parse unified diff string
const parsed = parseUnifiedDiff(unifiedDiffString);

Utilities

import { hasDifferences, countChanges } from '@constructive-io/visual-diff';

// Check if there are any differences
if (hasDifferences(result)) {
  // Get counts
  const { additions, deletions } = countChanges(result);
  console.log(`+${additions} -${deletions}`);
}

License

MIT

---

Development

Setup

1. Clone the repository:

git clone https://github.com/constructive-io/dev-utils.git

1. Install dependencies:

cd dev-utils
pnpm install
pnpm build

1. Test the package of interest:

cd packages/<packagename>
pnpm test:watch

Credits

Built by the Constructive team — creators of modular Postgres tooling for secure, composable backends. If you like our work, contribute on GitHub.

Disclaimer

AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED "AS IS", AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.

No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value.