# Astro Client Scripts
> Client-side script patterns in Astro — when to use scoped
```
### After
```html
```
Steps:
1. Remove `is:inline`.
2. Unwrap `initXyz()` — module code runs at top level.
3. Drop `DOMContentLoaded` (modules are deferred by default).
4. Add TypeScript casts where needed (`as HTMLElement`, `as TouchEvent`).
5. Remove `typeof window` guards — modules only run in the browser.
## When `is:inline` IS required
### 1. Theme / FOUC prevention in ``
Must execute synchronously before first paint:
```html
```
### 2. Scripts using `define:vars`
`define:vars` requires `is:inline`:
```html
```
### 3. Third-party snippets that must not be bundled
Analytics, tracking pixels, classic scripts:
```html
```
## `ClientRouter` (SPA) considerations
When `` is active (Astro v6 SPA transitions):
- `is:inline` scripts re-run on every navigation by default.
- Module `
```
## Prefer a Svelte island for real interactivity
For anything beyond simple DOM manipulation, reach for a Svelte 5 island:
```svelte
```
```astro
```
## Decision tree
```
Need client-side JS?
├─ Simple DOM query / manipulation →