Motie Turns Markdown Into WeChat-Ready HTML With Inline Styles, Not Preview Polish
WeChat’s editor is a lossy paste target, and Motie’s inline-style pipeline is a useful pattern for any tool that ships formatted HTML across platform boundaries: verify against the real paste destination, not the preview. The concrete fixes show that copy/paste fidelity, not visual polish, is where Markdown-to-publisher tools live or die.
Motie is a static web page that takes Markdown, runs it through Marked and DOMPurify, and emits inline-styled HTML used for preview, rich-text copy, and file export. The same HTML goes to the clipboard, so formatting survives leaving the page as long as the target editor respects element-level styles. Marked, DOMPurify, highlight.js, and Lucide are bundled with the page, so opening it requires no CDN requests.
One round of real use showed where preview-only thinking fails. Code blocks using just `white-space: pre-wrap` lost line structure in WeChat, so Motie now writes explicit `<br>` tags, non-breaking spaces, and two-column tabs. Task-list checkmarks were split into separate paragraphs, so `☑`/`☐` are embedded in the same paragraph as the item text. Bare reference URLs no longer render as “URL: URL”, and existing `[1]`/`[2]` numbering is preserved. A regression sample document lets every future change be checked against the same article.
UI work removed a nested iframe that created double vertical scrollbars, then hid scrollbars while keeping wheel, touch, and keyboard scrolling. Images can be pasted at the cursor or dragged in as PNG/JPG/WebP/GIF, with per-image replacement by local file or full URL, though local images live only in page memory. Version 1.1.0 passes 44 local tests, but the project’s own checklist treats real WeChat draft paste and mobile preview as the final acceptance step, because tool-side success doesn’t equal the target platform accepting images and styles.
Preview panes are structurally the wrong place to debug copy/paste tools: every significant bug in this round appeared only after pasting into WeChat, because the target editor reinterprets the HTML. A regression corpus built from one real article catches more than a larger suite of synthetic cases.
Bundling dependencies into the page is a quiet reliability decision: a static file that makes no CDN requests will keep converting Markdown even when the network or a third-party CDN misbehaves.
The 200ms debounce test is the kind of UI timing detail that unit suites usually miss; a copy button that reads stale content after immediate input is exactly the failure users hit and developers don’t.
Turning “make it look nicer” into concrete checks like “no scrollbar but full text readable” is what makes AI-assisted iteration reviewable. Without that translation, neither a human nor a model has a way to know whether a change landed.