{"id":20129357,"url":"https://github.com/ryanmorr/carbon","last_synced_at":"2026-02-22T16:33:33.858Z","repository":{"id":41685164,"uuid":"250313760","full_name":"ryanmorr/carbon","owner":"ryanmorr","description":"The building blocks of UI","archived":false,"fork":false,"pushed_at":"2024-11-15T18:37:34.000Z","size":537,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-14T02:19:01.342Z","etag":null,"topics":["dom","javascript","ui","vdom","virtual-dom"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanmorr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-26T16:35:55.000Z","updated_at":"2024-11-15T18:37:38.000Z","dependencies_parsed_at":"2023-02-04T01:30:15.644Z","dependency_job_id":null,"html_url":"https://github.com/ryanmorr/carbon","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fcarbon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fcarbon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fcarbon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanmorr%2Fcarbon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanmorr","download_url":"https://codeload.github.com/ryanmorr/carbon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233712996,"owners_count":18718325,"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","javascript","ui","vdom","virtual-dom"],"created_at":"2024-11-13T20:33:51.751Z","updated_at":"2025-10-25T21:14:24.858Z","avatar_url":"https://github.com/ryanmorr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# carbon\n\n[![Version Badge][version-image]][project-url]\n[![License][license-image]][license-url]\n[![Build Status][build-image]][build-url]\n\n\u003e The building blocks of UI\n\n## Install\n\nDownload the [CJS](https://github.com/ryanmorr/carbon/raw/master/dist/cjs/carbon.js), [ESM](https://github.com/ryanmorr/carbon/raw/master/dist/esm/carbon.js), [UMD](https://github.com/ryanmorr/carbon/raw/master/dist/umd/carbon.js) versions or install via NPM:\n\n```sh\nnpm install @ryanmorr/carbon\n```\n\n## Usage\n\nCarbon is a tiny, low-level, no-nonsense, virtual DOM implementation that offers robust and efficient DOM rendering:\n\n```javascript\nimport { h, text, render } from '@ryanmorr/carbon';\n\nconst setCount = (count) =\u003e {\n    render(document.body,\n        h('div', [\n            h('p', text('Count: ' + count)),\n            h('button', {onclick: () =\u003e setCount(count + 1)}, text('Increment')),\n        ])\n    );\n};\n\nsetCount(0);\n```\n\nRender a single element and return the element reference:\n\n```javascript\nconst element = render(parent, \n    h('div')\n);\n```\n\nRender an array of elements and return an array of the element references:\n\n```javascript\nconst elements = render(parent, [\n    h('span'),\n    h('span'),\n    h('span')\n]);\n```\n\nSet attributes using key/value pairs of an object:\n\n```javascript\nrender(parent,\n    h('img', {\n        src: '/path/to/file',\n        alt: 'Image description'\n    })\n);\n```\n\nSet an element class name with a string, array, or object:\n\n```javascript\nrender(parent, [\n    h('div', {class: 'foo'}),\n    h('div', {class: ['foo', 'bar']}),\n    h('div', {class: {foo: true, bar: false}})\n]);\n```\n\nSet CSS styles with a string or object:\n\n```javascript\nrender(parent, [\n    h('div', {style: 'width: 100px; height: 100px; background-color: red'}),\n    h('div', {style: {width: '100px', height: '100px', backgroundColor: 'red'}})\n]);\n```\n\nSet CSS custom properties:\n\n```javascript\nrender(parent,\n    h('section', {style: {'--color': 'red'}},\n        h('p', {color: 'var(--color)'}, 'Hello World'),\n    )\n);\n```\n\nSet event listeners as attributes indicated by a prefix of \"on\":\n\n```javascript\nrender(parent,\n    h('div', {\n        onclick: (e) =\u003e console.log('clicked')\n    })\n);\n```\n\nUse the `text` function to explicitly create virtual text nodes:\n\n```javascript\nrender(parent,\n    h('h1', text('Hello World'))\n);\n```\n\nAdd a unique `key` to sibling elements to facilitate efficient reordering:\n\n```javascript\nrender(parent,\n    h('ul', \n        h('li', {key: 'foo'}, 'foo'),\n        h('li', {key: 'bar'}, 'bar'),\n        h('li', {key: 'baz'}, 'baz'),\n        h('li', {key: 'qux'}, 'qux')\n    )\n);\n```\n\nSupports SVG elements:\n\n```javascript\nrender(parent,\n    h('svg', {width: 200, height: 200}, \n        h('circle', {cx: 50, cy: 50, r: 40, fill: 'yellow'})\n    )\n);\n```\n\nSupports stateless functional components:\n\n```javascript\nconst Component = ({id, children}) =\u003e {\n    return h('div', {id}, children);\n};\n\nrender(parent, \n    h(Component, {id: 'foo'}, text('Hello World'))\n);\n```\n\nSupports [JSX](https://react.dev/learn/writing-markup-with-jsx) syntax:\n\n```javascript\nrender(parent,\n    \u003cdiv\u003e\n        \u003ch1\u003e{title}\u003c/h1\u003e\n        \u003cbutton onclick={handleEvent}\u003eClick Me\u003c/button\u003e\n    \u003c/div\u003e\n);\n```\n\nCarbon will automatically recycle and patch over pre-existing DOM nodes, such as those generated from server-side rendered HTML.\n\n## License\n\nThis project is dedicated to the public domain as described by the [Unlicense](http://unlicense.org/).\n\n[project-url]: https://github.com/ryanmorr/carbon\n[version-image]: https://img.shields.io/github/package-json/v/ryanmorr/carbon?color=blue\u0026style=flat-square\n[build-url]: https://github.com/ryanmorr/carbon/actions\n[build-image]: https://img.shields.io/github/actions/workflow/status/ryanmorr/carbon/node.js.yml?style=flat-square\n[license-image]: https://img.shields.io/github/license/ryanmorr/carbon?color=blue\u0026style=flat-square\n[license-url]: UNLICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanmorr%2Fcarbon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanmorr%2Fcarbon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanmorr%2Fcarbon/lists"}