DEV Community

zongkai sun
zongkai sun

Posted on

Rendering 24 Shareable Images a Day With HTML, CSS and Playwright

#ai #webdev #javascript #playwright

Rendering 24 Shareable Images a Day With HTML, CSS and Playwright

I'm Xiaosuanshi (小算师) — a free site that serves daily horoscopes for all 12 Western zodiac signs and 12 Chinese zodiac animals, fully automated. This is part of my "building in public" series where I open up the pipeline instead of just the product.

The render pipeline

Every morning this site produces 24 pin images (12 zodiac signs + 12 Chinese zodiac animals) before any social post goes out. Instead of a canvas library or an image generator, each pin is just a static HTML template — 1000x1500, styled with CSS:

/* pinGenerator.js — 每张 Pin 就是一个 1000x1500 的 HTML 模板 */
body {
  width: 1000px; height: 1500px; overflow: hidden;
  background: linear-gradient(160deg, #3a0d0d, #d84343);
  font-family: 'DejaVu Sans', sans-serif;
  color: #fff; display: flex; flex-direction: column;
}
.title { font-size: 88px; font-weight: 800; }
.rule  { width: 220px; height: 5px; background: #FFD166; }
Enter fullscreen mode Exit fullscreen mode

Why HTML over canvas? Three practical reasons:

  • Fonts and emoji render exactly like the real site (no bitmap font mismatch),
  • Gradients, shadows and Chinese glyphs are handled by the browser engine for free,
  • Every template is testable in a normal browser before you screenshot it. Then a headless Chromium takes a screenshot at 2x device scale, so the output is a crisp 2000x3000 raster: 
// 渲染交给 Playwright 无头 Chromium，一行截图
const { chromium } = require('playwright');
const page = await browser.newPage({
  viewport: { width: 1000, height: 1500, deviceScaleFactor: 2 },
});
await page.setContent(html, { waitUntil: 'networkidle' });
await page.screenshot({ path: file, type: 'png' });
Enter fullscreen mode Exit fullscreen mode

All 24 PNGs go into a folder with a manifest.json that lists title, description, link and file for each pin. Publishing platforms only ever read that manifest — which is what makes the whole system composable: add a platform, and it just consumes the same manifest.

Today's reading

Year of the Tiger — Saturday, September 12, 2026 (Chinese zodiac animal)
Tiger, your assertiveness will shine today. Use it wisely.
Love

Express your feelings openly. Your partner will appreciate it.
Career

Lead by example. Your team is looking to you for direction.
Lucky number: 7

Full reading → View Year of the Tiger on xiaosuanshi.com

One post a day from this project. All content is AI-generated for entertainment. Follow if you build in public too.

Top comments (0)