Package Exports
- atomico
- atomico/jsx-dev-runtime
- atomico/jsx-runtime
- atomico/test-dom
- atomico/test-hooks
- atomico/types/component
- atomico/types/context
- atomico/types/css
- atomico/types/dom
- atomico/types/errors
- atomico/types/hooks
- atomico/types/schema
- atomico/types/vnode
- atomico/utils
Readme
Build web components using a syntax similar to React JS. π
- Scalable and reusable interfaces: Build once with Atomico, run anywhere β React, Vue, Svelte, HTML, WebView, you name it. Feels super simple β especially if you already know React. π
- Open communication: Atomico makes building and using web components easy β delivering a truly authentic dev experience. β‘
- Performance: Atomico is fast β actually 60% faster than React. Your apps will fly! π
Atomico is fully type-friendly β full autocomplete powered by your IDE, TypeScript, and AI. π
import { c } from "atomico";
const MyComponent = c(
({ message }) => (
<host>
<h1>Helo {message}</h1>
</host>
),
{
props: { message: String }
}
);
customElements.define("my-component", MyComponent);Summary
Atomico is a modern micro-library created by Matias Trujillo, aka @UpperCod , designed to simplify web component development. It replaces the need for classes and contexts with functions and scoped logic, supporting attributes, properties, methods, and events β making your components cleaner and easier to maintain.
Join the Team by Contributing to Atomico
Weβre happy to help with any support you need to make your contribution. Check out CONTRIBUTING.md for everything you need to get started contributing to Atomicoβs web component code.
Not all contributions are code-related β you can also help us improve the Atomico documentation .
A good place to start is by adding or picking up an item from the Atomico Roadmap .
By default, all issues will appear in the backlog column of Atomicoβs roadmap for refinement.
Letβs make Atomico better β together! π