A browser and userscript-friendly repackaging of alex-kinokon/jsx-dom.
A lightweight wrapper around document.createElement that lets you create DOM elements using JSX syntax, eliminating tedious imperative code. Particularly valuable for userscripts that need to dynamically generate DOM elements.
- UMD Support: Allows loading directly from a CDN in userscripts via @require.
- ESM Retained: Keeps the ESM build for benefits like HMR and optional bundling.
- Improves DX, especially for projects using vite-plugin-monkey.
pnpm add @maxchang/jsx-domyarn add @maxchang/jsx-domnpm install @maxchang/jsx-domSee userscript-tsx-starter for a complete example of using vite-plugin-monkey with @maxchang/jsx-dom.
Reference jsx-dom.
// esbuild
{
jsxInject: `import React from "@maxchang/jsx-dom"`,
jsx: 'transform',
}// vite.config.js
{
plugins: [
monkey({
//...
build: {
externalGlobals: {
'@maxchang/jsx-dom': cdn.jsdelivrFastly(`jsxDOM.default`, `dist/index.js`),
},
},
}),
],
}- alex-kinokon's jsx-dom
- No UMD support, only ESM. Cannot be used in userscripts via
@requirea CDN.
- No UMD support, only ESM. Cannot be used in userscripts via
- violentmonkey's vm-dom
- Based on
@gera2ld/jsx-dom, which is not actively maintained. - Do not have type definitions for
jsx-runtime.
- Based on
This project is licensed under the BSD 3-Clause License, the same as jsx-dom.
See LICENSE for details.