Before/After Image Comparison Tool with Grape.js
If you’ve ever needed a quick way to build Before/After image sections for case studies, portfolios, real estate, or product makeovers, this project is for you.
I built a free, single-page tool that lets you create image comparison sections using GrapesJS, a visual, drag-and-drop HTML editor. The goal: make it dead simple to assemble a page (or section) with a Before/After image pair and then export production-ready HTML.
Important note up front: this is a creation tool, not a live preview. Inside the editor, the compare block is intentionally non-interactive; the two images are stacked to make them easy to select and replace.
The actual interactive slider behavior (drag to reveal) is wired to run in the exported HTML. In other words: build in the editor, interact after export.
How it works:
Start with a GrapesJS canvas that already includes a ready-to-edit image compare block (Before / After).
Replace the images with your own (upload or set URLs).
Optionally add headings, text, buttons, or any other GrapesJS components to craft a complete page.
When you’re done, export as a ZIP with assets. Open that file in a browser and the slider becomes interactive.
Why this approach? Keeping the editor in “creation mode” avoids accidental interactions that get in the way of selecting/replacing images.
It also ensures the exported page is clean and predictable: no editor scripts, just standard HTML/CSS/JS that you can host anywhere.
This project is free to use and download on my website. It’s built with HTML, CSS, JavaScript, jQuery, Hammer.js, and GrapesJS (no Vue or heavy frameworks).
Use it as a starting point for your own before/after galleries or extend it with additional blocks.
Check the demo here
Download
