diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReact.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReact.ts
index 3958ff00c..66cc4d51e 100644
--- a/packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReact.ts
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReact.ts
@@ -1,6 +1,7 @@
 import { getParameters } from 'codesandbox/lib/api/define'
 import { BASE_CSS, SANDBOX_CSS } from 'components/CodeSandbox/sandboxStyles'
-import { SANDBOX_IMAGES } from '../sandboxImages'
+import { SANDBOX_REACT_FOLDERS } from './sandboxReactFolders'
+import { createSandboxImages } from '../sandboxImages'
 import { loadPrettier } from 'utils/loadPrettier'
 import { createSandboxReactPackageJson } from './createSandboxReactPackageJson'
 import { createSandboxReactIndexHtml } from './createSandboxReactIndexHtml'
@@ -29,6 +30,7 @@ export const createSandboxReact = async (
     language = 'javascript',
   } = config
   const title = `${id}-react`
+  const sandboxImages = createSandboxImages(SANDBOX_REACT_FOLDERS.IMAGES)
   const { prettierConfig, formatCss, formatJs, formatTs } = await loadPrettier()
   const scriptExtension = languageToReactExtension(language)
   const isTypeScript = isLanguageTypeScript(language)
@@ -61,39 +63,39 @@ export const createSandboxReact = async (
       isBinary: false,
       content: JSON.stringify(packageJson, null, '\t'),
     },
