Easily Create Beautiful Images Using HTML, Vue.js, React

Getting Started 💫

This API allows you to generate PNG or JPEG images from HTML, Vue.js, or React templates. You send your template, styles, and data — and receive a beautifully rendered image, meow~ 🖼✨

// Example request payload: 
{ 
    "content": string, 
    "width": 800, 
    "height": 600, 
    "format": "png"|"jpeg", 
    "framework"?: "html"|"vue"|"react",
    "data"?: Record< string, any >, 
    "tailwindcss"?: boolean
    "css"?: string,
}
                

API Usage 🚀

Send a POST request to /image/generate with a JSON body including:

• framework — Either "html", "vue" or "react".
• content — The template HTML string to render.
• data — (Vue/React only) An object with data for binding.
• width and height — Image dimensions in pixels (max: 2000px).
• format — Image format, either png or jpeg.
• tailwindcss — (optional) Enable TailwindCSS in your image.
• css — (optional) Custom CSS styles as a string.

The response will be the image binary data, ready to save or display meow~ 💾

Example 🍓

Here's an example of a request using Vue.js as the framework:

<div class="h-screen bg-gradient-to-b from-green-200 via-blue-200 to-orange-200">
  <div class="h-screen flex flex-col items-center justify-center text-center">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-900 leading-tight mb-4">
      Easily Create Beautiful Images Using
      <span v-for="(fm, i) in framework" :class="{
        'text-green-500': fm.type == 'vue',
        'text-red-500': fm.type == 'html',
        'text-blue-500': fm.type == 'react'
      }">
        {{ fm.name }}{{ i !== framework.length - 1 ? ", " : "" }}
      </span>
    </h1>
    <p class="text-lg text-gray-600 mb-8">
      Generate stunning images from your HTML templates in seconds
    </p>
  </div>
</div>

 
const fs = require('fs'); 
const path = require('path'); 
const fetch = require('node-fetch');

const imageHtml = fs.readFileSync(path.join(__dirname, 'image.html'), 'utf-8');

fetch('http://localhost:3000/image/generate', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        content: imageHtml,
        tailwindcss: true,
        framework: 'vue',
        data: {
            framework: [
                { name: "HTML", type: "html" },
                { name: "Vue", type: "vue" },
                { name: "React", type: "react" }
            ]
        },
        width: 800,
        height: 400,
        format: 'png'
    })
}).then(async response => {
    if (!response.ok) {
        throw new Error(`HTTP error status: ${response.status}`);
    }
    const buffer = await response.arrayBuffer();
    fs.writeFileSync(path.join(__dirname, 'output.png'), Buffer.from(buffer));
    console.log('Image successfully saved as output.png');
})
.catch(err => {
    console.error(err);
});

Tips & Tricks 🎀

• Use tailwindcss: true for fast and elegant styling ✨
• Customize visuals with css for full control 💅
• For vue and react, you can bind variables from the data object
• html mode ignores the data prop, it's pure markup 🌸
• Supported Vue directives include: v-if, v-for, :class etc.
• React templates support JSX syntax and expressions via {data.variable}
• Recommended to keep your image width and height proportional 💖