diff --git a/README.md b/README.md
index 7a1aef38..2616bc59 100644
--- a/README.md
+++ b/README.md
@@ -225,14 +225,14 @@ The [examples](examples) folder contains working examples.
 You can run one of them with
 
 ```bash
-PORT=8080 pnpm run examples:01_minimal
+PORT=8080 pnpm run examples:01_counter
 ```
 
 and open <http://localhost:8080> in your web browser.
 
 You can also try them directly:
-[01](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/01_minimal)
-[02](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/02_typescript)
+[01](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/01_counter)
+[02](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/02_person)
 [03](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/03_usestate)
 [04](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/04_selector)
 [05](https://stackblitz.com/github/dai-shi/react-tracked/tree/main/examples/05_container)
diff --git a/website/docs/recipes.md b/website/docs/recipes.md
index e5bf31d9..7337c12d 100644
--- a/website/docs/recipes.md
+++ b/website/docs/recipes.md
@@ -69,9 +69,9 @@ const {
   Provider,
   useTracked,
   // ...
-} = createContainer(({ initialState }) => useState(initialState);
-
+} = createContainer(({ initialState }) => useState(initialState));
 
+// prettier-ignore
 const App = ({ initialState }) => (
   <Provider initialState={initialState}>
     ...
@@ -90,8 +90,9 @@ const {
   Provider,
   useTracked,
   // ...
-} = createContainer(() => useState({});
+} = createContainer(() => useState({}));
 
+// prettier-ignore
 const App = () => (
   <Provider>
     ...
@@ -288,7 +289,7 @@ Updating a property deep in a state object is troublesome.
 Here's a custom hook to use [immer](https://github.com/immerjs/immer) for setState.
 
 ```javascript
-import produce from 'immer';
+import { produce } from 'immer';
 
 const useTrackedWithImmer = () => {
   const [state, setState] = useTracked();
diff --git a/website/docs/tutorial-01.md b/website/docs/tutorial-01.md
index bdeec490..c9c49b85 100644
--- a/website/docs/tutorial-01.md
+++ b/website/docs/tutorial-01.md
@@ -92,7 +92,7 @@ This component is to edit person object.
 ```typescript ts2js
 import React, { useState } from 'react';
 
-import { useDispatch, useTrackedState } from './store';
+import { useTrackedState } from './store';
 import { useFlasher } from './utils';
 
 const ShowPerson = () => {
@@ -128,7 +128,7 @@ It shows only first name or full name.
 import { useRef, useEffect } from 'react';
 
 export const useFlasher = () => {
-  const ref = useRef<HTMLLIElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (!ref.current) return;
     ref.current.setAttribute(
diff --git a/website/docs/tutorial-03.md b/website/docs/tutorial-03.md
index 7366af86..765fdc72 100644
--- a/website/docs/tutorial-03.md
+++ b/website/docs/tutorial-03.md
@@ -31,7 +31,7 @@ It wraps TodoList with Provider.
 ```typescript ts2js
 import { useState, useCallback } from 'react';
 import { createContainer } from 'react-tracked';
-import produce, { Draft } from 'immer';
+import { produce, Draft } from 'immer';
 
 type TodoType = {
   id: number;