-    [`public/index.html`]: {
+    [`${SANDBOX_REACT_FOLDERS.PUBLIC}/index.html`]: {
       isBinary: false,
       content: entryHtml,
     },
-    [`src/css/base.css`]: {
+    [`${SANDBOX_REACT_FOLDERS.CSS}/base.css`]: {
       isBinary: false,
       content: formatCss(BASE_CSS),
     },
-    [`src/css/sandbox.css`]: {
+    [`${SANDBOX_REACT_FOLDERS.CSS}/sandbox.css`]: {
       isBinary: false,
       content: formatCss(SANDBOX_CSS),
     },
-    [`src/css/embla.css`]: {
+    [`${SANDBOX_REACT_FOLDERS.CSS}/embla.css`]: {
       isBinary: false,
       content: formatCss(styles),
     },
-    [`src/js/index.${scriptExtension}`]: {
+    [`${SANDBOX_REACT_FOLDERS.JS}/index.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(entryScript),
     },
-    [`src/js/Header.${scriptExtension}`]: {
+    [`${SANDBOX_REACT_FOLDERS.JS}/Header.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(headerScript),
     },
-    [`src/js/Footer.${scriptExtension}`]: {
+    [`${SANDBOX_REACT_FOLDERS.JS}/Footer.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(footerScript),
     },
-    [`src/js/EmblaCarousel.${scriptExtension}`]: {
+    [`${SANDBOX_REACT_FOLDERS.JS}/EmblaCarousel.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(carouselScript),
     },
-    [`src/js/imageByIndex.${scriptExtension}`]: {
+    [`${SANDBOX_REACT_FOLDERS.JS}/imageByIndex.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(imagesScript),
     },
@@ -113,6 +115,6 @@ export const createSandboxReact = async (
   }
 
   return getParameters({
-    files: Object.assign({}, sandboxConfig, SANDBOX_IMAGES, sandboxOverrides),
+    files: Object.assign({}, sandboxConfig, sandboxImages, sandboxOverrides),
   })
 }
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactPackageJson.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactPackageJson.ts
index d7731fcd7..1020773c9 100644
--- a/packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactPackageJson.ts
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/React/createSandboxReactPackageJson.ts
@@ -1,4 +1,5 @@
 import docsPackageJson from 'embla-carousel-docs/package.json'
+import { SANDBOX_REACT_FOLDERS } from './sandboxReactFolders'
 import { kebabCaseToPascalCase } from 'utils/kebabCaseToPascalCase'
 import { languageToReactExtension } from '../sandboxUtils'
 import {
@@ -21,7 +22,7 @@ export const createSandboxReactPackageJson = (
     version: '1.0.0',
     description: `${kebabCaseToPascalCase(id, ' ')} Example`,
     keywords: ['react', 'starter', language],
-    main: `src/js/index.${scriptExtension}`,
+    main: `${SANDBOX_REACT_FOLDERS.JS}/index.${scriptExtension}`,
     dependencies: {
       react: dependencies.react,
       'react-dom': dependencies['react-dom'],
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/React/sandboxReactFolders.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/React/sandboxReactFolders.ts
new file mode 100644
index 000000000..88746eb83
--- /dev/null
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/React/sandboxReactFolders.ts
@@ -0,0 +1,6 @@
+export const SANDBOX_REACT_FOLDERS = {
+  PUBLIC: 'public',
+  CSS: 'src/css',
+  JS: 'src/js',
+  IMAGES: 'src/images',
+}
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Default/EmblaCarousel.js b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Default/EmblaCarousel.js
index 2e1535236..6ba9b0f98 100644
--- a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Default/EmblaCarousel.js
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/Default/EmblaCarousel.js
@@ -1,12 +1,12 @@
-import EmblaCarousel from 'embla-carousel'
-import '../css/base.css'
-import '../css/sandbox.css'
-import '../css/embla.css'
+import EmblaCarousel from 'embla-carousel';
+import '../css/base.css';
+import '../css/sandbox.css';
+import '../css/embla.css';
 
-const OPTIONS = {}
+const OPTIONS = {};
 
-const emblaNode = document.querySelector('.embla')
-const viewportNode = emblaNode.querySelector('.embla__viewport')
+const emblaNode = document.querySelector('.embla');
+const viewportNode = emblaNode.querySelector('.embla__viewport');
 
 // @ts-ignore
-const emblaApi = EmblaCarousel(viewportNode, OPTIONS)
+const emblaApi = EmblaCarousel(viewportNode, OPTIONS);
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/index.html b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/index.html
index cd83cec02..07fdddd61 100644
--- a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/index.html
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesDist/index.html
@@ -37,6 +37,6 @@ <h1 class="sandbox__header">__replace_sandbox_title__</h1>
     </main>
  
     <noscript> You need to enable JavaScript to run this app. </noscript>
-    <script src="src/js/index.__replace_sandbox_language_extension__"></script>
+    <script src="__replace_sandbox_script_src__"></script>
   </body>
 </html>
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/index.html b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/index.html
index 649c98098..a04a957bd 100644
--- a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/index.html
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/SandboxFilesSrc/index.html
@@ -37,6 +37,6 @@ <h1 class="sandbox__header">__replace_sandbox_title__</h1>
     </main>
 
     <noscript> You need to enable JavaScript to run this app. </noscript>
-    <script src="src/js/index.__replace_sandbox_language_extension__"></script>
+    <script src="__replace_sandbox_script_src__"></script>
   </body>
 </html>
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanilla.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanilla.ts
index c8967fd64..873e302f8 100644
--- a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanilla.ts
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanilla.ts
@@ -1,6 +1,7 @@
 import { getParameters } from 'codesandbox/lib/api/define'
 import { BASE_CSS, SANDBOX_CSS } from '../sandboxStyles'
-import { SANDBOX_IMAGES } from '../sandboxImages'
+import { SANDBOX_VANILLA_FOLDERS } from './sandboxVanillaFolders'
+import { createSandboxImages } from '../sandboxImages'
 import { loadPrettier } from 'utils/loadPrettier'
 import { createSandboxVanillaPackageJson } from './createSandboxVanillaPackageJson'
 import { createSandboxVanillaTsConfig } from './createSandboxVanillaTsConfig'
@@ -28,6 +29,7 @@ export const createSandboxVanilla = async (
     language = 'javascript',
   } = config
   const title = `${id}-vanilla`
+  const sandboxImages = createSandboxImages(SANDBOX_VANILLA_FOLDERS.IMAGES)
   const { prettierConfig, formatHtml, formatCss, formatJs, formatTs } =
     await loadPrettier()
   const scriptExtension = languageToVanillaExtension(language)
@@ -58,19 +60,19 @@ export const createSandboxVanilla = async (
       isBinary: false,
       content: formatHtml(entryHtml),
     },
-    [`src/css/base.css`]: {
+    [`${SANDBOX_VANILLA_FOLDERS.CSS}/base.css`]: {
       isBinary: false,
       content: formatCss(BASE_CSS),
     },
-    [`src/css/sandbox.css`]: {
+    [`${SANDBOX_VANILLA_FOLDERS.CSS}/sandbox.css`]: {
       isBinary: false,
       content: formatCss(SANDBOX_CSS),
     },
-    [`src/css/embla.css`]: {
+    [`${SANDBOX_VANILLA_FOLDERS.CSS}/embla.css`]: {
       isBinary: false,
       content: formatCss(styles),
     },
-    [`src/js/index.${scriptExtension}`]: {
+    [`${SANDBOX_VANILLA_FOLDERS.JS}/index.${scriptExtension}`]: {
       isBinary: false,
       content: formatScript(entryScript),
     },
@@ -90,6 +92,6 @@ export const createSandboxVanilla = async (
   }
 
   return getParameters({
-    files: Object.assign({}, sandboxConfig, SANDBOX_IMAGES, sandboxOverrides),
+    files: Object.assign({}, sandboxConfig, sandboxImages, sandboxOverrides),
   })
 }
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaEntry.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaEntry.ts
index e1ae2de6f..c0a7c73bd 100644
--- a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaEntry.ts
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaEntry.ts
@@ -1,11 +1,12 @@
 import { THEME_PREFIX } from 'consts/themes'
 import { URLS } from 'consts/urls'
+import { SANDBOX_VANILLA_FOLDERS } from './sandboxVanillaFolders'
 import { getThemeFromDocument } from 'utils/getThemeFromDocument'
 import { kebabCaseToPascalCase } from 'utils/kebabCaseToPascalCase'
 import { SandboxVanillaExtensionType } from '../sandboxTypes'
 import {
   SANDBOX_REGEX_CODE,
-  SANDBOX_REGEX_LANGUAGE_EXTENSION,
+  SANDBOX_REGEX_SCRIPT_SRC,
   SANDBOX_REGEX_REPOSITORY_URL,
   SANDBOX_REGEX_THEME,
   SANDBOX_REGEX_TITLE,
@@ -21,10 +22,11 @@ export const createSandboxVanillaEntry = async (
   )
   const theme = THEME_PREFIX + getThemeFromDocument()
   const title = kebabCaseToPascalCase(id, ' ')
+  const scriptSrc = `${SANDBOX_VANILLA_FOLDERS.JS}/index.${languageExtension}`
   return indexHTML.default
     .replace(SANDBOX_REGEX_THEME, theme)
     .replace(SANDBOX_REGEX_TITLE, title)
-    .replace(SANDBOX_REGEX_LANGUAGE_EXTENSION, languageExtension)
+    .replace(SANDBOX_REGEX_SCRIPT_SRC, scriptSrc)
     .replace(SANDBOX_REGEX_REPOSITORY_URL, URLS.GITHUB_ROOT)
     .replace(SANDBOX_REGEX_CODE, carouselHtml)
 }
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaImagePaths.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaImagePaths.ts
index d2883e054..17bfb90ab 100644
--- a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaImagePaths.ts
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/createSandboxVanillaImagePaths.ts
@@ -1,3 +1,5 @@
+import { SANDBOX_VANILLA_FOLDERS } from './sandboxVanillaFolders'
+
 const REMOVE_IMAGE_HASH_REGEX = /(?<=slide-\d)(.*?)(?=.jpg)/g
 const REWRITE_IMAGE_PATH_REGEX = /\/static\//g
 
@@ -6,5 +8,5 @@ export const createSandboxVanillaImagePaths = (
 ): string => {
   return carouselHtml
     .replace(REMOVE_IMAGE_HASH_REGEX, '')
-    .replace(REWRITE_IMAGE_PATH_REGEX, 'src/images/')
+    .replace(REWRITE_IMAGE_PATH_REGEX, `${SANDBOX_VANILLA_FOLDERS.IMAGES}/`)
 }
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/sandboxVanillaFolders.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/sandboxVanillaFolders.ts
new file mode 100644
index 000000000..613705e2f
--- /dev/null
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/Vanilla/sandboxVanillaFolders.ts
@@ -0,0 +1,5 @@
+export const SANDBOX_VANILLA_FOLDERS = {
+  CSS: 'src/css',
+  JS: 'src/js',
+  IMAGES: 'src/images',
+}
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxImages.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxImages.ts
index 81eaab338..7f9596616 100644
--- a/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxImages.ts
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxImages.ts
@@ -2,19 +2,23 @@ import { URLS } from 'consts/urls'
 import { arrayFromNumber } from 'utils/arrayFromNumber'
 import { SandboxConfigType } from './sandboxTypes'
 
-export const SANDBOX_IMAGE_URLS: string[] = arrayFromNumber(4).map((index) => {
+const SANDBOX_IMAGE_URLS: string[] = arrayFromNumber(4).map((index) => {
   return `${URLS.GITHUB_DOCUMENTATION_RAW}/src/assets/images/slide-${
     index + 1
   }.jpg`
 })
 
-export const SANDBOX_IMAGES: SandboxConfigType['files'] =
-  SANDBOX_IMAGE_URLS.reduce((allImages, imageUrl, index) => {
-    return {
+export const createSandboxImages = (
+  path: string,
+): SandboxConfigType['files'] => {
+  return SANDBOX_IMAGE_URLS.reduce(
+    (allImages, imageUrl, index) => ({
       ...allImages,
-      [`src/images/slide-${index + 1}.jpg`]: {
+      [`${path}/slide-${index + 1}.jpg`]: {
         isBinary: true,
         content: imageUrl,
       },
-    }
-  }, {})
+    }),
+    {},
+  )
+}
diff --git a/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxRegex.ts b/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxRegex.ts
index b1c8873a0..d42de1bf0 100644
--- a/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxRegex.ts
+++ b/packages/embla-carousel-docs/src/components/CodeSandbox/sandboxRegex.ts
@@ -1,12 +1,11 @@
 export const SANDBOX_REGEX_OPTIONS =
   /((?<=EmblaOptionsType\s\=\s)(.*))|((?<=OPTIONS\s\=\s)(.*))/
 
-export const SANDBOX_REGEX_LANGUAGE_EXTENSION =
-  /__replace_sandbox_language_extension__/g
-
 export const SANDBOX_REGEX_REPOSITORY_URL =
   /__replace_sandbox_repository_url__/g
 
+export const SANDBOX_REGEX_SCRIPT_SRC = /__replace_sandbox_script_src__/g
+
 export const SANDBOX_REGEX_IOS_PICKER_LOOP = /((?<=LOOP\s\=\s)(true|false))/
 
 export const SANDBOX_REGEX_IMAGE_IMPORT = /(?<=from\s')(.*)(?=\/images)/g
diff --git a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/InfiniteScrollSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/InfiniteScrollSandboxes.tsx
index 45ffde30b..842e3957f 100644
--- a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/InfiniteScrollSandboxes.tsx
+++ b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/InfiniteScrollSandboxes.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
+import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxVanillaFolders'
 import CarouselInfiniteScroll from 'components/CodeSandbox/React/SandboxFilesSrc/InfiniteScroll/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
@@ -47,10 +48,11 @@ const sandboxVanillaJavaScript = async (): Promise<string> => {
     ),
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_INFINITE_SCROLL_FILE_NAME}.js`]: {
-        isBinary: false,
-        content: formatJs(infiniteScroll.default),
-      },
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_INFINITE_SCROLL_FILE_NAME}.js`]:
+        {
+          isBinary: false,
+          content: formatJs(infiniteScroll.default),
+        },
     },
   })
 }
@@ -73,10 +75,11 @@ const sandboxVanillaTypeScript = async (): Promise<string> => {
     ),
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_INFINITE_SCROLL_FILE_NAME}.ts`]: {
-        isBinary: false,
-        content: formatTs(infiniteScroll.default),
-      },
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_INFINITE_SCROLL_FILE_NAME}.ts`]:
+        {
+          isBinary: false,
+          content: formatTs(infiniteScroll.default),
+        },
     },
   })
 }
diff --git a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPicker.tsx b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPicker.tsx
index 2cfce3165..87a484878 100644
--- a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPicker.tsx
+++ b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPicker.tsx
@@ -6,7 +6,7 @@ import CarouselIosPicker from 'components/CodeSandbox/React/SandboxFilesSrc/IosP
 import { iosPickerWrapperStyles } from 'components/Examples/carouselWrapperStyles'
 import { createCarouselIosPickerStyles } from 'components/Examples/createCarouselStyles'
 
-export const ID = 'embla-carousel-ios-picker'
+export const ID = 'embla-carousel-ios-style-picker'
 export const STYLES = createCarouselIosPickerStyles()
 
 export const Wrapper = styled.div`
diff --git a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPickerSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPickerSandboxes.tsx
index 722052057..c405ed087 100644
--- a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPickerSandboxes.tsx
+++ b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/IosPickerSandboxes.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
+import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxVanillaFolders'
+import { SANDBOX_REACT_FOLDERS } from 'components/CodeSandbox/React/sandboxReactFolders'
 import CarouselIosPicker from 'components/CodeSandbox/React/SandboxFilesSrc/IosPicker/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
@@ -42,7 +44,7 @@ const sandboxVanillaJavaScript = async (loop: boolean): Promise<string> => {
     carouselHtml: ReactDOMServer.renderToStaticMarkup(<CarouselIosPicker />),
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_IOS_PICKER_FILE_NAME}.js`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_IOS_PICKER_FILE_NAME}.js`]: {
         isBinary: false,
         content: formatJs(infiniteScroll.default),
       },
@@ -67,7 +69,7 @@ const sandboxVanillaTypeScript = async (loop: boolean): Promise<string> => {
     carouselHtml: ReactDOMServer.renderToStaticMarkup(<CarouselIosPicker />),
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_IOS_PICKER_FILE_NAME}.ts`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_IOS_PICKER_FILE_NAME}.ts`]: {
         isBinary: false,
         content: formatTs(infiniteScroll.default),
       },
@@ -94,7 +96,7 @@ const sandboxReactJavaScript = async (loop: boolean): Promise<string> => {
     carouselScript: carousel.default,
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${REACT_IOS_PICKER_FILE_NAME}.jsx`]: {
+      [`${SANDBOX_REACT_FOLDERS.JS}/${REACT_IOS_PICKER_FILE_NAME}.jsx`]: {
         isBinary: false,
         content: formatJs(item.default),
       },
@@ -121,7 +123,7 @@ const sandboxReactTypeScript = async (loop: boolean): Promise<string> => {
     carouselScript: carousel.default,
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${REACT_IOS_PICKER_FILE_NAME}.tsx`]: {
+      [`${SANDBOX_REACT_FOLDERS.JS}/${REACT_IOS_PICKER_FILE_NAME}.tsx`]: {
         isBinary: false,
         content: formatTs(item.default),
       },
diff --git a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/LazyLoadSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/LazyLoadSandboxes.tsx
index a7785dc8c..b45f7c8f9 100644
--- a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/LazyLoadSandboxes.tsx
+++ b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/LazyLoadSandboxes.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
+import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxVanillaFolders'
+import { SANDBOX_REACT_FOLDERS } from 'components/CodeSandbox/React/sandboxReactFolders'
 import CarouselLazyLoad from 'components/CodeSandbox/React/SandboxFilesSrc/LazyLoad/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
@@ -19,11 +21,11 @@ import {
   SANDBOX_LABELS,
 } from 'components/CodeSandbox/sandboxLabels'
 
-// TODO: Remove emblaNode from vanilla example carousels
-// TODO: Add fileStructureVanilla.ts and fileStructureReact.ts constants
+// TODO: Add sandboxVanillaFolders.ts and sandboxReactFolders.ts constants
 // TODO: Add React.FC to all components!
 // TODO: Make plugins a constant
-// TODO: Check if title can be added to each Example carousel instead of MDX
+// TODO: Fix Y-axis badges
+// TODO: Remove "The file was saved!" from node script
 
 const SHARED_CONFIG = {
   slides: SLIDES,
@@ -53,7 +55,7 @@ const sandboxVanillaJavaScript = async (): Promise<string> => {
     ),
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_LAZY_LOAD_FILE_NAME}.js`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_LAZY_LOAD_FILE_NAME}.js`]: {
         isBinary: false,
         content: formatJs(lazyLoadImage.default),
       },
@@ -79,7 +81,7 @@ const sandboxVanillaTypeScript = async (): Promise<string> => {
     ),
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_LAZY_LOAD_FILE_NAME}.ts`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_LAZY_LOAD_FILE_NAME}.ts`]: {
         isBinary: false,
         content: formatTs(lazyLoadImage.default),
       },
