Django Diff Component

Diff places two content slots side-by-side with a draggable divider, ideal for before/after comparisons. Both panels can hold images, screenshots, or any HTML.

Basic Diff

Preview

Code

<c-lb.diff aspectRatio="16/9">
    <c-lb.diff.item-1 src="https://fastly.picsum.photos/id/605/400/300.jpg?hmac=j2PuTScRlxcbdbLCtv-2Z-BMAkdmItOQa_dXcqqne0I" alt="Before image" />
    <c-lb.diff.item-2 src="https://fastly.picsum.photos/id/448/400/300.jpg?hmac=cP2wpsOPnLkm9NBu_C9zJ-1V5MuhYNna51R93tUNUz0" alt="After image" />
    <c-lb.diff.resizer />
</c-lb.diff>

Aspect Ratios

Preview

16:9 Aspect Ratio

4:3 Aspect Ratio

Square (1:1) Aspect Ratio

Code

<div class="flex flex-col gap-4">
    <div>
        <h4 class="text-sm font-semibold mb-2">16:9 Aspect Ratio</h4>
        <c-lb.diff aspectRatio="16/9" class="w-full max-w-md">
            <c-lb.diff.item-1 src="https://fastly.picsum.photos/id/936/400/225.jpg?hmac=jp8fYiJZbXhEakKoS31-x-9ceKFFCLOg4-onaSYrOds" alt="Before" />
            <c-lb.diff.item-2 src="https://fastly.picsum.photos/id/545/400/225.jpg?hmac=DjbNr2IkQCTJHiASVOId1_m4dp2dhvNCD0hrVziPMX8" alt="After" />
            <c-lb.diff.resizer />
        </c-lb.diff>
    </div>

    <div>
        <h4 class="text-sm font-semibold mb-2">4:3 Aspect Ratio</h4>
        <c-lb.diff aspectRatio="4/3" class="w-full max-w-md">
            <c-lb.diff.item-1 src="https://fastly.picsum.photos/id/787/400/300.jpg?hmac=3ULs9SuUe9ZEE-c3tK-fK_3pK2-CnOHc508xHEZxSyY" alt="Before" />
            <c-lb.diff.item-2 src="https://fastly.picsum.photos/id/634/400/300.jpg?hmac=IWLtWDsiU_mo9E1icTcV2ei10snik66O_9zVC_GdEIg" alt="After" />
            <c-lb.diff.resizer />
        </c-lb.diff>
    </div>

    <div>
        <h4 class="text-sm font-semibold mb-2">Square (1:1) Aspect Ratio</h4>
        <c-lb.diff aspectRatio="1/1" class="w-full max-w-xs">
            <c-lb.diff.item-1 src="https://fastly.picsum.photos/id/265/400/400.jpg?hmac=5iWFtPUjuDU5uIPoErzUlLHtOyMxqF7c5N1DV3qcktI" alt="Before" />
            <c-lb.diff.item-2 src="https://fastly.picsum.photos/id/828/400/400.jpg?hmac=7P5ugRqxoL4BmASjmziGl8b9O_ZfKBUVFbZutpg7n9I" alt="After" />
            <c-lb.diff.resizer />
        </c-lb.diff>
    </div>
</div>

With Text Content

Preview

Before

Old Design

After

New Design

Code

<c-lb.diff aspectRatio="16/9" class="w-full max-w-md">
    <c-lb.diff.item-1>
        <div class="bg-primary text-primary-content flex items-center justify-center h-full">
            <div class="text-center">
                <h3 class="text-2xl font-bold">Before</h3>
                <p class="text-sm">Old Design</p>
            </div>
        </div>
    </c-lb.diff.item-1>
    <c-lb.diff.item-2>
        <div class="bg-secondary text-secondary-content flex items-center justify-center h-full">
            <div class="text-center">
                <h3 class="text-2xl font-bold">After</h3>
                <p class="text-sm">New Design</p>
            </div>
        </div>
    </c-lb.diff.item-2>
    <c-lb.diff.resizer />
</c-lb.diff>

Color Comparison

Preview

Original

Updated

Code

<c-lb.diff aspectRatio="4/3" class="w-full max-w-md">
    <c-lb.diff.item-1>
        <div class="bg-gradient-to-br from-blue-500 to-purple-600 h-full flex items-center justify-center">
            <span class="text-white text-3xl font-bold">Original</span>
        </div>
    </c-lb.diff.item-1>
    <c-lb.diff.item-2>
        <div class="bg-gradient-to-br from-pink-500 to-orange-600 h-full flex items-center justify-center">
            <span class="text-white text-3xl font-bold">Updated</span>
        </div>
    </c-lb.diff.item-2>
    <c-lb.diff.resizer />
</c-lb.diff>

Responsive

Preview

Code

<c-lb.diff aspectRatio="16/9" class="w-full">
    <c-lb.diff.item-1 src="https://fastly.picsum.photos/id/320/800/450.jpg?hmac=qkpT5gCqaXeIbl8VKkeQJW55xdrRzJkAONvW4XvUo9M" alt="Before - Desktop view" />
    <c-lb.diff.item-2 src="https://fastly.picsum.photos/id/202/800/450.jpg?hmac=OY1LN3tmKjIi3XZ7vu0qvQYRHz3VwsnGfFclZdsayts" alt="After - Mobile view" />
    <c-lb.diff.resizer />
</c-lb.diff>

API Reference

`c-lb.diff`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
aspectRatio	16/9 4/3 1/1 3/4 9/16	-	No	Aspect ratio of the diff container

Slot Name	Description
default	Diff content using diff.item-1, diff.item-2, and diff.resizer components

`c-lb.diff.item-1`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
src	string	-	No	Image source URL
alt	string	`First comparison image`	No	Alt text for the image

Slot Name	Description
default	Custom content (overrides automatic image rendering)

`c-lb.diff.item-2`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
src	string	-	No	Image source URL
alt	string	`Second comparison image`	No	Alt text for the image

Slot Name	Description
default	Custom content (overrides automatic image rendering)

`c-lb.diff.resizer`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply