diff --git a/examples/gatsby/gatsby-ssg/gatsby-node.js b/examples/gatsby/gatsby-ssg/gatsby-node.js
index 41505eb13..78023b34d 100644
--- a/examples/gatsby/gatsby-ssg/gatsby-node.js
+++ b/examples/gatsby/gatsby-ssg/gatsby-node.js
@@ -1,9 +1,68 @@
-exports.onCreateWebpackConfig = ({ actions }) => {
-  actions.setWebpackConfig({
-    resolve: {
-      fallback: {
-        path: require.resolve("path-browserify"),
-      },
-    },
-  });
-};
\ No newline at end of file
+const path = require('path');
+
+exports.createPages = async ({ graphql, actions, reporter }) => {
+  const { createPage } = actions;
+
+  // Dynamically import the ES Module
+  const { fetchById, detachExperienceStyles } = await import('@contentful/experiences-sdk-react');
+
+  const response = await graphql(`
+    query {
+      allContentfulExperience {
+        nodes {
+          contentful_id
+          slug
+          title
+          node_locale
+          sys {
+            contentType {
+              sys {
+                id
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  if (response.errors) {
+    reporter.panicOnBuild('Error while querying Contentful data', response.errors);
+    return;
+  }
+  
+  const { useContentfulClient } = require('./src/utils/useContentfulClient.ts');
+  const client = useContentfulClient();
+  const { nodes } = response.data.allContentfulExperience;
+
+  for (const node of nodes) {
+    const { slug, title, node_locale: localeCode, contentful_id, sys } = node;
+
+    try {
+      const experienceEntry = await fetchById({
+        client,
+        experienceTypeId: sys.contentType.sys.id,
+        localeCode,
+        id: contentful_id,
+      });
+
+      let experienceStyles = '';
+      if (experienceEntry) {
+        experienceStyles = detachExperienceStyles(experienceEntry) ?? '';
+      }
+
+      createPage({
+        path: `/experience/${slug}`,
+        component: path.resolve('src/templates/experiencePage.js'),
+        context: {
+          title,
+          experienceEntryJSON: JSON.stringify(experienceEntry),
+          locale: localeCode,
+          experienceStyles,
+        },
+      });
+    } catch (err) {
+      reporter.warn(`Error creating page for slug "${slug}": ${err.message}`);
+    }
+  }
+};
diff --git a/examples/gatsby/gatsby-ssg/package-lock.json b/examples/gatsby/gatsby-ssg/package-lock.json
index 9582614d8..a876fae27 100644
--- a/examples/gatsby/gatsby-ssg/package-lock.json
+++ b/examples/gatsby/gatsby-ssg/package-lock.json
@@ -9,6 +9,8 @@
       "version": "1.0.0",
       "dependencies": {
         "@contentful/experiences-sdk-react": "^1.27.1",
+        "@contentful/rich-text-react-renderer": "^16.0.1",
+        "contentful": "^11.3.2",
         "gatsby": "^5.14.1",
         "path-browserify": "^1.0.1",
         "react": "^18.2.0",
@@ -4472,8 +4474,7 @@
       "optional": true,
       "os": [
         "linux"
-      ],
-      "peer": true
+      ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
       "version": "4.30.1",
@@ -7002,7 +7003,6 @@
       "version": "11.4.1",
       "resolved": "https://registry.npmjs.org/contentful/-/contentful-11.4.1.tgz",
       "integrity": "sha512-T1gsXMUvDpWXds0AYZS4klU1/ecGBiq6GkJZukK7DDeFgyl37sEQf0SB746FQnLbcbBB/JAtRXxoQRCUVBRAHg==",
-      "peer": true,
       "dependencies": {
         "@contentful/content-source-maps": "^0.11.7",
         "@contentful/rich-text-types": "^16.6.1",
@@ -7031,7 +7031,6 @@
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/contentful-sdk-core/-/contentful-sdk-core-9.0.1.tgz",
       "integrity": "sha512-Ao/5Y74ERPn6kjzb/8okYPuQJnikMtR+dnv0plLw8IvPomwXonLq3qom0rLSyo5KuvQkBMa9AApy1izunxW4mw==",
-      "peer": true,
       "dependencies": {
         "fast-copy": "^3.0.2",
         "lodash": "^4.17.21",
@@ -7049,14 +7048,12 @@
     "node_modules/contentful-sdk-core/node_modules/fast-copy": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/fast-copy/-/fast-copy-3.0.2.tgz",
-      "integrity": "sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ==",
-      "peer": true
+      "integrity": "sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ=="
     },
     "node_modules/contentful-sdk-core/node_modules/qs": {
       "version": "6.13.1",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.1.tgz",
       "integrity": "sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==",
-      "peer": true,
       "dependencies": {
         "side-channel": "^1.0.6"
       },
@@ -7071,7 +7068,6 @@
       "version": "4.32.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.32.0.tgz",
       "integrity": "sha512-rfgpoi08xagF3JSdtJlCwMq9DGNDE0IMh3Mkpc1wUypg9vPi786AiqeBBKcqvIkq42azsBM85N490fyZjeUftw==",
-      "peer": true,
       "engines": {
         "node": ">=16"
       },
@@ -12886,7 +12882,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/p-throttle/-/p-throttle-6.2.0.tgz",
       "integrity": "sha512-NCKkOVj6PZa6NiTmfvGilDdf6vO1rFCD3KDnkHko8dTOtkpk4cSR/VTAhhLMG9aiQ7/A9HYgEDNmxzf6hxzR3g==",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -14017,7 +14012,6 @@
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "peer": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -20201,8 +20195,7 @@
       "version": "4.30.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.30.1.tgz",
       "integrity": "sha512-UtgGb7QGgXDIO+tqqJ5oZRGHsDLO8SlpE4MhqpY9Llpzi5rJMvrK6ZGhsRCST2abZdBqIBeXW6WPD5fGK5SDwg==",
-      "optional": true,
-      "peer": true
+      "optional": true
     },
     "@rollup/rollup-linux-x64-musl": {
       "version": "4.30.1",
@@ -22092,7 +22085,6 @@
       "version": "11.4.1",
       "resolved": "https://registry.npmjs.org/contentful/-/contentful-11.4.1.tgz",
       "integrity": "sha512-T1gsXMUvDpWXds0AYZS4klU1/ecGBiq6GkJZukK7DDeFgyl37sEQf0SB746FQnLbcbBB/JAtRXxoQRCUVBRAHg==",
-      "peer": true,
       "requires": {
         "@contentful/content-source-maps": "^0.11.7",
         "@contentful/rich-text-types": "^16.6.1",
@@ -22106,8 +22098,7 @@
         "type-fest": {
           "version": "4.32.0",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.32.0.tgz",
-          "integrity": "sha512-rfgpoi08xagF3JSdtJlCwMq9DGNDE0IMh3Mkpc1wUypg9vPi786AiqeBBKcqvIkq42azsBM85N490fyZjeUftw==",
-          "peer": true
+          "integrity": "sha512-rfgpoi08xagF3JSdtJlCwMq9DGNDE0IMh3Mkpc1wUypg9vPi786AiqeBBKcqvIkq42azsBM85N490fyZjeUftw=="
         }
       }
     },
@@ -22123,7 +22114,6 @@
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/contentful-sdk-core/-/contentful-sdk-core-9.0.1.tgz",
       "integrity": "sha512-Ao/5Y74ERPn6kjzb/8okYPuQJnikMtR+dnv0plLw8IvPomwXonLq3qom0rLSyo5KuvQkBMa9AApy1izunxW4mw==",
-      "peer": true,
       "requires": {
         "@rollup/rollup-linux-x64-gnu": "^4.18.0",
         "fast-copy": "^3.0.2",
@@ -22136,14 +22126,12 @@
         "fast-copy": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/fast-copy/-/fast-copy-3.0.2.tgz",
-          "integrity": "sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ==",
-          "peer": true
+          "integrity": "sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ=="
         },
         "qs": {
           "version": "6.13.1",
           "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.1.tgz",
           "integrity": "sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==",
-          "peer": true,
           "requires": {
             "side-channel": "^1.0.6"
           }
@@ -26316,8 +26304,7 @@
     "p-throttle": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/p-throttle/-/p-throttle-6.2.0.tgz",
-      "integrity": "sha512-NCKkOVj6PZa6NiTmfvGilDdf6vO1rFCD3KDnkHko8dTOtkpk4cSR/VTAhhLMG9aiQ7/A9HYgEDNmxzf6hxzR3g==",
-      "peer": true
+      "integrity": "sha512-NCKkOVj6PZa6NiTmfvGilDdf6vO1rFCD3KDnkHko8dTOtkpk4cSR/VTAhhLMG9aiQ7/A9HYgEDNmxzf6hxzR3g=="
     },
     "package-json": {
       "version": "8.1.0",
@@ -27055,8 +27042,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "peer": true
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
     },
     "process-nextick-args": {
       "version": "2.0.1",
diff --git a/examples/gatsby/gatsby-ssg/package.json b/examples/gatsby/gatsby-ssg/package.json
index aec003412..c4b6e6be3 100644
--- a/examples/gatsby/gatsby-ssg/package.json
+++ b/examples/gatsby/gatsby-ssg/package.json
@@ -16,8 +16,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "contentful": "^11.3.2",
     "@contentful/experiences-sdk-react": "^1.27.1",
+    "@contentful/rich-text-react-renderer": "^16.0.1",
+    "contentful": "^11.3.2",
     "gatsby": "^5.14.1",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",
diff --git a/examples/gatsby/gatsby-ssg/src/pages/ExperienceSlugExample.tsx b/examples/gatsby/gatsby-ssg/src/pages/ExperienceSlugExample.tsx
index 7ddda9642..e08cd5fe7 100644
--- a/examples/gatsby/gatsby-ssg/src/pages/ExperienceSlugExample.tsx
+++ b/examples/gatsby/gatsby-ssg/src/pages/ExperienceSlugExample.tsx
@@ -1,61 +1,25 @@
-import path from 'path';
-import { fetchById, detachExperienceStyles } from '@contentful/experiences-sdk-react';
+import React from 'react'
+import { ExperienceRoot, useFetchBySlug } from '@contentful/experiences-sdk-react';
 import { useContentfulClient } from '../utils/useContentfulClient';
 
-exports.createPages = async ({ graphql, actions, reporter }: any) => {
-  const { client } = useContentfulClient();
-  const { createPage } = actions;
-
-  // Assume that your experience type id is "experience"
-  const response = await graphql(`
-    allContentfulExperience {
-      nodes {
-        contentful_id
-        slug
-        title
-        node_locale
-        sys {
-          contentType {
-            sys {
-              id
-            }
-          }
-        }
-      }
-    }
-  `);
-
-  if (response.errors) {
-    // handle errors
-  }
+const slug = 'ExperienceSlugExample'
+const localeCode = 'en-US';
+const experienceTypeId = process.env.GATSBY_CTFL_EXPERIENCE_TYPE || '';
 
-  const { nodes } = response.data.allContentfulExperience;
-
-  for (const node of nodes) {
-    const { slug, title, node_locale: localeCode, contentful_id, sys } = node;
-
-    const experienceEntry = await fetchById({
-        client,
-        experienceTypeId: sys.contentType.sys.id,
-        localeCode,
-        id: contentful_id
-    });
+export default function ExperienceSlugExample() {
+  const { client } = useContentfulClient();
 
-    let experienceStyles = '';
+  const { experience, error, isLoading } = useFetchBySlug({
+    slug,
+    localeCode,
+    client,
+    experienceTypeId,
+  });
 
-    if (experienceEntry) {
-      experienceStyles = detachExperienceStyles(experienceEntry) ?? '';
-    }
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>{error.message}</div>;
 
-    createPage({
-      path: `/experience/${slug}`,
-      component: path.resolve('src/templates/experiencePage.js'),
-      context: {
-        title,
-        experienceEntryJSON: JSON.stringify(experienceEntry),
-        locale: localeCode,
-        experienceStyles
-      }
-    });
-  }
-};
\ No newline at end of file
+  return (
+    <ExperienceRoot experience={experience} locale={localeCode} />
+  )
+}
diff --git a/examples/gatsby/gatsby-ssg/src/utils/useContentfulClient.ts b/examples/gatsby/gatsby-ssg/src/utils/useContentfulClient.ts
index 53408a3fb..6775b27c3 100644
--- a/examples/gatsby/gatsby-ssg/src/utils/useContentfulClient.ts
+++ b/examples/gatsby/gatsby-ssg/src/utils/useContentfulClient.ts
@@ -7,11 +7,11 @@ export const useContentfulClient = () => {
 
   const client = useMemo(() => {
     const clientConfig = {
-      space: process.env.GATSBY_CTFL_SPACE || 'son9ld5ewssk',
-      environment: process.env.GATSBY_CTFL_ENVIRONMENT || 'master',
-      host: isPreview ? `preview.${process.env.GATSBY_CTFL_DOMAIN}` || 'cdn.contentful.com' : `cdn.${process.env.GATSBY_CTFL_DOMAIN}` || 'cdn.contentful.com',
-      accessToken: isPreview ? process.env.GATSBY_CTFL_PREVIEW_ACCESS_TOKEN || 'kHi665AtkIuAWgln1xbsf_jvoMPva4AsK62hff0_lio': process.env.GATSBY_CTFL_ACCESS_TOKEN || 'jqD43tJfgQG9Djsrlp9IcpxJepE416qmOdaemfzoxnE',
-      experienceTypeId: process.env.GATSBY_CTFL_EXPERIENCE_TYPE || 'hostedLayout',
+      space: process.env.GATSBY_CTFL_SPACE || '',
+      environment: process.env.GATSBY_CTFL_ENVIRONMENT || '',
+      host: isPreview ? `preview.${process.env.GATSBY_CTFL_DOMAIN}` || 'preview.contentful.com' : `cdn.${process.env.GATSBY_CTFL_DOMAIN}` || 'cdn.contentful.com',
+      accessToken: isPreview ? process.env.GATSBY_CTFL_PREVIEW_ACCESS_TOKEN || '': process.env.GATSBY_CTFL_ACCESS_TOKEN || '',
+      experienceTypeId: process.env.GATSBY_CTFL_EXPERIENCE_TYPE || '',
     };
     return createClient(clientConfig);
   }, []);
diff --git a/examples/gatsby/gatsby-ssg/tsconfig.json b/examples/gatsby/gatsby-ssg/tsconfig.json
index 25419bbe2..6d6a2b31f 100644
--- a/examples/gatsby/gatsby-ssg/tsconfig.json
+++ b/examples/gatsby/gatsby-ssg/tsconfig.json
@@ -98,5 +98,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
-  "include": ["./src/**/*", "./gatsby-node.ts", "./gatsby-config.ts", "./plugins/**/*"]
+  "include": ["./src/**/*", "gatsby-node.js", "./gatsby-config.ts", "./plugins/**/*"]
 }