How I built a Realistic UI Copy Generator in Vanilla JS

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}`

    };

}

Try it out

You can use the live tool for free here: Realistic UI Copy

Let me know what you think or if you'd add any other data categories in the comments!