Web Tools · Selected work

Ad Mocker

Dynamic ad preview tool for Facebook, Instagram, and Google Display.

Stack
  • JavaScript
  • HTML5 Canvas
  • CSS3
  • Responsive Design
Ad Mocker

Overview

Ad Mocker is a side-project web app that generates realistic mockups of how an ad will look in production: Facebook feed and stories, Instagram, Google Display Network. Custom business names, headlines, descriptions, and creative.

The motivation was small but real: every campaign launch I’d worked on involved someone pasting copy into Photoshop to fake a Facebook UI. Ad Mocker does it correctly, in the browser, in real time.

What it does

  • Generates pixel-accurate mockups of Facebook, Instagram, and GDN placements.
  • Real-time editing: type a headline, see the preview update.
  • Export to PNG for sharing, decks, and client review.
  • Responsive, so it works on a laptop on a call as well as on desktop.

Stack

Built with HTML5 Canvas for the rendering layer, vanilla JavaScript for state, and CSS3 for the platform-skin layouts. No framework. The whole thing is small enough that the dependency cost wasn’t worth paying.

Status

Featured on Product Hunt. Live at admocker.com.