Creating Mockuper

Mockuper is where it all really started.

At that time I was still in high school, in my small Italian town, studying at the Liceo Scientifico. I think that would be like being 15 or 16 years old in the U.S.

In my free time I was having fun building simple websites, for family, friends, or just by word of mouth. Back then it was very trendy to show your design work using mockups, where you place your website screenshot inside a photo of a laptop or a phone. Today it is not so common anymore, but at that time there were not many tools around. The main one was Placeit.net, but it was paid.

So I thought: why not try to make a similar tool for myself?

At first I started with AngularJS and PHP Slim Framework (Slim). At that time we used Grunt.js for automation. I still remember having a

Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    concat: {
      js: {
        src: ["src/**/*.js"],
        dest: "dist/app.js",
      },
    },
    uglify: {
      js: {
        src: "dist/app.js",
        dest: "dist/app.min.js",
      },
    },
    watch: {
      scripts: {
        files: ["src/**/*.js"],
        tasks: ["concat", "uglify"],
      },
    },
  });

  grunt.loadNpmTasks("grunt-contrib-concat");
  grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.loadNpmTasks("grunt-contrib-watch");
  grunt.registerTask("default", ["concat", "uglify"]);
};

The idea was to use Canvas with layers, and an approach similar to Perspective.js to transform the designs in 4-point perspective, so they would look naturally placed on devices.

Here is a simple example of how the 4 points perspective works

Later I switched completely to React, rewriting the entire application from scratch. Then I moved to Next.js, again rewriting everything several times as the framework evolved, removing the PHP backend and replacing it with a Node.js + MongoDB backend.

I was not doing it for money or to grow the busines. Only to learn and have fun (really miss those days!)

From the infrastructure side, Mockuper was also my playground. At the beginning I deployed it manually on a small VM, setting up Nginx, certificates, pnpm, everything by hand. As a poor student I thought: this way I will save money and pay only 2 or 3 euros per month for the VM. Of course managing everything soon became a nightmare: the database crashing, certificates expiring, manual restarts, and so on.

Kubernetes felt like too much, and serverless was not really popular yet. Then I discovered CapRover, which helped me a lot with all my personal projects. It is like your own personal Vercel, running on Docker Swarm.

CapRover dashboard At first I had only one node, then as Mockuper grew, I added more. But again, at some point the complexity was not worth the small saving, and today Mockuper runs fully in the cloud.

In just a few months Mockuper became viral, generating some revenue only from ads while staying completely free. That was exactly 12 years ago, and since then I never really touched it again. And still today, even if it lost some relevance, it keeps running with thousands of monthly users.

Google kind of ruined the ad experience though. Back in the day ads were nicely placed and looked native inside the design. Now the site is full of auto-placed ads, and I am not surprised that people prefer using ChatGPT or Perplexity instead of Google.

Mockuper opened many doors for me: my first job in Milan while I was still a student, contracts worth hundreds of thousands of dollars with U.S. companies for custom B2B image generation platforms, and some respect in the community.

Probably, if I had invested in it, my life would be different today. But for a random italian guy from a small town, the path was clear: go to university and get a job.

Mockuper has a special place in my heart. It was my experiment bench, it survived many complete rewrites, and it kind of reflected both the evolution of web technologies and my own growth in the last 10-15 years.

I am not sure if it still makes sense as a tool today. A designer can easily get the same result using Google, ChatGPT, or even Figma mockups. But as long as there are people still using it, and a bit of ad revenue coming in, that emotional connection will keep Mockuper online, and for me it will always be a small source of pride.