💎 使用自定义元素的轻量级 WebApp 开发框架

Usage no npm install needed!

<script type="module">
  import mantouGem from 'https://cdn.skypack.dev/@mantou/gem';


Gem · Build Status

Read in other languages: English | 中文

Create custom elements, bind data, route switching, and quickly develop WebApps based on custom elements. Stripped from mt-music-player.


  • Lightweight: The whole librarie is divided into three modules (custom elements, global data management, routing), you can choose whether to use the built-in custom elements, all the content is packaged together and only 15kb(br compression).

  • Simple: There is no new syntax, everything is HTML, CSS, JavaScript. There is no superfluous concept, only "Observe" is needed to create reactive custom elements;

  • High performance: The template engine uses lit-html, bundle size, performance of addition, deletion, modification, and memory usage are better than React and Vue, here is the performance comparison between lit-html and React and Vue;

  • Asynchronous rendering: which will avoid blocking the main thread for a long time when continuously rendering (such as creating a list) of element, providing a smooth user experience;

  • Support back button: Drop-down menus, drawer-style menus, and pop-up windows can be closed with the back button just like native apps, and can also perform similar confirmation actions before closing;


Related repo


Fork repo you are interested in, submit PR