Frontend · GitHub · Vue.js

An Open-Source AI Editor That Fixes the Markdown-to-WeChat Formatting Nightmare

By 徐小夕 · Jul 22, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

WeChat's editor strips or mangles standard HTML and CSS, so technical writers waste hours reformatting code blocks, quotes, and dividers after pasting. wx-editor automates that cleanup and style injection, cutting a tedious, error-prone step out of the publishing workflow.

Summary

wx-editor is a Vue 3-based workbench that tackles the persistent friction of publishing technical content on WeChat Official Accounts. It combines a JitWord rich-text editor with an AI writing assistant that can generate titles, summaries, and outlines, then insert them as styled blocks. A theme system and a WeChat export engine handle the messy work of inlining styles and cleaning HTML so that pasted content doesn't break in the platform's backend.

The tool operates local-first: drafts, version snapshots, and configurations are stored in IndexedDB and localStorage, so the core editing loop works without a backend. Image uploads follow a dual-mode strategy—using a configurable image host when available, and falling back to base64 encoding to keep the local editing experience seamless.

Built by Xu Xiaoxi, the project is explicitly aimed at programmers who write technical articles in Markdown and want a one-click path to a well-formatted WeChat post. The adapter layer that wraps the JitWord SDK also includes a safety net: if the SDK fails to load, the editor degrades to a basic contenteditable field instead of crashing.

Takeaways

— wx-editor integrates a JitWord rich-text editor with an AI assistant that generates titles, summaries, outlines, and extended content, inserting results as styled blocks.

— A WeChat export engine cleans HTML, inlines styles, and adds compatibility fixes so pasted content renders correctly in the Official Account backend.

— The editor uses a dual-mode image strategy: uploads to ImgBB or a custom endpoint when configured, otherwise converts images to base64 to avoid broken local references.

— An adapter layer wraps the JitWord SDK and degrades to a basic contenteditable editor if the SDK fails to load, preventing a hard crash.

— All drafts, version snapshots, and configurations are stored locally in IndexedDB and localStorage, making the MVP fully functional without a server.

— Markdown divider syntax (---, ***, ___) is automatically mapped to editor-supported dividers, and the tool includes pre-built style blocks for cards, quotes, tips, and code blocks.

— The project is built with Vue 3, Vite 5, TypeScript, and Pinia, and includes unit tests with Vitest.

Conclusions

The hardest part of a WeChat editor isn't the editing—it's the export. The project's real value is in the wechatExporter module that reverse-engineers the platform's undocumented style requirements.

Degrading to a basic contenteditable editor when the rich-text SDK fails is a pragmatic choice that most editor integrations skip, but it prevents the entire tool from becoming a blank screen.

Relying on base64 images during editing and only enforcing HTTPS URLs at export time is a smart separation of concerns that keeps the local workflow fast while still meeting WeChat's requirements.

Concepts & terms

JitWord SDK

A collaborative AI document engine that provides rich-text editing capabilities. In wx-editor, it is loaded as a local dependency and wrapped in an adapter layer to isolate its lifecycle and handle failures.

WeChat Official Account Backend

The content management system for publishing articles on WeChat's platform. It has strict, undocumented HTML/CSS parsing rules that often strip or break standard formatting when pasting from external editors.

Editor Adapter Layer

A pattern that wraps a third-party editor SDK to normalize its API (getHTML, setHTML, insertHTML, destroy) and handle failures gracefully, such as degrading to a basic contenteditable field.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