Automating Twitch Emote Asset Generation: How I Built a WooCommerce Mockup Generator for 300+ Digital Products

When you're selling 300+ digital products on an e-commerce store, manually uploading each one with the right SEO, mockup previews, and metadata takes weeks. Here's the tool I built to automate that workflow — a single-file React + Canvas application that publishes products directly to WooCommerce REST API.

The problem

I run an indie store selling Twitch and Discord emote packs — small digital assets, typically 6-48 emotes per pack, delivered as ZIP files. Each product needs: mockup preview images (showing emotes in a grid), SEO metadata (Rank Math title/description/focus keyword), product images optimized for the storefront, and consistent gallery ordering.

The Etsy version of my store is at 1,473+ sales, but the standalone WooCommerce store at uncommonunearthings.com needed faster product onboarding to scale beyond the manual process. The solution architecture Instead of clicking through WordPress admin for each product, I built a standalone HTML file that:

Generates mockup grids from raw PNG emotes using HTML5 Canvas Auto-fills SEO fields from structured AI-generated text Uploads media to WordPress via REST API with Application Password authentication Creates the WooCommerce product with all metadata in a single PUT request Writes Rank Math meta_data through the same API call

The whole tool runs locally via file:// protocol — no build step, no Node, no server. Just open the HTML in a browser and it works. Key technical decisions

Canvas-based mockup generation.

Instead of pre-rendering mockups in Photoshop, the tool composes them on-the-fly from raw emote PNGs. Step-down scaling (canvas drawn at 2x then scaled down) preserves sharp edges on small emotes (28px Twitch chat size). Natural sort for multi-image galleries. WooCommerce REST API accepts gallery images in array order. To preserve 01_alien.png → 08_alien.png sequence regardless of upload order, I implemented a JavaScript natural-sort comparator that handles the leading zeros correctly.

CORS bypass via nginx proxy_hide_header.

The tricky part: WordPress sends Access-Control-Allow-Origin: null headers by default, which blocks API calls from file://. The fix was adding proxy_hide_header Access-Control-Allow-Origin in nginx before substituting * — letting the local HTML talk to the live API. Application Password vs Consumer Key separation. WooCommerce Consumer Keys work for /wp-json/wc/v3/* endpoints but lack permissions for /wp-json/wp/v2/media. Media upload requires WordPress Application Password authentication — a separate token created per user in WP admin.

The SEO metadata structure

The AI SEO parser uses a structured key:value format: TITLE: Cute Alien Emote Pack | Twitch Discord
PRICE: 6.50 TAGS: twitch emotes, alien, sci-fi, kawaii META_TITLE: Cute Alien Twitch Emotes | UncommonUnearthings META_DESC: 48 cute alien-themed Twitch emotes... FOCUS_KW: cute alien twitch emotes ALT_TEXT: cute alien twitch emote pack SLUG: cute-alien-twitch-emote-pack SHORT_DESC: 48 alien emotes ready for instant download LONG_DESC:

What's included

... The parser splits on : delimiters and auto-fills the publish form. Rank Math fields go into the WooCommerce product's meta_data array, with keys like rank_math_focus_keyword.

The Rank Math API problem This is the gotcha that cost me an evening: WordPress REST API silently rejects Rank Math meta fields unless they're explicitly registered. Everything else (title, content, images, categories) works fine — but Rank Math fields stay empty with no error, no warning. The fix was installing the rank-math-api-manager plugin which registers the fields and adds a dedicated endpoint: POST /wp-json/rank-math-api/v1/update-meta { "post_id": 12345, "rank_math_title": "...", "rank_math_description": "...", "focus_keyword": "..." } Authentication via WordPress Application Password (same as media uploads).

Lessons for other indie e-commerce builders A few takeaways: Build for your own workflow first. This tool exists because I was the bottleneck. It's not optimized for general use — it has hardcoded values specific to my store. That's fine. Generic tools are slower than purpose-built ones. File:// is underrated. No build step, no deployment, no version management. Just one HTML file. For internal tooling, this beats setting up a Next.js project for the same functionality. If you're curious what the actual products look like in practice, here's a buyer's guide to the Twitch emote and sub badge market this tooling supports.

The Rank Math gap matters. If you're integrating any WordPress + WooCommerce + Rank Math workflow via REST API, expect to spend time finding workarounds for the silent-rejection behavior. The plugin approach is the cleanest path. Canvas is fast enough. Even rendering 48-emote mockup grids at 2x resolution, the Canvas API handles it in milliseconds. No need to reach for WebGL or external image processing services.

The store running on this stack is uncommonunearthings.com if you want to see the output. For the deeper guide on choosing premade emote graphics for Twitch streamers, see this buyer's analysis.