# Atomico JS

## English

- [Atomico](https://atomico.gitbook.io/doc/readme.md): A micro library inspired by React Hooks, designed and optimized for the creation of webcomponents.
- [Getting started with Atomico](https://atomico.gitbook.io/doc/getting-started-with-atomico.md): This guide will know the essentials to start developing webcomponents with Atomico
- [Getting started with Atomico for React users](https://atomico.gitbook.io/doc/getting-started-with-atomico-for-react-users.md): Hi, I'm Atomico js and I bring you the React syntax for webcomponents, I think you and I get along very well 😊.
- [What can you do with Atomico?](https://atomico.gitbook.io/doc/what-can-you-do-with-atomico.md): With Atomico you can do this and more
- [You can create amazing webcomponents](https://atomico.gitbook.io/doc/what-can-you-do-with-atomico/you-can-create-amazing-webcomponents.md): Atomico makes it easy to build components with less code, better readability, and better reusability.
- [You can create design systems](https://atomico.gitbook.io/doc/what-can-you-do-with-atomico/you-can-create-design-systems.md): Today Atomico is used in the development of design systems for various industries such as Banking, Pledge Systems, Insurance, Clinical, Government and more.
- [You can create websites](https://atomico.gitbook.io/doc/what-can-you-do-with-atomico/you-can-create-websites.md)
- [You can create mobile applications](https://atomico.gitbook.io/doc/what-can-you-do-with-atomico/you-can-create-mobile-applications.md): working on this documentation...
- [You can create web applications](https://atomico.gitbook.io/doc/what-can-you-do-with-atomico/you-can-create-web-applications.md): working on this documentation...
- [Props(Properties)](https://atomico.gitbook.io/doc/api/props.md): The props in Atomico are the way to associate the webcomponent properties and reactive attributes that trigger the logic or interface of the webcomponent.
- [Value cycle as prop](https://atomico.gitbook.io/doc/api/props/value-cycle-as-prop.md): Atomico has a really efficient and simple type validation method, the type validation works in the following way:
- [VirtualDOM](https://atomico.gitbook.io/doc/api/virtualdom.md): Atomico's virtualDOM is designed to enhance the use of webcomponents.
- [Advanced](https://atomico.gitbook.io/doc/api/virtualdom/advanced.md)
- [Hooks](https://atomico.gitbook.io/doc/api/hooks.md): Improves the experience of reusing logic between webcomponents based on Atomico
- [useProp](https://atomico.gitbook.io/doc/api/hooks/useprop.md): Reactivity in the scope of the webcomponent without the use of context(this)
- [useEvent](https://atomico.gitbook.io/doc/api/hooks/useevent.md): Dispatch events from the webcomponent without referencing the context(this)
- [useRef](https://atomico.gitbook.io/doc/api/hooks/useref.md): Create a persistent object between renders to capture from a node from VirtualDOM
- [useHost](https://atomico.gitbook.io/doc/api/hooks/usehost.md): Hook that creates a reference that curren is the instance of the webcomponent.
- [useState](https://atomico.gitbook.io/doc/api/hooks/usestate.md)
- [useReducer](https://atomico.gitbook.io/doc/api/hooks/usereducer.md)
- [useEffect, useLayoutEffect and useInsertionEffect](https://atomico.gitbook.io/doc/api/hooks/useeffect-y-uselayouteffect.md): Allows to run side effects after rendering
- [useMemo and useCallback](https://atomico.gitbook.io/doc/api/hooks/usememo-y-usecallback.md)
- [useUpdate](https://atomico.gitbook.io/doc/api/hooks/useupdate.md): Force an update, ideal for working with references
- [useId](https://atomico.gitbook.io/doc/api/hooks/useid.md)
- [useContext](https://atomico.gitbook.io/doc/api/hooks/usecontext.md): Since version Atomico@1.62.0  has introduced a context api as part of the core.
- [useProvider](https://atomico.gitbook.io/doc/api/hooks/usecontext/useprovider.md): Allows the host that instantiates this useProvider to become the context.
- [usePromise](https://atomico.gitbook.io/doc/api/hooks/usepromise.md): Easily observe asynchronous processes
- [useAsync and useSuspense](https://atomico.gitbook.io/doc/api/hooks/useasync-and-usesuspense.md): suspend the execution of a render until the resolution of an asynchronous process
- [useAbortController](https://atomico.gitbook.io/doc/api/hooks/useabortcontroller.md): Atomico now introduces a new hook called useAbortController, which allows aborting the execution of asynchronous calls, example:
- [Testing](https://atomico.gitbook.io/doc/api/testing.md)
- [Render cycle](https://atomico.gitbook.io/doc/api/testing/test-dom.md): Atomico optimizes the execution of your script by minimizing resources through the rendering control.
- [atomico/test-hooks](https://atomico.gitbook.io/doc/api/testing/test-hooks.md): Build test to custom hooks created with Atomico with an isolated instance and predictable
- [atomico/test-dom](https://atomico.gitbook.io/doc/api/testing/atomico-test-dom.md)
- [Frequent questions](https://atomico.gitbook.io/doc/guides/frequent-questions.md)
- [Is it advisable to declare events using the props API?](https://atomico.gitbook.io/doc/guides/frequent-questions/is-it-advisable-to-declare-events-using-the-props-api.md): It is not recommended to use the props API to create an event, as this callback associated as props will have the following limitations:
- [How to declare events for your component at the type level for TSX?](https://atomico.gitbook.io/doc/guides/frequent-questions/how-to-declare-events-for-your-component-at-the-type-level-for-tsx.md)
- [When and why to use shadowDom?](https://atomico.gitbook.io/doc/guides/frequent-questions/when-and-why-to-use-shadowdom.md)
- [Can I use Atomico in browsers without ESM support?](https://atomico.gitbook.io/doc/guides/frequent-questions/page.md)
- [Component](https://atomico.gitbook.io/doc/guides/component.md): Working on this documentation...
- [Naming](https://atomico.gitbook.io/doc/guides/component/naming.md): Simple but useful
- [CSS Styles with Shadow DOM](https://atomico.gitbook.io/doc/guides/component/css-styles-with-shadow-dom.md): Working on this documentation...
- [Atomico with Typescript](https://atomico.gitbook.io/doc/guides/atomico-with-typescript.md): Atomico with Typescript will improve the scalability of your project thanks to a really productive type system when creating, distributing and maintaining webcomponents
- [Props](https://atomico.gitbook.io/doc/guides/atomico-with-typescript/props.md)
- [Component](https://atomico.gitbook.io/doc/guides/atomico-with-typescript/typescript.md): Type to structure a component from its creation
- [Meta-types](https://atomico.gitbook.io/doc/guides/atomico-with-typescript/meta-types.md)
- [Type](https://atomico.gitbook.io/doc/guides/atomico-with-typescript/meta-types/type.md)
- [Event declaration](https://atomico.gitbook.io/doc/guides/atomico-with-typescript/meta-types/declare-meta-types-to-the-component.md)
- [Method declaration](https://atomico.gitbook.io/doc/guides/atomico-with-typescript/meta-types/method-declaration.md)
- [Check the correct use of hooks](https://atomico.gitbook.io/doc/guides/atomico-with-typescript/check-the-correct-use-of-hooks.md): By default most hooks infer types automatically, however here are some typing tips:
- [Atomico and React](https://atomico.gitbook.io/doc/guides/atomico-and-react.md)
- [Integrating Atomico in React](https://atomico.gitbook.io/doc/guides/atomico-and-react/integrating-atomico-in-react.md)
- [From React to Atomico](https://atomico.gitbook.io/doc/guides/atomico-and-react/from-react-to-atomico.md): Atomico inherits part of the React syntax and applies it to webcomponents, with a closer to standard approach.
- [Rendering Differences](https://atomico.gitbook.io/doc/guides/atomico-and-react/from-react-to-atomico/rendering-differences.md)
- [VirtualDOM api differences](https://atomico.gitbook.io/doc/guides/atomico-and-react/from-react-to-atomico/virtualdom-api-differences.md): Guide that defines some differences that exist between Atomico and React when working with the DOM.
- [Atomico and Asynchrony](https://atomico.gitbook.io/doc/guides/atomico-and-asynchrony.md): With Atomico, asynchrony is really easy thanks to the fact that they will allow you to know the status of the process or suspend the rendering of the component.
- [Atomico design patterns](https://atomico.gitbook.io/doc/guides/atomico-design-patterns.md): Atomico has been designed to be simple even in complex situations, in this guide you will know some patterns that Atomico offers to create webcomponents at an advanced level.
- [Webcomponents with hybrid rendering](https://atomico.gitbook.io/doc/guides/atomico-design-patterns/webcomponents-with-hybrid-rendering.md): Improve the interaction of your inputs with forms using hybrid rendering (LightDOM and ShadowDOM)
- [Slot as templates](https://atomico.gitbook.io/doc/guides/atomico-design-patterns/slot-as-templates.md)
- [Slot](https://atomico.gitbook.io/doc/guides/atomico-design-patterns/slot.md)
- [Atomico and Storybook](https://atomico.gitbook.io/doc/guides/atomico-and-storybook.md)
- [Frequent questions](https://atomico.gitbook.io/doc/guides/atomico-and-storybook/frequent-questions.md)
- [SSR / SSG](https://atomico.gitbook.io/doc/guides/ssr-ssg.md): Implement SSR and SST without friction
- [Archives](https://atomico.gitbook.io/doc/guides/archives.md)
- [Class inheritance](https://atomico.gitbook.io/doc/guides/archives/class-inheritance.md)
- [Forms and shadowDOM](https://atomico.gitbook.io/doc/guides/archives/forms-and-shadowdom.md): Improve the interaction with the forms and accessibility of your components.
- [Tips](https://atomico.gitbook.io/doc/guides/archives/tips.md): Here are some tips you can take into account when creating webcomponents with Atomico
- [Design systems](https://atomico.gitbook.io/doc/guides/archives/design-systems.md): I will show you a series of useful techniques to start programming your design systems with Atomico, analyzing the recommended structure and its files.
- [Atomico style guide](https://atomico.gitbook.io/doc/guides/archives/atomico-style-guide.md): First thanks for using Atomico 😉, in this guide you will find some useful tips when developing with Atomico, all with the aim that your webcomponents are sustainable and scalable over time.
- [File structure](https://atomico.gitbook.io/doc/guides/archives/atomico-style-guide/file-structure.md)
- [Monorepo](https://atomico.gitbook.io/doc/guides/archives/atomico-style-guide/file-structure/monorepo.md)
- [Design systems](https://atomico.gitbook.io/doc/guides/archives/atomico-style-guide/file-structure/design-systems.md)
- [@atomico/hooks](https://atomico.gitbook.io/doc/packages/atomico-hooks.md): series of useful hooks for creating webcomponents
- [useCurrentValue](https://atomico.gitbook.io/doc/packages/atomico-hooks/usecurrentvalue.md)
- [use-intersection-observer](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-intersection-observer.md)
- [use-ref-values](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-ref-values.md): Consume the values of a reference without major inconvenience
- [use-script](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-script.md): load global scripts when mounting the component
- [use-attributes](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-attributes.md): capture all attributes that are defined in the webcomponent but are not props
- [use-prop-proxy](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-prop-proxy.md): Share values from the scope via setter and getters
- [use-click-press](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-click-press.md)
- [use-dollars](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-dollars.md): Create reactive templates that interact with the state of your webcomponent
- [use-reflect-event](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-reflect-event.md): the useReflectEvent hook reflects the event from the reference origin to the reference destination
- [use-keyboar](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-keyboar.md): capture key combinations easily
- [use-click-coordinates](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-click-coordinates.md): The usesClickCoordinates  hook is for capturing click coordinates, this is useful when positioning a tooptip or creating visual effects
- [use-copy](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-copy.md): Copies the content in text format of a reference.
- [use-debounce-state](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-debounce-state.md): creates a bottleneck to the definition of a state, limits concurrency.
- [use-form](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-form.md): Communicate the component with external forms.
- [use-listener](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-listener.md): Associate a listener with a reference
- [use-disabled](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-disabled.md): Synchronize the state of the disabled prop with the fieldset tag
- [use-css](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-css.md): Inject CSS into the shadowRoot
- [use-channel](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-channel.md): create connection between components to share internal states
- [use-promise](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-promise.md): The usePromise hook consumes an asynchronous function is ideal for using fetch or other asynchronous tasks.
- [use-responsive-state](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-responsive-state.md): Declare a state based on a responsive expression similar to using the tag img\[srcset].
- [use-parent](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-parent.md): Retrieve a node higher than the current webcomponent.
- [use-resize-observer](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-resize-observer.md): Observe the size change of a reference.
- [use-slot](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-slot.md): Retrieves the nodes assigned to a slot.
- [useSlot](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-slot/useslot.md)
- [useProxySlot](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-slot/useproxyslot.md)
- [use-render](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-render.md): Run a second render before the webcomponent render, ideal for  collaborative work between shadowDOM and lightDOM
- [use-mutation-observer](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-mutation-observer.md): Observe the changes of a reference using MutationObserver
- [use-css-light-dom](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-css-light-dom.md): share your style sheets between LightDOM and ShadowDOM
- [use-controller](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-controller.md): Use a ReactiveController.
- [use-router](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-router.md): Hooks to work with routes in the browser
- [use-async-effect](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-async-effect.md): Execute useEffect but asynchronously
- [use-child-nodes](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-child-nodes.md): Captures all nodes not created by the webcomponent render, ideal for  apply slot polyfill in LightDOM.
- [use-force-render](https://atomico.gitbook.io/doc/packages/atomico-hooks/use-force-render.md): Allows forcing the rendering of the webcomponent without the need to be  tied to a state or property
- [@atomico/store](https://atomico.gitbook.io/doc/packages/atomico-store.md): @atomico/store a more predictable and natural model for asynchrony when controlling states.
- [Store](https://atomico.gitbook.io/doc/packages/atomico-store/store.md): It is a minimalist solution for synchronizing the state of applications or component systems that require controlled bidirectional data management.
- [@atomico/storybook](https://atomico.gitbook.io/doc/packages/atomico-storybook.md): Improves the generation of stories in Storybook.
- [@atomico/router](https://atomico.gitbook.io/doc/packages/atomico-router.md): powerful router for Webcomponents, React and Preact
- [@atomico/vite](https://atomico.gitbook.io/doc/packages/atomico-vite.md): Atomico Vite is a stack of plugins created for the development of libraries and applications using Atomico + Vite.
- [Process CSS tag template blocks with PostCSS.](https://atomico.gitbook.io/doc/packages/atomico-vite/process-css-tag-template-blocks-with-postcss..md): With @atomico/vite, you will be able to analyze your CSS tag template to be optimized or to support utilities from the PostCSS ecosystem like Tailwind.
- [Compile your code to be distributed optimally as a package.](https://atomico.gitbook.io/doc/packages/atomico-vite/compile-your-code-to-be-distributed-optimally-as-a-package..md)
- [Use the JSX/TSX syntax of Atomico when using Storybook.](https://atomico.gitbook.io/doc/packages/atomico-vite/use-the-jsx-tsx-syntax-of-atomico-when-using-storybook..md): By default, Storybook does not support Atomico's JSX/TSX. With @atomico/vite, you will be able to use Atomico's syntax in your stories for Storybook.
- [Automatically create customElements.define](https://atomico.gitbook.io/doc/packages/atomico-vite/automatically-create-customelements.define.md): With @atomico/vite you can automate the declaration of customElements.define, @atomico/vite will transform the export of your customElement into a record for customElements.define.
- [Support for Vitest for Atomico.](https://atomico.gitbook.io/doc/packages/atomico-vite/support-for-vitest-for-atomico..md): With @atomico/vite, you will be able to use the \`atomico/test-dom\` module without any issues.
- [Server actions](https://atomico.gitbook.io/doc/packages/atomico-vite/server-actions.md): With @atomico/vite, you will be able to use server-side functions in an environment-agnostic way, suitable for certain serverless and edge environments.
- [@atomico/exports](https://atomico.gitbook.io/doc/packages/introduction.md): @atomico/exports aims to be the solution to facilitate the construction of the metadata in your package.json necessary for publishing on NPM or at the monorepo level with workspaces.
- [CLI and Flags](https://atomico.gitbook.io/doc/packages/introduction/atomico-exports.md): Facilitates the distribution of webcomponents
- [Wrapper for React](https://atomico.gitbook.io/doc/packages/introduction/wrapper-for-react.md)
- [@atomico/components](https://atomico.gitbook.io/doc/packages/atomico-components.md): Utility and generic components
- [@atomico/keen-slider](https://atomico.gitbook.io/doc/packages/atomico-components/keen-slider.md): The Keen-slider api but with WebComponents
- [@atomico/modal](https://atomico.gitbook.io/doc/packages/atomico-components/modal.md): Responsive generic modal component.
- [@atomico/lottie](https://atomico.gitbook.io/doc/packages/atomico-components/lottie.md)
- [@atomico/table](https://atomico.gitbook.io/doc/packages/atomico-components/table.md)
- [@atomico/react](https://atomico.gitbook.io/doc/packages/atomico-react.md): Wrapper to use webcomponents in React
- [@atomico/postcss-tokens](https://atomico.gitbook.io/doc/packages/atomico-postcss-tokens.md): Makes it easy to manage tokens as CSS custom properties for design system development
- [Example with @atomico/vite](https://atomico.gitbook.io/doc/packages/atomico-postcss-tokens/example-with-atomico-vite.md)
- [@atomico/wrapper](https://atomico.gitbook.io/doc/packages/atomico-wrapper.md): This package is used by @atomico/react and @atomico/vue to retrieve the tagName of the customElement registered through customElements.define
- [Deprecated](https://atomico.gitbook.io/doc/packages/deprecated.md)
- [@atomico/magic-form](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form.md): Improves the form development experience thanks to the use of webcomponents to centralize submission
- [MagicFormProvider | \<magic-form-provider>](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicformprovider-or-less-than-magic-form-provider-greater-than.md): receives the submits from MagicForm
- [MagicForm | \<magic-form>](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicform-or-less-than-magic-form-greater-than.md): captures the submit event of the nested form and sends it to MagicFormProvider
- [MagicForm Hooks](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicform-hooks.md)
- [MagicForm in React and Preact](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicform-in-react-and-preact.md): MagicForm api is equivalent in Atomicojs, React and Preact at JSX level
- [MagicForm in Microfrontend](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicform-in-microfrontend.md)
- [MagicForm Patterns](https://atomico.gitbook.io/doc/packages/deprecated/atomico-magic-form/magicform-patterns.md): MagicForm makes it easy to send data to the server, here are some useful patterns
- [@atomico/design-tokens](https://atomico.gitbook.io/doc/packages/deprecated/atomico-design-tokens.md): Accelerates the implementation of design tokens in web components in a sustainable and scalable way
- [@atomico/design-tokens api](https://atomico.gitbook.io/doc/packages/deprecated/atomico-design-tokens/atomico-design-tokens-api.md)

## Español

- [Atomico](https://atomico.gitbook.io/doc/espanol/readme.md): Una microlibrería inspirada en React Hooks, diseñada y optimizada para la creación de webcomponentes.
- [Comenzando con Webcomponents](https://atomico.gitbook.io/doc/espanol/comenzando.md): Esta guía conocerás lo esencial para comenzar a desarrollar webcomponents con Atomico
- [Sistemas de diseño con Atomico](https://atomico.gitbook.io/doc/espanol/guias/sistemas-de-diseno.md): Es grato saber que hoy te enfrentas al desafío de implementar un sistema de diseño con Atomico, espero que esta guía te ayude a abordar:
- [Estrategias de estructuración de repositorio con Atomico al crear sistemas de diseño.](https://atomico.gitbook.io/doc/espanol/guias/sistemas-de-diseno/estrategias-de-estructuracion-de-repositorio-con-atomico-al-crear-sistemas-de-diseno..md): Le invito a conocer 2 estrategias de estructuración de tu repositorio para tu proyecto como sistemas de diseño.
- [Monorepositorio versionado a nivel de componente](https://atomico.gitbook.io/doc/espanol/guias/sistemas-de-diseno/estrategias-de-estructuracion-de-repositorio-con-atomico-al-crear-sistemas-de-diseno./monorepositorio-versionado-a-nivel-de-componente.md): Trata de un repositorio que posee un sistema de diseño versionados por componentes
- [Monorepositorio versionado a nivel de sistema de diseño](https://atomico.gitbook.io/doc/espanol/guias/sistemas-de-diseno/estrategias-de-estructuracion-de-repositorio-con-atomico-al-crear-sistemas-de-diseno./monorepositorio-versionado-a-nivel-de-sistema-de-diseno.md): Trata de un repositorio que posee un componentes versionados a nivel de sistema de diseño.
- [Storybook](https://atomico.gitbook.io/doc/espanol/guias/sistemas-de-diseno/storybook.md): Atomico hoy ofrece un set de utilidades para mejorar la creacion de sistemas de diseño usando Storybook.
- [@atomico/storybook](https://atomico.gitbook.io/doc/espanol/guias/sistemas-de-diseno/storybook/atomico-storybook.md): Mejora la experiencia de desarrollo y documentación en Storybook de los webcomponents creados con Atomico
- [Tokens (CSS custom properties)](https://atomico.gitbook.io/doc/espanol/guias/sistemas-de-diseno/tokens-css-custom-properties.md)
- [Slots](https://atomico.gitbook.io/doc/espanol/guias/sistemas-de-diseno/slots.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on a 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.