Skip to main content

​
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.

​
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

Components

Core rendering components for Weaverse content

Hooks

React hooks for accessing Weaverse functionality

Types

TypeScript interfaces and type definitions

Utilities

Helper functions for common development tasks

​
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

// 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: 
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true
  }
}

​
Need Help?

⌘I