mp-html: Rendering and Editing HTML Inside WeChat, QQ, Baidu, Alipay and Toutiao Mini Programs

The problem mp-html solves for multi-platform mini program teams

Mini programs do not have a browser engine you can point at a URL. If your backend already stores article bodies as HTML, you either convert them to a platform-specific node tree at build time or render them at runtime with a component that understands HTML. mp-html takes the second route and does it once for several platforms: the README lists WeChat, QQ, Baidu, Alipay, Toutiao and uni-app, and the repository ships a separate build per target under dist/platform with build scripts named build:weixin, build:qq, build:baidu, build:alipay, build:toutiao and build:uni-app. The audience is a team that publishes the same content into more than one mini program and does not want to maintain a renderer per host.

The feature list is broader than plain text: table, video and svg are named, along with automatic image preview, link handling, placeholder images for loading, error and preview states, anchor jumping, long-press copy and most HTML entities. A plugin directory adds audio, editable, emoji, highlight, markdown, search, style, txv-video, img-cache, latex and card. That list is the real scope statement: mp-html is a rendering substrate with optional layers, and you decide which layers your bundle carries. The README quotes a size of about 25KB, 9KB gzipped, which matters because mini program packages have hard size limits.

How the parser and the component fit together

The component takes a string through the content property and produces a node tree that the host platform can render. The load event fires when the dom tree has finished loading, and ready fires when images have finished. Between those two events you have a window where layout is not final, so anything that measures the content should wait for ready rather than load. The error event exists for render failures, and the README does not document what the component does after it fires, so treat it as a signal to fall back to plain text rather than as a recovery hook.

Rendering behaviour is driven by properties rather than by the HTML. lazy-load, preview-img, copy-link, selectable, scroll-table, pause-video, show-img-menu, set-title and use-anchor are all component-level switches with defaults in the property table. This is a deliberate split: the stored HTML stays portable, and each page decides how much interactivity it grants. If you need per-tag styling rather than per-page switches, tag-style takes an object, and container-style sets the wrapper. The instance API covers the cases the declarative layer cannot: setContent replaces content after mount, getText extracts text, getRect measures position and size, imgList returns the image array, navigateTo performs anchor jumps, in constrains anchor jumps to a scroll-view, and pauseMedia and setPlaybackRate control media.

Installing mp-html with npm and rendering a first string

The README gives two installation routes. The npm route is shorter for a native mini program. Install the package in the project directory, then in the developer tools enable the npm module option if that checkbox exists and run the build npm command from the Tools menu. The README notes the checkbox may be absent, in which case it is not needed.

npm install mp-html

After the package is built, register the component in the page json file. The key on the left is the tag name you will use in the template, and the value is the package name.

{
  "usingComponents": {
    "mp-html": "mp-html"
  }
}

The template then takes a single content binding. Nothing else is required for a first render.

<mp-html content="{{html}}" />

The page supplies the string in onLoad through setData. The README's example is a div containing Hello World, and that is what you should see on screen before you try anything more complex.

Page({
  onLoad () {
    this.setData({
      html: '<div>Hello World!</div>'
    })
  }
})

If you prefer not to use npm, copy the platform package from dist/platform into a components directory, rename it to mp-html, and point usingComponents at /components/mp-html/index instead. The remaining steps are identical. For uni-app the README offers a source route (copy dist/uni-app into the project root, or pull it from the plugin market) and an npm route that imports from mp-html/dist/uni-app/components/mp-html/mp-html. The npm route has two documented conditions: a cli-based project must configure transpileDependencies in vue.config.js, and nvue requires copying dist/uni-app/static into the project static directory or it will not run.

Where mp-html is the wrong tool

The component is a parser, not a layout engine, so content that depends on the full CSS cascade will not survive intact. The README lists a style plugin that matches style tags, which tells you that style handling is opt-in rather than automatic. If your HTML relies on external stylesheets, complex selectors or floats, expect to rewrite the content or add the plugin and test carefully.

The platform matrix is also a commitment. The repository builds six targets, and the build scripts are separate, so a change you make in src is not automatically validated everywhere. There is a test script that builds the WeChat target with gulp dev before running jest, and the jest configuration collects coverage from dev/mp-weixin/components/mp-html. Coverage therefore reflects the WeChat build. Nothing in the README claims the other five targets are covered to the same degree, so a team shipping to Alipay or Toutiao should treat cross-platform behaviour as something to verify rather than assume.

Finally, mp-html renders content you supply. It is not a sanitizer. The README documents no sanitization step, so if the HTML comes from untrusted users, cleaning it before it reaches the content property is your responsibility, not the component's.

mp-html compared with Towxml and with a WebView

Towxml is the alternative that appears in the related searches for this project, and the difference is in the conversion model. A converter like Towxml transforms HTML into a node structure ahead of time, so the rendering step consumes a prepared tree. mp-html takes the HTML string at runtime and parses it inside the component, which keeps the stored content portable and lets you swap the string with setContent without a rebuild. The cost is that parsing happens on the device, and the size of the component is part of your package budget.

The other alternative is a WebView. That gives you a real engine and full HTML fidelity, but it also gives you a separate loading lifecycle, its own scrolling behaviour and a boundary between your page and the content. mp-html stays inside the mini program's own component tree, which is why events like imgtap, linktap, play, pause and fullscreenchange can be surfaced to your page code directly. The pause and fullscreenchange events are marked 2.5.2+, so they are recent additions rather than long-standing behaviour.

Maintenance, licence and the cost of upgrading

The repository is not archived. The last push was on 2026-04-19. The most recent release listed is v2.5.2 on 2025-12-14, preceded by v2.5.1 on 2025-04-20 and v2.5.0 on 2024-04-22. That cadence is irregular: roughly a year between the 2.5.0 and 2.5.1 releases, then about eight months to 2.5.2. Plan upgrades as occasional events rather than a steady stream, and read the changelog before moving, because the README marks features with version floors such as 2.1.0 for container-style, 2.2.2 for pauseMedia, 2.3.0 for the play event, 2.4.0 for setPlaybackRate and 2.5.2 for pause and fullscreenchange. Those markers are the practical upgrade map: if you depend on an event, you depend on a minimum version.

The licence is MIT, which permits commercial use and modification. The package.json declares MIT and the repository includes a LICENSE file. That is the extent of what the material states; questions about attribution in your own distribution or about the licences of the plugins, some of which are credited to individual contributors, are for your own review. The component is published to npm as mp-html and the package declares miniprogram: dist/mp-weixin, which is how the npm-based install resolves for WeChat.

Editorial conclusion

Adopt mp-html if you ship the same article or product description into more than one mini program platform and want one component instead of a per-platform renderer. Skip it if you need full browser HTML fidelity: it parses a documented subset of tags, and the README points to the feature page rather than promising completeness. Before committing, verify two things in your own project: that your real content survives the parser (tables, video, svg, entities), and that your build path works, since the uni-app npm route needs transpileDependencies in vue.config.js and the nvue case needs dist/uni-app/static copied into the project static directory.

Frequently asked questions

Official sources

1. jin-yufeng/mp-html on GitHub
2. License: MIT
3. Project website
4. README
5. Releases