The VIDP™ Web Tool.

What this tool does

The VIDP Web Tool is a free reference implementation of the VIDP standard. Open it locally in any modern browser and it walks you through producing a complete VIDP-compliant delivery package for one listing at a time.

Before you start

Three things to have ready before you sit down to use the tool:

1. Two folders of images per listing

The tool needs both versions of every image you intend to disclose:

• Base (pre-edit) — the fully-processed working file immediately before any pill-triggering edit. This is your color-corrected, lens-corrected, dust-spotted version, but before the sky swap, virtual twilight, virtual staging, or whatever post-production change you'll be disclosing.
• Delivered (finished) — the final image with all post-production applied.

If your editor sends you both versions with matching filenames, you're set. If filenames don't match across the two folders, the tool can still work but you'll spend more time confirming pairs are correct.

2. A storage destination for the gallery

The tool produces a folder of files (HTML, images, QR codes). You host that folder somewhere with a stable web address, and the QR codes printed on your delivered images point at it. We'll walk through setting up free hosting on Netlify in the next section.

3. A computer with a modern browser

Desktop, laptop, or tablet. Chrome, Safari, Edge, or Firefox from the last few years. The tool is designed for landscape-oriented screens. It's not recommended on smartphones — the form layout, drop zones, and preview canvas all assume a wider viewport.

Set up storage

This walkthrough uses Netlify, a free static hosting service. You can use any static hosting if you prefer — the only requirements are stable URLs and the ability to host plain HTML, JPEG, and JSON files.

Netlify is recommended because their drag-and-drop deployment for solo users is straightforward and stable. Other hosts work but their interfaces change frequently, which makes a written walkthrough hard to keep current.

First-time Netlify setup

This produces a free {your-name}.netlify.app domain hosting your placeholder. You'll deploy listing folders into the same site as you produce them.

1. Create a free Netlify account

   Go to app.netlify.com/signup. Sign up with email or your Google/GitHub account. The free tier is enough for the verification gallery use case (100 GB bandwidth per month, unlimited static sites). No credit card required.

2. Open the Sites section

   After login, you'll land on a dashboard. Click Sites in the top navigation if you're not already there.

3. Find the drag-and-drop area

   Scroll down on the Sites page. You'll see a section labeled "Want to deploy a new site without connecting to Git?" with a drag-and-drop upload zone.

4. Upload the starter placeholder

   Drag vidp-starter-placeholder.zip into the drop zone. Netlify automatically extracts it and deploys it. Within 30 seconds you'll see a success message with a randomly-generated URL like amazing-elephant-12345.netlify.app. The placeholder is now live.

5. Rename the site to something memorable

   Click your new site in your Sites list. Go to Site configuration → Site details → Change site name. Enter something short and descriptive, like your business name or a recognizable identifier. Whatever you pick becomes {name}.netlify.app.

   This is the URL your QR codes will point to forever. Pick carefully. You can't change it later without breaking every QR code you've already printed.

6. Confirm the placeholder loads

   Visit your new {name}.netlify.app URL in a browser tab. You should see the generic placeholder homepage. If you see a 404, wait 60 seconds and try again — the rename may take a moment to propagate.

Your verification storage is now live. Note the URL — you'll enter it into the VIDP Web Tool for every listing.

Run the tool

1. Save the tool to your computer

   Right-click the download link above and choose "Save link as..." Save vidp-web-tool.html somewhere stable — your Desktop, Documents, or a working folder. You'll use the same file for every listing.

2. Open it in a browser

   Double-click vidp-web-tool.html. It opens in your default browser as a normal local file. The URL bar will show file:///... — that's correct. The tool is just a static HTML page running locally.

3. Section 01 — Producer info

   Enter your business name, contact email, your name, location, and website if applicable. The tool saves this to your browser's local storage so you only enter it once. Future listings will pre-fill these fields.

