SvelteKit

30-second example

// src/routes/checkout/+page.server.ts
import { Postio } from '@postio/node';
import { POSTIO_API_KEY } from '$env/static/private';

const postio = new Postio({ apiKey: POSTIO_API_KEY });

export const actions = {
  validate: async ({ request }) => {
    const data = await request.formData();
    const postcode = String(data.get('postcode') ?? '');
    const { results } = await postio.address.postcode(postcode);
    return { results };
  },
};

// src/routes/checkout/+page.svelte
<script lang="ts">
  import { onMount } from 'svelte';
  import { setup } from '@postio/address-finder';
  import { PUBLIC_POSTIO_KEY } from '$env/static/public';

  let inputEl: HTMLInputElement;
  onMount(() => setup({
    apiKey: PUBLIC_POSTIO_KEY,
    input: inputEl,
    output: {
      address_line_1: '#line1',
      post_town:      '#town',
      postcode:       '#postcode',
    },
  }));
</script>

<input bind:this={inputEl} placeholder="Start typing an address…" />
<input id="line1" />
<input id="town" />
<input id="postcode" />

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.
• 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.