# nanotags

Tiny Web Components wrapper powered by Nano Stores reactivity. No Shadow DOM, typed builder API, reactive props and refs

- [llms-full.txt](/llms-full.txt): Complete documentation in a single file

## Getting Started

- [Getting Started](/index.md): Introduction, installation and first component
  - Why nanotags?
  - Installation
  - Quick Start
  - Lifecycle
  - FAQ
## API

- [API](/api.md): Complete API reference for nanotags
  - Builder API: define, withProps, withRefs, withContexts, setup
  - Setup Context: host, props, refs, contexts, effect, bind, on, emit, getElement, getElements, onCleanup
  - Context API: createContext, context.provide, context.consume
  - Rendering: render, renderList
  - TypeScript: TypedEvent
## Cookbook

- [Cookbook](/cookbook.md): Best practices, communication patterns, context API, TypeScript, and attachments
  - Best Practices: Code structure, Refs over manual selection, Reactive state with atoms, Effects over imperative handlers
  - Components Communication: Parent to child, Child to parent, Child needs parent state or API, Siblings or unrelated components, Combining patterns
  - Context API: When to use context, How it works, provide vs consume vs withContexts
  - TypeScript: Augmenting HTMLElementTagNameMap, Typed custom events, Combining both augmentations
  - Attachments: Writing your own, Example: roving focus
## Examples

- [Examples](/examples.md): Live playground: edit code and see changes in the Preview immediately.
## Counter

- [Counter](/examples/counter.md): A minimal counter using nanotags with nanostores reactivity.
  - Example code
## Live Search

- [Live Search](/examples/live-search.md): Real-time country filtering with p.json(), valibot schema, ctx.bind, ctx.effect, renderList, and computed stores.
  - Example code
## Modal

- [Modal](/examples/modal.md): Modal dialog with a focus trap attachment for accessible keyboard navigation.
  - Example code
## Tabs

- [Tabs](/examples/tabs.md): Tab navigation with parent-child context and keyboard support.
  - Example code
## Todo List

- [Todo List](/examples/todo-list.md): Todo list with nested components and keyed list reconciliation via renderList.
  - Example code
## Toggle Group

- [Toggle Group](/examples/toggle-group.md): Single or multi-select toggle buttons with event-based parent-child communication.
  - Example code