​

How Weaverse Works

​

Architecture Overview

​

The Weaverse Workflow

​

1. Developer Experience

// app/sections/product-card/index.tsx
// You write React components with schemas
import { createSchema, type HydrogenComponentProps } from '@weaverse/hydrogen'

interface ProductCardProps extends HydrogenComponentProps {
  title: string
  price: string
}

function ProductCard({ ref, title, price, ...rest }: ProductCardProps) {
  return <div ref={ref} {...rest}>{title} - {price}</div>
}

export default ProductCard

export const schema = createSchema({
  type: 'product-card',
  title: 'Product Card',
  settings: [/* configuration */],
})

// app/weaverse/components.ts
import type { HydrogenComponent } from '@weaverse/hydrogen'
import * as ProductCard from '~/sections/product-card'

export const components: HydrogenComponent[] = [ProductCard]

​

2. Merchant Experience

• Merchants drag components onto pages
• Real-time preview across all devices
• Intuitive settings panels for customization
• No code required

• Create and manage pages visually
• Organize content with sections and components
• Preview changes before publishing

​

3. Runtime Performance

• Pages are server-rendered by Hydrogen on each request, using the page data loaded from Weaverse
• The Studio editing bridge only loads in design mode, not on the live storefront
• Only your component logic ships to browsers

• Automatic image optimization
• Code splitting by route
• Server-side rendering with Hydrogen

​

Key Concepts

​

Components vs Sections

• Buttons, cards, forms
• Configured through props
• Can be used multiple times per page

• Headers, hero areas, footers
• Container multiple components
• Define page structure

​

Schema-Driven Configuration

import { createSchema } from '@weaverse/hydrogen'

export const schema = createSchema({
  type: 'unique-component-name',
  title: 'Human-readable Title',
  settings: [
    {
      group: 'Content',
      inputs: [
        {
          type: 'text',
          name: 'heading',
          label: 'Heading Text',
          defaultValue: 'Hello World'
        }
      ]
    }
  ]
})

• Visual editor controls
• Validation rules
• Default values

​

Data Flow

1. Build Time: Schemas define available components
2. Edit Time: Merchants configure component instances
3. Request Time: Hydrogen loads the page data from Weaverse and server-renders the HTML
4. Hydration: Interactive components become functional

​

Integration with Hydrogen

• React Router v7: Route modules with loaders and type-safe route config
• Streaming SSR: Fast initial page loads with deferred non-critical data
• Shopify APIs: Native product and cart integration
• Performance: Optimized for Core Web Vitals

​

Development Modes

​

Local Development

• Hot reload for instant feedback
• Weaverse Studio runs alongside your app
• Real-time component updates

​

Production

• Components are pre-built and optimized
• Merchants edit through hosted Weaverse Studio
• Changes deploy through your CI/CD pipeline

​

Benefits

• Full control over component logic
• Modern React development experience
• No vendor lock-in
• Standard deployment workflows

• Visual page building
• No technical knowledge required
• Real-time preview
• Mobile-responsive editing

• Fast loading pages
• Mobile-optimized experiences
• Consistent brand presentation
• Accessible by default

​

Next Steps

• Learn about Project Structure
• Start building with the Development Guide
• Explore the API Reference for advanced usage