The Ultimate Google Places Autocomplete for Svelte

A flexible, accessible, and secure Svelte component that brings the power of Google's address search to your application in minutes.

Get Started View on GitHub

Live Demo

Try it out! This is the component in action with default settings.

Quick Start in 3 Steps

1

Get an API Key

Enable the Places API in the Google Cloud Console and create an API key. Learn how.
2

Install the Package

Import and Use

Import the component and add it to your page. See the Basic Usage guide for the full code.

							<script>
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
import type { PlaceResult } from 'places-autocomplete-svelte/interfaces'; 

// Get API Key securely (e.g., from environment variables)
const PUBLIC_GOOGLE_MAPS_API_KEY = import....

Powerful Features Out of the Box

Fully Accessible

Follows WAI-ARIA patterns with full keyboard navigation.

Secure

Safely renders suggestions to protect against XSS attacks.

Cost-Effective

Automatically handles session tokens to manage API costs.

Debounced Input

Limits API calls while the user is typing to save requests.

Customisable

Easily override styles or provide your own using props.

TypeScript Ready

Fully written in TypeScript with included type definitions.

Need a Framework-Agnostic Solution?

The core logic of this component is also available as a standalone JavaScript library, places-autocomplete-js. It provides the same robust features for any web application, regardless of the framework.

View on GitHub Live Demo on CodePen

Next: Basic Usage