@@ -102,7 +104,7 @@ const sandboxReactJavaScript = async (): Promise<string> => {
     carouselScript: carousel.default,
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${REACT_LAZY_LOAD_FILE_NAME}.jsx`]: {
+      [`${SANDBOX_REACT_FOLDERS.JS}/${REACT_LAZY_LOAD_FILE_NAME}.jsx`]: {
         isBinary: false,
         content: formatJs(buttons.default),
       },
@@ -125,7 +127,7 @@ const sandboxReactTypeScript = async (): Promise<string> => {
     carouselScript: carousel.default,
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${REACT_LAZY_LOAD_FILE_NAME}.tsx`]: {
+      [`${SANDBOX_REACT_FOLDERS.JS}/${REACT_LAZY_LOAD_FILE_NAME}.tsx`]: {
         isBinary: false,
         content: formatTs(buttons.default),
       },
diff --git a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/ProgressSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/ProgressSandboxes.tsx
index 313e47a7c..5b0efb0ac 100644
--- a/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/ProgressSandboxes.tsx
+++ b/packages/embla-carousel-docs/src/components/Examples/Miscellaneous/ProgressSandboxes.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
+import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxVanillaFolders'
 import CarouselProgress from 'components/CodeSandbox/React/SandboxFilesSrc/Progress/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
@@ -46,7 +47,7 @@ const sandboxVanillaJavaScript = async (): Promise<string> => {
     ),
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_PROGRESS_FILE_NAME}.js`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_PROGRESS_FILE_NAME}.js`]: {
         isBinary: false,
         content: formatJs(progressBar.default),
       },
