diff --git a/projects/demo/src/modules/components/badge/badge.component.ts b/projects/demo/src/modules/components/badge/badge.component.ts
index 68fa841a32a9..b2b0136de12c 100644
--- a/projects/demo/src/modules/components/badge/badge.component.ts
+++ b/projects/demo/src/modules/components/badge/badge.component.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+import {TuiRawLoaderContent} from '@taiga-ui/addon-doc';
 import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
 
 @Component({
@@ -17,33 +17,6 @@ export class ExampleTuiBadgeComponent {
         './examples/import/insert-template.md?raw'
     );
 
-    readonly example1: TuiDocExample = {
-        HTML: import('./examples/1/index.html?raw'),
-    };
-
-    readonly example2: TuiDocExample = {
-        HTML: import('./examples/2/index.html?raw'),
-    };
-
-    readonly example3: TuiDocExample = {
-        HTML: import('./examples/3/index.html?raw'),
-    };
-
-    readonly example4: TuiDocExample = {
-        HTML: import('./examples/4/index.html?raw'),
-        LESS: import('./examples/4/index.less?raw'),
-    };
-
-    readonly example5: TuiDocExample = {
-        HTML: import('./examples/5/index.html?raw'),
-        LESS: import('./examples/5/index.less?raw'),
-    };
-
-    readonly example6: TuiDocExample = {
-        TypeScript: import('./examples/6/index.ts?raw'),
-        HTML: import('./examples/6/index.html?raw'),
-    };
-
     readonly appearanceVariants = [
         '',
         'accent',
diff --git a/projects/demo/src/modules/components/badge/badge.module.ts b/projects/demo/src/modules/components/badge/badge.module.ts
index e4bf893f7901..cea03912ee2a 100644
--- a/projects/demo/src/modules/components/badge/badge.module.ts
+++ b/projects/demo/src/modules/components/badge/badge.module.ts
@@ -1,6 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {TuiExamplePipe} from '@demo/utils';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiPlatformModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
 import {
@@ -36,6 +37,7 @@ import {TuiBadgeExample6} from './examples/6';
         TuiLabelModule,
         tuiGetDocModules(ExampleTuiBadgeComponent),
         TuiPlatformModule,
+        TuiExamplePipe,
     ],
     declarations: [
         ExampleTuiBadgeComponent,
diff --git a/projects/demo/src/modules/components/badge/badge.template.html b/projects/demo/src/modules/components/badge/badge.template.html
index a48ba87650e1..520df2588a15 100644
--- a/projects/demo/src/modules/components/badge/badge.template.html
+++ b/projects/demo/src/modules/components/badge/badge.template.html
@@ -9,7 +9,7 @@
         <tui-doc-example
             id="base"
             heading="Basic"
-            [content]="example1"
+            [content]="1 | tuiExample: 'html'"
         >
             <tui-badge-example-1></tui-badge-example-1>
         </tui-doc-example>
@@ -17,7 +17,7 @@
         <tui-doc-example
             id="sizes"
             heading="Sizes"
-            [content]="example2"
+            [content]="2 | tuiExample: 'html'"
         >
             <tui-badge-example-2></tui-badge-example-2>
         </tui-doc-example>
@@ -25,7 +25,7 @@
         <tui-doc-example
             id="content-type"
             heading="Content type (mobile platform)"
-            [content]="example3"
+            [content]="3 | tuiExample: 'html'"
         >
             <tui-badge-example-3></tui-badge-example-3>
         </tui-doc-example>
@@ -33,7 +33,7 @@
         <tui-doc-example
             id="fade"
             heading="Long value"
-            [content]="example4"
+            [content]="4 | tuiExample: 'html,less'"
         >
             <tui-badge-example-4></tui-badge-example-4>
         </tui-doc-example>
@@ -41,7 +41,7 @@
         <tui-doc-example
             id="custom"
             heading="Customization"
-            [content]="example5"
+            [content]="5 | tuiExample: 'html,less'"
         >
             <tui-badge-example-5></tui-badge-example-5>
         </tui-doc-example>
@@ -49,7 +49,7 @@
         <tui-doc-example
             id="options"
             heading="Options with DI"
-            [content]="example6"
+            [content]="6 | tuiExample: 'html,ts'"
         >
             <tui-badge-example-6></tui-badge-example-6>
         </tui-doc-example>
diff --git a/projects/demo/src/modules/experimental/card-large/card-large.component.ts b/projects/demo/src/modules/experimental/card-large/card-large.component.ts
index 3f5e26530aeb..7042364abf25 100644
--- a/projects/demo/src/modules/experimental/card-large/card-large.component.ts
+++ b/projects/demo/src/modules/experimental/card-large/card-large.component.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+import {TuiRawLoaderContent} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-card',
@@ -15,59 +15,4 @@ export class ExampleTuiCardLargeComponent {
     readonly exampleHtml: TuiRawLoaderContent = import(
         './examples/import/insert-template.md?raw'
     );
-
-    readonly example1: TuiDocExample = {
-        HTML: import('./examples/1/index.html?raw'),
-        LESS: import('./examples/1/index.less?raw'),
-    };
-
-    readonly example2: TuiDocExample = {
-        HTML: import('./examples/2/index.html?raw'),
-    };
-
-    readonly example3: TuiDocExample = {
-        HTML: import('./examples/3/index.html?raw'),
-        LESS: import('./examples/3/index.less?raw'),
-    };
-
-    readonly example4: TuiDocExample = {
-        HTML: import('./examples/4/index.html?raw'),
-        LESS: import('./examples/4/index.less?raw'),
-    };
-
-    readonly example5: TuiDocExample = {
-        HTML: import('./examples/5/index.html?raw'),
-    };
-
-    readonly example6: TuiDocExample = {
-        HTML: import('./examples/6/index.html?raw'),
-        LESS: import('./examples/6/index.less?raw'),
-    };
-
-    readonly example7: TuiDocExample = {
-        HTML: import('./examples/7/index.html?raw'),
-        LESS: import('./examples/7/index.less?raw'),
-    };
-
-    readonly example8: TuiDocExample = {
-        HTML: import('./examples/8/index.html?raw'),
-    };
-
-    readonly example9: TuiDocExample = {
-        HTML: import('./examples/9/index.html?raw'),
-    };
-
-    readonly example10: TuiDocExample = {
-        HTML: import('./examples/10/index.html?raw'),
-        LESS: import('./examples/10/index.less?raw'),
-    };
-
-    readonly example11: TuiDocExample = {
-        HTML: import('./examples/11/index.html?raw'),
-        LESS: import('./examples/11/index.less?raw'),
-    };
-
-    readonly example12: TuiDocExample = {
-        HTML: import('./examples/12/index.html?raw'),
-    };
 }
diff --git a/projects/demo/src/modules/experimental/card-large/card-large.module.ts b/projects/demo/src/modules/experimental/card-large/card-large.module.ts
index bd5c55c40d8a..5c475e3036a0 100644
--- a/projects/demo/src/modules/experimental/card-large/card-large.module.ts
+++ b/projects/demo/src/modules/experimental/card-large/card-large.module.ts
@@ -1,6 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
+import {TuiExamplePipe} from '@demo/utils';
 import {tuiGetDocModules} from '@taiga-ui/addon-doc';
 import {TuiRippleModule} from '@taiga-ui/addon-mobile';
 import {TuiPlatformModule, TuiRepeatTimesModule} from '@taiga-ui/cdk';
@@ -79,6 +80,7 @@ import {TuiCardLargeExample12} from './examples/12';
         TuiPlatformModule,
         TuiLinkModule,
         TuiAppearanceDirective,
+        TuiExamplePipe,
     ],
     declarations: [
         ExampleTuiCardLargeComponent,
diff --git a/projects/demo/src/modules/experimental/card-large/card-large.template.html b/projects/demo/src/modules/experimental/card-large/card-large.template.html
index 3d32f4ccdf21..54312f9d3a3f 100644
--- a/projects/demo/src/modules/experimental/card-large/card-large.template.html
+++ b/projects/demo/src/modules/experimental/card-large/card-large.template.html
@@ -1,13 +1,13 @@
 <tui-doc-page
     header="CardLarge"
     package="EXPERIMENTAL"
-    type="components"
+    type="experimental"
 >
     <ng-template pageTab>
         <tui-doc-example
             id="basic"
             heading="Basic"
-            [content]="example1"
+            [content]="1 | tuiExample"
         >
             <tui-card-large-example-1></tui-card-large-example-1>
         </tui-doc-example>
@@ -15,7 +15,7 @@
         <tui-doc-example
             id="cell-avatar"
             heading="Avatar"
-            [content]="example2"
+            [content]="2 | tuiExample: 'html'"
         >
             <tui-card-large-example-2></tui-card-large-example-2>
         </tui-doc-example>
@@ -23,7 +23,7 @@
         <tui-doc-example
             id="single"
             heading="Single item"
-            [content]="example3"
+            [content]="3 | tuiExample: 'html,less'"
         >
             <tui-card-large-example-3></tui-card-large-example-3>
         </tui-doc-example>
@@ -31,7 +31,7 @@
         <tui-doc-example
             id="cards-list"
             heading="Cards List"
-            [content]="example4"
+            [content]="4 | tuiExample: 'html,less'"
         >
             <tui-card-large-example-4></tui-card-large-example-4>
         </tui-doc-example>
@@ -39,7 +39,7 @@
         <tui-doc-example
             id="cell-list"
             heading="Cell List"
-            [content]="example5"
+            [content]="5 | tuiExample: 'html'"
         >
             <tui-card-large-example-5></tui-card-large-example-5>
         </tui-doc-example>
@@ -47,7 +47,7 @@
         <tui-doc-example
             id="cell-list-columns"
             heading="Cell List (2 columns)"
-            [content]="example6"
+            [content]="6 | tuiExample: 'html,less'"
             [fullsize]="true"
         >
             <tui-card-large-example-6></tui-card-large-example-6>
@@ -56,7 +56,7 @@
         <tui-doc-example
             id="cell-list-headless"
             heading="Cell List (actions)"
-            [content]="example7"
+            [content]="7 | tuiExample: 'html,less'"
         >
             <tui-card-large-example-7></tui-card-large-example-7>
         </tui-doc-example>
@@ -64,7 +64,7 @@
         <tui-doc-example
             id="align"
             heading="Footer alignment"
-            [content]="example8"
+            [content]="8 | tuiExample: 'html'"
         >
             <tui-card-large-example-8></tui-card-large-example-8>
         </tui-doc-example>
@@ -72,7 +72,7 @@
         <tui-doc-example
             id="map"
             heading="Map"
-            [content]="example9"
+            [content]="9 | tuiExample: 'html'"
             [fullsize]="true"
         >
             <tui-card-large-example-9></tui-card-large-example-9>
@@ -81,7 +81,7 @@
         <tui-doc-example
             id="image"
             heading="Image"
-            [content]="example10"
+            [content]="10 | tuiExample: 'html,less'"
         >
             <tui-card-large-example-10></tui-card-large-example-10>
         </tui-doc-example>
@@ -89,7 +89,7 @@
         <tui-doc-example
             id="image-dark"
             heading="Image-dark"
-            [content]="example11"
+            [content]="11 | tuiExample: 'html,less'"
         >
             <tui-card-large-example-11></tui-card-large-example-11>
         </tui-doc-example>
@@ -97,7 +97,7 @@
         <tui-doc-example
             id="paddings"
             heading="Paddings and radiuses"
-            [content]="example12"
+            [content]="12 | tuiExample: 'html'"
         >
             <tui-card-large-example-12></tui-card-large-example-12>
         </tui-doc-example>
diff --git a/projects/demo/src/utils/example.pipe.ts b/projects/demo/src/utils/example.pipe.ts
new file mode 100644
index 000000000000..e3883e33ceb1
--- /dev/null
+++ b/projects/demo/src/utils/example.pipe.ts
@@ -0,0 +1,34 @@
+import {inject, Pipe, PipeTransform} from '@angular/core';
+import {TuiDocExample, TuiDocPageComponent} from '@taiga-ui/addon-doc';
+
+const toKebab: (str: string) => string = str =>
+    str.replaceAll(
+        /[A-Z]+(?![a-z])|[A-Z]/g,
+        ($, ofs) => (ofs ? '-' : '') + $.toLowerCase(),
+    );
+
+@Pipe({name: 'tuiExample', standalone: true})
+export class TuiExamplePipe implements PipeTransform {
+    docPage = inject(TuiDocPageComponent);
+
+    transform(
+        index: number,
+        formats:
+            | 'html,less'
+            | 'html,ts,less'
+            | 'html,ts'
+            | 'html'
+            | 'ts' = 'html,ts,less',
+    ): TuiDocExample {
+        return Object.fromEntries(
+            formats
+                .split(',')
+                .map(format => [
+                    format.toUpperCase(),
+                    import(
+                        `../modules/${this.docPage.type}/${toKebab(this.docPage.header)}/examples/${index}/index.${format}?raw`
+                    ),
+                ]),
+        );
+    }
+}
diff --git a/projects/demo/src/utils/index.ts b/projects/demo/src/utils/index.ts
index 3c2265513b3a..60f992707113 100644
--- a/projects/demo/src/utils/index.ts
+++ b/projects/demo/src/utils/index.ts
@@ -1 +1,2 @@
+export * from './example.pipe';
 export * from './load-assets';