mcpField
E
etsy-listing-generator

etsy-listing-generator

github.com/mmcmediaMarketing & growth57 installs
Repository

About etsy-listing-generator

etsy-listing-generator renders Etsy listing images from HTML templates using Playwright. It is for sellers or creators producing single or batch product images with configurable text and image inputs.

Key features

  1. 01Render images from HTML templates
  2. 02Single-image rendering
  3. 03Batch rendering from JSON
  4. 04Configurable titles, subtitles, and badges
  5. 05Support for HTTP and file URLs

Use cases

  1. 01Creating an Etsy product listing image
  2. 02Rendering images for multiple products
  3. 03Generating listing graphics from local product images

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mmcmedia/openclaw-agents --skill etsy-listing-generator

After installing, type/etsy-listing-generatorin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

package-lock.json
package.json
WORKFLOW.md
assets/
puppet-listing.html
puppet-preview.html
scripts/
render.mjs

Details

From the project README

Etsy Listing Image Generator

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

Quick Start — Single Image

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

Example:

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:

[
  { "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:

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

Batch JSON Fields

FieldRequiredDefaultDescription
file / image / urlYes—Product image URL (HTTP or file://)
titleNo"Bible Story Puppet Printables"Large top text on banner
subtitle / nameNo—Smaller bottom text on banner
badgeNo"12 ELEMENTS + 4 BACKGROUNDS"Left badge text
outputNoAuto from subtitleOutput 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:

  1. Serve via Image Forge backend: copy to /projects/image-forge/output/ → accessible at http://localhost:3021/api/output/filename.png
  2. Use file:// URLs (must be absolute paths)
  3. Start any local HTTP server in the image directory

Dependencies

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

Comments

Markdown supported