@@ -72,7 +73,7 @@ const sandboxVanillaTypeScript = async (): Promise<string> => {
     ),
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_PROGRESS_FILE_NAME}.ts`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_PROGRESS_FILE_NAME}.ts`]: {
         isBinary: false,
         content: formatTs(progressBar.default),
       },
diff --git a/packages/embla-carousel-docs/src/components/Examples/Navigation/ArrowsDotsSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Navigation/ArrowsDotsSandboxes.tsx
index 58b5c434b..5c3314ff8 100644
--- a/packages/embla-carousel-docs/src/components/Examples/Navigation/ArrowsDotsSandboxes.tsx
+++ b/packages/embla-carousel-docs/src/components/Examples/Navigation/ArrowsDotsSandboxes.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
+import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxVanillaFolders'
+import { SANDBOX_REACT_FOLDERS } from 'components/CodeSandbox/React/sandboxReactFolders'
 import CarouselArrowsDots from 'components/CodeSandbox/React/SandboxFilesSrc/ArrowsDots/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
@@ -47,7 +49,7 @@ const sandboxVanillaJavaScript = async (): Promise<string> => {
     ),
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_BUTTONS_FILE_NAME}.js`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_BUTTONS_FILE_NAME}.js`]: {
         isBinary: false,
         content: formatJs(arrowsDotsButtons.default),
       },
