🔍 Streamlit Code Diff

A simple Streamlit component for code diff visualization using v-code-diff. Great for displaying code changes, git diffs, and side-by-side comparisons.

Features

• Automatic Theme Detection - Adapts to Streamlit's light/dark theme
• Multi-Language Support - Syntax highlighting for 10+ programming languages
• Customizable Display - Side-by-side or line-by-line diff formats
• Granular Diff Styles - Word-level or character-level difference highlighting

Installation

pip install streamlit-code-diff

Quick Start

import streamlit as st
from streamlit_code_diff import st_code_diff

old_code = """def hello():
    print("Hello")"""

new_code = """def hello(name="World"):
    print(f"Hello, {name}!")"""

# Display the diff
result = st_code_diff(
    old_string=old_code,
    new_string=new_code,
    language="python"
)

st.write(f"Changes detected: {result['isChanged']}")

Parameters Reference

st_code_diff()

Display a code diff visualization.

Parameters

Returns

Returns a dictionary with diff statistics:

{
    "isChanged": bool,    # Whether differences were detected
    "addNum": int,        # Number of added lines
    "delNum": int         # Number of deleted lines
}

Supported Languages

The component supports syntax highlighting for:

• plaintext (default)
• python
• javascript / js
• typescript / ts
• json
• yaml / yml
• java
• bash / shell
• sql
• html
• xml
• css
• markdown / md

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

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

Acknowledgments

• v-code-diff - The core diff visualization library
• Streamlit - The amazing framework that makes this possible
• highlight.js - Syntax highlighting support