diff --git a/ci/prepare_playwright.sh b/ci/prepare_playwright.sh
index 2a8c612..3520645 100755
--- a/ci/prepare_playwright.sh
+++ b/ci/prepare_playwright.sh
@@ -4,7 +4,8 @@
 
 set -eux
 
+./single_example.sh typescript vanilla_webpack
 ./single_example.sh typescript vanilla_rspack
 ./single_example.sh typescript vanilla_vite
-./single_example.sh typescript vanilla_webpack
+./single_example.sh typescript react_vite
 ./single_example.sh typescript vue_vite
diff --git a/ci/typescript/create_react_vite.sh b/ci/typescript/create_react_vite.sh
new file mode 100755
index 0000000..00be89e
--- /dev/null
+++ b/ci/typescript/create_react_vite.sh
@@ -0,0 +1,126 @@
+#!/usr/bin/env bash
+
+set -eux
+
+export OUTPUT_DIRECTORY=../temp/typescript/react_vite
+
+mkdir -p $OUTPUT_DIRECTORY
+cd $OUTPUT_DIRECTORY
+rm -rf *
+
+function merge-json() {
+  # merge the second json file into the first.
+  TEMP_FILE=$(mktemp)
+  jq '. * input' $1 $2 > TEMP_FILE && mv TEMP_FILE $1
+}
+
+# 1. Create base vite project
+npm create vite@latest . -- --template react-ts --yes
+
+# 2. Build and run initial basic project
+# npm install
+# # npm run dev
+# In a web browser navigate to http://localhost:5173/
+
+# 3. Simplify by removing some unwanted files
+rm src/assets/react.svg src/App.css src/index.css public/vite.svg
+
+# 4. Replace src/App.tsx with a simple hello example
+cat > src/App.tsx << EOF
+function App() {
+  return (
+    <>
+      <div>Hello</div>
+    </>
+  )
+}
+
+export default App
+EOF
+
+# 5. Remove CSS lines from src/main.tsx by replacing it
+cat > src/main.tsx << EOF
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
+EOF
+
+# 6. Build and run the minimal example
+# # npm run dev
+# In a web browser navigate to http://localhost:5173/
+
+# 7. Add BokehJS dependency to this project. This assumes the package has been built and copied to the root directory of this repository as outlined in the top-level README.md.
+npm install ../../../../bokeh-bokehjs-3.8.0-dev.1.tgz
+
+# 8. Create a new file src/components/BokehComponent.tsx containing a BokehJS plot component
+mkdir -p src
+cat > src/BokehComponent.tsx << EOF
+import { useEffect, useRef } from 'react'
+import * as Bokeh from "@bokeh/bokehjs";
+
+console.info("BokehJS version:", Bokeh.version);
+
+function create_bokehjs_plot(): Bokeh.Column {
+  const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
+
+  const plot = Bokeh.Plotting.figure({
+    title: "Example BokehJS plot", height: 500, width: 500,
+    x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
+  });
+
+  plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
+
+  const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
+  function button_callback() {
+    const data = source.data as any;
+    data.x.push(Math.random());
+    data.y.push(Math.random());
+    data.size.push(10 + Math.random()*30);
+    source.change.emit();
+  }
+  button.on_click(button_callback);
+
+  return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
+}
+
+export function BokehComponent() {
+  const shown = useRef(false);
+  useEffect(() => {
+    if (!shown.current) {
+        Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
+    shown.current = true;
+    }
+  }, [])
+
+  return (
+    <>
+      <div id="target"></div>
+    </>
+  )
+}
+EOF
+
+# 9. Replace src/App.tsx so that it uses the BokehComponent
+cat > src/App.tsx << EOF
+import { BokehComponent } from './BokehComponent.tsx'
+
+function App() {
+  return (
+    <>
+      <BokehComponent />
+    </>
+  )
+}
+
+export default App
+EOF
+
+# 10. Rebuild and serve
+# npm run dev
+# In a web browser navigate to http://localhost:5173/
diff --git a/ci/typescript/create_vue_vite.sh b/ci/typescript/create_vue_vite.sh
index 9e5bd6a..9892b8f 100755
--- a/ci/typescript/create_vue_vite.sh
+++ b/ci/typescript/create_vue_vite.sh
@@ -49,7 +49,7 @@ EOF
 # 7. Add BokehJS dependency to this project. This assumes the package has been built and copied to the root directory of this repository as outlined in the top-level README.md.
 npm install ../../../../bokeh-bokehjs-3.8.0-dev.1.tgz
 
