explaingit

jin-yufeng/mp-html

Analysis updated 2026-07-03

★ 3,708JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A component for displaying HTML content inside WeChat, QQ, Alipay, and other Chinese mini-programs, working around their built-in rendering limitations so tables, videos, and rich formatting display correctly.

Mindmap

mindmap
  root((mp-html))
    What it does
      Renders HTML in mini-programs
      Handles tables and videos
      Supports anchor links
    Platforms
      WeChat and QQ
      Alipay and Baidu
      Douyin and uni-app
    Plugins
      Markdown rendering
      LaTeX math formulas
      Code highlighting
    Setup
      npm install
      Pass HTML string
      Configure properties
    License
      MIT permissive
      Free commercial use
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add a rich-text content area to a WeChat mini-program that renders HTML from a CMS or API

USE CASE 2

Display blog posts or articles with tables, images, and inline styles inside a Douyin or Alipay mini-program

USE CASE 3

Enable LaTeX math formulas or syntax-highlighted code blocks in an educational mini-program app

USE CASE 4

Let users preview images full-screen and copy external links in a mini-program without extra code

What is it built with?

JavaScriptWeChat Mini-Programuni-appnpm

How does it compare?

jin-yufeng/mp-htmlmumuy/relationshipauduno/headtrackr
Stars3,7083,7083,707
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasymoderate
Complexity2/52/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Requires a WeChat or compatible mini-program development environment (WeChat DevTools or uni-app CLI).

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

mp-html is a component that lets developers display HTML content inside Chinese mini-programs. Mini-programs are the small apps that run inside WeChat, QQ, Baidu, Alipay, and similar platforms. Those platforms have their own restrictions on what HTML can be shown, and the built-in rich-text components they provide are limited. mp-html works around those limitations so that standard HTML markup, including tables, videos, and inline styles, renders correctly. The component supports a range of interactive behaviors out of the box. Tapping an image opens a full-screen preview. External links can be copied to the clipboard automatically when clicked. Videos pause when another video starts playing. Tables get a horizontal scroll wrapper so they do not overflow the screen. Anchor links that jump to sections within the page are supported. All of these behaviors can be configured with simple properties on the component tag. A plugin system handles less common needs. There are optional plugins for rendering Markdown, displaying LaTeX math formulas, highlighting code blocks, parsing emoji shortcodes, caching images locally, and editing rich text directly inside the mini-program. Each plugin is added only if needed, so the base component stays small at around 25 kilobytes. The component works in WeChat, QQ, Baidu, Alipay, ByteDance (Douyin/TikTok), and uni-app projects. Installation is via npm or by copying the compiled files into the project directory. You pass your HTML as a string to the content property and the component handles the rest. It is released under the MIT license and free to use including in commercial products.

Copy-paste prompts

Prompt 1
I have HTML content from an API and need to render it inside a WeChat mini-program using mp-html. Show me how to install mp-html via npm and pass my HTML string to the content property.
Prompt 2
I want to add the mp-html Markdown plugin to my uni-app project so users can write and preview Markdown. Walk me through adding the plugin and configuring the component.
Prompt 3
My WeChat mini-program needs to display tables that scroll horizontally. Using mp-html, how do I enable horizontal scroll on tables and configure the component properties?
Prompt 4
Show me how to use mp-html in a Baidu mini-program to display rich HTML with image preview and video auto-pause when another video starts.

Frequently asked questions

What is mp-html?

A component for displaying HTML content inside WeChat, QQ, Alipay, and other Chinese mini-programs, working around their built-in rendering limitations so tables, videos, and rich formatting display correctly.

What language is mp-html written in?

Mainly JavaScript. The stack also includes JavaScript, WeChat Mini-Program, uni-app.

What license does mp-html use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is mp-html to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is mp-html for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub jin-yufeng on gitmyhub

Verify against the repo before relying on details.

Alternatives & similar repos