{"id":13784927,"url":"https://github.com/queckezz/elementx","last_synced_at":"2025-05-15T21:34:19.172Z","repository":{"id":57222272,"uuid":"59589487","full_name":"queckezz/elementx","owner":"queckezz","description":":zap: Functionally create DOM elements and compose them to a tree quickly","archived":false,"fork":false,"pushed_at":"2017-08-10T08:00:24.000Z","size":82,"stargazers_count":63,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-19T22:13:28.184Z","etag":null,"topics":["create-element","dom","element","frontend","function-composition","functional","hyperscript","svg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/queckezz.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}},"created_at":"2016-05-24T16:22:21.000Z","updated_at":"2023-07-24T10:50:28.000Z","dependencies_parsed_at":"2022-09-05T06:11:27.783Z","dependency_job_id":null,"html_url":"https://github.com/queckezz/elementx","commit_stats":null,"previous_names":["queckezz/create-dom-tree"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Felementx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Felementx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Felementx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queckezz%2Felementx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/queckezz","download_url":"https://codeload.github.com/queckezz/elementx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254425575,"owners_count":22069199,"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":["create-element","dom","element","frontend","function-composition","functional","hyperscript","svg"],"created_at":"2024-08-03T19:00:54.149Z","updated_at":"2025-05-15T21:34:18.931Z","avatar_url":"https://github.com/queckezz.png","language":"JavaScript","funding_links":[],"categories":["Element Creation"],"sub_categories":[],"readme":"\n![logo](./logo.png)\n\n\u003e ​:zap:​ Create complex [DOM](https://de.wikipedia.org/wiki/Document_Object_Model) elements/trees using a functional approach.\n\n[![npm version][version-image]][version-url]\n[![build status][travis-image]][travis-url]\n[![test coverage][codecov-image]][codecov-url]\n[![dependency status][david-image]][david-url]\n[![license][license-image]][license-url]\n[![js standard style][standard-image]][standard-url]\n[![downloads per month][downloads-image]][downloads-url]\n\nThis module provides an alternative to [JSX](https://facebook.github.io/jsx/) or [template strings](https://github.com/shama/bel) for those who want to build up their DOM trees using plain function composition.\n\n```js\nconst { div, h1, h2, button, ul, li } = require('elementx')\n\ndiv(\n  h1({ class: 'bold' }, 'elementx'),\n  h2({ id: 'subtitle' }, 'Create a DOM tree with ease'),\n  button({ href: 'http://ghub.io/elementx' }, 'Open'),\n  ul(\n    ['simple', 'functional', 'fast']\n      .map(key =\u003e li(key))\n  )\n)\n```\n\n## Features\n\n* **Universal** - Works in Node and Browser\n* **SVG Support** - Supports creating SVG Elements\n* **Functional** - Since it's just function composition we can arbitrarily compose them\n* **Small** Only `1.99 kB` minified and gzipped\n* **Interoperability** Can be used with diffing libraries like [morphdom](https://github.com/patrick-steele-idem/morphdom), [nanomorph](https://github.com/yoshuawuyts/nanomorph) or anyhting that uses the DOM\n\n## Installation\n\n```bash\n\u003e npm install elementx\n```\n\n## Example\n\n```js\nconst { div, h1, a } = require('elementx')\n\nconst node = div(\n  h1({ class: 'title' }, 'This is a title'),\n  div({ class: 'bg-red' },\n    a({ href: 'http://github.com' }, 'Github')\n  )\n)\n\n// mount the tree to the DOM\ndocument.body.appendChild(node)\n\nconsole.log(tree.outerHTML)\n/*\n * -\u003e\n * \u003cdiv class=\"title\"\u003e\n *   \u003ch1\u003eThis is a title\u003c/h1\u003e\n *   \u003cdiv class=\"bg-red\"\u003e\n *     \u003ca href=\"http://github.com\"\u003eGithub\u003c/a\u003e\n *   \u003c/div\u003e\n * \u003c/div\u003e\n */\n```\n\n## Getting Started\n\nEach [HTML tag](http://ghub.io/html-tag-names) is exposed as a function when requiring `elementx`.\n\n```js\n// using destructuring\nconst { div, h1, p, button } = require('elementx')\n```\n\nThese functions have the following syntax:\n\n```js\ntag(tagName, attributes, children)\n```\n\nAll arguments are **optional** with at least **one argument needing to be present**. This kind of function overloading allows you to iterate on your DOM structure really fast and reduce visual noise.\n\n* **tagName** any [valid](https://github.com/wooorm/html-tag-names/blob/master/index.json) html tag\n* **attributes** is an object of dom attributes: `{ href: '#header' }`\n* **children** can be a string for a text node or an array of nodes\n\n### Lifecycle hooks\n\nThis module aims to be just the element creation layer. It can be used with any view framework using DOM as their base element abstraction for diffing. Some libraries like this include [choo](https://github.com/yoshuawuyts/choo) or [inu](https://github.com/ahdinosaur/inu).\n\n### SVG\n\nSVG works as expected. Sets the appropriate namespace for both elements and attributes. All SVG tags can only be created with the `h`-helper:\n\n```js\nconst { svg } = require('elementx')\n\nconst node = svg({\n  viewBox: '0 0 0 32 32',\n  fill: 'currentColor',\n  height: '32px',\n  width: '32px'\n}, [\n  h('use', { 'xlink:href': '#my-id' })\n])\n\ndocument.body.appendChild(node)\n```\n\n### Use without helper functions\n\nSometimes you need to fall back to the traditional `createElement(tag, attributes, children)` (aliased to `h`), for example svg tags.\n\n```js\nconst h = require('elementx')\n\nconst node = h('h1', 'text')\n\nconsole.log(node.outerHTML)\n/*\n * -\u003e\n * \u003ch1\u003etext\u003c/h1\u003e\n */\n```\n\n### Events\n\nAll [HTML DOM Events](https://developer.mozilla.org/en-US/docs/Web/Events) can be attached. The casing of the event name doesn't matter (`onClick`, `onclick`, `ONCLICK` etc.)\n\n```js\nconst node = h.button({\n  onClick: () =\u003e console.log('button has been clicked')\n})\n\ndocument.body.appendChild(node)\n```\n\n## External tools\n\n* [html-to-hyperscript](html-to-hyperscript.paqmind.com) - Web-Service to convert HTML to hyperscript\n\n## Tests\n\n```bash\n\u003e npm test\n```\n\n## License\n\n[MIT][license-url]\n\n[travis-image]: https://img.shields.io/travis/queckezz/elementx.svg?style=flat-square\n[travis-url]: https://travis-ci.org/queckezz/elementx\n\n[version-image]: https://img.shields.io/npm/v/elementx.svg?style=flat-square\n[version-url]: https://npmjs.org/package/elementx\n\n[codecov-image]: https://img.shields.io/codecov/c/github/queckezz/elementx/master.svg?style=flat-square\n[codecov-url]: https://codecov.io/github/queckezz/elementx\n\n[downloads-image]: https://img.shields.io/npm/dm/elementx.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/elementx\n\n[david-image]: http://img.shields.io/david/queckezz/elementx.svg?style=flat-square\n[david-url]: https://david-dm.org/queckezz/elementx\n\n[standard-image]: https://img.shields.io/badge/code-standard-brightgreen.svg?style=flat-square\n[standard-url]: https://github.com/feross/standard\n\n[unfancy-js-image]: https://img.shields.io/badge/javascript-unfancy-ff69b4.svg?style=flat-square\n[unfancy-js-url]: https://github.com/yoshuawuyts/tiny-guide-to-non-fancy-node\n\n[license-image]: http://img.shields.io/npm/l/elementx.svg?style=flat-square\n[license-url]: ./license","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueckezz%2Felementx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqueckezz%2Felementx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueckezz%2Felementx/lists"}