# SwiftUI previews

Use `Clerk.preview()` in `#Preview` blocks to render Clerk-powered SwiftUI screens without launching a full app session.

## Use `Clerk.preview()`

Inject `Clerk.preview()` into your preview environment:

```swift
import ClerkKit
import SwiftUI

#Preview("Signed Out") {
  ContentView()
    .environment(Clerk.preview { preview in
      preview.isSignedIn = false
    })
}

#Preview("Signed In") {
  ContentView()
    .environment(Clerk.preview())
}
```

### Parameters

| Name       | Type | Description                                                                             |
| ---------- | ---- | --------------------------------------------------------------------------------------- |
| isSignedIn | Bool | Controls whether the preview uses signed-in or signed-out mock state. Defaults to true. |

## Use `ClerkEnvironment.json` for realistic previews

For more realistic preview behavior, add your instance's `/v1/environment` response to a `ClerkEnvironment.json` file in your app bundle. `Clerk.preview()` will load it automatically.

1. ### Copy your environment response

   Open the following URL in a new browser tab. Replace `YOUR_FRONTEND_API_URL` with your Frontend API URL.

   ```text
   https://{{fapi_url}}/v1/environment
   ```

   Then, copy the raw JSON response body.
2. ### Create `ClerkEnvironment.json`

   In Xcode:

   1. Add a new file named `ClerkEnvironment.json` to your app project.
   2. Paste the `/v1/environment` JSON response into the file.
   3. Ensure your app target is selected in **Target Membership** so the file is included in the main bundle.

   > If you change your Clerk configuration, fetch `/v1/environment` again and replace `ClerkEnvironment.json` so previews stay in sync.
3. ### Refresh previews

   Rebuild the preview canvas. `Clerk.preview()` will:

   1. Look for `ClerkEnvironment.json` in `Bundle.main`.
   2. Use that environment if found and decodable.
   3. Fall back to `Clerk.Environment.mock` if the file is missing or invalid.

## Troubleshooting

- If your preview still looks generic, confirm the file name is exactly `ClerkEnvironment.json` and that it is part of your app target.
- `Clerk.preview()` is preview-only. Outside SwiftUI previews, it returns `Clerk.shared`.

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)