# Atomico

![](/files/-MaPqOnmzM1N9S0JNsft)

{% tabs %}
{% tab title="JSX" %}

```jsx
import { c } from "atomico"; // 2.5kB

const MyComponent = c(
  ({name})=><host shadowDom>Hello, {name}</host>,
  {
    props: { name: String }
  }
);

customElements.define("my-component", c(component));
```

{% endtab %}

{% tab title="TSX" %}

```jsx
import { c } from "atomico"; // 2.5kB

const MyComponent = c(
  ({name})=><host shadowDom>Hello, {name}</host>,
  {
    props: { name: String }
  }
);

customElements.define("my-component", c(component));
```

{% endtab %}
{% endtabs %}

Atomico simplifies learning, workflow and maintenance when creating webcomponents and achieves it with:

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.

### API

{% content-ref url="/pages/-MTZ5fCGbEnPvhLpx02m" %}
[Props(Properties)](/doc/api/props.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTZ5fCQIT8XbLyYSQDR" %}
[VirtualDOM](/doc/api/virtualdom.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTZ5fCH4ksfSNAIzbT2" %}
[Hooks](/doc/api/hooks.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MTZ5fCRmbErZoohnSyL" %}
[Testing](/doc/api/testing.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atomico.gitbook.io/doc/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.