docs: Update docs for Automatic mode

website/docs/api/debug.md

@@ -8,7 +8,7 @@ Preview application's UI when testing with Jest to an external browser. Need to
 
 :::info
 
-[Automatic Mode](/blog/automatic-mode) is now available and is recommended for general use, instead of manually triggering `preview.debug()`
+[Automatic Mode](/blog/automatic-mode) is now available and is recommended for general use, instead of manually triggering `preview.debug()`.
 :::
 
 ```diff

website/docs/getting-started/installation.md

@@ -85,3 +85,11 @@ jestPreviewConfigure({
   publicFolder: 'static', // No need to configure if `publicFolder` is `public`
 });
 ```
+
+### 5. (Optional- RECOMMENDED) Opt-in to Automatic Mode
+
+**Automatic Mode** let you use [jest-preview](https://www.npmjs.com/package/jest-preview) without manually triggering `preview.debug()`. It previews your code in the browser automatically whenever there is a failed test. It's a experimental feature from v0.2.0 and becomes the default in v0.3.0.
+
+```js
+jestPreviewConfigure({ autoPreview: true });
+```

website/docs/getting-started/usage.md

@@ -4,6 +4,11 @@ sidebar_position: 6
 
 # Usage
 
+:::info
+
+[Automatic Mode](/blog/automatic-mode) is now available and is recommended for general use, instead of manually triggering `preview.debug()`.
+:::
+
 ### 1. Update to `package.json`
 
 ```json
@@ -57,8 +62,27 @@ describe('App', () => {
 });
 ```
 
-Then visit http://localhost:3336 to see the preview
+Then visit http://localhost:3336 to see the preview.
 
 <p align="center">
   <img alt="Preview your jest test in the browser" src="https://user-images.githubusercontent.com/8603085/161393898-7e283e38-6114-4064-9414-a0ce6d52361d.png" width="600" />
 </p>
+
+If you opt-in to [Automatic Mode](/blog/automatic-mode), Jest Preview will automatically preview your app UI in a browser whenever there is a failed test.
+
+```js
+describe('Demo', () => {
+  it('should work as expected', () => {
+    render(<Demo />);
+
+    userEvent.click(screen.getByTestId('increase'));
+    // userEvent.click(screen.getByTestId('increase'));
+
+    expect(screen.getByTestId('count')).toContainHTML('2');
+  });
+});
+```
+
+<p align="center">
+  <img alt="Preview your jest test in the browser" src="https://user-images.githubusercontent.com/8603085/166488340-45cae3bf-42e6-4e29-8031-df923c3ace83.gif" width="600" />
+</p>