{"id":15969006,"url":"https://github.com/dragon-fish/dom-plus","last_synced_at":"2026-02-08T03:05:46.502Z","repository":{"id":65903502,"uuid":"602025089","full_name":"dragon-fish/dom-plus","owner":"dragon-fish","description":"Very simple DOM generator with types declaration.","archived":false,"fork":false,"pushed_at":"2024-04-26T20:34:07.000Z","size":54,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-23T23:13:28.264Z","etag":null,"topics":["create-element","dom","element","generator","html-generator"],"latest_commit_sha":null,"homepage":"https://npm.im/dom-plus","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/dragon-fish.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":"2023-02-15T10:41:37.000Z","updated_at":"2024-04-26T20:34:11.000Z","dependencies_parsed_at":"2024-04-26T20:36:44.317Z","dependency_job_id":"f83b4c1c-0a65-48f7-9047-87e617367a6e","html_url":"https://github.com/dragon-fish/dom-plus","commit_stats":null,"previous_names":["dragon-fish/create-element-ts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dragon-fish/dom-plus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragon-fish%2Fdom-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragon-fish%2Fdom-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragon-fish%2Fdom-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragon-fish%2Fdom-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dragon-fish","download_url":"https://codeload.github.com/dragon-fish/dom-plus/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dragon-fish%2Fdom-plus/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29218656,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-08T02:25:35.815Z","status":"ssl_error","status_checked_at":"2026-02-08T02:24:27.970Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["create-element","dom","element","generator","html-generator"],"created_at":"2024-10-07T19:20:38.239Z","updated_at":"2026-02-08T03:05:46.482Z","avatar_url":"https://github.com/dragon-fish.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n![dom-plus](https://socialify.git.ci/dragon-fish/dom-plus/image?description=1\u0026font=Inter\u0026forks=1\u0026issues=1\u0026language=1\u0026name=1\u0026pulls=1\u0026stargazers=1\u0026theme=Auto)\n\n# PRO DOM Generator\n\nVery simple DOM generator with types declaration.\n\n\u003c/div\u003e\n\n## Why?\n\n- [x] 🤯 Vanilla JS, no framework required!\n- [x] 😏 No more `document.createElement` and `element.appendChild`!\n- [x] 🤫 Even no `element.addEventListener`!\n- [x] 🤩 Modify existing Element instance!\n- [x] 😍 Fricking tiny size: 0 dependencies, 0 configuration, 0 problems! `dist/index.js  2.46 kB │ gzip: 0.96 kB │ map: 13.62 kB`\n\n## Installation\n\n### From NPM\n\n```sh\n# Via npm\nnpm install dom-plus\n# Or pnpm\npnpm add dom-plus\n# Yarn? sure\nyarn add dom-plus\n```\n\nThen import it to your project.\n\n```ts\n// ESM\nimport { h } from 'dom-plus'\n// CJS\nconst { h } = require('dom-plus')\n```\n\n### In browser\n\n```html\n\u003cscript src=\"https://unpkg.com/dom-plus\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const { h } = window.DOMPlus\n  // ...\n\u003c/script\u003e\n```\n\nOr... Why not ESM?\n\n```ts\nimport { h } from 'https://unpkg.com/dom-plus?module'\n// ...\n```\n\n## Usage\n\n### General usage\n\n```ts\n// step-1  - create element\nconst block = h('div', { class: 'foo', style: 'color: red' }, [\n  h('span', 'bar'),\n  'baz',\n])\n// step-2? - no more steps! It works as you expect!\nconsole.info(block.outerHTML) // \u003cdiv class=\"foo\"\u003e\u003cspan\u003ebar\u003c/span\u003ebaz\u003c/div\u003e\n```\n\n### CSS styles\n\nWhy not use CSS styles as an object?\n\n```ts\nconst redBlock = h('div', { style: { color: 'red' } }, 'Hey, I am red!')\n  .$css({\n    backgroundColor: 'black',\n  })\n  .$css('font-size', '2em')\n```\n\nIt's working! Even with the types!\n\n### Class names\n\n```ts\nconst block = h('div', { class: ['foo', 'bar'] }, 'Hey, I have classes!')\n  .$addClass('baz')\n  .$removeClass('foo')\n```\n\nNeedless to say, it's working too!!\n\n### Event listeners\n\n```ts\nconst button = h(\n  'button',\n  {\n    onClick: () =\u003e {\n      alert('Hello, world!')\n    },\n  },\n  'Click me!'\n)\nconst stop = button.$on('click', (e) =\u003e {\n  e.preventDefault()\n  e.stopPropagation()\n  alert('This alert will be shown only once!')\n  stop()\n})\n```\n\n**IT JUST WORKS!!!**\n\n### Pass through Element as first argument\n\nSo you can modify the element.\n\n```ts\n// From: \u003cdiv id=\"some-element\"\u003eBlah\u003c/div\u003e\nconst block = h(\n  document.querySelector('#some-element'),\n  { class: 'foo' },\n  'Hey, I am a block!'\n)\nblock.$css('color', 'red').$addClass('bar')\n// To: \u003cdiv id=\"some-element\" class=\"foo bar\" style=\"color: red;\"\u003eHey, I am a block!\u003c/div\u003e\n```\n\nWhy are you still reading this?!! **Just try it!!!!!**\n\n---\n\n\u003e MIT License\n\u003e\n\u003e Copyright (c) 2023-present dragon-fish\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdragon-fish%2Fdom-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdragon-fish%2Fdom-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdragon-fish%2Fdom-plus/lists"}