@@ -73,7 +75,7 @@ const sandboxVanillaTypeScript = async (): Promise<string> => {
     ),
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_BUTTONS_FILE_NAME}.ts`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_BUTTONS_FILE_NAME}.ts`]: {
         isBinary: false,
         content: formatTs(arrowsDotsButtons.default),
       },
@@ -96,7 +98,7 @@ const sandboxReactJavaScript = async (): Promise<string> => {
     carouselScript: carousel.default,
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${REACT_BUTTONS_FILE_NAME}.jsx`]: {
+      [`${SANDBOX_REACT_FOLDERS.JS}/${REACT_BUTTONS_FILE_NAME}.jsx`]: {
         isBinary: false,
         content: formatJs(buttons.default),
       },
@@ -119,7 +121,7 @@ const sandboxReactTypeScript = async (): Promise<string> => {
     carouselScript: carousel.default,
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${REACT_BUTTONS_FILE_NAME}.tsx`]: {
+      [`${SANDBOX_REACT_FOLDERS.JS}/${REACT_BUTTONS_FILE_NAME}.tsx`]: {
         isBinary: false,
         content: formatTs(buttons.default),
       },
diff --git a/packages/embla-carousel-docs/src/components/Examples/Navigation/ThumbsSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Navigation/ThumbsSandboxes.tsx
index 195f24f3f..ff6686ea5 100644
--- a/packages/embla-carousel-docs/src/components/Examples/Navigation/ThumbsSandboxes.tsx
+++ b/packages/embla-carousel-docs/src/components/Examples/Navigation/ThumbsSandboxes.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
+import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxVanillaFolders'
+import { SANDBOX_REACT_FOLDERS } from 'components/CodeSandbox/React/sandboxReactFolders'
 import CarouselThumbs from 'components/CodeSandbox/React/SandboxFilesSrc/Thumbs/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
@@ -47,7 +49,7 @@ const sandboxVanillaJavaScript = async (): Promise<string> => {
     ),
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_THUMBS_FILE_NAME}.js`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_THUMBS_FILE_NAME}.js`]: {
         isBinary: false,
         content: formatJs(thumbsButtons.default),
       },