-# 8. Create a new file of src/components/BokehComponent.vue with code to create BokehJS plot
+# 8. Create a new file src/components/BokehComponent.vue containing a BokehJS plot component
 mkdir -p src/components
 cat > src/components/BokehComponent.vue << EOF
 <script setup lang="ts">
diff --git a/recipes/src/recipes/typescript/index.ts b/recipes/src/recipes/typescript/index.ts
index cc9ddb6..61e3298 100644
--- a/recipes/src/recipes/typescript/index.ts
+++ b/recipes/src/recipes/typescript/index.ts
@@ -1,3 +1,4 @@
+export * from './react_vite_recipe';
 export * from './vanilla_rspack_recipe';
 export * from './vanilla_vite_recipe';
 export * from './vanilla_webpack_recipe';
diff --git a/recipes/src/recipes/typescript/react_vite_recipe.ts b/recipes/src/recipes/typescript/react_vite_recipe.ts
new file mode 100644
index 0000000..33f0ffd
--- /dev/null
+++ b/recipes/src/recipes/typescript/react_vite_recipe.ts
@@ -0,0 +1,119 @@
+import { Recipe } from '../../recipe';
+import { CommandStep, CreateFileStep, RemoveFilesStep, ReplaceFileStep } from '../../step';
+import { baseTypeScriptExample } from './common';
+
+export class ReactViteRecipe extends Recipe {
+  constructor() {
+    super(
+      'typescript',
+      'react',
+      'vite',
+      'Create an initial basic project using `create-vite`.'
+    );
+
+    this.add(new CommandStep(
+      'Create base `vite` project',
+      ['npm create vite@latest . -- --template react-ts --yes']
+    ));
+
+    this.add(new CommandStep(
+      'Build and run initial basic project',
+      ['npm install', 'npm run dev'],
+      'In a web browser navigate to http://localhost:5173/',
+      true
+    ));
+
+    this.add(new RemoveFilesStep(
+      'Simplify by removing some unwanted files',
+      ['src/assets/react.svg', 'src/App.css', 'src/index.css', 'public/vite.svg']
+    ));
+
+    this.add(new ReplaceFileStep(
+      'Replace `src/App.tsx` with a simple hello example',
+      'src/App.tsx',
+`function App() {
+  return (
+    <>
+      <div>Hello</div>
+    </>
+  )
+}
+
+export default App`)
+    );
+
+
+    this.add(new ReplaceFileStep(
+      'Remove CSS lines from `src/main.tsx` by replacing it',
+      'src/main.tsx',
+`import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)`)
+    );
+
+    this.add(new CommandStep(
+      'Build and run the minimal example',
+      ['npm run dev'],
+      'In a web browser navigate to http://localhost:5173/',
+      true
+    ));
+
+    this.add(new CommandStep(
+      'Add BokehJS dependency to this project. This assumes the package has been built and ' +
+      'copied to the root directory of this repository as outlined in the top-level `README.md`.',
+      ['npm install ../../../../bokeh-bokehjs-3.8.0-dev.1.tgz']
+    ));
+
+    this.add(new CreateFileStep(
+      'Create a new file `src/components/BokehComponent.tsx` containing a BokehJS plot component',
+      'src/BokehComponent.tsx',
+      "import { useEffect, useRef } from 'react'\n" +
+      baseTypeScriptExample.import + "\n" +
+      baseTypeScriptExample.version + "\n" +
+      baseTypeScriptExample.function + "\n" +
+`export function BokehComponent() {
+  const shown = useRef(false);
+  useEffect(() => {
+    if (!shown.current) {` + "\n" +
+    '        ' + baseTypeScriptExample.show() +
+`    shown.current = true;
+    }
+  }, [])
+
+  return (
+    <>
+      <div id="target"></div>
+    </>
+  )
+}`)
+    );
+
+    this.add(new ReplaceFileStep(
+      'Replace `src/App.tsx` so that it uses the `BokehComponent`',
+      'src/App.tsx',
+`import { BokehComponent } from './BokehComponent.tsx'
+
+function App() {
+  return (
+    <>
+      <BokehComponent />
+    </>
+  )
+}
+
+export default App`)
+    );
+
+    this.add(new CommandStep(
+      'Rebuild and serve',
+      ['npm run dev'],
+      'In a web browser navigate to http://localhost:5173/'
+    ));
+  }
+}
diff --git a/recipes/src/recipes/typescript/vue_vite_recipe.ts b/recipes/src/recipes/typescript/vue_vite_recipe.ts
index 2f255b9..7960dda 100644
--- a/recipes/src/recipes/typescript/vue_vite_recipe.ts
+++ b/recipes/src/recipes/typescript/vue_vite_recipe.ts
@@ -61,7 +61,7 @@ createApp(App).mount('#app')`)
     ));
 
     this.add(new CreateFileStep(
-      'Create a new file of `src/components/BokehComponent.vue` with code to create BokehJS plot',
+      'Create a new file `src/components/BokehComponent.vue` containing a BokehJS plot component',
       'src/components/BokehComponent.vue',
       '<script setup lang="ts">\n' +
       "import { useTemplateRef, onMounted } from 'vue'\n" +
diff --git a/recipes/src/util.ts b/recipes/src/util.ts
index 08b3122..bf5f72e 100644
--- a/recipes/src/util.ts
+++ b/recipes/src/util.ts
@@ -8,11 +8,10 @@ export function fileExtension(filename: string): string {
 export function languageFromExtension(filename: string): string {
   const extension = fileExtension(filename);
   switch (extension) {
-    case '.html': {
-      return 'html';
-    }
-    case '.json': {
-      return 'json';
+    case '.html':
+    case '.json':
+    case '.tsx': {
+      return extension;
     }
     case '.ts':
     case '.vue': {
diff --git a/typescript/react_vite/README.md b/typescript/react_vite/README.md
new file mode 100644
index 0000000..12bc936
--- /dev/null
+++ b/typescript/react_vite/README.md
@@ -0,0 +1,138 @@
+# React vite typescript example
+
+Create an initial basic project using `create-vite`.
+
+1. Create base `vite` project
+
+    ```bash
+    npm create vite@latest . -- --template react-ts --yes
+    ```
+
+2. Build and run initial basic project
+
+    ```bash
+    npm install
+    npm run dev
+    ```
+
+    In a web browser navigate to http://localhost:5173/
+
+3. Simplify by removing some unwanted files
+
+    ```bash
+    rm src/assets/react.svg src/App.css src/index.css public/vite.svg
+    ```
+
+4. Replace `src/App.tsx` with a simple hello example containing
+
+    ```.tsx
+    function App() {
+      return (
+        <>
+          <div>Hello</div>
+        </>
+      )
+    }
+
+    export default App
+    ```
+
+5. Remove CSS lines from `src/main.tsx` by replacing it containing
+
+    ```.tsx
+    import { StrictMode } from 'react'
+    import { createRoot } from 'react-dom/client'
+    import App from './App.tsx'
+
+    createRoot(document.getElementById('root')!).render(
+      <StrictMode>
+        <App />
+      </StrictMode>,
+    )
+    ```
+
+6. Build and run the minimal example
+
+    ```bash
+    npm run dev
+    ```
+
+    In a web browser navigate to http://localhost:5173/
+
+7. Add BokehJS dependency to this project. This assumes the package has been built and copied to the root directory of this repository as outlined in the top-level `README.md`.
+
+    ```bash
+    npm install ../../../../bokeh-bokehjs-3.8.0-dev.1.tgz
+    ```
+
+8. Create a new file `src/components/BokehComponent.tsx` containing a BokehJS plot component containing
+
+    ```.tsx
+    import { useEffect, useRef } from 'react'
+    import * as Bokeh from "@bokeh/bokehjs";
+
+    console.info("BokehJS version:", Bokeh.version);
+
+    function create_bokehjs_plot(): Bokeh.Column {
+      const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
+
+      const plot = Bokeh.Plotting.figure({
+        title: "Example BokehJS plot", height: 500, width: 500,
+        x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
+      });
+
+      plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
+
+      const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
+      function button_callback() {
+        const data = source.data as any;
+        data.x.push(Math.random());
+        data.y.push(Math.random());
+        data.size.push(10 + Math.random()*30);
+        source.change.emit();
+      }
+      button.on_click(button_callback);
+
+      return new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
+    }
+
+    export function BokehComponent() {
+      const shown = useRef(false);
+      useEffect(() => {
+        if (!shown.current) {
+            Bokeh.Plotting.show(create_bokehjs_plot(), "#target");
+        shown.current = true;
+        }
+      }, [])
+
+      return (
+        <>
+          <div id="target"></div>
+        </>
+      )
+    }
+    ```
+
+9. Replace `src/App.tsx` so that it uses the `BokehComponent` containing
+
+    ```.tsx
+    import { BokehComponent } from './BokehComponent.tsx'
+
+    function App() {
+      return (
+        <>
+          <BokehComponent />
+        </>
+      )
+    }
+
+    export default App
+    ```
+
+10. Rebuild and serve
+
+    ```bash
+    npm run dev
+    ```
+
+    In a web browser navigate to http://localhost:5173/
diff --git a/typescript/vanilla_rspack/README.md b/typescript/vanilla_rspack/README.md
index eb0f622..2a86fda 100644
--- a/typescript/vanilla_rspack/README.md
+++ b/typescript/vanilla_rspack/README.md
@@ -16,7 +16,7 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed
 
 3. Create typescript configuration `tsconfig.json` containing
 
-    ```json
+    ```.json
     {
       "compilerOptions": {
         "baseUrl": ".",
@@ -58,7 +58,7 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed
 
 5. Create HTML file `assets/index.html` containing
 
-    ```html
+    ```.html
     <!DOCTYPE html>
     <html>
     <head>
@@ -79,7 +79,7 @@ This is almost identical to the vanilla webpack example, as `rspack` is designed
 
 7. Add `build` and `serve` commands to the `scripts` section of `package.json`
 
-    ```json
+    ```.json
     {
       "scripts": {
         "build": "rspack build",
diff --git a/typescript/vanilla_webpack/README.md b/typescript/vanilla_webpack/README.md
index 86d0642..9d17a99 100644
--- a/typescript/vanilla_webpack/README.md
+++ b/typescript/vanilla_webpack/README.md
@@ -14,7 +14,7 @@
 
 3. Create typescript configuration `tsconfig.json` containing
 
-    ```json
+    ```.json
     {
       "compilerOptions": {
         "baseUrl": ".",
@@ -57,7 +57,7 @@
 
 5. Create HTML file `assets/index.html` containing
 
-    ```html
+    ```.html
     <!DOCTYPE html>
     <html>
     <head>
@@ -78,7 +78,7 @@
 
 7. Add `build` and `serve` commands to the `scripts` section of `package.json`
 
-    ```json
+    ```.json
     {
       "scripts": {
         "build": "webpack build",
diff --git a/typescript/vue_vite/README.md b/typescript/vue_vite/README.md
index 2904a4e..4b8aad1 100644
--- a/typescript/vue_vite/README.md
+++ b/typescript/vue_vite/README.md
@@ -56,7 +56,7 @@ Create an initial basic project using `create-vite`.
     npm install ../../../../bokeh-bokehjs-3.8.0-dev.1.tgz
     ```
 
-8. Create a new file of `src/components/BokehComponent.vue` with code to create BokehJS plot containing
+8. Create a new file `src/components/BokehComponent.vue` containing a BokehJS plot component containing
 
     ```ts
     <script setup lang="ts">