Next.js (App Router)

30-second example

// app/checkout/page.tsx
'use client';

import { PostioProvider, AddressFinder } from '@postio/react';

export default function CheckoutPage() {
  return (
    <PostioProvider apiKey={process.env.NEXT_PUBLIC_POSTIO_KEY!}>
      <AddressFinder
        onSelect={(addr) => console.log(addr)}
        placeholder="Start typing an address…"
      />
    </PostioProvider>
  );
}

// app/checkout/actions.ts
'use server';
import { Postio } from '@postio/node';

const postio = new Postio({ apiKey: process.env.POSTIO_API_KEY! });

export async function validatePostcode(postcode: string) {
  const { results } = await postio.address.postcode(postcode);
  return results;
}

Other framework examples

• Plain HTMLNo build step, no framework. One HTML file, three script lines, working autocomplete.
• React (Vite)@postio/react + TanStack Query, fast dev loop.
• Vue 3Composition API + @postio/address-finder mounted via a template ref.
• SvelteKitServer-side validation in +page.server.ts; client widget mounted in onMount.
• AstroStatic-first with islands. Address widget as a hydrated island.
• Cloudflare WorkersServer-side validation in a Worker — @postio/core uses native fetch, no Node polyfills.