{"id":14989070,"url":"https://github.com/violentmonkey/vm-dom","last_synced_at":"2025-09-04T20:37:58.557Z","repository":{"id":44339300,"uuid":"133359430","full_name":"violentmonkey/vm-dom","owner":"violentmonkey","description":"Use JSX for HTML elements.","archived":false,"fork":false,"pushed_at":"2024-10-25T09:25:07.000Z","size":332,"stargazers_count":36,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-30T00:34:11.578Z","etag":null,"topics":["dom","userscript","violentmonkey"],"latest_commit_sha":null,"homepage":"https://www.jsdocs.io/package/@violentmonkey/dom","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/violentmonkey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-14T12:46:02.000Z","updated_at":"2024-10-25T09:25:11.000Z","dependencies_parsed_at":"2024-03-11T06:33:39.881Z","dependency_job_id":"0ca51c4f-f1ad-4080-81f2-82877b84d22e","html_url":"https://github.com/violentmonkey/vm-dom","commit_stats":{"total_commits":75,"total_committers":3,"mean_commits":25.0,"dds":0.3733333333333333,"last_synced_commit":"bf2c8abae1a6f5bca9cc4e192ded07840146e785"},"previous_names":["violentmonkey/vm-jsx"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/violentmonkey%2Fvm-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/violentmonkey%2Fvm-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/violentmonkey%2Fvm-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/violentmonkey%2Fvm-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/violentmonkey","download_url":"https://codeload.github.com/violentmonkey/vm-dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248142922,"owners_count":21054673,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","userscript","violentmonkey"],"created_at":"2024-09-24T14:17:39.453Z","updated_at":"2025-04-10T02:19:47.578Z","avatar_url":"https://github.com/violentmonkey.png","language":"TypeScript","readme":"# @violentmonkey/dom\n\n[![NPM](https://img.shields.io/npm/v/@violentmonkey/dom.svg)](https://npm.im/@violentmonkey/dom)\n![License](https://img.shields.io/npm/l/@violentmonkey/dom.svg)\n[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@violentmonkey/dom)\n\nUse JSX for HTML elements.\n\nBased on [@gera2ld/jsx-dom](https://github.com/gera2ld/jsx-dom).\n\n## What is it?\n\nThis library is just a light wrapper around `document.createElement`. So we can easily create DOM elements using JSX with the help of this library instead of writing tedious imperative code.\n\n## When should we NOT use it?\n\nYou should NOT use it when you use a library that has its own implementation of JSX, such as React, Vue, Svelte, SolidJS, etc. The JSX syntaxes are incompatible and using them together will cause unexpected issues.\n\nYou don't need it if you initialize a userscript project with [generator-userscript](https://github.com/violentmonkey/generator-userscript), which uses [solid-js](https://solidjs.com/).\n\nHowever, you can still use methods like `VM.h` directly **without using JSX** to make the code shorter.\n\n## Usage\n\nFirst, include `@violentmonkey/dom` as a dependency:\n\n```js\n// ...\n// @require https://cdn.jsdelivr.net/npm/@violentmonkey/dom@2\n// ...\n```\n\nThen you can use `VM.h` (similar to `React.createElement`) and `VM.m` (for `mount`ing as DOM elements) directly.\n\nThere is also a `VM.hm` for `VM.h` plus `VM.m` if you don't need SVG support and want to get rid of `VM.m`.\n\n```js\nconst vdom = VM.h('div', {}, 'hello');\nconst el = VM.m(vdom); // -\u003e HTMLDivElement\n\n// or\nconst el = VM.hm('div', {}, 'hello'); // -\u003e HTMLDivElement\n\ndocument.body.appendChild(el);\n```\n\nOr use with JSX and bundlers, for example:\n\n```js\n// .babelrc.js\n{\n  plugins: [\n    // JSX\n    ['@babel/plugin-transform-react-jsx', {\n      pragma: 'VM.h', // or 'VM.hm' if you don't need SVG support and want to get rid of 'VM.m'\n      pragmaFrag: 'VM.Fragment',\n    }],\n  ],\n}\n```\n\n```js\n// pragma: VM.h\ndocument.body.appendChild(VM.m(\u003cdiv\u003ehello\u003c/div\u003e));\n\n// pragma: VM.hm\ndocument.body.appendChild(\u003cdiv\u003ehello\u003c/div\u003e);\n```\n\n## API\n\nSee [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@violentmonkey/dom).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviolentmonkey%2Fvm-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviolentmonkey%2Fvm-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviolentmonkey%2Fvm-dom/lists"}