{"id":15099264,"url":"https://github.com/buelbuel/dim","last_synced_at":"2026-02-17T23:37:26.247Z","repository":{"id":248716416,"uuid":"829489872","full_name":"buelbuel/dim","owner":"buelbuel","description":"Lightweight, zero-dependency web component boilerplate focusing on simplicity and web standards.","archived":false,"fork":false,"pushed_at":"2025-08-11T18:50:45.000Z","size":2067,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-29T15:43:53.926Z","etag":null,"topics":["javascript","no-dependencies","web-components","web-standards"],"latest_commit_sha":null,"homepage":"https://www.jsdelivr.com/package/gh/buelbuel/dim","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/buelbuel.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,"zenodo":null}},"created_at":"2024-07-16T14:29:38.000Z","updated_at":"2025-04-18T07:30:49.000Z","dependencies_parsed_at":"2025-07-10T13:34:14.445Z","dependency_job_id":"087cfa17-d95b-4bea-b1f9-d073d8973255","html_url":"https://github.com/buelbuel/dim","commit_stats":{"total_commits":38,"total_committers":1,"mean_commits":38.0,"dds":0.0,"last_synced_commit":"f91843fef253d539008e360c8468b788befae028"},"previous_names":["buelbuel/dim"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/buelbuel/dim","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buelbuel%2Fdim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buelbuel%2Fdim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buelbuel%2Fdim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buelbuel%2Fdim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buelbuel","download_url":"https://codeload.github.com/buelbuel/dim/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buelbuel%2Fdim/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29562467,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T21:50:49.831Z","status":"ssl_error","status_checked_at":"2026-02-17T21:46:15.313Z","response_time":100,"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":["javascript","no-dependencies","web-components","web-standards"],"created_at":"2024-09-25T17:08:53.122Z","updated_at":"2026-02-17T23:37:21.236Z","avatar_url":"https://github.com/buelbuel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![](https://data.jsdelivr.com/v1/package/gh/buelbuel/dim/badge?style=rounded)](https://www.jsdelivr.com/package/gh/buelbuel/dim)\n![GitHub License](https://img.shields.io/github/license/buelbuel/dim)\n\ndim is an idiomatic web component helper library, designed as a sane alternative to the node madness of todays web. It focuses on simplicity and adherence to web standards only, offering quality-of-life features - but with zero dependencies.\n\nYou can find an example at [dim-template](https://github.com/buelbuel/dim-template)\n\n## Why?\n\ndim provides a lightweight alternative to complex web component libraries, focusing on:\n\n-   Simplicity: No build step, no dependencies\n-   Standards: Leveraging web standards and custom elements\n-   Flexibility: Easy to extend and customize\n-   Performance: Minimal overhead and efficient updates\n\nBy using dim, you can create modern web applications with a familiar component-based architecture while staying as close to the metal as humanly possible (not literally).\n\n## Features\n\n-   Zero dependencies\n-   Web standards-based\n-   Simple router\n-   Abstracted HTML and Shadow Element components for less boilerplate\n-   Utility functions for HTML templating and styling\n-   Reactivity\n-   i18n\n\n## Installation\n\nCopy the distributed files or just add to your index.html:\n\n```html\n\u003cscript type=\"module\"\u003e\n\timport * as dim from 'https://cdn.jsdelivr.net/gh/buelbuel/dim@latest/dist/dim.min.js'\n\twindow.dim = dim\n\u003c/script\u003e\n```\n\n## Usage\n\n### BaseElement\n\n```js\nconst { BaseElement } = dim\n\nclass MyComponent extends BaseElement {\n\trender() {\n\t\treturn html`\u003cdiv\u003eMy Component\u003c/div\u003e`\n\t}\n}\n\nexport default MyComponent.define('my-component')\n```\n\n### ShadowElement\n\n```js\nconst { ShadowElement, html } = dim\n\nclass MyShadowComponent extends ShadowElement {\n\trender() {\n\t\treturn html`\u003cdiv\u003eMy Shadow DOM Component\u003c/div\u003e`\n\t}\n}\n\nexport default MyShadowComponent.define('my-shadow-component')\n```\n\n### HTML and Style Utilities\n\n```js\nconst { html, styleMap } = dim\n\nconst styles = {\n\tcolor: 'red',\n\tfontSize: '16px',\n}\n\nconst template = html` \u003cdiv style=\"${styleMap(styles)}\"\u003eStyled content\u003c/div\u003e `\n```\n\n### Reactive Properties\n\n```js\nconst { BaseElement } = dim\n\nclass MyComponent extends BaseElement {\n\tconstructor() {\n\t\tsuper()\n\t\tthis.defineReactiveProperty('count', 0)\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t\u003cdiv\u003eMy Component\u003c/div\u003e\n\t\t\t\u003cbutton id=\"increment\"\u003eIncrement ${this.count}\u003c/button\u003e\n\t\t`\n\t}\n\n\taddEventListeners() {\n\t\tthis.addEventListenerWithCleanup('#increment', 'click', () =\u003e {\n\t\t\tthis.count++\n\t\t})\n\t}\n}\n```\n\n### Router\n\n```js\nconst { initRouter } = dim\n\nconst routes = {\n\t'/': { component: () =\u003e import('./pages/Home.js'), layout: 'default-layout' },\n\t'/about': { component: () =\u003e import('./pages/About.js'), layout: 'default-layout' },\n}\n\ninitRouter(routes)\n```\n\n### Internationalization\n\n```js\nconst { i18n } = dim\n\ni18n.addTranslations('en', {\n\thello: {\n\t\tworld: 'World',\n\t}\n})\n\nconst { t } = dim\n\n\u003cp\u003e${t('hello.world')}\u003c/p\u003e\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuelbuel%2Fdim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuelbuel%2Fdim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuelbuel%2Fdim/lists"}