🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

html-image-generator

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

html-image-generator

HTML Template (with CSS, Assets) + Data => Image

2.0.0
latest
Source
npm
Version published
Weekly downloads
12
100%
Maintainers
1
Weekly downloads
 
Created
Source

HTML Image Generator

HTML Template (with CSS, Assets) + Data => Image

Setup

Use template

Copy repository from this template.
Shortcut: Copy with a few seconds!

Setup manually

$ yarn add html-image-generator

Set type on package.json

{
  "...": "...",
  "type": "module",
  "...": "..."
}

Decide the template name

Add [template-name] directory

Add scripts on package.json

{
  "...": "...",
  "scripts": {
    "...": "...",
    "dev": "html-image-generator dev [template-name]",
    "generate": "html-image-generator generate [template-name]",
    "...": "..."
  },
  "...": "..."
}

Add files

  • [template-name]/template.html
  • [template-name]/data.js
  • [template-name]/options.yaml
  • [template-name]/assets/[some asset files]

Run script

$ yarn dev
# OR
$ yarn generate

Files

template.html

Add HTML template with mustache.js.

Use {{ assetsDir }} for assets directory.

<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
    <style>
      .title {
        font-size: 100px;
        font-family: 'Roboto', sans-serif;
      }
      .image {
        width: 300px;
        height: 300px;
      }
      .logo {
        width: 100px;
        height: 20px;
      }
    </style>
  </head>
  <body>
    <h1 class="title">{{ title }}</h1>
    <img class="image" src="{{ image }}" />
    <img class="logo" src="{{ assetsDir }}/logo.png" />
  </body>
</html>

data.js

export default [
  {
    title: 'Apple',
    image: 'https://example.com/images/apple.png',
    dist: 'dist/apple.png',
  },
  {
    title: 'Banana',
    image: 'https://example.com/images/banana.png',
    dist: 'dist/banana.png',
  },
  {
    title: 'Candy',
    image: 'https://example.com/images/candy.png',
    dist: 'dist/candy.png',
  },
];

// OR

export default async () => {
  const res = await fetch('SOME_API');
  const { contents } = await res.json();

  return contents.map((content) => ({
    title: content.title,
    image: content.image.url,
    dist: `dist/${content.id}.png`,
  }));
};

options.yaml

width: 1200 # required
height: 630 # required
type: png # optional: png (default), jpeg or webp. NOT jpg.
quality: 70 # optional: valid with jpeg and webp
omitBackground: true # optional: transparent background
concurrency: 3 # optional

Development mode

$ yarn dev

Run script and watch [template-name]/_dev.[jpeg, png or webp]

FAQs

Package last updated on 12 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Django Joins curl in Pushing Back on AI Slop Security Reports

Security News

Django Joins curl in Pushing Back on AI Slop Security Reports

Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.

By Sarah Gooding  -  Jun 30, 2025