@@ -73,7 +75,7 @@ const sandboxVanillaTypeScript = async (): Promise<string> => {
     ),
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_THUMBS_FILE_NAME}.ts`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_THUMBS_FILE_NAME}.ts`]: {
         isBinary: false,
         content: formatTs(thumbsButtons.default),
       },
@@ -96,7 +98,7 @@ const sandboxReactJavaScript = async (): Promise<string> => {
     carouselScript: carousel.default,
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${REACT_THUMBS_FILE_NAME}.jsx`]: {
+      [`${SANDBOX_REACT_FOLDERS.JS}/${REACT_THUMBS_FILE_NAME}.jsx`]: {
         isBinary: false,
         content: formatJs(buttons.default),
       },
@@ -119,7 +121,7 @@ const sandboxReactTypeScript = async (): Promise<string> => {
     carouselScript: carousel.default,
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${REACT_THUMBS_FILE_NAME}.tsx`]: {
+      [`${SANDBOX_REACT_FOLDERS.JS}/${REACT_THUMBS_FILE_NAME}.tsx`]: {
         isBinary: false,
         content: formatTs(buttons.default),
       },
diff --git a/packages/embla-carousel-docs/src/components/Examples/Tween/OpacitySandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Tween/OpacitySandboxes.tsx
index e0aa5f708..1dafb86f8 100644
--- a/packages/embla-carousel-docs/src/components/Examples/Tween/OpacitySandboxes.tsx
+++ b/packages/embla-carousel-docs/src/components/Examples/Tween/OpacitySandboxes.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
+import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxVanillaFolders'
 import CarouselOpacity from 'components/CodeSandbox/React/SandboxFilesSrc/Opacity/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
@@ -41,7 +42,7 @@ const sandboxVanillaJavaScript = async (): Promise<string> => {
     ),
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_TWEEN_FILE_NAME}.js`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_TWEEN_FILE_NAME}.js`]: {
         isBinary: false,
         content: formatJs(tween.default),
       },
