Quick Start

This guide walks you through the full WELD setup from scratch.

1. Define your backend contract

The AppRouter type is the bridge between your backend and frontend. Define it once and pass it to Weld<AppRouter>.

type AppRouter = {
  'v1/products': {
    GET: {
      response: { id: string; name: string; price: number }[]
    }
    POST: {
      body:     { name: string; price: number }
      response: { id: string }
    }
  }
}

2. Create Zod schemas

Zod schemas validate the actual response at runtime.

import { z } from 'zod'

export const ProductSchema = z.object({
  id:    z.string(),
  name:  z.string(),
  price: z.number().positive(),
})

export const ProductArraySchema = z.array(ProductSchema)

3. Create the client

import { Weld } from 'weld-http'
import type { AppRouter } from '../types/api'

export const api = new Weld<AppRouter>('https://api.example.com', {
  headers: { Authorization: 'Bearer your-token' },
  timeout: 10_000,
  retry:   { attempts: 3, delay: 300 },
})

4. Make your first request

import { api } from '../lib/api'
import { ProductArraySchema } from '../schemas/product'

const { signal, promise } = api.get('v1/products', ProductArraySchema)

// Via async/await
const products = await promise

// Via reactive signal
signal.status.subscribe((status) => console.log('Status:', status))
signal.data.subscribe((data)     => console.log('Data:', data))

5. Use with your framework

import { useWeld } from 'weld-http/react'
import { api } from '../lib/api'
import { ProductArraySchema } from '../schemas/product'

export function ProductList() {
  const { data, loading, error } = useWeld(
    api.get('v1/products', ProductArraySchema)
  )

  if (loading) return <p>Loading...</p>
  if (error)   return <p>Error: {error.message}</p>

  return (
    <ul>
      {data?.map((product) => (
        <li key={product.id}>
          {product.name} — ${product.price}
        </li>
      ))}
    </ul>
  )
}

<script setup lang="ts">
import { useWeld } from 'weld-http/vue'
import { api } from '../lib/api'
import { ProductArraySchema } from '../schemas/product'

const { data, loading, error } = useWeld(
  api.get('v1/products', ProductArraySchema)
)
</script>

<template>
  <p v-if="loading">Loading...</p>
  <p v-else-if="error">Error: {{ error.message }}</p>
  <ul v-else>
    <li v-for="product in data" :key="product.id">
      {{ product.name }} — ${{ product.price }}
    </li>
  </ul>
</template>

import { useWeld } from 'weld-http/solid'
import { api } from '../lib/api'
import { ProductArraySchema } from '../schemas/product'

export function ProductList() {
  const { data, loading, error } = useWeld(
    api.get('v1/products', ProductArraySchema)
  )

  return (
    <>
      {loading() && <p>Loading...</p>}
      {error()   && <p>Error: {error()?.message}</p>}
      <ul>
        {data()?.map((p) => <li>{p.name} — ${p.price}</li>)}
      </ul>
    </>
  )
}

Next steps

Learn about E2E Type Safety
Explore Offline-First capabilities
Read the full API Reference