Usage

You can use the /gen endpoint with **domain name as parameter (website). The gen() function returns image data as a base64 string in json format.

Example:

https://mockgen.sudhamjayanthi.repl.co/gen?website=ayush.sh returns a json with a large base64 string as value for the key "img"

Example with Javascript

Here is a example client-side javascript code to take user input, send a api call and then render the returned beautiful mockup!

website = document.getElementById('input'); // input element to get domain name 
btn = document.getElementById('gBtn'); // button to trigger api call
mockup = document.getElementById('mockup'); // img element to render generated mockup 

btn.on('click', () => {
	fetch(`https://mockgen.sudhamjayanthi.repl.co/gen?website=${website.value}`) 
		 .then((res) => res.json())
		 .then((data) => {
					if (data.error) {
						  alert("Error occured, please try again!")
				  } else {
							// formatting the returned base64 data properly
							imgSrc = "data:image/png;base64, " + data.img.slice(2, -1); 

							// setting the mockup src with our formatted img source
					    mockup.src = imgSrc;
					}
		 }
}

Note:

Currently the API uses a single premade image for the background. So you can’t customise it!