> ## Documentation Index
> Fetch the complete documentation index at: https://docs.weaverse.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Complete API reference for Weaverse Hydrogen development

# API Reference

This section provides comprehensive documentation for all Weaverse Hydrogen APIs, hooks, components, and utilities. Whether you're building custom components, integrating with Shopify, or extending Weaverse functionality, you'll find detailed information here.

<Tip>
  Looking for the **REST API** to access page content from external applications? See the [Content API](/content-api/overview) documentation.
</Tip>

## Core Concepts

Weaverse Hydrogen provides a powerful set of APIs for building visual, drag-and-drop storefronts. The API is organized around several key concepts:

* **Components**: Reusable UI elements with visual configuration
* **Hooks**: React hooks for accessing Weaverse state and functionality
* **Utilities**: Helper functions for common tasks
* **Types**: TypeScript interfaces and type definitions

## Getting Started

<CardGroup cols={2}>
  <Card title="Components" icon="cube" href="/api-reference/weaverse-root">
    Core rendering components for Weaverse content
  </Card>

  <Card title="Hooks" icon="hook" href="/api-reference/use-weaverse">
    React hooks for accessing Weaverse functionality
  </Card>

  <Card title="Types" icon="code" href="/api-reference/types">
    TypeScript interfaces and type definitions
  </Card>

  <Card title="Utilities" icon="wrench" href="/api-reference/get-selected-product-options">
    Helper functions for common development tasks
  </Card>
</CardGroup>

## Package Structure

Weaverse Hydrogen is distributed as multiple packages:

* **`@weaverse/hydrogen`** - Main package with components, hooks, and utilities
* **`@weaverse/react`** - Core React rendering engine
* **`@weaverse/core`** - Low-level Weaverse functionality
* **`@weaverse/shopify`** - Shopify-specific components and integrations

## Import Patterns

```tsx theme={null}
// Core hooks and components
import { useWeaverse, WeaverseRoot } from '@weaverse/hydrogen'

// Utilities
import { getSelectedProductOptions, IMAGES_PLACEHOLDERS } from '@weaverse/hydrogen'

// Types
import type { HydrogenComponent, HydrogenComponentProps } from '@weaverse/hydrogen'
```

## TypeScript Support

All APIs are fully typed with TypeScript. We recommend enabling strict mode in your `tsconfig.json`:

```json theme={null}
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true
  }
}
```

## Need Help?

* **[Development Guide](/development-guide/index)** - Step-by-step development tutorials
* **[Community](/community/community)** - Connect with other developers
* **[FAQ](resources/faq)** - Common questions and solutions