@@ -67,7 +68,7 @@ const sandboxVanillaTypeScript = async (): Promise<string> => {
     ),
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_TWEEN_FILE_NAME}.ts`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_TWEEN_FILE_NAME}.ts`]: {
         isBinary: false,
         content: formatTs(tween.default),
       },
diff --git a/packages/embla-carousel-docs/src/components/Examples/Tween/ParallaxSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Tween/ParallaxSandboxes.tsx
index 8ecb191fd..18733d4b7 100644
--- a/packages/embla-carousel-docs/src/components/Examples/Tween/ParallaxSandboxes.tsx
+++ b/packages/embla-carousel-docs/src/components/Examples/Tween/ParallaxSandboxes.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
+import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxVanillaFolders'
 import CarouselParallax from 'components/CodeSandbox/React/SandboxFilesSrc/Parallax/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
@@ -41,7 +42,7 @@ const sandboxVanillaJavaScript = async (): Promise<string> => {
     ),
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_TWEEN_FILE_NAME}.js`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_TWEEN_FILE_NAME}.js`]: {
         isBinary: false,
         content: formatJs(tween.default),
       },
@@ -67,7 +68,7 @@ const sandboxVanillaTypeScript = async (): Promise<string> => {
     ),
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_TWEEN_FILE_NAME}.ts`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_TWEEN_FILE_NAME}.ts`]: {
         isBinary: false,
         content: formatTs(tween.default),
       },
