etsy-listing-generator

Original：🇺🇸 English

Translated

1 scriptsChecked / no sensitive code detected

Generate Etsy listing images from HTML templates using Playwright. Supports single and batch rendering with customizable title, subtitle, badge text, and product images. Use when creating Etsy product listing images, mockups, or running batch generation for multiple products (e.g., puppet printables, digital downloads). Works with any HTML template that uses PRODUCT_IMAGE_URL, TITLE_TEXT, SUBTITLE_TEXT, BADGE_LEFT_TEXT placeholders.

2installs

Sourcemmcmedia/openclaw-agents

Added on2026-03-28

NPX Install

npx skill4agent add mmcmedia/openclaw-agents etsy-listing-generator

SKILL.md Content

View Translation Comparison →

Etsy Listing Image Generator

Generate professional Etsy listing images from HTML templates via Playwright screenshot rendering.

Quick Start — Single Image

bash

node scripts/render.mjs <template> <image-url> <title> <subtitle> <badge> <output>

Example:

bash

node scripts/render.mjs \
  assets/puppet-listing.html \
  "http://localhost:3021/api/output/moses-characters.png" \
  "Bible Story Puppet Printables" \
  "Moses & The Exodus" \
  "12 ELEMENTS + 4 BACKGROUNDS" \
  output/moses-listing.png

Quick Start — Batch

Create a JSON file with an array of objects:

json

[
  { "file": "http://localhost:3021/api/output/moses-characters.png", "subtitle": "Moses & The Exodus" },
  { "file": "http://localhost:3021/api/output/david-characters.png", "subtitle": "David & Goliath" }
]

Run:

bash

node scripts/render.mjs --batch assets/puppet-listing.html stories.json output/listings/

Batch JSON Fields

Field	Required	Default	Description
`file` / `image` / `url`	Yes	—	Product image URL (HTTP or file://)
`title`	No	"Bible Story Puppet Printables"	Large top text on banner
`subtitle` / `name`	No	—	Smaller bottom text on banner
`badge`	No	"12 ELEMENTS + 4 BACKGROUNDS"	Left badge text
`output`	No	Auto from subtitle	Output filename

Template Placeholders

Templates are plain HTML files. The renderer replaces these strings:

```
PRODUCT_IMAGE_URL
```
→ product/character image
```
TITLE_TEXT
```
→ large banner text
```
SUBTITLE_TEXT
```
→ smaller banner text
```
BADGE_LEFT_TEXT
```
→ left pill badge
```
INSTANT DOWNLOAD
```
→ right badge (hardcoded, edit HTML to change)

Template Design — Current Base (puppet-listing.html)

1400×2000px portrait format
White background, sage green (#4D6840) bottom banner
Gold pill badges (top-left: custom, top-right: INSTANT DOWNLOAD)
Poppins font throughout

Product image uses

object-fit: cover; object-position: center center

Subtle TheSunDaisy watermark

Creating New Templates

Copy

assets/puppet-listing.html

and modify. Key CSS to adjust:

```
.canvas
```
width/height — canvas dimensions
```
.banner
```
height — green section size
```
.product-area
```
top/bottom — image boundaries
```
.badge
```
styling — pill badge appearance
```
.title
```
/
```
.subtitle
```
— typography

Keep the placeholder strings (

PRODUCT_IMAGE_URL

, etc.) for the renderer to replace.

Serving Local Images

If product images are local files, either:

Serve via Image Forge backend: copy to

/projects/image-forge/output/

→ accessible at

http://localhost:3021/api/output/filename.png

Use
```
file://
```
URLs (must be absolute paths)
Start any local HTTP server in the image directory

Dependencies

Node.js
Playwright (
```
npx playwright install chromium
```
if not installed)

etsy-listing-generator

NPX Install

Tags

SKILL.md Content

Etsy Listing Image Generator

Quick Start — Single Image

Quick Start — Batch

Batch JSON Fields

Template Placeholders

Template Design — Current Base (puppet-listing.html)

Creating New Templates

Serving Local Images

Dependencies