Astro

30-second example

---
// src/pages/checkout.astro
const apiKey = import.meta.env.PUBLIC_POSTIO_KEY;
---

<input id="address-search" placeholder="Start typing an address…" />
<input id="line1" />
<input id="town" />
<input id="postcode" />

<script>
  import { setup } from '@postio/address-finder';

  setup({
    apiKey: '{apiKey}',
    input: '#address-search',
    output: {
      address_line_1: '#line1',
      post_town:      '#town',
      postcode:       '#postcode',
    },
  });
</script>

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.
• 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.
• Cloudflare WorkersServer-side validation in a Worker — @postio/core uses native fetch, no Node polyfills.