4. Section 02 — Listing info

   Enter the listing's full address, MLS number if applicable, shoot date, agent name, and brokerage. The tool generates a permanent listing slug from the address — for example, 4133 SW Parkridge Blvd becomes 4133-sw-parkridge-blvd-2026-04.

5. Section 03 — Storage URL

   Enter the URL of your Netlify site (the one you set up above). The tool will append the listing slug automatically — you'll see a preview of the full QR target URL as you type.

6. Section 04 — Upload both image folders

   This section has two side-by-side drop zones:

   • Delivered images — your final, post-edit JPEGs.
   • Base (pre-edit) images — the matching pre-edit version of every image.

   Drop both folders into their respective zones. The tool pairs them automatically by filename. For each image, click the pills that apply. The pill colors correspond to the four VIDP tiers.

   Only run pilled images through the tool

   Images with no post-production edits don't need to be in the verification gallery. Only run images that need at least one pill through this tool.

7. Section 05 — Placement and output options

   The defaults work for almost everyone. Pill bottom-right, QR bottom-left, default opacity, default sizes. Adjust only if you have a specific reason. Per VIDP §5.2, placement should be consistent within a single delivery.

8. Section 06 — Preview

   Select an image from the dropdown to see the composited preview with pills and QR applied. Verify pill stack order, placement, and visibility look right. The preview updates automatically as you change pills, placement, or compositing options.

9. Section 07 — Generate

   Click Generate package. The tool composites every image, generates QR codes, builds the gallery HTML, writes the audit record, and produces a single zip download. For 12 images this typically takes 20–60 seconds.

   The downloaded zip will be named after your listing slug. Save it where you can find it.

What's in the generated zip

{listing-slug}/
  delivered/         ← Pilled + QR'd images for agent delivery and MLS
  base/              ← Pre-edit images for the gallery's comparison slider
  clean/             ← Archive copy of delivered without pill/QR overlay
  qr/                ← QR codes per image (SVG + PNG at 120/180/300px)
  assets/            ← Gallery stylesheet
  index.html         ← Verification gallery page
  audit-summary.html ← Human-readable disclosure summary
  audit.json         ← Machine-readable audit record
  README.txt         ← Folder structure and deployment notes

Deploy the listing

You now have a generated listing folder. The pattern below covers both the first listing and every subsequent one.

Maintain a master folder of all listings

Netlify replaces the entire site with each deployment — there's no incremental upload. To keep the homepage placeholder live, keep all your previous listings reachable, AND add a new listing, you upload a single zip containing everything you want at the root.

Create a working folder on your computer (e.g. ~/Documents/VIDP-master/) and treat it as the source of truth for what's deployed:

VIDP-master/
  index.html                          ← Your placeholder homepage
  4133-sw-parkridge-blvd-2026-04/    ← First listing
  815-n-elm-st-2026-05/              ← Second listing
  2401-w-jefferson-2026-05/          ← Third listing
  ...

Each time you produce a new listing, drop its folder into VIDP-master/, zip the entire contents, and upload to Netlify.

Deployment steps for any listing

1. Extract the listing zip from the tool

   Open the zip the tool produced. Inside is a folder named after your listing slug. Extract that folder into your VIDP-master/ working folder, alongside index.html and any previous listings.

2. Zip the CONTENTS of the master folder

   Open VIDP-master/ and select all files and folders inside it. Then zip the selection.

   • Mac: Select all → right-click → Compress N Items
   • Windows: Select all → right-click → Send to → Compressed (zipped) folder

   Zip the contents, not the folder itself

   The resulting zip should have index.html and the listing folders directly at its root. If you zip the VIDP-master folder itself, your site ends up at {domain}/VIDP-master/ instead of at the root, and your QR codes will all break.

3. Open your Netlify site and navigate to Deploys

   Go to app.netlify.com, sign in, click on your site. Click the Deploys tab.

