What is this?
This tool scans a WeChat official account (公众号) article, extracts its visual styling (colors, font sizes, line heights, spacing) and content components, then lets you preview the layout and copy it as rich text you can paste back into the WeChat editor.
This tool scans a WeChat official account (公众号) article, extracts its visual styling (colors, font sizes, line heights, spacing) and content components, then lets you preview the layout and copy it as rich text you can paste back into the WeChat editor.Is this a web app I open in a browser, or something I install?It is a self-hosted web app built with Next.js (via 'vinext') - you run it locally or deploy it somewhere, then use it through a browser; there is no separate desktop package.
It is a self-hosted web app built with Next.js (via 'vinext') - you run it locally or deploy it somewhere, then use it through a browser; there is no separate desktop package.How do I turn a WeChat article into a template?You paste a public WeChat article link into the input field; the server fetches and sanitizes the HTML, then shows a mobile-style preview with the recognized colors, fonts, spacing and components.
You paste a public WeChat article link into the input field; the server fetches and sanitizes the HTML, then shows a mobile-style preview with the recognized colors, fonts, spacing and components.What do I need to run this locally?You need Node.js 22.13 or newer; the project itself relies on cheerio for HTML parsing, juice for inlining styles, and Next.js/React for the UI.
You need Node.js 22.13 or newer; the project itself relies on cheerio for HTML parsing, juice for inlining styles, and Next.js/React for the UI.Does it capture an article's styling perfectly?No - style detection is heuristic, so unrecognized properties are simply skipped and shown with default values, and the inlined styles are not guaranteed to survive untouched once pasted into WeChat's own editor.
No - style detection is heuristic, so unrecognized properties are simply skipped and shown with default values, and the inlined styles are not guaranteed to survive untouched once pasted into WeChat's own editor.What visual details does it detect from an article?It recognizes the title, author, colors, font sizes, line heights, spacing and content components used in the original article.
It recognizes the title, author, colors, font sizes, line heights, spacing and content components used in the original article.Does the preview keep the original images?Yes, it preserves the in-article images, lazy-loaded images, and CSS background images used inside cards.
Yes, it preserves the in-article images, lazy-loaded images, and CSS background images used inside cards.Can I just paste the result into WeChat's own editor?Yes, the tool auto-inlines the article's stylesheet (keeping grids, positioning, shadows, lists and tables) and offers a rich-text copy feature meant to be pasted directly into the WeChat official account editor.
Yes, the tool auto-inlines the article's stylesheet (keeping grids, positioning, shadows, lists and tables) and offers a rich-text copy feature meant to be pasted directly into the WeChat official account editor.What are similar projects?wechat-miniapp-radar, Mars-Editor-Web, open-saas, tailwindcss, LibreTV, design-extract, wechat-article-exporter, html-anything
wechat-miniapp-radar, Mars-Editor-Web, open-saas, tailwindcss, LibreTV, design-extract, wechat-article-exporter, html-anything