Now in early access

Turn messy HTML into meaningful diffs

Extract real changes from before and after snapshots, then generate concise AI summaries that actually explain what changed.

Try it free View docs →

Start with trial balance. No subscription required.

Model-based pricing. Lower input cost. Output not charged.

Messy in. Structured out.

Pass before and after HTML — get back meaningful changes and a clear summary.

Before

<html><body>
  <div class="product" id="p-42">
    <h1 class="title xl">
      Widget Pro — $29.99
    </h1>
    <p class="desc">
      Our best widget. Ships in 3-5 days.
      Now with extra durability.
    </p>
    <button class="btn btn-blue">
      Add to cart
    </button>
    <span class="stock">
      In stock (42 units)
    </span>
  </div>
</body></html>

After

<html><body>
  <div class="product" id="p-42">
    <h1 class="title xl">
      Widget Pro — $24.99
    </h1>
    <p class="desc">
      Our best widget. Ships in 1-2 days.
      Now with extra durability.
    </p>
    <button class="btn btn-green">
      Add to cart
    </button>
    <span class="stock">
      In stock (7 units)
    </span>
  </div>
</body></html>

Output

Summary

Price dropped from $29.99 to $24.99. Shipping time improved to 1–2 days. Button style changed. Stock reduced to 7 units.

Changes

+Price: $29.99 → $24.99
+Shipping: 3-5 days → 1-2 days
+Button: btn-blue → btn-green
+Stock: 42 units → 7 units

{
  "changed": true,
  "added": [],
  "removed": [],
  "modified": [
    "price", "shipping",
    "button_style", "stock"
  ]
}

Why MessyDiffs?

MessyDiffs cuts through noisy HTML to surface the changes that matter, then summarizes them clearly.

Avoid sending full HTML snapshots to the model.

Raw HTML diffs are noisy.

Whitespace, attributes, and structure changes drown out real content changes.

Naive comparisons are hard to interpret.

Without filtering, you get a wall of changes with no signal about what actually matters.

MessyDiffs returns changes you can act on.

Structured diff output and concise AI summaries — focused on meaningful changes.

Why not call the model directly?

Naive vs MessyDiffs

See why MessyDiffs sits between raw HTML and your chosen model.

Naive approach

Send full before and after HTML
Pay full model input cost
Pay to process everything, changed or not
Noisy diffs and generic summaries

MessyDiffs

Recommended

Send before/after snapshots to MessyDiffs
50% of the selected model's input cost
Focus on meaningful changes
Summaries that highlight what actually changed

Output tokens are not charged.

Example: a 30k-token HTML comparison → half the input cost

Stop sending full HTML snapshots to the model.

How it works

Three steps from messy to meaningful.

Send before and after snapshots

POST your before/after HTML to the API. Any format — scraped pages, rendered output, template results.

MessyDiffs extracts meaningful changes

The engine strips noise, normalises structure, and identifies what actually changed — not just what looks different.

Get structured diff + AI summary

Receive a clean JSON diff with added/removed/modified fields, plus a concise natural-language summary.

Simple API, clean output

One endpoint. POST before and after. Get back structured changes.

POST/v1/diff

curl -X POST https://api.messydiffs.com/v1/diff \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "claude-haiku-4-5",
    "before": "<html>...</html>",
    "after": "<html>...</html>"
  }'

200application/json

{
  "changed": true,
  "summary": "Price reduced from $29.99 to $24.99.
Shipping improved to 1-2 days.
Stock level dropped to 7 units.",
  "added": [],
  "removed": [],
  "modified": [
    {
      "field": "price",
      "before": "$29.99",
      "after": "$24.99"
    },
    {
      "field": "shipping_time",
      "before": "3-5 days",
      "after": "1-2 days"
    }
  ]
}

Public demo

Try the diff demo

See how MessyDiffs pulls out the changes that matter.

BeforeRead-only demo

<section class="hero">
  <div class="container">
    <h1 class="hero-title">Track what your competitors are doing</h1>
    <p class="hero-subtitle">
      Monitor competitor websites for price changes, copy updates,
      and new features. Get instant alerts when anything changes.
    </p>
    <a href="/signup" class="btn btn-primary">Start monitoring free</a>
    <a href="/demo" class="btn btn-secondary">See a demo</a>
  </div>
</section>

<section class="features" id="features">
  <h2>Everything you need to stay ahead</h2>
  <div class="feature-grid">
    <div class="feature-card">
      <h3>Price tracking</h3>
      <p>Get notified when competitor prices change.</p>
    </div>
    <div class="feature-card">
      <h3>Copy monitoring</h3>
      <p>See when messaging and positioning shifts.</p>
    </div>
  </div>
</section>

<section class="pricing">
  <h2>Simple pricing</h2>
  <p class="price">From $19<span>/month</span></p>
  <p class="price-note">Up to 10 competitors</p>
</section>

AfterRead-only demo

<section class="hero">
  <div class="container">
    <h1 class="hero-title">Stay ahead of market changes</h1>
    <p class="hero-subtitle">
      Track meaningful updates across any website — pricing,
      messaging, features, and more. Cut through the noise.
    </p>
    <a href="/signup" class="btn btn-primary">Get started for free</a>
    <a href="/docs" class="btn btn-secondary">Read the docs</a>
  </div>
</section>

<section class="features" id="features">
  <h2>Everything you need to stay ahead</h2>
  <div class="feature-grid">
    <div class="feature-card">
      <h3>Price tracking</h3>
      <p>Get notified when competitor prices change.</p>
    </div>
    <div class="feature-card">
      <h3>Copy monitoring</h3>
      <p>See when messaging and positioning shifts.</p>
    </div>
    <div class="feature-card">
      <h3>AI summaries</h3>
      <p>Understand changes in plain English, instantly.</p>
    </div>
  </div>
</section>

<section class="pricing">
  <h2>Simple pricing</h2>
  <p class="price">From $29<span>/month</span></p>
  <p class="price-note">Up to 25 competitors</p>
</section>

This demo uses a fixed example. Try your own snapshots and AI summaries in the app.

Simple, model-based pricing

No subscriptions. No surprises.

→

Choose a model

Pick Claude Haiku, GPT-4o mini, or another supported model.

→

Pay per request

Requests are charged at 50% of that model's input token cost. Pricing is based on the request you send.

→

Output tokens are not charged

The summary and diff output are free. No subscription required.

Built to reduce noise before AI sees it.

Example: Claude Haiku at $1/M input → MessyDiffs charges $0.50/M

Non-AI diff processing may incur a small fee.

Get API access

Developer quickstart

Works with any HTTP client. No SDK required.

curl

curl -X POST https://api.messydiffs.com/v1/diff \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "claude-haiku-4-5",
    "before": "<html>...</html>",
    "after": "<html>...</html>"
  }'

javascript

const response = await fetch(
  'https://api.messydiffs.com/v1/diff',
  {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: 'claude-haiku-4-5',
      before: beforeHtml,
      after: afterHtml,
    }),
  }
);

const { changed, summary, modified } = await response.json();

csharp

using var client = new HttpClient();
client.DefaultRequestHeaders.Authorization =
  new AuthenticationHeaderValue("Bearer", API_KEY);

var payload = new {
  model = "claude-haiku-4-5",
  before = beforeHtml,
  after = afterHtml
};

var response = await client.PostAsJsonAsync(
  "https://api.messydiffs.com/v1/diff",
  payload
);

var result = await response.Content
  .ReadFromJsonAsync<DiffResponse>();

FAQ

Try MessyDiffs

Clean diffs. Better summaries. Lower cost.

Get API access Read the docs

Start with trial balance. No subscription required.