feat: add demo iframes and update application template links across various Intlayer setup guides for enhanced user experience and accessibility

aymericzip · aymericzip · commit 32f0a5380b99 · 2025-11-02T22:00:28.000+01:00
diff --git a/docs/docs/en/intlayer_with_astro.md b/docs/docs/en/intlayer_with_astro.md
@@ -24,8 +24,6 @@ history:
 
 # Translate your Astro website using Intlayer | Internationalization (i18n)
 
-See [Application Template](https://github.com/aymericzip/intlayer-astro-template) on GitHub.
-
 ## What is Intlayer?
 
 **Intlayer** is an innovative, open-source internationalization (i18n) library designed to simplify multilingual support in modern web applications.
@@ -41,6 +39,16 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in Astro
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-astro-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-astro-template) on GitHub.
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using your package manager:
diff --git a/docs/docs/en/intlayer_with_create_react_app.md b/docs/docs/en/intlayer_with_create_react_app.md
@@ -24,6 +24,14 @@ history:
 
 # Translate your Create React App website using Intlayer | Internationalization (i18n)
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-react-cra-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 See [Application Template](https://github.com/aymericzip/intlayer-react-cra-template) on GitHub.
 
 ## What is Intlayer?
diff --git a/docs/docs/en/intlayer_with_lynx+react.md b/docs/docs/en/intlayer_with_lynx+react.md
@@ -26,6 +26,14 @@ history:
 
 See [Application Template](https://github.com/aymericzip/intlayer-lynx-template) on GitHub.
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-lynx-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## What is Intlayer?
 
 **Intlayer** is an **innovative, open-source internationalization (i18n) library** that simplifies multilingual support in modern applications. It works in many JavaScript/TypeScript environments, **including Lynx** (via the `react-intlayer` package).
diff --git a/docs/docs/en/intlayer_with_nestjs.md b/docs/docs/en/intlayer_with_nestjs.md
@@ -42,6 +42,16 @@ By internationalizing the backend, your application not only respects cultural d
 
 ## Getting Started
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-nestjs-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-nestjs-template) on GitHub.
+
 ### Create a new NestJS Project
 
 ```bash packageManager="npm"
diff --git a/docs/docs/en/intlayer_with_nextjs_14.md b/docs/docs/en/intlayer_with_nextjs_14.md
@@ -37,8 +37,6 @@ history:
 
 # Translate your Next.js 14 and App Router website using Intlayer | Internationalization (i18n)
 
-See [Application Template](https://github.com/aymericzip/intlayer-next-14-template) on GitHub.
-
 ## Table of Contents
 
 <TOC/>
@@ -61,6 +59,16 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Next.js Application
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-next-14-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-next-14-template) on GitHub.
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using npm:
diff --git a/docs/docs/en/intlayer_with_nextjs_15.md b/docs/docs/en/intlayer_with_nextjs_15.md
@@ -46,10 +46,6 @@ history:
 
 # Translate your Next.js 15 website using Intlayer | Internationalization (i18n)
 
-<iframe title="The best i18n solution for Next.js? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/e_PPG7PTqGU?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
-
-See [Application Template](https://github.com/aymericzip/intlayer-next-15-template) on GitHub.
-
 ## Table of Contents
 
 <TOC/>
@@ -72,6 +68,27 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Next.js Application
 
+<Tab defaultTab="video">
+  <TabItem label="Video" value="video">
+
+<iframe title="The best i18n solution for Next.js? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/e_PPG7PTqGU?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
+
+  </TabItem>
+  <TabItem label="Code" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-next-15-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </TabItem>
+</Tab>
+
+See [Application Template](https://github.com/aymericzip/intlayer-next-15-template) on GitHub.
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using npm:
diff --git a/docs/docs/en/intlayer_with_nextjs_16.md b/docs/docs/en/intlayer_with_nextjs_16.md
@@ -27,8 +27,25 @@ history:
 
 # Translate your Next.js 16 website using Intlayer | Internationalization (i18n)
 
+<Tab defaultTab="video">
+  <TabItem label="Video" value="video">
+  
 <iframe title="The best i18n solution for Next.js? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/e_PPG7PTqGU?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
 
+  </TabItem>
+  <TabItem label="Code" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-next-16-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </TabItem>
+</Tab>
+
 See [Application Template](https://github.com/aymericzip/intlayer-next-16-template) on GitHub.
 
 ## Table of Contents
diff --git a/docs/docs/en/intlayer_with_nuxt.md b/docs/docs/en/intlayer_with_nuxt.md
@@ -44,6 +44,14 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Nuxt Application
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-nuxt-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using npm:
diff --git a/docs/docs/en/intlayer_with_react_native+expo.md b/docs/docs/en/intlayer_with_react_native+expo.md
@@ -26,8 +26,6 @@ history:
 
 # Translate your React Native and Expo website using Intlayer | Internationalization (i18n)
 
-See [Application Template](https://github.com/aymericzip/intlayer-react-native-template) on GitHub.
-
 ## Table of Contents
 
 <TOC/>
@@ -47,6 +45,16 @@ With Intlayer, you can:
 
 ## Step 1: Install Dependencies
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-react-native-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-react-native-template) on GitHub.
+
 From your React Native project, install the following packages:
 
 ```bash packageManager="npm"
diff --git a/docs/docs/en/intlayer_with_react_router_v7.md b/docs/docs/en/intlayer_with_react_router_v7.md
@@ -51,6 +51,14 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a React Router v7 Application
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-react-router-v7-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using your preferred package manager:
diff --git a/docs/docs/en/intlayer_with_tanstack.md b/docs/docs/en/intlayer_with_tanstack.md
@@ -50,6 +50,16 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Tanstack Start Application
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-tanstack-start-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-tanstack-start-template) on GitHub.
+
 ### Step 1: Create Project
 
 Start by creating a new TanStack Start project by following the [Start new project](https://tanstack.com/start/latest/docs/framework/react/quick-start) guide on the TanStack Start website.
diff --git a/docs/docs/en/intlayer_with_vite+preact.md b/docs/docs/en/intlayer_with_vite+preact.md
@@ -28,8 +28,6 @@ history:
 
 > This package is in development. See the [issue](https://github.com/aymericzip/intlayer/issues/118) for more information. Show your interest in Intlayer for Preact by liking the issue
 
-See [Application Template](https://github.com/aymericzip/intlayer-vite-preact-template) on GitHub.
-
 ## Table of Contents
 
 <TOC/>
@@ -49,6 +47,16 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Vite and Preact Application
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-vite-preact-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-vite-preact-template) on GitHub.
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using npm:
diff --git a/docs/docs/en/intlayer_with_vite+react.md b/docs/docs/en/intlayer_with_vite+react.md
@@ -25,10 +25,6 @@ history:
 
 # Translate your Vite and React website using Intlayer | Internationalization (i18n)
 
-<iframe title="The best i18n solution for Vite and React? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
-
-See [Application Template](https://github.com/aymericzip/intlayer-vite-react-template) on GitHub.
-
 ## Table of Contents
 
 <TOC/>
@@ -48,6 +44,27 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Vite and React Application
 
+<Tab defaultTab="video">
+  <TabItem label="Video" value="video">
+  
+<iframe title="The best i18n solution for Vite and React? Discover Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
+
+  </TabItem>
+  <TabItem label="Code" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-vite-react-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </TabItem>
+</Tab>
+
+See [Application Template](https://github.com/aymericzip/intlayer-vite-react-template) on GitHub.
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using npm:
diff --git a/docs/docs/en/intlayer_with_vite+vue.md b/docs/docs/en/intlayer_with_vite+vue.md
@@ -23,8 +23,6 @@ history:
 
 # Translate your Vite and Vue website using Intlayer | Internationalization (i18n)
 
-See [Application Template](https://github.com/aymericzip/intlayer-vite-vue-template) on GitHub.
-
 ## Table of Contents
 
 <TOC/>
@@ -44,6 +42,16 @@ With Intlayer, you can:
 
 ## Step-by-Step Guide to Set Up Intlayer in a Vite and Vue Application
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-vite-vue-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-vite-vue-template) on GitHub.
+
 ### Step 1: Install Dependencies
 
 Install the necessary packages using npm:
