https://github.com/atomicojs/atomico

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
https://github.com/atomicojs/atomico

atomico hooks jsx reactive-properties shadow-dom web-components

Last synced: about 19 hours ago
JSON representation

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.

• Host: GitHub
• URL: https://github.com/atomicojs/atomico
• Owner: atomicojs
• License: mit
• Created: 2018-08-25T17:54:48.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-10-21T03:49:54.000Z (about 2 months ago)
• Last Synced: 2024-10-29T14:53:29.773Z (about 1 month ago)
• Topics: atomico, hooks, jsx, reactive-properties, shadow-dom, web-components
• Language: JavaScript
• Homepage: https://atomicojs.dev
• Size: 3.44 MB
• Stars: 1,179
• Watchers: 24
• Forks: 43
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-web-components - Atomico
• awesome-web-components - atomico - Small library for the creation of interfaces based on web components using functions and hooks. (Libraries / Functional)
• awesome-starred - atomicojs/atomico - Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom. (web-components)

README

        
![Atomico](https://raw.githubusercontent.com/atomicojs/atomico/brand/h1.svg)

![Atomico](https://raw.githubusercontent.com/atomicojs/atomico/brand/h2.svg)

[![twitter](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/twitter.svg)](https://twitter.com/atomicojs)

[![discord](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/discord.svg)](https://discord.gg/7z3rNhmkNE)

[![documentation](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc-1.svg)](https://atomico.gitbook.io/doc/)

[![playground](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc.svg)](https://stackblitz.com/edit/atomico?file=src%2Fmy-component.tsx)

[![npm](https://badgen.net/npm/v/atomico)](http://npmjs.com/atomico)

[![gzip](https://badgen.net/bundlephobia/minzip/atomico)](https://bundlephobia.com/result?p=atomico)

## Build interfaces using webcomponents with React-inspired syntax

1. **Scalable and reusable interfaces**: with Atomico the code is simpler and you can apply practices that facilitate the reuse of your code.

2. **Open communication**: with Atomico you can communicate states by events, properties or methods.

3. **Agnostic**: your custom element will work in any web-compatible library, eg React, Vue, Svelte or Angular.

4. **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.

### Atomico is simple and the result will always be a **standard and optimized webcomponent**.

![step-1.1](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-1.1.png)

![step-1.2](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-1.2.png)

![step-2.1](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-2.1.png)

![step-2.2](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-2.2.png)

![step-3.1](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-3.1.png)

![step-3.2](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-3.2.png)

![step-4.1](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-4.1.png)

![step-4.2](https://raw.githubusercontent.com/atomicojs/atomico/brand/step-4.2.png)

## Sponsors

Atomico is an open source project which is mainly supported by [@UpperCod](https://twitter.com/uppercod), any donation is well received as it helps to improve Atomico in its maintenance, documentation, support and more 😊.

[![sponsors Nicholas Frush](https://raw.githubusercontent.com/atomicojs/atomico/brand/s-nicholas-frush.png)](https://github.com/cawfeecoder)

![](https://raw.githubusercontent.com/atomicojs/atomico/brand/8px.png)

[![sponsors Nicholas Frush](https://raw.githubusercontent.com/atomicojs/atomico/brand/s-andrea-reni.png)](https://twitter.com/andreatrakea)

![](https://raw.githubusercontent.com/atomicojs/atomico/brand/8px.png)

[![sponsors Nicholas Frush](https://raw.githubusercontent.com/atomicojs/atomico/brand/s-jenna.png)](https://twitter.com/jjenzz)

## Summary

Atomico is a modern syntax micro-library created by Matias Trujillo alias [@UpperCod](https://github.com/uppercod), which simplifies the creation of webcomponents by replacing the need to use classes and contexts by functions and scope to support logic, attributes, properties, methods and events.

## Join the team by contributing to Atomico

**We will be attentive to all the help you need to generate your contribution.** In the following link [CONTRIBUTING.md](CONTRIBUTING.md) you'll find everything you need to start contributing to Atomico js webcomponents code.

Not everything is code, it can also help us improve [Atomico documentation](https://atomico.gitbook.io/doc/).

A good starting point to start contributing is to [add](https://github.com/atomicojs/atomico/issues/new/choose) or take a request from the [Atomico Roadmap](https://github.com/atomicojs/atomico/projects/2).

By default, all issues will appear in the backlog column in Atomico's roadmap for refinement.

**Let's improve Atomico together!**