Static examples companion - no embedded live API key

Backend-first examples for adding PlaceField to production apps.

Use these examples to keep your pf_live_... key on your server, call the PlaceField API from a backend route, and return structured location autocomplete data to your app. The full API reference stays on placefield.dev; this site is for choosing and running examples.

Start with Node/Express Start with ASP.NET Read API docs

Recommended production shape

For most apps, the browser or mobile client should call your backend. Your backend calls PlaceField with a secret server key and returns only the result data your product needs.

Browser or mobile app Searches your own endpoint, not PlaceField directly.

Your backend route Reads pf_live_xxx from server-side config and forwards safe query params.

PlaceField API Returns city, administrative area, region, and country autocomplete results.

Backend quickstarts

Both backend examples use visible placeholder config files so you can see exactly where the key goes. Replace the placeholder only when you are ready to call the live API.

Node/Express

Express route at /api/locations/autocomplete, configured through placefield.config.json.

cd examples/node-express
npm install
npm run dev

Open Node/Express guide

ASP.NET Minimal API

Minimal API route at /api/locations/autocomplete, configured through appsettings.json.

cd examples/aspnet-minimal-api
dotnet run

Open ASP.NET guide

Mocked API preview

This preview uses fixture data only. It shows the request and response shape without making a request to api.placefield.dev or exposing a usable key on GitHub Pages.

Request from your backend

GET /v1/locations/autocomplete?q=paris&geoBias=none&typePreset=default&limit=8
Authorization: Bearer pf_live_xxx

Example response shape

{
  "results": [
    {
      "id": "fr:city:paris",
      "type": "city",
      "name": "Paris",
      "label": "Paris, Ile-de-France, France",
      "country": { "code": "FR", "name": "France" },
      "hierarchy": [
        { "type": "country", "id": "country:fr", "name": "France", "code": "FR" },
        { "type": "region", "name": "Ile-de-France" }
      ],
      "coordinates": { "lat": 48.8566, "lon": 2.3522 }
    }
  ],
  "meta": {
    "query": "paris",
    "geoBias": "none",
    "typePreset": "default"
  }
}

For complete parameter and response details, use the canonical PlaceField API reference.

Other integration examples

Browser examples use public pf_pub_... placeholders and exact origin allowlisting. They are useful when you intentionally want browser-side autocomplete behavior.

API Fetch

Direct browser fetch example with a visible public-key placeholder.

Open API Fetch example

Basic JS

Attach PlaceField autocomplete behavior to your own input and fields.

Open Basic JS example

Full Widget

Ready-made autocomplete field with bundled UI and optional fullscreen mobile search.

Open Full Widget example

React using Full Widget

Small React/Vite TypeScript example using @placefield/widget with the hosted Full Widget.

cd examples/react-widget
npm install
npm run typecheck
npm run dev

Open React run instructions

Canonical docs

This examples site intentionally avoids duplicating the full docs. Use the product docs for the current API contract, billing, limits, and integration guidance.

Product · Docs · API reference · Autocomplete API overview