4. Drag your master zip onto the deploy area

   At the bottom of the Deploys page, you'll see a section labeled "Need to update your site?" with a drag-and-drop area. Drag your master zip directly onto that area. Netlify uploads the zip and starts a new deployment.

5. Wait for deployment to finish

   You'll see a "Building..." or "Uploading..." indicator. Wait until it shows "Published" with a green check mark. Usually 30–90 seconds.

6. Test the deployment

   Visit your site URL. Confirm:

   • {domain}/ shows the placeholder homepage
   • {domain}/{listing-slug}/ shows the verification gallery for the new listing
   • The before/after slider works on each image
   • Scanning a QR on a delivered image with your phone opens the gallery directly

7. Deliver the pilled images to your agent

   The images in your generated delivered/ folder are what you send to the agent and upload to MLS. They have pills and QR codes already composited.

   If your MLS has size limits, you can re-export delivered images from this folder at smaller dimensions or quality — the QR will continue to scan correctly as long as you stay above 85% JPEG quality and don't crop into the QR area.

Storing the audit record

The audit.json in each listing folder is your authoritative record of what was disclosed. Per VIDP §7.3, retain it for at least 7 years. Because the audit is part of your deployed gallery, hosting it on Netlify automatically satisfies retention — but keep a local backup of every listing zip the tool generates.

Limits and scope

This tool is a reference implementation, not a complete production system. It deliberately does the minimum needed to produce a VIDP-compliant delivery. Things it doesn't do:

• No multi-listing management. One listing per session. Master folder maintenance is on you.
• No agent portal. Galleries are static pages. There's no login, no agent dashboard, no MLS integration.
• No automated MLS sync. You deliver pilled images and upload them to MLS yourself.
• No cloud sync of producer config. Your producer info is saved in your browser only.
• No team accounts. Each producer runs their own tool on their own machine.
• No long-term storage management. Master folder size grows with every listing.

Troubleshooting

"Generate" button is disabled

The button enables only when all required fields are filled AND every uploaded delivered image has been paired with a base image. Check the status indicator at the bottom of the form for what's missing. Most commonly: a base image filename doesn't match its delivered counterpart.

QR doesn't scan

If a QR code on a delivered image doesn't scan reliably, the most likely cause is over-aggressive JPEG compression after generation. Re-export the delivered image at 85% quality or higher. The default 92% from the tool is safe for almost all uses.

Netlify deployment shows 404

Three common causes:

• Zip wraps content in a folder. Make sure your zip has index.html at the root, not nested inside another folder.
• Listing folder missing from master zip. Confirm the listing folder is actually inside the master folder when you zipped.
• Deploy still propagating. Wait 60 seconds after deployment success and reload.

Comparison slider doesn't move

If the gallery loads but the slider handle doesn't drag, the gallery's base/ folder may have failed to upload. Check Netlify's deploy log for upload errors.

Producer info doesn't save between sessions

The tool uses your browser's local storage. If you've cleared cookies/site data, used Private/Incognito mode, or switched browsers, you'll need to re-enter producer info. This is normal browser behavior, not a tool bug.

Technical notes

Browser compatibility

The tool uses modern browser features for image processing. It works in Chrome 79+, Safari 15+, Edge 79+, and Firefox 105+. Safari on iOS works for small batches but is memory-constrained — desktop or tablet recommended for production work.

Memory and batch size

The tool decodes every image into browser memory before processing. As a rule of thumb, browsers can handle 30–50 images per batch comfortably on desktop, fewer on tablets. Split very large listings into multiple deliveries if needed.

Privacy

The tool does not make any network requests during operation. Once the page loads (with its embedded fonts, QR library, and ZIP library), all subsequent processing happens locally in your browser. You can verify this by opening your browser's DevTools → Network tab while running the tool.

Source code

The entire tool is a single HTML file. View source, fork, audit, modify — it's licensed under CC BY 4.0 along with the rest of the VIDP standard.