{"id":18534770,"url":"https://github.com/atomicojs/docs","last_synced_at":"2025-08-22T14:11:52.566Z","repository":{"id":43333524,"uuid":"226541356","full_name":"atomicojs/docs","owner":"atomicojs","description":null,"archived":false,"fork":false,"pushed_at":"2024-10-31T16:05:36.000Z","size":3076,"stargazers_count":0,"open_issues_count":1,"forks_count":9,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-06T05:48:53.393Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atomicojs.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-12-07T16:16:37.000Z","updated_at":"2024-10-31T16:05:40.000Z","dependencies_parsed_at":"2024-04-13T23:02:24.363Z","dependency_job_id":"52d82d69-5a64-4d84-a767-2725e240ce04","html_url":"https://github.com/atomicojs/docs","commit_stats":{"total_commits":606,"total_committers":7,"mean_commits":86.57142857142857,"dds":"0.011551155115511524","last_synced_commit":"d49b12559e4c4932eeaaf927ce5f850952204b27"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/atomicojs/docs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fdocs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fdocs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fdocs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fdocs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomicojs","download_url":"https://codeload.github.com/atomicojs/docs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fdocs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271650860,"owners_count":24796725,"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","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-06T19:16:53.568Z","updated_at":"2025-08-22T14:11:52.510Z","avatar_url":"https://github.com/atomicojs.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"---\ndescription: \u003e-\n  A micro library inspired by React Hooks, designed and optimized for the\n  creation of webcomponents.\n---\n\n# 👋 Atomico\n\n![](.gitbook/assets/header-2.svg)\n\n{% tabs %}\n{% tab title=\"JSX\" %}\n```jsx\nimport { c } from \"atomico\"; // 2.5kB\n\nconst MyComponent = c(\n  ()=\u003e\u003chost shadowDom\u003eHello, {name}\u003c/host\u003e,\n  {\n    props: { name: String }\n  }\n);\n\ncustomElements.define(\"my-component\", c(component));\n```\n{% endtab %}\n\n{% tab title=\"TSX\" %}\n```jsx\nimport { Props, c } from \"atomico\"; // 2.5kB\n\nfunction component({ name }:Props\u003ctypeof component.props\u003e) {\n  return \u003chost shadowDom\u003eHello, {name}\u003c/host\u003e;\n}\n\ncomponent.props = {\n  name: String,\n};\n\ncustomElements.define(\"my-component\", c(component));\n```\n{% endtab %}\n\n{% tab title=\"JS\" %}\n```javascript\nimport { c, html } from \"atomico\"; // 3.0kB\n\n\nfunction component({ name }) {\n  return html`\u003chost shadowDom\u003eHello, ${name}\u003c/host\u003e`;\n}\n\ncomponent.props = {\n  name: String,\n};\n\ncustomElements.define(\"my-component\", c(component));\n```\n{% endtab %}\n\n{% tab title=\"Browser\" %}\n```javascript\nimport { c, html } from \"https://unpkg.com/atomico\"; // 4.0kB\n\n\nfunction component({ name }) {\n  return html`\u003chost shadowDom\u003eHello, ${name}\u003c/host\u003e`;\n}\n\ncomponent.props = {\n  name: String,\n};\n\ncustomElements.define(\"my-component\", c(component));\n```\n{% endtab %}\n{% endtabs %}\n\nAtomico simplifies learning, workflow and maintenance when creating webcomponents and achieves it with:\n\n1. **Scalable and reusable interfaces**: with Atomico the code is simpler and you can apply practices that facilitate the reuse of your code.\n2. **Open communication**: with Atomico you can communicate states by events, properties or methods.\n3. **Agnostic**: your custom Element will work in any web-compatible library, eg React, Vue, Svelte or Angular.\n4. **Performance**: Atomico has a comparative performance at Svelte levels, winning the third position in performance according to [**webcomponents.dev**](https://twitter.com/atomicojs/status/1391775734641745929) in a comparison of 55 libraries among which is React, Vue, Stencil and Lit.\n\n### API\n\n{% content-ref url=\"api/props/\" %}\n[props](api/props/)\n{% endcontent-ref %}\n\n{% content-ref url=\"api/virtualdom/\" %}\n[virtualdom](api/virtualdom/)\n{% endcontent-ref %}\n\n{% content-ref url=\"api/hooks/\" %}\n[hooks](api/hooks/)\n{% endcontent-ref %}\n\n{% content-ref url=\"api/testing/\" %}\n[testing](api/testing/)\n{% endcontent-ref %}\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicojs%2Fdocs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomicojs%2Fdocs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicojs%2Fdocs/lists"}