diff --git a/packages/embla-carousel-docs/src/components/Examples/Tween/ScaleSandboxes.tsx b/packages/embla-carousel-docs/src/components/Examples/Tween/ScaleSandboxes.tsx
index dd1098a48..06d378194 100644
--- a/packages/embla-carousel-docs/src/components/Examples/Tween/ScaleSandboxes.tsx
+++ b/packages/embla-carousel-docs/src/components/Examples/Tween/ScaleSandboxes.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as ReactDOMServer from 'react-dom/server'
+import { SANDBOX_VANILLA_FOLDERS } from 'components/CodeSandbox/Vanilla/sandboxVanillaFolders'
 import CarouselScale from 'components/CodeSandbox/React/SandboxFilesSrc/Scale/EmblaCarousel'
 import { createSandboxVanilla } from 'components/CodeSandbox/Vanilla/createSandboxVanilla'
 import { createSandboxReact } from 'components/CodeSandbox/React/createSandboxReact'
@@ -41,7 +42,7 @@ const sandboxVanillaJavaScript = async (): Promise<string> => {
     ),
     language: 'javascript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_TWEEN_FILE_NAME}.js`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_TWEEN_FILE_NAME}.js`]: {
         isBinary: false,
         content: formatJs(tween.default),
       },
@@ -67,7 +68,7 @@ const sandboxVanillaTypeScript = async (): Promise<string> => {
     ),
     language: 'typescript',
     sandboxOverrides: {
-      [`src/js/${VANILLA_TWEEN_FILE_NAME}.ts`]: {
+      [`${SANDBOX_VANILLA_FOLDERS.JS}/${VANILLA_TWEEN_FILE_NAME}.ts`]: {
         isBinary: false,
         content: formatTs(tween.default),
       },
diff --git a/packages/embla-carousel-docs/src/content/pages/examples/static.mdx b/packages/embla-carousel-docs/src/content/pages/examples/static.mdx
index 41b5467b5..41d24d336 100644
--- a/packages/embla-carousel-docs/src/content/pages/examples/static.mdx
+++ b/packages/embla-carousel-docs/src/content/pages/examples/static.mdx
@@ -179,12 +179,12 @@ Add features using the [API](/api/) and the internal engine.
 <ExampleCarouselInfiniteScrollSandboxes />
 <ExampleCarouselInfiniteScroll />
 
-### IOS Picker Default
+### IOS Style Picker Default
 
 <ExampleCarouselIosPickerDefaultSandboxes />
 <ExampleCarouselIosPicker loop={false} />
 
-### IOS Picker Loop
+### IOS Style Picker Loop
 
 <ExampleCarouselIosPickerLoopSandboxes />
 <ExampleCarouselIosPicker loop={true} />