How I built a Realistic UI Copy Generator in Vanilla JS

#webdev #javascript #opensource #design

As a frontend developer and UX/UI designer, there is nothing worse than dropping standard "Lorem Ipsum" into a beautiful mockup, only to have the layout break when real client data is finally added. I wanted a fast way to generate realistic names, emails, and product descriptions for my design workflow, so I built a clean Realistic UI Copy Generator.

The Approach

I built this using 100% Vanilla JS. It runs entirely in the browser, allowing you to quickly copy-paste realistic dummy data directly into your projects without waiting on slow API calls or dealing with bloated plugins.

Here is a quick look at the core logic for generating randomized, realistic user profiles:

const firstNames = ["James", "Emma", "Liam", "Olivia"];
const lastNames = ["Smith", "Johnson", "Williams", "Brown"];
const domains = ["gmail.com", "company.co", "startup.io"];

function generateRealisticUser() {
    const first = firstNames[Math.floor(Math.random() * firstNames.length)];
    const last = lastNames[Math.floor(Math.random() * lastNames.length)];
    const domain = domains[Math.floor(Math.random() * domains.length)];

    return {
        fullName: `${first} ${last}`,
        email: `${first.toLowerCase()}.${last.toLowerCase()}@${domain}`
    };
}