JSPM

atomico

2.1.0-beta
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 14531
  • Score
    100M100P100Q153838F
  • License MIT

Atomico is a small library for the creation of interfaces based on web-components, only using functions and hooks.

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

Atomico Atomico

twitter discord documentation playground

npm gzip

Build web components using a syntax similar to React JS. πŸš€

  1. 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. πŸš€
  2. Open communication: Atomico makes building and using web components easy β€” delivering a truly authentic dev experience. ⚑
  3. 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! πŸš€