React (Vite)

30-second example

// src/App.tsx
import { PostioProvider, AddressFinder } from '@postio/react';

export default function App() {
  return (
    <PostioProvider apiKey={import.meta.env.VITE_POSTIO_KEY}>
      <AddressFinder
        onSelect={(addr) => console.log(addr)}
        placeholder="Start typing an address…"
        outputs={{
          address_line_1: '#line1',
          post_town:      '#town',
          postcode:       '#postcode',
        }}
      />
    </PostioProvider>
  );
}

Other framework examples

• Plain HTMLNo build step, no framework. One HTML file, three script lines, working autocomplete.
• Next.js (App Router)Server Components + client AddressFinder, validation in a Server Action.
• 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.