{"id":14989071,"url":"https://github.com/violentmonkey/vm-ui","last_synced_at":"2025-04-12T00:32:07.647Z","repository":{"id":44339296,"uuid":"184004137","full_name":"violentmonkey/vm-ui","owner":"violentmonkey","description":"Common UI for userscripts.","archived":false,"fork":false,"pushed_at":"2024-04-01T14:20:21.000Z","size":188,"stargazers_count":19,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T20:51:13.001Z","etag":null,"topics":["userscript","violentmonkey"],"latest_commit_sha":null,"homepage":"https://violentmonkey.github.io/vm-ui/","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":"2019-04-29T05:17:02.000Z","updated_at":"2025-03-20T22:30:37.000Z","dependencies_parsed_at":"2024-09-15T15:20:52.554Z","dependency_job_id":null,"html_url":"https://github.com/violentmonkey/vm-ui","commit_stats":{"total_commits":72,"total_committers":3,"mean_commits":24.0,"dds":0.4444444444444444,"last_synced_commit":"00592622a01e48a4ac27a743254d82b1ebcd6d02"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/violentmonkey%2Fvm-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/violentmonkey%2Fvm-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/violentmonkey%2Fvm-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/violentmonkey%2Fvm-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/violentmonkey","download_url":"https://codeload.github.com/violentmonkey/vm-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248501410,"owners_count":21114674,"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":["userscript","violentmonkey"],"created_at":"2024-09-24T14:17:39.522Z","updated_at":"2025-04-12T00:32:07.326Z","avatar_url":"https://github.com/violentmonkey.png","language":"TypeScript","readme":"# @violentmonkey/ui\n\n[![NPM](https://img.shields.io/npm/v/@violentmonkey/ui.svg)](https://npm.im/@violentmonkey/ui)\n![License](https://img.shields.io/npm/l/@violentmonkey/ui.svg)\n\nCommon UI for userscripts, working in Violentmonkey as well as other userscript managers.\n\n## Dependencies\n\n- [@violentmonkey/dom](https://github.com/violentmonkey/vm-dom)\n\n## Usage\n\nFirst, include dependencies:\n\n```js\n// ...\n// @require https://cdn.jsdelivr.net/combine/npm/@violentmonkey/dom@2,npm/@violentmonkey/ui@0.7\n// ...\n```\n\nThen use it like so, all exports can be accessed under namespace `VM`:\n\n```js\nVM.showToast('hello');\nVM.showToast(VM.h('div', {}, 'hello, world'));\n```\n\n### Toast\n\n```js\nconst toast = VM.showToast(VM.h('div', {}, 'hello'), {\n  theme: 'dark', // or 'light'\n  duration: 2000, // or 0 to manually close it\n});\n\n// Manually close it\ntoast.close();\n```\n\n### Panel\n\n```js\nconst panel = VM.getPanel({\n  content: VM.h('div', {}, 'This is a panel'),\n  theme: 'light',\n});\npanel.wrapper.style.top = '100px';\n\n// Show panel\npanel.show();\n\n// Hide panel\npanel.hide();\n\n// Allow panel to be moved by mouse dragging\npanel.setMovable(true);\n```\n\n### SolidJS\n\nIt is recommended to initialize a userscript project using [generator-userscript](https://github.com/violentmonkey/generator-userscript) and use [solid-js](https://solidjs.com/).\n\n```js\nimport { render } from 'solid-js/web';\n\nconst panel = VM.getPanel({ theme: 'light' });\npanel.wrapper.style.top = '100px';\nrender(() =\u003e \u003cMyPanel /\u003e, panel.body);\npanel.show();\n```\n\n### JSX for @violentmonkey/dom\n\n**Not recommended** as it is not compatible with [solid-js](https://solidjs.com/) integrated in [generator-userscript](https://github.com/violentmonkey/generator-userscript).\n\nUse 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',\n      pragmaFrag: 'VM.Fragment',\n    }],\n  ],\n}\n```\n\n```js\nVM.showToast(\u003cdiv\u003ehello, world\u003c/div\u003e);\n```\n\n## API\n\n[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@violentmonkey/ui)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviolentmonkey%2Fvm-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviolentmonkey%2Fvm-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviolentmonkey%2Fvm-ui/lists"}