{"id":21446085,"url":"https://github.com/svileng/docrel","last_synced_at":"2025-07-14T19:31:04.756Z","repository":{"id":57214185,"uuid":"70577233","full_name":"svileng/docrel","owner":"svileng","description":"Slightly better document.createElement","archived":false,"fork":false,"pushed_at":"2020-02-25T17:26:32.000Z","size":40,"stargazers_count":21,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-03T11:55:34.637Z","etag":null,"topics":["createelement","dom-element","lightweight","no-dependencies","rendering"],"latest_commit_sha":null,"homepage":null,"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/svileng.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-10-11T09:23:13.000Z","updated_at":"2024-08-30T01:55:02.000Z","dependencies_parsed_at":"2022-08-26T13:31:05.510Z","dependency_job_id":null,"html_url":"https://github.com/svileng/docrel","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/svileng/docrel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svileng%2Fdocrel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svileng%2Fdocrel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svileng%2Fdocrel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svileng%2Fdocrel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svileng","download_url":"https://codeload.github.com/svileng/docrel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svileng%2Fdocrel/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265336294,"owners_count":23749176,"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":["createelement","dom-element","lightweight","no-dependencies","rendering"],"created_at":"2024-11-23T02:41:46.897Z","updated_at":"2025-07-14T19:31:04.524Z","avatar_url":"https://github.com/svileng.png","language":"JavaScript","readme":"# docrel [![Build Status](https://travis-ci.org/svileng/docrel.svg?branch=master)](https://travis-ci.org/svileng/docrel) [![npm version](https://badge.fury.io/js/docrel.svg)](https://badge.fury.io/js/docrel) ![Size](https://img.shields.io/badge/min%2Bgz-%3C%201KB-blue.svg)\n\u003e Slightly better document.createElement\n\n`Docrel` is a thin wrapper for `document.createElement` that makes creating elements a bit easier. It also helps clean up your code and avoid repetition. No dependencies, no black magic (see [source](https://github.com/svileng/docrel/blob/master/src/docrel.js)).\n\nUsing `document.createElement`:\n\n```js\nlet el = document.createElement(\"div\")\nel.className = \"wrapper\"\n\nlet input = document.createElement(\"input\")\ninput.setAttribute(\"type\", \"text\")\n\nlet button = document.createElement(\"button\")\nbutton.textContent = \"Submit\"\n\nif (loading) {\n  button.setAttribute(\"disabled\", \"disabled\")\n}\n\nel.appendChild(input)\nel.appendChild(button)\n```\n\nUsing `docrel`:\n\n```js\nimport {div, input, button} from \"docrel\"\n\nlet el = div({class: \"wrapper\"}, [\n  input({attrs: {type: \"text\"}}),\n  button({textContent: \"Submit\", attrs: {\n    disabled: loading ? \"disabled\" : null\n  }})\n])\n```\n\nIf `loading` returns `null` the attribute won't be set at all.\n\n## Install\n```bash\nnpm install docrel --save\n```\n\n## Usage\nUsing `createElement`, similarly to `document.createElement`:\n```js\nimport {createElement} from \"docrel\"\n\nlet el = createElement(\"div\", {\n  id: \"el-id\",\n  class: \"class-a class-b\",\n  textContent: \"I'm an HTMLElement!\",\n  attrs: {\n    align: \"center\",\n    \"data-attr\": 1\n  },\n  events: {\n    click: () =\u003e {console.log(\"click!\")}\n  }\n})\n```\n\n```html\n\u003c!-- Resulting HTML when el is appended to the DOM --\u003e\n\u003cdiv id=\"el-id\" class=\"class-a class-b\" align=\"center\" data-attr=1\u003e\n  I'm an HTMLElement!\n\u003c/div\u003e\n```\nUsing the `create` function builder (uses `createElement` underneat):\n```js\nimport {create} from \"docrel\"\nconst [div] = create(\"div\")\n\nlet divOne = div({class: \"div-a\"})\nlet divTwo = div({class: \"div-b\"})\n```\nOr just importing the html elements directly:\n```js\nimport {div} from \"docrel\"\n\nlet divOne = div({class: \"div-a\"})\nlet divTwo = div({class: \"div-b\"})\n```\n\n- The `class` option is a shorthand to `node.className`;\n- Keys inside `attrs` are passed to `node.setAttribute`, unless key value is `null` or `undefined`;\n- Keys inside `events` are passed to `node.addEventListener`;\n- Returns an HTML Element object.\n\n### Nesting / appending children\n\nThe `create`/`createElement` function supports a third parameter for appending child elements:\n\n```js\nlet el = div({class: \"wrapper\"}, [\n  div({class: \"another-div\"})\n])\n```\n\n```html\n\u003c!-- Resulting HTML when el is appended to the DOM --\u003e\n\u003cdiv class=\"wrapper\"\u003e\n  \u003cdiv class=\"another-div\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Contributing\nContributions are more than welcome. Please fork the repo and send a PR with a clean, rebased branch containing your changes. Also please make sure tests are passing and update tests if necessary.\n\nTo run the project locally, you will need to `npm install` dev dependencies and then use `npm run dev` and `npm test` to transpile ES2015 code and run tests, respectively (Node.js \u003e= 6.0 or latest). See `package.json` for more info.\n\n## Contributors\n- [@svileng](https://twitter.com/svileng)\n- [@shennan](https://github.com/shennan)\n\n## License\n- docrel: [LICENSE](https://github.com/svileng/docrel/blob/master/LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvileng%2Fdocrel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvileng%2Fdocrel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvileng%2Fdocrel/lists"}