Repolode
Submit
sennkuwu

sennkuwu/wechat-style-extractor

A tool that extracts reusable visual templates from WeChat Official Account articles and previews them as rich text ready to paste into the WeChat editor.

View on GitHub
Stars
155
Forks
18
Open issues
0
Last commit
2 months ago

What is it?

WeChat Style Extractor takes a public WeChat Official Account article link and analyzes its layout. It counts colors, font sizes, line heights, spacing and content components such as cards, then shows the visual parameters and component rules it finds.

The server-side parser fetches the article, sanitizes the HTML, normalizes styles and inlines the article stylesheet so grids, positioning, shadows, lists and tables are preserved. Images, lazy-loaded pictures and CSS background images are kept. A phone-width preview lets you check the result before copying it as rich text into the WeChat editor.

Recognition is heuristic: unrecognized items are hidden and the preview falls back to default values, and inline styles do not guarantee full fidelity in the WeChat editor. Fetching is limited to mp.weixin.qq.com, and WeChat may occasionally show a verification page to the server.

Key features

  • 01Extracts colors, font sizes, line heights and spacing from an article link.
  • 02Identifies titles, authors and content components such as cards.
  • 03Keeps original images, lazy-loaded pictures and CSS background images.
  • 04Inlines the article stylesheet to preserve grids, shadows, lists and tables.
  • 05Provides a phone-width preview and copies the result as rich text.

Use cases

  • Studying the layout patterns of popular WeChat Official Account articles.
  • Building original reusable templates for WeChat article formatting.
  • Previewing how an article looks on a phone before publishing it in the WeChat editor.

Quick start

  1. 1

    Install dependencies

    npm install
  2. 2

    Start the dev server

    npm run dev
  3. 3

    Build for production (optional)

    npm run build

Things to know

  • Requires Node.js 22.13 or newer.
  • Article fetching only works for mp.weixin.qq.com links, and WeChat sometimes shows a security verification page that blocks parsing.
  • Style extraction is heuristic, and inline styles may not be fully preserved in the WeChat editor.

Topics

#wechat#style-extraction#rich-text#template#preview#typescript

FAQ

What is wechat-style-extractor?
A tool that extracts reusable visual templates from WeChat Official Account articles and previews them as rich text ready to paste into the WeChat editor. WeChat Style Extractor takes a public WeChat Official Account article link and analyzes its layout. It counts colors, font sizes, line heights, spacing and content components such as cards, then shows the visual parameters and component rules it finds.
Is wechat-style-extractor free to use? What license does it have?
wechat-style-extractor is open source under the MIT license. Check the license terms before using it in commercial products.
Is wechat-style-extractor still maintained?
Updated within 6 months. The last commit to wechat-style-extractor was on Sep 5, 2026.
What can I use wechat-style-extractor for?
Studying the layout patterns of popular WeChat Official Account articles. Building original reusable templates for WeChat article formatting. Previewing how an article looks on a phone before publishing it in the WeChat editor.
How do I install wechat-style-extractor?
Install dependencies: npm install Start the dev server: npm run dev Build for production (optional): npm run build
Where can I get wechat-style-extractor?
The source code and installation instructions are on GitHub: https://github.com/sennkuwu/wechat-style-extractor

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects