diff --git a/README.md b/README.md
index 18c9dc7..3ada428 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,127 @@
# vitest-browser-angular
-Render Angular components in VItest Browser Mode.
+This community package renders Angular components in [Vitest Browser Mode](https://vitest.dev/guide/browser).
-## Installation
+```ts
+import { Component, input } from '@angular/core'
+import { expect, test } from 'vitest'
+import { render } from 'vitest-browser-angular'
+
+@Component({
+ selector: 'app-hello-world',
+ template: '
Hello, {{ name() }}!
',
+})
+export class HelloWorld {
+ name = input.required()
+}
+
+test('renders name', async () => {
+ const { locator } = await render(HelloWorld, {
+ inputs: {
+ name: 'World',
+ },
+ })
+
+ await expect.element(locator).toHaveTextContent('Hello, World!')
+})
+```
+
+## Setup
+
+There are currently two ways to set up Vitest for Angular:
+- Analog's [`vitest-angular` plugin](https://analogjs.org/docs/features/testing/vitest) *(community)*.
+- Angular CLI's [`unit-test` builder](https://angular.dev/guide/testing#configuration) *(official)*.
+
+
+While Angular CLI's `unit-test` builder is the official way to set up Vitest for Angular, it has some [limitations](https://analogjs.org/docs/features/testing/overview#angular-support-for-vitest). Analog's `vitest-angular` plugin provides more Vitest features and greater flexibility.
+
+### Setup with Analog Plugin
+
+1. Set up Vitest
```sh
-pnpm add -D vitest-browser-angular
+npm add -D @analogjs/platform vitest-browser-angular
+
+ng g @analogjs/platform:setup-vitest
```
-## Setup Test Environment
+2. Activate browser mode in the generated Vitest configuration by following the [browser mode configuration instructions](https://vitest.dev/guide/browser/#configuration).
+
+### Setup with Angular CLI
+
+1. Configure your Angular project to use the `@angular/build:unit-test` builder, and add the browsers of your choice.
+
+```json
+{
+ ...,
+ "projects": {
+ "my-app": {
+ ...,
+ "architect": {
+ "test": {
+ "builder": "@angular/build:unit-test",
+ "options": {
+ "browsers": ["Chromium", "Firefox", "Webkit"]
+ }
+ }
+ }
+ }
+ }
+}
+```
+
+*Since Angular v21, Vitest is the default runner so you don't need to set the `runner` option.*
-To set up your test environment (with Zone.js or Zoneless), use `@analogjs/vitest-angular`'s `setupTestBed()` function.
+2. Install the browser provider of your choice using `ng add`
-**Important:** Make sure to use `{ browserMode: true }` when calling `setupTestBed()` to enable Vitest browser mode's visual test preview functionality.
+```sh
+# With Playwright
+ng add @vitest/browser-playwright
+
+# or with WebdriverIO
+ng add @vitest/browser-webdriverio
+```
+
+3. Add the `vitest-browser-angular` package to your project.
+
+```sh
+npm add -D vitest-browser-angular
+```
+
+
+## Zone.js VS Zoneless Setup
+
+Angular CLI will automatically set up the test environment for you depending on the presence of `zone.js` in your project's polyfills.
+
+When using the Analog plugin, you can control the behavior using the `zoneless` option of `setupTestBed()` in `test-setup.ts`:
+
+```ts
+import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
+
+setupTestBed({
+ zoneless: true,
+});
+```
For detailed setup instructions for both Zone.js and Zoneless configurations, please refer to the [Analog Vitest documentation](https://analogjs.org/docs/features/testing/vitest).
+
+## Component Preview
+
+To preview, debug and interact with a component in the browser after the test, you can prevent Angular from destroying it.
+
+In Angular CLI, enable this using the `--debug` option.
+
+With the Analog plugin, enable this using the `browserMode` option of `setupTestBed()` in `test-setup.ts`:
+
+```ts
+import { setupTestBed } from '@analogjs/vitest-angular/setup-testbed';
+
+setupTestBed({
+ browserMode: true,
+});
+```
+
## Usage
### Basic Example