Read in other languages: English | ä¸æ–‡
Build reusable custom elements and web apps on Web Components with Gem's layered toolset.
-
Start with a small custom element: Use Gem's reactive and decorator APIs without a template engine, then add
GemElementand HTML template rendering when you need them. -
Build UI libraries: Gem elements are standard custom elements. Prefer Shadow DOM when components need style isolation, and use gem-port to generate React, Vue, and Svelte wrappers for those ecosystems.
-
Build complete apps: Use
@mantou/gemfor routing, history, and Store; gemkit adds file-based routing, layouts, SSR, and SSG. Prefer Light DOM for app UI that should work naturally with Tailwind CSS and other global CSS. -
Use familiar web standards: Build with HTML templates, CSS, and JavaScript on the browser's custom element model, with no JSX or single-file component DSL to learn.
-
Asynchronous rendering:
@async()lets many elements render in slices, yielding to the main thread to keep the interface responsive.
| Package | Description |
|---|---|
| gem | Gem core |
| gem-ssr | Server-side rendering and hydration for Gem elements |
| gemkit | Application framework with file-based routing, layouts, SSR, and SSG |
| gem-devtools | Browser debugging tool for Gem |
| gem-analyzer | Gem element analyzer, which can automatically generate documents |
| gem-book | Documentation site builder created using Gem |
| duoyun-ui | Desktop UI library created using Gem |
| tap-ui | Mobile-first UI library created using Gem |
| gem-port | Export Gem elements as React/Vue/Svelte components |
| gem-examples | Gem and DuoyunUI examples |
| ts-gem-plugin | Gem language service plugin for TypeScript |
| ts-gem-lsp | Gem language server for TypeScript 7 |
| swc-plugin-gem | Build plugin for SWC |
| unplugin-gem | Universal plugin for Vite/Webpack/Rollup/esbuild/Rspack/Rolldown |
| zed-plugin-gem | Zed extension |
| vscode-gem-plugin | VSCode extension |
Fork the repository and open a pull request.