diff --git a/projects/addon-doc/README.md b/projects/addon-doc/README.md
index 14e765f1b661..c1c28e4dc8f1 100644
--- a/projects/addon-doc/README.md
+++ b/projects/addon-doc/README.md
@@ -116,9 +116,6 @@ npm i @taiga-ui/addon-doc
    ```typescript
    import {Component} from '@angular/core';
 
-   import {default as exampleHtml} from '!!raw-loader!./examples/1/index.html';
-   import {default as exampleTs} from '!!raw-loader!./examples/1/index.ts';
-
    @Component({
      selector: 'super-component',
      templateUrl: './account.template.html',
@@ -126,8 +123,8 @@ npm i @taiga-ui/addon-doc
    export class SuperComponent {
      // Keys would be used as tabs for code example
      readonly example = {
-       TypeScript: exampleTs,
-       HTML: exampleHtml,
+       TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+       HTML: import('!!raw-loader!./examples/1/index.html'),
      };
 
      readonly inputVariants = ['input 1', 'input 2'];
diff --git a/projects/addon-doc/schematics/doc-page/files/component/__name@dasherize__/__name@dasherize__.component.ts b/projects/addon-doc/schematics/doc-page/files/component/__name@dasherize__/__name@dasherize__.component.ts
index 62c806f00acc..816fca74ff19 100644
--- a/projects/addon-doc/schematics/doc-page/files/component/__name@dasherize__/__name@dasherize__.component.ts
+++ b/projects/addon-doc/schematics/doc-page/files/component/__name@dasherize__/__name@dasherize__.component.ts
@@ -1,7 +1,4 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-<% for(let i =1; i<=samples; i++) {%>import * as example<%=i%>Html from '!!raw-loader!./examples/<%=i%>/index.html';
-import * as example<%=i%>Ts from '!!raw-loader!./examples/<%=i%>/index.ts';
-<%}%>import {default as exampleImportModule} from '!!raw-loader!./import/import-module.txt';
 
 @Component({
     selector: 'example-<%= dasherize(name) %>',
@@ -9,10 +6,10 @@ import * as example<%=i%>Ts from '!!raw-loader!./examples/<%=i%>/index.ts';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Example<%= classify(name) %>Component {
-    <% for(let i =1; i<=samples; i++) {%>readonly example<%=i%>: IFrontEndExample = {
-            TypeScript: example<%=i%>Ts,
-            HTML: example<%=i%>Html,
+    <% for(let i =1; i<=samples; i++) {%>readonly example<%=i%> = {
+            TypeScript: import('!!raw-loader!./examples/<%=i%>/index.ts'),
+            HTML: import('!!raw-loader!./examples/<%=i%>/index.html'),
         };
     <% } %>
-    readonly exampleImportModule = exampleImportModule;
+    readonly exampleImportModule = import('!!raw-loader!./import/import-module.txt');
 }
diff --git a/projects/addon-doc/src/interfaces/code-editor.ts b/projects/addon-doc/src/interfaces/code-editor.ts
index d50b7b5b2d8c..2468decdc2f0 100644
--- a/projects/addon-doc/src/interfaces/code-editor.ts
+++ b/projects/addon-doc/src/interfaces/code-editor.ts
@@ -1,15 +1,15 @@
 export interface TuiCodeEditor {
     readonly name: string;
     edit(component: string, id: string, files: Record<string, string>): Promise<void>;
+}
 
+/**
+ * @deprecated use {@link TuiCodeEditor}
+ */
+export interface CodeEditor extends TuiCodeEditor {
     /**
      * @deprecated
      * use `edit` method instead of `open`
      */
     open(component: string, sampleId: string, files: Record<string, string>): void;
 }
-
-/**
- * @deprecated use {@link TuiCodeEditor}
- */
-export type CodeEditor = TuiCodeEditor;
diff --git a/projects/demo/src/modules/app/stackblitz/stackblitz.service.ts b/projects/demo/src/modules/app/stackblitz/stackblitz.service.ts
index 2770ee9ac229..ecdf49a58425 100644
--- a/projects/demo/src/modules/app/stackblitz/stackblitz.service.ts
+++ b/projects/demo/src/modules/app/stackblitz/stackblitz.service.ts
@@ -93,14 +93,4 @@ export class TuiStackblitzService implements TuiCodeEditor {
             tags: ['Angular', 'Taiga UI', 'Angular components', 'UI Kit'],
         });
     }
-
-    /**
-     * @deprecated use `edit` method instead of `open`
-     */
-    open(component: string, sampleId: string, files: Record<string, string>): void {
-        // eslint-disable-next-line
-        this.edit(component, sampleId, files).then(() =>
-            console.info('project is opened'),
-        );
-    }
 }
diff --git a/projects/demo/src/modules/charts/axes/axes.component.ts b/projects/demo/src/modules/charts/axes/axes.component.ts
index 230587951321..6230752de101 100644
--- a/projects/demo/src/modules/charts/axes/axes.component.ts
+++ b/projects/demo/src/modules/charts/axes/axes.component.ts
@@ -6,17 +6,7 @@ import {
     TuiLineHandler,
     TuiLineTypeT,
 } from '@taiga-ui/addon-charts';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-axes',
@@ -25,19 +15,19 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiAxesComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
     readonly lineVariants: readonly TuiLineTypeT[] = [
diff --git a/projects/demo/src/modules/charts/axes/examples/import/import-module.md b/projects/demo/src/modules/charts/axes/examples/import/import-module.md
new file mode 100644
index 000000000000..e63c15c4762e
--- /dev/null
+++ b/projects/demo/src/modules/charts/axes/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiAxesModule} from '@taiga-ui/addon-charts';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiAxesModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/charts/axes/examples/import/import-module.txt b/projects/demo/src/modules/charts/axes/examples/import/import-module.txt
deleted file mode 100644
index c799939f13a8..000000000000
--- a/projects/demo/src/modules/charts/axes/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiAxesModule} from '@taiga-ui/addon-charts';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiAxesModule
-    ],
-...
diff --git a/projects/demo/src/modules/charts/axes/examples/import/insert-template.txt b/projects/demo/src/modules/charts/axes/examples/import/insert-template.md
similarity index 76%
rename from projects/demo/src/modules/charts/axes/examples/import/insert-template.txt
rename to projects/demo/src/modules/charts/axes/examples/import/insert-template.md
index 7637231006bc..f977543815e5 100644
--- a/projects/demo/src/modules/charts/axes/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/charts/axes/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 <tui-axes [value]="value"></tui-axes>
+```
diff --git a/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts b/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts
index 6d4f1b0e29c4..2a260dba76b9 100644
--- a/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts
+++ b/projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts
@@ -1,21 +1,11 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {getCurrencySymbol, TuiCurrency} from '@taiga-ui/addon-commerce';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiContextWithImplicit} from '@taiga-ui/cdk';
 import {formatNumber, TuiHintModeT, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 const MONTHS: readonly string[] = [
     'Jan 2019',
     'Feb',
@@ -38,19 +28,19 @@ const MONTHS: readonly string[] = [
     changeDetection,
 })
 export class ExampleTuiBarChartComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
     collapsed = false;
diff --git a/projects/demo/src/modules/charts/bar-chart/examples/import/import-module.md b/projects/demo/src/modules/charts/bar-chart/examples/import/import-module.md
new file mode 100644
index 000000000000..15a64e926c19
--- /dev/null
+++ b/projects/demo/src/modules/charts/bar-chart/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiBarChartModule} from '@taiga-ui/addon-charts';
+
+//...
+
+@NgModule({
+  imports: [
+    //  ...
+    TuiBarChartModule,
+  ],
+  //...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/charts/bar-chart/examples/import/import-module.txt b/projects/demo/src/modules/charts/bar-chart/examples/import/import-module.txt
deleted file mode 100644
index d1638f091cbb..000000000000
--- a/projects/demo/src/modules/charts/bar-chart/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiBarChartModule} from '@taiga-ui/addon-charts';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiBarChartModule
-    ],
-...
diff --git a/projects/demo/src/modules/charts/bar-chart/examples/import/insert-template.txt b/projects/demo/src/modules/charts/bar-chart/examples/import/insert-template.md
similarity index 100%
rename from projects/demo/src/modules/charts/bar-chart/examples/import/insert-template.txt
rename to projects/demo/src/modules/charts/bar-chart/examples/import/insert-template.md
diff --git a/projects/demo/src/modules/charts/bar-set/bar-set.component.ts b/projects/demo/src/modules/charts/bar-set/bar-set.component.ts
index 816c88b8e76e..711ff0457d35 100644
--- a/projects/demo/src/modules/charts/bar-set/bar-set.component.ts
+++ b/projects/demo/src/modules/charts/bar-set/bar-set.component.ts
@@ -1,27 +1,8 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
-import {default as example5Less} from '!!raw-loader!./examples/5/index.less';
-import {default as example5Ts} from '!!raw-loader!./examples/5/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-bar-set',
     templateUrl: './bar-set.template.html',
@@ -29,37 +10,37 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiBarSetComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
-        LESS: example4Less,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
     };
 
-    readonly example5: FrontEndExample = {
-        TypeScript: example5Ts,
-        HTML: example5Html,
-        LESS: example5Less,
+    readonly example5: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/5/index.ts'),
+        HTML: import('!!raw-loader!./examples/5/index.ts'),
+        LESS: import('!!raw-loader!./examples/5/index.less'),
     };
 
     collapsed = false;
diff --git a/projects/demo/src/modules/charts/bar-set/examples/import/import-module.md b/projects/demo/src/modules/charts/bar-set/examples/import/import-module.md
new file mode 100644
index 000000000000..19cdb54dd488
--- /dev/null
+++ b/projects/demo/src/modules/charts/bar-set/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiBarSetModule} from '@taiga-ui/addon-charts';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiBarSetModule,
+  ],
+})
+// ...
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/charts/bar-set/examples/import/import-module.txt b/projects/demo/src/modules/charts/bar-set/examples/import/import-module.txt
deleted file mode 100644
index e59c7d8085b0..000000000000
--- a/projects/demo/src/modules/charts/bar-set/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiBarSetModule} from '@taiga-ui/addon-charts';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiBarSetModule
-    ],
-...
diff --git a/projects/demo/src/modules/charts/bar-set/examples/import/insert-template.txt b/projects/demo/src/modules/charts/bar-set/examples/import/insert-template.md
similarity index 76%
rename from projects/demo/src/modules/charts/bar-set/examples/import/insert-template.txt
rename to projects/demo/src/modules/charts/bar-set/examples/import/insert-template.md
index a20fb5bba78d..1f8c0c9c0124 100644
--- a/projects/demo/src/modules/charts/bar-set/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/charts/bar-set/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 <tui-bar-set [value]="value"></tui-bar>
+```
diff --git a/projects/demo/src/modules/charts/bar/bar.component.ts b/projects/demo/src/modules/charts/bar/bar.component.ts
index 25ef838c5ece..0bc2444d3396 100644
--- a/projects/demo/src/modules/charts/bar/bar.component.ts
+++ b/projects/demo/src/modules/charts/bar/bar.component.ts
@@ -1,18 +1,8 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-bar',
     templateUrl: './bar.template.html',
@@ -20,19 +10,19 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiBarComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
     readonly sizeVariants: ReadonlyArray<TuiSizeS | TuiSizeL> = ['s', 'm', 'l'];
diff --git a/projects/demo/src/modules/charts/bar/examples/import/import-module.md b/projects/demo/src/modules/charts/bar/examples/import/import-module.md
new file mode 100644
index 000000000000..0cb71405a7f9
--- /dev/null
+++ b/projects/demo/src/modules/charts/bar/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiBarModule} from '@taiga-ui/addon-charts';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiBarModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/charts/bar/examples/import/import-module.txt b/projects/demo/src/modules/charts/bar/examples/import/import-module.txt
deleted file mode 100644
index bd4472fefd32..000000000000
--- a/projects/demo/src/modules/charts/bar/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiBarModule} from '@taiga-ui/addon-charts';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiBarModule
-    ],
-...
diff --git a/projects/demo/src/modules/charts/bar/examples/import/insert-template.txt b/projects/demo/src/modules/charts/bar/examples/import/insert-template.md
similarity index 75%
rename from projects/demo/src/modules/charts/bar/examples/import/insert-template.txt
rename to projects/demo/src/modules/charts/bar/examples/import/insert-template.md
index a465bd97bfe7..be576751fe6e 100644
--- a/projects/demo/src/modules/charts/bar/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/charts/bar/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 <tui-bar [value]="value"></tui-bar>
+```
diff --git a/projects/demo/src/modules/charts/line-chart/examples/import/import-module.md b/projects/demo/src/modules/charts/line-chart/examples/import/import-module.md
new file mode 100644
index 000000000000..71f1a0fc919c
--- /dev/null
+++ b/projects/demo/src/modules/charts/line-chart/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiLineChartModule} from '@taiga-ui/addon-charts';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiLineChartModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/charts/line-chart/examples/import/import-module.txt b/projects/demo/src/modules/charts/line-chart/examples/import/import-module.txt
deleted file mode 100644
index 0cfd65b835df..000000000000
--- a/projects/demo/src/modules/charts/line-chart/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiLineChartModule} from '@taiga-ui/addon-charts';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiLineChartModule,
-    ],
-...
diff --git a/projects/demo/src/modules/charts/line-chart/examples/import/insert-template.md b/projects/demo/src/modules/charts/line-chart/examples/import/insert-template.md
new file mode 100644
index 000000000000..e626721508a3
--- /dev/null
+++ b/projects/demo/src/modules/charts/line-chart/examples/import/insert-template.md
@@ -0,0 +1,9 @@
+```html
+<tui-line-chart
+  [x]="0"
+  [y]="0"
+  [width]="200"
+  [height]="100"
+  [value]="value"
+></tui-line-chart>
+```
diff --git a/projects/demo/src/modules/charts/line-chart/examples/import/insert-template.txt b/projects/demo/src/modules/charts/line-chart/examples/import/insert-template.txt
deleted file mode 100644
index 21adcd00d443..000000000000
--- a/projects/demo/src/modules/charts/line-chart/examples/import/insert-template.txt
+++ /dev/null
@@ -1 +0,0 @@
-<tui-line-chart [x]="0" [y]="0" [width]="200" [height]="100" [value]="value"></tui-line-chart>
diff --git a/projects/demo/src/modules/charts/line-chart/line-chart.component.ts b/projects/demo/src/modules/charts/line-chart/line-chart.component.ts
index f8b30319bb5d..fd206ba0e5ef 100644
--- a/projects/demo/src/modules/charts/line-chart/line-chart.component.ts
+++ b/projects/demo/src/modules/charts/line-chart/line-chart.component.ts
@@ -1,29 +1,10 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiContextWithImplicit, TuiStringHandler} from '@taiga-ui/cdk';
 import {TuiPoint} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
-import {default as example5Less} from '!!raw-loader!./examples/5/index.less';
-import {default as example5Ts} from '!!raw-loader!./examples/5/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-line-chart',
     templateUrl: './line-chart.template.html',
@@ -31,37 +12,37 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiLineChartComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
-        LESS: example4Less,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
     };
 
-    readonly example5: FrontEndExample = {
-        TypeScript: example5Ts,
-        HTML: example5Html,
-        LESS: example5Less,
+    readonly example5: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/5/index.ts'),
+        HTML: import('!!raw-loader!./examples/5/index.html'),
+        LESS: import('!!raw-loader!./examples/5/index.less'),
     };
 
     readonly value: readonly TuiPoint[] = [
diff --git a/projects/demo/src/modules/charts/line-days-chart/examples/import/import-module.md b/projects/demo/src/modules/charts/line-days-chart/examples/import/import-module.md
new file mode 100644
index 000000000000..d7bb0467a720
--- /dev/null
+++ b/projects/demo/src/modules/charts/line-days-chart/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiLineDaysChartModule} from '@taiga-ui/addon-charts';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiLineDaysChartModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/charts/line-days-chart/examples/import/import-module.txt b/projects/demo/src/modules/charts/line-days-chart/examples/import/import-module.txt
deleted file mode 100644
index ff04445be6b6..000000000000
--- a/projects/demo/src/modules/charts/line-days-chart/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiLineDaysChartModule} from '@taiga-ui/addon-charts';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiLineDaysChartModule,
-    ],
-...
diff --git a/projects/demo/src/modules/charts/line-days-chart/examples/import/insert-template.md b/projects/demo/src/modules/charts/line-days-chart/examples/import/insert-template.md
new file mode 100644
index 000000000000..012491553da6
--- /dev/null
+++ b/projects/demo/src/modules/charts/line-days-chart/examples/import/insert-template.md
@@ -0,0 +1,7 @@
+```html
+<tui-line-days-chart
+  [y]="0"
+  [height]="100"
+  [value]="value"
+></tui-line-days-chart>
+```
diff --git a/projects/demo/src/modules/charts/line-days-chart/examples/import/insert-template.txt b/projects/demo/src/modules/charts/line-days-chart/examples/import/insert-template.txt
deleted file mode 100644
index e993a9ff2281..000000000000
--- a/projects/demo/src/modules/charts/line-days-chart/examples/import/insert-template.txt
+++ /dev/null
@@ -1 +0,0 @@
-<tui-line-days-chart [y]="0" [height]="100" [value]="value"></tui-line-days-chart>
diff --git a/projects/demo/src/modules/charts/line-days-chart/line-days-chart.component.ts b/projects/demo/src/modules/charts/line-days-chart/line-days-chart.component.ts
index 21e71110d1d4..9da919068229 100644
--- a/projects/demo/src/modules/charts/line-days-chart/line-days-chart.component.ts
+++ b/projects/demo/src/modules/charts/line-days-chart/line-days-chart.component.ts
@@ -1,23 +1,12 @@
 import {Component, Inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiContextWithImplicit, TuiDay, TuiStringHandler} from '@taiga-ui/cdk';
 import {TUI_MONTHS} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example2Pipe} from '!!raw-loader!./examples/2/pipe.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 // @dynamic
 @Component({
     selector: 'example-tui-line-days-chart',
@@ -26,20 +15,20 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiLineDaysChartComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: Record<string, string> = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
-        Pipe: example2Pipe,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
+        'pipe.ts': import('!!raw-loader!./examples/2/pipe.ts'),
     };
 
     readonly valueVariants: ReadonlyArray<ReadonlyArray<[TuiDay, number]>> = [
diff --git a/projects/demo/src/modules/charts/pie-chart/examples/import/import-module.md b/projects/demo/src/modules/charts/pie-chart/examples/import/import-module.md
new file mode 100644
index 000000000000..d4882d056fef
--- /dev/null
+++ b/projects/demo/src/modules/charts/pie-chart/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiPieChartModule} from '@taiga-ui/addon-charts';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiPieChartModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/charts/pie-chart/examples/import/import-module.txt b/projects/demo/src/modules/charts/pie-chart/examples/import/import-module.txt
deleted file mode 100644
index bf8c18e060d6..000000000000
--- a/projects/demo/src/modules/charts/pie-chart/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiPieChartModule} from '@taiga-ui/addon-charts';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiPieChartModule
-    ],
-...
diff --git a/projects/demo/src/modules/charts/pie-chart/examples/import/insert-template.txt b/projects/demo/src/modules/charts/pie-chart/examples/import/insert-template.md
similarity index 80%
rename from projects/demo/src/modules/charts/pie-chart/examples/import/insert-template.txt
rename to projects/demo/src/modules/charts/pie-chart/examples/import/insert-template.md
index b5d187bbf7be..1b0c55b33655 100644
--- a/projects/demo/src/modules/charts/pie-chart/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/charts/pie-chart/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 <tui-pie-chart [value]="value"></tui-pie-chart>
+```
diff --git a/projects/demo/src/modules/charts/pie-chart/pie-chart.component.ts b/projects/demo/src/modules/charts/pie-chart/pie-chart.component.ts
index 4378743f160e..90186ccb446a 100644
--- a/projects/demo/src/modules/charts/pie-chart/pie-chart.component.ts
+++ b/projects/demo/src/modules/charts/pie-chart/pie-chart.component.ts
@@ -1,21 +1,11 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {getCurrencySymbol, TuiCurrency} from '@taiga-ui/addon-commerce';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {round, sum, TuiContextWithImplicit} from '@taiga-ui/cdk';
 import {formatNumber, TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-pie-chart',
     templateUrl: './pie-chart.template.html',
@@ -23,19 +13,19 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiPieChartComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
     readonly valueVariants = [
diff --git a/projects/demo/src/modules/charts/ring-chart/examples/import/import-module.md b/projects/demo/src/modules/charts/ring-chart/examples/import/import-module.md
new file mode 100644
index 000000000000..02f6cc42372a
--- /dev/null
+++ b/projects/demo/src/modules/charts/ring-chart/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiRingChartModule} from '@taiga-ui/addon-charts';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiRingChartModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/charts/ring-chart/examples/import/import-module.txt b/projects/demo/src/modules/charts/ring-chart/examples/import/import-module.txt
deleted file mode 100644
index de14d2938a70..000000000000
--- a/projects/demo/src/modules/charts/ring-chart/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiRingChartModule} from '@taiga-ui/addon-charts';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiRingChartModule
-    ],
-...
diff --git a/projects/demo/src/modules/charts/ring-chart/examples/import/insert-template.txt b/projects/demo/src/modules/charts/ring-chart/examples/import/insert-template.md
similarity index 80%
rename from projects/demo/src/modules/charts/ring-chart/examples/import/insert-template.txt
rename to projects/demo/src/modules/charts/ring-chart/examples/import/insert-template.md
index fa75856e4cc4..0ff9c1122b82 100644
--- a/projects/demo/src/modules/charts/ring-chart/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/charts/ring-chart/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 <tui-ring-chart [value]="value"></tui-ring-chart>
+```
diff --git a/projects/demo/src/modules/charts/ring-chart/ring-chart.component.ts b/projects/demo/src/modules/charts/ring-chart/ring-chart.component.ts
index c6865ad97278..38cd3b200529 100644
--- a/projects/demo/src/modules/charts/ring-chart/ring-chart.component.ts
+++ b/projects/demo/src/modules/charts/ring-chart/ring-chart.component.ts
@@ -1,21 +1,11 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiRingChartContext} from '@taiga-ui/addon-charts';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {round, sum} from '@taiga-ui/cdk';
 import {formatNumber, TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-ring-chart',
     templateUrl: './ring-chart.template.html',
@@ -23,19 +13,19 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiRingChartComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
     readonly valueVariants = [
diff --git a/projects/demo/src/modules/components/accordion/accordion.component.ts b/projects/demo/src/modules/components/accordion/accordion.component.ts
index e11491464457..4531c8284349 100644
--- a/projects/demo/src/modules/components/accordion/accordion.component.ts
+++ b/projects/demo/src/modules/components/accordion/accordion.component.ts
@@ -5,20 +5,6 @@ import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {tuiCustomEvent} from '@taiga-ui/cdk';
 import {TUI_EXPAND_LOADED, TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-accordion',
     templateUrl: './accordion.template.html',
@@ -36,25 +22,25 @@ export class ExampleTuiAccordionComponent {
     rounded = true;
     showArrow = true;
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
     readonly example4: TuiDocExample = {
diff --git a/projects/demo/src/modules/components/accordion/examples/2/index.html b/projects/demo/src/modules/components/accordion/examples/2/index.html
index 968f0567de0b..578338865315 100644
--- a/projects/demo/src/modules/components/accordion/examples/2/index.html
+++ b/projects/demo/src/modules/components/accordion/examples/2/index.html
@@ -1,4 +1,5 @@
 <tui-accordion
+    *ngIf="svgIcons.rubles | async as lazySvg"
     class="container"
     [rounded]="false"
 >
@@ -14,7 +15,7 @@
             <div class="operation-pic">
                 <tui-svg
                     class="operation-icon"
-                    [src]="svgIcons.rubl"
+                    [src]="lazySvg?.default || ''"
                 ></tui-svg>
             </div>
             <div class="operation-title">Get your money</div>
@@ -82,7 +83,7 @@ <h3 class="form-title">Payment form</h3>
             <div class="operation-pic">
                 <tui-svg
                     class="operation-icon"
-                    [src]="svgIcons.rubl"
+                    [src]="lazySvg?.default || ''"
                 ></tui-svg>
             </div>
             <div class="operation-title">Get your money back</div>
@@ -152,7 +153,7 @@ <h3 class="form-title">Payment form</h3>
             <div class="operation-pic">
                 <tui-svg
                     class="operation-icon"
-                    [src]="svgIcons.rubl"
+                    [src]="lazySvg?.default || ''"
                 ></tui-svg>
             </div>
             <div class="operation-title">Get your neighbor's money</div>
diff --git a/projects/demo/src/modules/components/accordion/examples/2/index.ts b/projects/demo/src/modules/components/accordion/examples/2/index.ts
index 23a75f4566f3..162e55a2eadc 100644
--- a/projects/demo/src/modules/components/accordion/examples/2/index.ts
+++ b/projects/demo/src/modules/components/accordion/examples/2/index.ts
@@ -3,8 +3,6 @@ import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 
-import {default as rubl} from '!!raw-loader!./rubl.svg';
-
 class Account {
     constructor(readonly name: string, readonly balance: number) {}
 
@@ -27,7 +25,9 @@ export class TuiAccordionExample2 {
         new Account('Euro', 100),
     ];
 
-    svgIcons = {rubl};
+    svgIcons = {
+        rubles: import('!!raw-loader!./rubles.svg') as Promise<{default: string}>,
+    };
 
     testForm = new FormGroup({
         name: new FormControl(''),
diff --git a/projects/demo/src/modules/components/accordion/examples/2/rubl.svg b/projects/demo/src/modules/components/accordion/examples/2/rubles.svg
similarity index 100%
rename from projects/demo/src/modules/components/accordion/examples/2/rubl.svg
rename to projects/demo/src/modules/components/accordion/examples/2/rubles.svg
diff --git a/projects/demo/src/modules/components/accordion/examples/import/import-module.md b/projects/demo/src/modules/components/accordion/examples/import/import-module.md
new file mode 100644
index 000000000000..43f30cbecee3
--- /dev/null
+++ b/projects/demo/src/modules/components/accordion/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiAccordionModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiAccordionModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/accordion/examples/import/import-module.txt b/projects/demo/src/modules/components/accordion/examples/import/import-module.txt
deleted file mode 100644
index f0bb65a425ce..000000000000
--- a/projects/demo/src/modules/components/accordion/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiAccordionModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiAccordionModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/accordion/examples/import/insert-template.md b/projects/demo/src/modules/components/accordion/examples/import/insert-template.md
new file mode 100644
index 000000000000..a95662554ab2
--- /dev/null
+++ b/projects/demo/src/modules/components/accordion/examples/import/insert-template.md
@@ -0,0 +1,22 @@
+```html
+<tui-accordion class="container">
+  <tui-accordion-item>
+    Taiga UI cdk
+    <ng-template tuiAccordionItemContent>
+      Development kit consisting of the low level tools and abstractions used to develop Taiga UI Angular entities
+    </ng-template>
+  </tui-accordion-item>
+  <tui-accordion-item>
+    Taiga UI core
+    <ng-template tuiAccordionItemContent>
+      <div #content>Basic elements needed to develop components, directives and more using Taiga UI design system</div>
+    </ng-template>
+  </tui-accordion-item>
+  <tui-accordion-item>
+    Taiga UI kit
+    <ng-template tuiAccordionItemContent>
+      The main set of components used to build Taiga UI based Angular applications
+    </ng-template>
+  </tui-accordion-item>
+</tui-accordion>
+```
diff --git a/projects/demo/src/modules/components/accordion/examples/import/insert-template.txt b/projects/demo/src/modules/components/accordion/examples/import/insert-template.txt
deleted file mode 100644
index 3045652a6c63..000000000000
--- a/projects/demo/src/modules/components/accordion/examples/import/insert-template.txt
+++ /dev/null
@@ -1,25 +0,0 @@
-<tui-accordion class="container">
-    <tui-accordion-item>
-        Taiga UI cdk
-        <ng-template tuiAccordionItemContent>
-            Development kit consisting of the low level tools and abstractions
-            used to develop Taiga UI Angular entities
-        </ng-template>
-    </tui-accordion-item>
-    <tui-accordion-item>
-        Taiga UI core
-        <ng-template tuiAccordionItemContent>
-            <div #content>
-                Basic elements needed to develop components, directives and more
-                using Taiga UI design system
-            </div>
-        </ng-template>
-    </tui-accordion-item>
-    <tui-accordion-item>
-        Taiga UI kit
-        <ng-template tuiAccordionItemContent>
-            The main set of components used to build Taiga UI based Angular
-            applications
-        </ng-template>
-    </tui-accordion-item>
-</tui-accordion>
diff --git a/projects/demo/src/modules/components/action/action.component.ts b/projects/demo/src/modules/components/action/action.component.ts
index baf70da161f4..d9b2a96835d3 100644
--- a/projects/demo/src/modules/components/action/action.component.ts
+++ b/projects/demo/src/modules/components/action/action.component.ts
@@ -1,15 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-action',
@@ -17,20 +8,19 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiActionComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly exampleModule = exampleModule;
-
-    readonly exampleHtml = exampleHtml;
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+    };
 
     readonly iconVariants = [
         'tuiIconPrintLarge',
diff --git a/projects/demo/src/modules/components/action/examples/import/import-module.md b/projects/demo/src/modules/components/action/examples/import/import-module.md
new file mode 100644
index 000000000000..be7c15ee430b
--- /dev/null
+++ b/projects/demo/src/modules/components/action/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiActionModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiActionModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/action/examples/import/import-module.txt b/projects/demo/src/modules/components/action/examples/import/import-module.txt
deleted file mode 100644
index 72f26cb1cc73..000000000000
--- a/projects/demo/src/modules/components/action/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiActionModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiActionModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/action/examples/import/insert-template.md b/projects/demo/src/modules/components/action/examples/import/insert-template.md
new file mode 100644
index 000000000000..268d77370054
--- /dev/null
+++ b/projects/demo/src/modules/components/action/examples/import/insert-template.md
@@ -0,0 +1,16 @@
+```html
+<tui-action
+  [icon]="icon"
+  (click)="onClick()"
+>
+  Button
+</tui-action>
+
+<a
+  href="http://ng-web-apis.github.io/"
+  tuiAction
+  [icon]="icon"
+>
+  Link
+</a>
+```
diff --git a/projects/demo/src/modules/components/action/examples/import/insert-template.txt b/projects/demo/src/modules/components/action/examples/import/insert-template.txt
deleted file mode 100644
index 98abb79ea2fb..000000000000
--- a/projects/demo/src/modules/components/action/examples/import/insert-template.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<tui-action [icon]="icon" (click)="onClick()">
-    Button
-</tui-action>
-
-<a href="http://ng-web-apis.github.io/" tuiAction [icon]="icon">
-    Link
-</a>
diff --git a/projects/demo/src/modules/components/badge/badge.component.ts b/projects/demo/src/modules/components/badge/badge.component.ts
index 23728c7e7fe3..3f106128876f 100644
--- a/projects/demo/src/modules/components/badge/badge.component.ts
+++ b/projects/demo/src/modules/components/badge/badge.component.ts
@@ -1,52 +1,38 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {TuiStatusT} from '@taiga-ui/kit';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-badge',
     templateUrl: './badge.template.html',
     changeDetection,
 })
 export class ExampleTuiBadgeComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
     };
 
     readonly statusVariants: readonly TuiStatusT[] = [
diff --git a/projects/demo/src/modules/components/badge/examples/import/import-module.md b/projects/demo/src/modules/components/badge/examples/import/import-module.md
new file mode 100644
index 000000000000..d2f0d6eff7c0
--- /dev/null
+++ b/projects/demo/src/modules/components/badge/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiBadgeModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiBadgeModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/badge/examples/import/import-module.txt b/projects/demo/src/modules/components/badge/examples/import/import-module.txt
deleted file mode 100644
index 7ee3c3648810..000000000000
--- a/projects/demo/src/modules/components/badge/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiBadgeModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiBadgeModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/badge/examples/import/insert-template.txt b/projects/demo/src/modules/components/badge/examples/import/insert-template.md
similarity index 64%
rename from projects/demo/src/modules/components/badge/examples/import/insert-template.txt
rename to projects/demo/src/modules/components/badge/examples/import/insert-template.md
index 4ca9058c365c..2b9f77be8d67 100644
--- a/projects/demo/src/modules/components/badge/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/badge/examples/import/insert-template.md
@@ -1,6 +1,10 @@
+```html
 <!-- It is a number and badge shows 99+ -->
 <tui-badge [value]="100"></tui-badge>
 
-
 <!-- It is a string and badge shows 100 -->
-<tui-badge status="primary" value="100"></tui-badge>
+<tui-badge
+  status="primary"
+  value="100"
+></tui-badge>
+```
diff --git a/projects/demo/src/modules/components/badged-content/badged-content.component.ts b/projects/demo/src/modules/components/badged-content/badged-content.component.ts
index 70c3e369e565..e28926710bfd 100644
--- a/projects/demo/src/modules/components/badged-content/badged-content.component.ts
+++ b/projects/demo/src/modules/components/badged-content/badged-content.component.ts
@@ -1,43 +1,32 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-avatar',
     templateUrl: './badged-content.template.html',
     changeDetection,
 })
 export class ExampleTuiBadgedContentComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        LESS: example2Less,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
     rounded = false;
diff --git a/projects/demo/src/modules/components/badged-content/examples/import/import-module.md b/projects/demo/src/modules/components/badged-content/examples/import/import-module.md
new file mode 100644
index 000000000000..91d43b0089cd
--- /dev/null
+++ b/projects/demo/src/modules/components/badged-content/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiBadgedContentModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiBadgedContentModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/badged-content/examples/import/import-module.txt b/projects/demo/src/modules/components/badged-content/examples/import/import-module.txt
deleted file mode 100644
index aca0b0ade97c..000000000000
--- a/projects/demo/src/modules/components/badged-content/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiBadgedContentModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiBadgedContentModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/badged-content/examples/import/insert-template.md b/projects/demo/src/modules/components/badged-content/examples/import/insert-template.md
new file mode 100644
index 000000000000..43a40d076070
--- /dev/null
+++ b/projects/demo/src/modules/components/badged-content/examples/import/insert-template.md
@@ -0,0 +1,8 @@
+```html
+<tui-badged-content
+  [contentTop]="contentTop"
+  [colorTop]="colorTop"
+>
+  Content to wrap
+</tui-badged-content>
+```
diff --git a/projects/demo/src/modules/components/badged-content/examples/import/insert-template.txt b/projects/demo/src/modules/components/badged-content/examples/import/insert-template.txt
deleted file mode 100644
index 9de055b8ec59..000000000000
--- a/projects/demo/src/modules/components/badged-content/examples/import/insert-template.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-<tui-badged-content
-    [contentTop]="contentTop"
-    [colorTop]="colorTop"
->
-    Content to wrap
-</tui-badged-content>
diff --git a/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.component.ts b/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.component.ts
index 4177f4492a99..83de945197ab 100644
--- a/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.component.ts
+++ b/projects/demo/src/modules/components/breadcrumbs/breadcrumbs.component.ts
@@ -1,26 +1,20 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-breadcrumbs',
     templateUrl: './breadcrumbs.template.html',
     changeDetection,
 })
 export class ExampleTuiBreadcrumbsComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
     readonly itemsVariants = [
diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/import/import-module.md b/projects/demo/src/modules/components/breadcrumbs/examples/import/import-module.md
new file mode 100644
index 000000000000..cda69b78108c
--- /dev/null
+++ b/projects/demo/src/modules/components/breadcrumbs/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiBreadcrumbsModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiBreadcrumbsModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/import/import-module.txt b/projects/demo/src/modules/components/breadcrumbs/examples/import/import-module.txt
deleted file mode 100644
index e979987172d1..000000000000
--- a/projects/demo/src/modules/components/breadcrumbs/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiBreadcrumbsModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiBreadcrumbsModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.md b/projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.md
new file mode 100644
index 000000000000..29e66f903384
--- /dev/null
+++ b/projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.md
@@ -0,0 +1,13 @@
+```html
+<tui-breadcrumbs [size]="size">
+  <ng-container *ngFor="let item of items">
+    <a
+      *tuiBreadcrumb
+      tuiLink
+      [routerLink]="item.routerLink"
+    >
+      {{ item.caption }}
+    </a>
+  </ng-container>
+</tui-breadcrumbs>
+```
diff --git a/projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.txt b/projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.txt
deleted file mode 100644
index 9e1a5b3815b0..000000000000
--- a/projects/demo/src/modules/components/breadcrumbs/examples/import/insert-template.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<tui-breadcrumbs [size]="size">
-    <ng-container *ngFor="let item of items">
-        <a *tuiBreadcrumb tuiLink [routerLink]="item.routerLink">
-            {{ item.caption }}
-        </a>
-    </ng-container>
-</tui-breadcrumbs>
diff --git a/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts b/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts
index 63d85471c51c..a1878b6e5c51 100644
--- a/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts
+++ b/projects/demo/src/modules/components/calendar-month/calendar-month.component.ts
@@ -1,5 +1,6 @@
 import {Component, Inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
     ALWAYS_FALSE_HANDLER,
     TUI_FIRST_DAY,
@@ -12,32 +13,23 @@ import {
 } from '@taiga-ui/cdk';
 import {TuiAlertService} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-calendar-month',
     templateUrl: './calendar-month.template.html',
     changeDetection,
 })
 export class ExampleTuiCalendarMonthComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
     readonly minVariants = [TUI_FIRST_DAY, new TuiMonth(2019, 2), new TuiMonth(2007, 0)];
diff --git a/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts b/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts
index 3d100b03fdc3..fd13bb640e50 100644
--- a/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts
+++ b/projects/demo/src/modules/components/calendar-range/calendar-range.component.ts
@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
     ALWAYS_FALSE_HANDLER,
     TUI_FIRST_DAY,
@@ -17,16 +18,6 @@ import {
 } from '@taiga-ui/core';
 import {tuiCreateDefaultDayRangePeriods, TuiDayRangePeriod} from '@taiga-ui/kit';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 const TWO_DOTS: [TuiColor, TuiColor] = [TuiBaseColor.Primary, TuiBaseColor.Secondary];
 const ONE_DOT: [TuiColor] = [TuiBaseColor.Success];
 
@@ -36,21 +27,21 @@ const ONE_DOT: [TuiColor] = [TuiBaseColor.Success];
     changeDetection,
 })
 export class ExampleTuiCalendarRangeComponent {
-    readonly exampleModule = exampleModule;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
     readonly minVariants = [
diff --git a/projects/demo/src/modules/components/calendar-range/examples/import/import-module.md b/projects/demo/src/modules/components/calendar-range/examples/import/import-module.md
new file mode 100644
index 000000000000..89c8f0e2496d
--- /dev/null
+++ b/projects/demo/src/modules/components/calendar-range/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiCalendarRangeModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiCalendarRangeModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/calendar-range/examples/import/import-module.txt b/projects/demo/src/modules/components/calendar-range/examples/import/import-module.txt
deleted file mode 100644
index d908880bcff5..000000000000
--- a/projects/demo/src/modules/components/calendar-range/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiCalendarRangeModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiCalendarRangeModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/calendar/calendar.component.ts b/projects/demo/src/modules/components/calendar/calendar.component.ts
index ebbcfe414012..03f20da93634 100644
--- a/projects/demo/src/modules/components/calendar/calendar.component.ts
+++ b/projects/demo/src/modules/components/calendar/calendar.component.ts
@@ -1,5 +1,6 @@
 import {Component, Inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
     ALWAYS_FALSE_HANDLER,
     TUI_FIRST_DAY,
@@ -17,18 +18,6 @@ import {
     TuiMarkerHandler,
 } from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleFirstDayOfWeekToken} from '!!raw-loader!./examples/import/first-day-of-week-token.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 const TWO_DOTS: [TuiColor, TuiColor] = [TuiBaseColor.Primary, TuiBaseColor.Secondary];
 const ONE_DOT: [TuiColor] = [TuiBaseColor.Success];
 
@@ -38,23 +27,25 @@ const ONE_DOT: [TuiColor] = [TuiBaseColor.Success];
     changeDetection,
 })
 export class ExampleTuiCalendarComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly firstDayOfWeekToken = exampleFirstDayOfWeekToken;
-
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
+    readonly firstDayOfWeekToken = import(
+        '!!raw-loader!./examples/import/first-day-of-week-token.md'
+    );
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
     showAdjacent = true;
diff --git a/projects/demo/src/modules/components/calendar/examples/import/first-day-of-week-token.md b/projects/demo/src/modules/components/calendar/examples/import/first-day-of-week-token.md
new file mode 100644
index 000000000000..a5453f7b3eeb
--- /dev/null
+++ b/projects/demo/src/modules/components/calendar/examples/import/first-day-of-week-token.md
@@ -0,0 +1,16 @@
+```ts
+import {TuiDayOfWeek} from '@taiga-ui/cdk';
+import {TUI_FIRST_DAY_OF_WEEK} from '@taiga-ui/core';
+
+// ...
+@NgModule({
+  // ...
+  providers: [
+    {
+      provide: TUI_FIRST_DAY_OF_WEEK,
+      useValue: TuiDayOfWeek.Sunday,
+    },
+  ],
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/calendar/examples/import/first-day-of-week-token.txt b/projects/demo/src/modules/components/calendar/examples/import/first-day-of-week-token.txt
deleted file mode 100644
index ae54a94603db..000000000000
--- a/projects/demo/src/modules/components/calendar/examples/import/first-day-of-week-token.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-import {TuiDayOfWeek} from '@taiga-ui/cdk';
-import {TUI_FIRST_DAY_OF_WEEK} from '@taiga-ui/core';
-
-...
-
-providers: [
-    {
-        provide: TUI_FIRST_DAY_OF_WEEK,
-        useValue: TuiDayOfWeek.Sunday,
-    }
-]
diff --git a/projects/demo/src/modules/components/calendar/examples/import/import-module.md b/projects/demo/src/modules/components/calendar/examples/import/import-module.md
new file mode 100644
index 000000000000..28b35b84e277
--- /dev/null
+++ b/projects/demo/src/modules/components/calendar/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiCalendarModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiCalendarModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/calendar/examples/import/import-module.txt b/projects/demo/src/modules/components/calendar/examples/import/import-module.txt
deleted file mode 100644
index c8d7ba448798..000000000000
--- a/projects/demo/src/modules/components/calendar/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiCalendarModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiCalendarModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/calendar/examples/import/insert-template.txt b/projects/demo/src/modules/components/calendar/examples/import/insert-template.md
similarity index 71%
rename from projects/demo/src/modules/components/calendar/examples/import/insert-template.txt
rename to projects/demo/src/modules/components/calendar/examples/import/insert-template.md
index c14ed25d9c81..1e829cbd712d 100644
--- a/projects/demo/src/modules/components/calendar/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/calendar/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 <tui-calendar></tui-calendar>
+```
diff --git a/projects/demo/src/modules/components/card/card.component.ts b/projects/demo/src/modules/components/card/card.component.ts
index 30a6f7b795a5..8f460130c43c 100644
--- a/projects/demo/src/modules/components/card/card.component.ts
+++ b/projects/demo/src/modules/components/card/card.component.ts
@@ -1,23 +1,9 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiPaymentSystem} from '@taiga-ui/addon-commerce';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleCustomizeStyles} from '!!raw-loader!./examples/import/customize-styles.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 const BRAND_LOGOS = [
     `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="14" viewBox="0 0 12 14">
         <path fill="#424242" d="M4.7.3c-.5.4-.8 1.1-.2 1.9-1.7 1.2-2 2.7-2 4 0 1.4-.3 1.2.1 2.6 0 .1 0 .1-.1.1C.8 7.7-.2 4 2.6 2c.1-.1 0-.1-.2 0C0 3.4-.2 5.9.2 7.7c.2.8-.1 1 .2 2.1.7 2.3 1.3 2.5 2.2 2.5 1.6 0 .5-.9.6-2 0-.1.1-.1.1 0 .9 2 1.5 3.9 3.7 3.7 1.3-.2.6-.9.5-1.2-1-3.3 1.4-4.1.7-.9-.4 1.9.9 1.7 1.9 1 1-.7 2.3-5.2 1.5-7.7 0-.2-.1-.1-.1 0 0 1.6-.9 3.3-2.8 3.3-.5 0-.3.8-1.2.4-.2-.3-.5-.2-.7-.2-.2.1-.5.2-.8-.4-.1-.3-.2-.4-.4-.4-1.9-.5-2.5-3.3-.8-5.5.3.2.5.2.8-.1.2-.2.5-.4.7-.4.4-.2.6-.3.3-1.1-.3-.6-.7-.8-1-.8-.4 0-.7.2-.9.3m1.8 8.6c.5.1 1 .2 1.3.2 0 .3-.3.4-.5.4-.4 0-.8-.2-.8-.6m3.2-7.6c-.3.5-.2.8.1 1 .2.1.6.4.8.7.4.6 1.1 0 1.3-.5.2-.4.1-.9-.4-1.4-.2-.2-.5-.3-.8-.4-.4 0-.7.2-1 .6M5.8 4.6c-1 .6-1 1.8-.4 2.1.7.3 1-.6 1.4-1v-.1c0-.6-.2-1.2-.7-1.2-.1.1-.2.2-.3.2m3.3.4c-.4 0-.6.4-.8.9V6c.4.4.4 1.8 1.4 1.2.6-.3.6-1.7-.2-2.1-.1-.1-.2-.1-.4-.1M6.9 7.5c-.5.1-.5.5-.3.5.2.1.4.1.6.4.2.3.1-.1.7-.2.4 0 .3-.4 0-.5-.4-.1-.7-.2-1-.2"/>
@@ -34,26 +20,28 @@ const BRAND_LOGOS = [
     changeDetection,
 })
 export class ExampleTuiCardComponent {
-    readonly exampleCustomizeStyles = exampleCustomizeStyles;
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
+    readonly exampleCustomizeStyles = import(
+        '!!raw-loader!./examples/import/customize-styles.txt'
+    );
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
     paymentSystemVariants: readonly TuiPaymentSystem[] = [
diff --git a/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts b/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts
index 7b092d7dbe2a..efe5eadea2c6 100644
--- a/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts
+++ b/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts
@@ -1,20 +1,9 @@
 import {Component, forwardRef} from '@angular/core';
 import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiHorizontalDirection, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleForm} from '!!raw-loader!./examples/import/declare-form.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -31,24 +20,24 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiCheckboxBlockComponent extends AbstractExampleTuiControl {
-    readonly exampleForm = exampleForm;
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleForm = import('!!raw-loader!./examples/import/declare-form.md');
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
     readonly contentAlignVariants: readonly TuiHorizontalDirection[] = ['left', 'right'];
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/import/declare-form.txt b/projects/demo/src/modules/components/checkbox-block/examples/import/declare-form.md
similarity index 51%
rename from projects/demo/src/modules/components/checkbox-block/examples/import/declare-form.txt
rename to projects/demo/src/modules/components/checkbox-block/examples/import/declare-form.md
index 19177f4b2490..0e736be06367 100644
--- a/projects/demo/src/modules/components/checkbox-block/examples/import/declare-form.txt
+++ b/projects/demo/src/modules/components/checkbox-block/examples/import/declare-form.md
@@ -1,12 +1,14 @@
+```ts
 import {FormControl, FormGroup} from '@angular/forms';
 
-...
+// ...
 
 @Component({
-    ...
+  // ...
 })
 export class MyComponent {
-    testForm = new FormGroup({
-        testValue: new FormControl()
-    });
+  testForm = new FormGroup({
+    testValue: new FormControl(),
+  });
 }
+```
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/import/import-module.md b/projects/demo/src/modules/components/checkbox-block/examples/import/import-module.md
new file mode 100644
index 000000000000..2b04fbd47c26
--- /dev/null
+++ b/projects/demo/src/modules/components/checkbox-block/examples/import/import-module.md
@@ -0,0 +1,17 @@
+```ts
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiCheckboxBlockModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    FormsModule,
+    ReactiveFormsModule,
+    TuiCheckboxBlockModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/import/import-module.txt b/projects/demo/src/modules/components/checkbox-block/examples/import/import-module.txt
deleted file mode 100644
index 47e94cb2a3ed..000000000000
--- a/projects/demo/src/modules/components/checkbox-block/examples/import/import-module.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiCheckboxBlockModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        FormsModule,
-        ReactiveFormsModule,
-        TuiCheckboxBlockModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/import/insert-template.md b/projects/demo/src/modules/components/checkbox-block/examples/import/insert-template.md
new file mode 100644
index 000000000000..1a7b8af067cf
--- /dev/null
+++ b/projects/demo/src/modules/components/checkbox-block/examples/import/insert-template.md
@@ -0,0 +1,5 @@
+```html
+<div [formGroup]="testForm">
+  <tui-checkbox-block formControlName="testValue">Content</tui-checkbox-block>
+</div>
+```
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/import/insert-template.txt b/projects/demo/src/modules/components/checkbox-block/examples/import/insert-template.txt
deleted file mode 100644
index b3cc4caf50d0..000000000000
--- a/projects/demo/src/modules/components/checkbox-block/examples/import/insert-template.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-<div [formGroup]="testForm">
-    <tui-checkbox-block formControlName="testValue">
-        Content
-    </tui-checkbox-block>
-</div>
diff --git a/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.component.ts b/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.component.ts
index 0303aef3606b..de8db0f4bc43 100644
--- a/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.component.ts
+++ b/projects/demo/src/modules/components/checkbox-labeled/checkbox-labeled.component.ts
@@ -1,18 +1,9 @@
 import {Component, forwardRef} from '@angular/core';
 import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleForm} from '!!raw-loader!./examples/import/declare-form.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -28,19 +19,19 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiCheckboxLabeledComponent extends AbstractExampleTuiControl {
-    readonly exampleForm = exampleForm;
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly exampleForm = import('!!raw-loader!./examples/import/declare-form.md');
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
     readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l'];
diff --git a/projects/demo/src/modules/components/checkbox-labeled/examples/import/declare-form.txt b/projects/demo/src/modules/components/checkbox-labeled/examples/import/declare-form.md
similarity index 51%
rename from projects/demo/src/modules/components/checkbox-labeled/examples/import/declare-form.txt
rename to projects/demo/src/modules/components/checkbox-labeled/examples/import/declare-form.md
index 19177f4b2490..0e736be06367 100644
--- a/projects/demo/src/modules/components/checkbox-labeled/examples/import/declare-form.txt
+++ b/projects/demo/src/modules/components/checkbox-labeled/examples/import/declare-form.md
@@ -1,12 +1,14 @@
+```ts
 import {FormControl, FormGroup} from '@angular/forms';
 
-...
+// ...
 
 @Component({
-    ...
+  // ...
 })
 export class MyComponent {
-    testForm = new FormGroup({
-        testValue: new FormControl()
-    });
+  testForm = new FormGroup({
+    testValue: new FormControl(),
+  });
 }
+```
diff --git a/projects/demo/src/modules/components/checkbox-labeled/examples/import/import-module.md b/projects/demo/src/modules/components/checkbox-labeled/examples/import/import-module.md
new file mode 100644
index 000000000000..99b65e72c5be
--- /dev/null
+++ b/projects/demo/src/modules/components/checkbox-labeled/examples/import/import-module.md
@@ -0,0 +1,17 @@
+```ts
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiCheckboxLabeledModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    FormsModule,
+    ReactiveFormsModule,
+    TuiCheckboxLabeledModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/checkbox-labeled/examples/import/import-module.txt b/projects/demo/src/modules/components/checkbox-labeled/examples/import/import-module.txt
deleted file mode 100644
index 29493dbfd683..000000000000
--- a/projects/demo/src/modules/components/checkbox-labeled/examples/import/import-module.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiCheckboxLabeledModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        FormsModule,
-        ReactiveFormsModule,
-        TuiCheckboxLabeledModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/checkbox-labeled/examples/import/insert-template.md b/projects/demo/src/modules/components/checkbox-labeled/examples/import/insert-template.md
new file mode 100644
index 000000000000..c07ede47c449
--- /dev/null
+++ b/projects/demo/src/modules/components/checkbox-labeled/examples/import/insert-template.md
@@ -0,0 +1,5 @@
+```html
+<div [formGroup]="testForm">
+  <tui-checkbox-labeled formControlName="testValue">Label</tui-checkbox-labeled>
+</div>
+```
diff --git a/projects/demo/src/modules/components/checkbox-labeled/examples/import/insert-template.txt b/projects/demo/src/modules/components/checkbox-labeled/examples/import/insert-template.txt
deleted file mode 100644
index 3412a33d0e2f..000000000000
--- a/projects/demo/src/modules/components/checkbox-labeled/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<div [formGroup]="testForm">
-    <tui-checkbox-labeled formControlName="testValue">Label</tui-checkbox-labeled>
-</div>
diff --git a/projects/demo/src/modules/components/color-picker/color-picker.component.ts b/projects/demo/src/modules/components/color-picker/color-picker.component.ts
index 5db9f764a847..9a8b22206c7e 100644
--- a/projects/demo/src/modules/components/color-picker/color-picker.component.ts
+++ b/projects/demo/src/modules/components/color-picker/color-picker.component.ts
@@ -1,15 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-color-picker',
@@ -17,17 +8,17 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiColorPickerComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 }
diff --git a/projects/demo/src/modules/components/color-picker/examples/import/import-module.md b/projects/demo/src/modules/components/color-picker/examples/import/import-module.md
new file mode 100644
index 000000000000..6ac10e31da40
--- /dev/null
+++ b/projects/demo/src/modules/components/color-picker/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiColorPickerModule} from '@taiga-ui/addon-editor';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiColorPickerModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/color-picker/examples/import/import-module.txt b/projects/demo/src/modules/components/color-picker/examples/import/import-module.txt
deleted file mode 100644
index 6948be6854b7..000000000000
--- a/projects/demo/src/modules/components/color-picker/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiColorPickerModule} from '@taiga-ui/addon-editor';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiColorPickerModule,
-    ],
-...
diff --git a/projects/demo/src/modules/components/color-picker/examples/import/insert-template.txt b/projects/demo/src/modules/components/color-picker/examples/import/insert-template.md
similarity index 82%
rename from projects/demo/src/modules/components/color-picker/examples/import/insert-template.txt
rename to projects/demo/src/modules/components/color-picker/examples/import/insert-template.md
index 4cf682741976..927b30fcbbe3 100644
--- a/projects/demo/src/modules/components/color-picker/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/color-picker/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 <tui-color-picker [(color)]="color"></tui-color-picker>
+```
diff --git a/projects/demo/src/modules/components/editor/editor.component.ts b/projects/demo/src/modules/components/editor/editor.component.ts
index 527bd34a57c9..2a4cd490c590 100644
--- a/projects/demo/src/modules/components/editor/editor.component.ts
+++ b/projects/demo/src/modules/components/editor/editor.component.ts
@@ -1,15 +1,9 @@
 import {Component, forwardRef} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {defaultEditorTools, TuiEditorTool} from '@taiga-ui/addon-editor';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -25,13 +19,13 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiEditorComponent extends AbstractExampleTuiControl {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
     readonly control = new FormControl();
diff --git a/projects/demo/src/modules/components/editor/examples/import/import-module.md b/projects/demo/src/modules/components/editor/examples/import/import-module.md
new file mode 100644
index 000000000000..42f7494bb1d9
--- /dev/null
+++ b/projects/demo/src/modules/components/editor/examples/import/import-module.md
@@ -0,0 +1,16 @@
+```ts
+import {FormsModule} from '@angular/forms';
+import {TuiEditorModule} from '@taiga-ui/addon-editor';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiEditorModule,
+    FormsModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/editor/examples/import/import-module.txt b/projects/demo/src/modules/components/editor/examples/import/import-module.txt
deleted file mode 100644
index 8256111bcc57..000000000000
--- a/projects/demo/src/modules/components/editor/examples/import/import-module.txt
+++ /dev/null
@@ -1,12 +0,0 @@
-import {FormsModule} from '@angular/forms';
-import {TuiEditorModule} from '@taiga-ui/addon-editor';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiEditorModule,
-        FormsModule,
-    ],
-...
diff --git a/projects/demo/src/modules/components/editor/examples/import/insert-template.md b/projects/demo/src/modules/components/editor/examples/import/insert-template.md
new file mode 100644
index 000000000000..513fc3e5f6a7
--- /dev/null
+++ b/projects/demo/src/modules/components/editor/examples/import/insert-template.md
@@ -0,0 +1,8 @@
+```html
+<tui-editor
+  exampleText="Example"
+  [(ngModel)]="model"
+>
+  Placeholder
+</tui-editor>
+```
diff --git a/projects/demo/src/modules/components/editor/examples/import/insert-template.txt b/projects/demo/src/modules/components/editor/examples/import/insert-template.txt
deleted file mode 100644
index c3ecba94beb0..000000000000
--- a/projects/demo/src/modules/components/editor/examples/import/insert-template.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-<tui-editor
-    exampleText="Example"
-    [(ngModel)]="model">
-    Placeholder
-</tui-editor>
diff --git a/projects/demo/src/modules/components/error/error.component.ts b/projects/demo/src/modules/components/error/error.component.ts
index 641610d5ca69..16639f582ba0 100644
--- a/projects/demo/src/modules/components/error/error.component.ts
+++ b/projects/demo/src/modules/components/error/error.component.ts
@@ -1,14 +1,8 @@
 import {Component, TemplateRef, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiValidationError} from '@taiga-ui/cdk';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-error',
     templateUrl: './error.template.html',
@@ -18,12 +12,12 @@ export class ExampleTuiErrorComponent {
     @ViewChild('errorContent')
     errorContent?: TemplateRef<Record<string, unknown>>;
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
     readonly errorVariants: readonly string[] = [
diff --git a/projects/demo/src/modules/components/error/examples/import/import-module.md b/projects/demo/src/modules/components/error/examples/import/import-module.md
new file mode 100644
index 000000000000..8db0e58d5c99
--- /dev/null
+++ b/projects/demo/src/modules/components/error/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiErrorModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiErrorModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/error/examples/import/import-module.txt b/projects/demo/src/modules/components/error/examples/import/import-module.txt
deleted file mode 100644
index 9e341e842d07..000000000000
--- a/projects/demo/src/modules/components/error/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiErrorModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiErrorModule,
-    ],
-...
diff --git a/projects/demo/src/modules/components/error/examples/import/insert-template.txt b/projects/demo/src/modules/components/error/examples/import/insert-template.md
similarity index 76%
rename from projects/demo/src/modules/components/error/examples/import/insert-template.txt
rename to projects/demo/src/modules/components/error/examples/import/insert-template.md
index baf86d756d9f..4e7e8f4ecc34 100644
--- a/projects/demo/src/modules/components/error/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/error/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 <tui-error [error]="error"></tui-error>
+```
diff --git a/projects/demo/src/modules/components/expand/examples/import/import-module.md b/projects/demo/src/modules/components/expand/examples/import/import-module.md
new file mode 100644
index 000000000000..3fb64faf41a3
--- /dev/null
+++ b/projects/demo/src/modules/components/expand/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiExpandModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiExpandModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/expand/examples/import/import-module.txt b/projects/demo/src/modules/components/expand/examples/import/import-module.txt
deleted file mode 100644
index 53135233cb0b..000000000000
--- a/projects/demo/src/modules/components/expand/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiExpandModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiExpandModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/expand/examples/import/insert-template.md b/projects/demo/src/modules/components/expand/examples/import/insert-template.md
new file mode 100644
index 000000000000..186b6f08c1f3
--- /dev/null
+++ b/projects/demo/src/modules/components/expand/examples/import/insert-template.md
@@ -0,0 +1,5 @@
+```html
+<tui-expand [expanded]="expanded">
+  <ng-template tuiExpandContent>...</ng-template>
+</tui-expand>
+```
diff --git a/projects/demo/src/modules/components/expand/examples/import/insert-template.txt b/projects/demo/src/modules/components/expand/examples/import/insert-template.txt
deleted file mode 100644
index 196e52b0800e..000000000000
--- a/projects/demo/src/modules/components/expand/examples/import/insert-template.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-<tui-expand [expanded]="expanded">
-    <ng-template tuiExpandContent>
-    ...
-    </ng-template>
-</tui-expand>
diff --git a/projects/demo/src/modules/components/expand/expand.component.ts b/projects/demo/src/modules/components/expand/expand.component.ts
index b649b5670bdc..7d243c1f47f9 100644
--- a/projects/demo/src/modules/components/expand/expand.component.ts
+++ b/projects/demo/src/modules/components/expand/expand.component.ts
@@ -1,16 +1,10 @@
 import {DOCUMENT} from '@angular/common';
 import {ChangeDetectorRef, Component, ElementRef, Inject, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {tuiCustomEvent} from '@taiga-ui/cdk';
 import {TUI_EXPAND_LOADED, TuiExpandComponent} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-expand',
     templateUrl: './expand.template.html',
@@ -21,13 +15,12 @@ export class ExampleTuiExpandComponent {
     @ViewChild(TuiExpandComponent, {read: ElementRef})
     expand?: ElementRef;
 
-    readonly exampleModule = exampleModule;
-
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
     expanded = false;
diff --git a/projects/demo/src/modules/components/field-error/examples/import/import-module.md b/projects/demo/src/modules/components/field-error/examples/import/import-module.md
new file mode 100644
index 000000000000..75f21c3cf0ff
--- /dev/null
+++ b/projects/demo/src/modules/components/field-error/examples/import/import-module.md
@@ -0,0 +1,16 @@
+```ts
+import {ReactiveFormsModule} from '@angular/forms';
+import {TuiFieldErrorModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    ReactiveFormsModule,
+    TuiFieldErrorModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/field-error/examples/import/import-module.txt b/projects/demo/src/modules/components/field-error/examples/import/import-module.txt
deleted file mode 100644
index 92a0cb4672e4..000000000000
--- a/projects/demo/src/modules/components/field-error/examples/import/import-module.txt
+++ /dev/null
@@ -1,12 +0,0 @@
-import {ReactiveFormsModule} from '@angular/forms';
-import {TuiFieldErrorModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        ReactiveFormsModule,
-        TuiFieldErrorModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/field-error/examples/import/insert-template.md b/projects/demo/src/modules/components/field-error/examples/import/insert-template.md
new file mode 100644
index 000000000000..6eac327615ae
--- /dev/null
+++ b/projects/demo/src/modules/components/field-error/examples/import/insert-template.md
@@ -0,0 +1,6 @@
+```html
+<ng-container [formGroup]="testForm">
+  <tui-input formControlName="testValue1"></tui-input>
+  <tui-field-error formControlName="testValue1"></tui-field-error>
+</ng-container>
+```
diff --git a/projects/demo/src/modules/components/field-error/examples/import/insert-template.txt b/projects/demo/src/modules/components/field-error/examples/import/insert-template.txt
deleted file mode 100644
index 9f681ce6f3fb..000000000000
--- a/projects/demo/src/modules/components/field-error/examples/import/insert-template.txt
+++ /dev/null
@@ -1,4 +0,0 @@
-<ng-container [formGroup]="testForm">
-    <tui-input formControlName="testValue1"></tui-input>
-    <tui-field-error formControlName="testValue1"></tui-field-error>
-</ng-container>
diff --git a/projects/demo/src/modules/components/field-error/field-error.component.ts b/projects/demo/src/modules/components/field-error/field-error.component.ts
index 18dab6e11758..dc4e25afc773 100644
--- a/projects/demo/src/modules/components/field-error/field-error.component.ts
+++ b/projects/demo/src/modules/components/field-error/field-error.component.ts
@@ -1,22 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
-import {default as example5Ts} from '!!raw-loader!./examples/5/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-field-error',
@@ -24,34 +8,33 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiFieldErrorComponent {
-    readonly exampleModule = exampleModule;
-
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.less'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
-        LESS: example4Less,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
     };
 
-    readonly example5: FrontEndExample = {
-        TypeScript: example5Ts,
-        HTML: example5Html,
+    readonly example5: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/5/index.ts'),
+        HTML: import('!!raw-loader!./examples/5/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/components/filter/examples/import/import-module.md b/projects/demo/src/modules/components/filter/examples/import/import-module.md
new file mode 100644
index 000000000000..d63905a695bb
--- /dev/null
+++ b/projects/demo/src/modules/components/filter/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiFilterModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiFilterModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/filter/examples/import/import-module.txt b/projects/demo/src/modules/components/filter/examples/import/import-module.txt
deleted file mode 100644
index 4903d2c813a9..000000000000
--- a/projects/demo/src/modules/components/filter/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiFilterModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiFilterModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/filter/examples/import/insert-template.md b/projects/demo/src/modules/components/filter/examples/import/insert-template.md
new file mode 100644
index 000000000000..81db2c7cd403
--- /dev/null
+++ b/projects/demo/src/modules/components/filter/examples/import/insert-template.md
@@ -0,0 +1,12 @@
+```html
+<form [formGroup]="form">
+  <tui-filter
+    formControlName="filters"
+    [badgeHandler]="badgeHandler"
+    [disabledItemHandler]="disabledItemHandler"
+    [items]="items"
+    [size]="size"
+    (toggledItem)="onToggledItemChange($event)"
+  ></tui-filter>
+</form>
+```
diff --git a/projects/demo/src/modules/components/filter/examples/import/insert-template.txt b/projects/demo/src/modules/components/filter/examples/import/insert-template.txt
deleted file mode 100644
index 9aad683a9444..000000000000
--- a/projects/demo/src/modules/components/filter/examples/import/insert-template.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-<form [formGroup]="form">
-    <tui-filter formControlName="filters"
-                 [badgeHandler]="badgeHandler"
-                 [disabledItemHandler]="disabledItemHandler"
-                 [items]="items"
-                 [size]="size"
-                 (toggledItem)="onToggledItemChange($event)"></tui-filter>
-</form>
diff --git a/projects/demo/src/modules/components/filter/filter.component.ts b/projects/demo/src/modules/components/filter/filter.component.ts
index 47b1c9aace44..c0f323fab9d0 100644
--- a/projects/demo/src/modules/components/filter/filter.component.ts
+++ b/projects/demo/src/modules/components/filter/filter.component.ts
@@ -1,23 +1,10 @@
 import {Component, Inject} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {ALWAYS_FALSE_HANDLER, TuiBooleanHandler, TuiHandler} from '@taiga-ui/cdk';
 import {TuiAlertService, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 class ItemWithBadge {
     constructor(readonly text: string, readonly badgeValue?: number) {}
 
@@ -36,28 +23,28 @@ class ItemWithBadge {
     changeDetection,
 })
 export class ExampleTuiFilterComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
-        LESS: example4Less,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
     };
 
     initialItems = ['Alex Inkin', 'Roman Sedov'];
diff --git a/projects/demo/src/modules/components/group/examples/import/import-module.md b/projects/demo/src/modules/components/group/examples/import/import-module.md
new file mode 100644
index 000000000000..da242735d7eb
--- /dev/null
+++ b/projects/demo/src/modules/components/group/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiGroupModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiGroupModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/group/examples/import/import-module.txt b/projects/demo/src/modules/components/group/examples/import/import-module.txt
deleted file mode 100644
index 6347d1b1ef03..000000000000
--- a/projects/demo/src/modules/components/group/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiGroupModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiGroupModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/group/examples/import/insert-template.md b/projects/demo/src/modules/components/group/examples/import/insert-template.md
new file mode 100644
index 000000000000..de42b3e78983
--- /dev/null
+++ b/projects/demo/src/modules/components/group/examples/import/insert-template.md
@@ -0,0 +1,40 @@
+```html
+<div
+  tuiGroup
+  class="group"
+>
+  <div>
+    <tui-input
+      formControlName="testValue"
+      tuiTextfieldExampleText="House"
+      tuiHintContent="Write a number"
+      class="tui-group__inherit-item"
+    >
+      House
+    </tui-input>
+    <tui-field-error formControlName="testValue"></tui-field-error>
+  </div>
+  <div>
+    <tui-input
+      formControlName="testValue2"
+      tuiTextfieldExampleText="House building"
+      tuiHintContent="Write house building"
+      class="tui-group__inherit-item"
+    >
+      House building
+    </tui-input>
+    <tui-field-error formControlName="testValue2"></tui-field-error>
+  </div>
+  <div>
+    <tui-input
+      formControlName="testValue3"
+      tuiTextfieldExampleText="Apartament number"
+      tuiHintContent="Write an apartament number only"
+      class="tui-group__inherit-item"
+    >
+      Apartament
+    </tui-input>
+    <tui-field-error formControlName="testValue3"></tui-field-error>
+  </div>
+</div>
+```
diff --git a/projects/demo/src/modules/components/group/examples/import/insert-template.txt b/projects/demo/src/modules/components/group/examples/import/insert-template.txt
deleted file mode 100644
index 7600b33aa1a1..000000000000
--- a/projects/demo/src/modules/components/group/examples/import/insert-template.txt
+++ /dev/null
@@ -1,35 +0,0 @@
-<div tuiGroup class="group">
-    <div>
-        <tui-input
-            class="tui-group__inherit-item"
-            formControlName="testValue"
-            tuiTextfieldExampleText="House"
-            tuiHintContent="Write a number"
-        >
-            House
-        </tui-input>
-        <tui-field-error formControlName="testValue"></tui-field-error>
-    </div>
-    <div>
-        <tui-input
-            class="tui-group__inherit-item"
-            formControlName="testValue2"
-            tuiTextfieldExampleText="House building"
-            tuiHintContent="Write house building"
-        >
-            House building
-        </tui-input>
-        <tui-field-error formControlName="testValue2"></tui-field-error>
-    </div>
-    <div>
-        <tui-input
-            class="tui-group__inherit-item"
-            formControlName="testValue3"
-            tuiTextfieldExampleText="Apartament number"
-            tuiHintContent="Write an apartament number only"
-        >
-            Apartament
-        </tui-input>
-        <tui-field-error formControlName="testValue3"></tui-field-error>
-    </div>
-</div>
\ No newline at end of file
diff --git a/projects/demo/src/modules/components/group/group.component.ts b/projects/demo/src/modules/components/group/group.component.ts
index dd5a27a77a23..c24ef824ed96 100644
--- a/projects/demo/src/modules/components/group/group.component.ts
+++ b/projects/demo/src/modules/components/group/group.component.ts
@@ -1,22 +1,8 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiOrientationT, TuiSizeL} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.style.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.style.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-group',
     templateUrl: './group.template.html',
@@ -24,29 +10,29 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiGroupComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.style.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.style.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
     };
 
     adaptive = false;
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/import/import-module.md b/projects/demo/src/modules/components/hosted-dropdown/examples/import/import-module.md
new file mode 100644
index 000000000000..4ffcad7d3f1f
--- /dev/null
+++ b/projects/demo/src/modules/components/hosted-dropdown/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiHostedDropdownModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiHostedDropdownModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/import/import-module.txt b/projects/demo/src/modules/components/hosted-dropdown/examples/import/import-module.txt
deleted file mode 100644
index 8a752c8e27d8..000000000000
--- a/projects/demo/src/modules/components/hosted-dropdown/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiHostedDropdownModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiHostedDropdownModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/import/insert-template.md b/projects/demo/src/modules/components/hosted-dropdown/examples/import/insert-template.md
new file mode 100644
index 000000000000..cfdd144f82b3
--- /dev/null
+++ b/projects/demo/src/modules/components/hosted-dropdown/examples/import/insert-template.md
@@ -0,0 +1,24 @@
+```html
+<tui-hosted-dropdown
+  [content]="dropdown"
+  [(open)]="open"
+>
+  <button
+    tuiButton
+    type="button"
+  >
+    Open menu
+  </button>
+</tui-hosted-dropdown>
+<ng-template #dropdown>
+  <tui-data-list>
+    <button
+      *ngFor="let item of items"
+      tuiOption
+      (click)="onClick()"
+    >
+      {{item}}
+    </button>
+  </tui-data-list>
+</ng-template>
+```
diff --git a/projects/demo/src/modules/components/hosted-dropdown/examples/import/insert-template.txt b/projects/demo/src/modules/components/hosted-dropdown/examples/import/insert-template.txt
deleted file mode 100644
index 5ffc6d86c7f5..000000000000
--- a/projects/demo/src/modules/components/hosted-dropdown/examples/import/insert-template.txt
+++ /dev/null
@@ -1,15 +0,0 @@
-<tui-hosted-dropdown
-    [content]="dropdown"
-    [(open)]="open"
->
-    <button tuiButton type="button">
-        Open menu
-    </button>
-</tui-hosted-dropdown>
-<ng-template #dropdown>
-    <tui-data-list>
-        <button *ngFor="let item of items" tuiOption (click)="onClick()">
-            {{item}}
-        </button>
-    </tui-data-list>
-</ng-template>
diff --git a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts b/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts
index 127f640b0bce..969725a544d1 100644
--- a/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts
+++ b/projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts
@@ -1,5 +1,6 @@
 import {Component, forwardRef} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
     DEFAULT_MAX_HEIGHT,
     DEFAULT_MIN_HEIGHT,
@@ -8,20 +9,6 @@ import {
     TuiVerticalDirection,
 } from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
 @Component({
@@ -37,29 +24,29 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiHostedDropdownComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
     };
 
     minHeight = DEFAULT_MIN_HEIGHT;
diff --git a/projects/demo/src/modules/components/input-date-time/examples/import/declare-form.txt b/projects/demo/src/modules/components/input-date-time/examples/import/declare-form.md
similarity index 51%
rename from projects/demo/src/modules/components/input-date-time/examples/import/declare-form.txt
rename to projects/demo/src/modules/components/input-date-time/examples/import/declare-form.md
index 139c9f376dca..0e736be06367 100644
--- a/projects/demo/src/modules/components/input-date-time/examples/import/declare-form.txt
+++ b/projects/demo/src/modules/components/input-date-time/examples/import/declare-form.md
@@ -1,12 +1,14 @@
+```ts
 import {FormControl, FormGroup} from '@angular/forms';
 
-...
+// ...
 
 @Component({
-    ...
+  // ...
 })
 export class MyComponent {
-    testForm = new FormGroup({
-        testValue: new FormControl(),
-    });
+  testForm = new FormGroup({
+    testValue: new FormControl(),
+  });
 }
+```
diff --git a/projects/demo/src/modules/components/input-date-time/examples/import/import-module.md b/projects/demo/src/modules/components/input-date-time/examples/import/import-module.md
new file mode 100644
index 000000000000..1d0a736ab668
--- /dev/null
+++ b/projects/demo/src/modules/components/input-date-time/examples/import/import-module.md
@@ -0,0 +1,17 @@
+```ts
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiInputDateTimeModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    FormsModule,
+    ReactiveFormsModule,
+    TuiInputDateTimeModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/input-date-time/examples/import/import-module.txt b/projects/demo/src/modules/components/input-date-time/examples/import/import-module.txt
deleted file mode 100644
index 52f880831977..000000000000
--- a/projects/demo/src/modules/components/input-date-time/examples/import/import-module.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiInputDateTimeModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        FormsModule,
-        ReactiveFormsModule,
-        TuiInputDateTimeModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/input-date-time/examples/import/insert-template.md b/projects/demo/src/modules/components/input-date-time/examples/import/insert-template.md
new file mode 100644
index 000000000000..b792d2b8a01d
--- /dev/null
+++ b/projects/demo/src/modules/components/input-date-time/examples/import/insert-template.md
@@ -0,0 +1,5 @@
+```html
+<form [formGroup]="testForm">
+  <tui-input-date-time formControlName="testValue">Choose date and time</tui-input-date-time>
+</form>
+```
diff --git a/projects/demo/src/modules/components/input-date-time/examples/import/insert-template.txt b/projects/demo/src/modules/components/input-date-time/examples/import/insert-template.txt
deleted file mode 100644
index cfa7bdf47a00..000000000000
--- a/projects/demo/src/modules/components/input-date-time/examples/import/insert-template.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-<form [formGroup]="testForm">
-    <tui-input-date-time formControlName="testValue">
-        Choose date and time
-    </tui-input-date-time>
-</form>
diff --git a/projects/demo/src/modules/components/input-date-time/input-date-time.component.ts b/projects/demo/src/modules/components/input-date-time/input-date-time.component.ts
index e9b9e5f632b0..859c36a9b884 100644
--- a/projects/demo/src/modules/components/input-date-time/input-date-time.component.ts
+++ b/projects/demo/src/modules/components/input-date-time/input-date-time.component.ts
@@ -15,10 +15,6 @@ import {
 } from '@taiga-ui/cdk';
 import {TuiNamedDay} from '@taiga-ui/kit';
 
-import {default as exampleForm} from '!!raw-loader!./examples/import/declare-form.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -36,9 +32,9 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
 export class ExampleTuiInputDateTimeComponent extends AbstractExampleTuiControl {
     private readonly today = TuiDay.currentLocal();
 
-    readonly exampleForm = exampleForm;
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleForm = import('!!raw-loader!./examples/import/declare-form.md');
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
     readonly example1: TuiDocExample = {
         TypeScript: import('!!raw-loader!./examples/1/index.ts'),
diff --git a/projects/demo/src/modules/components/input-file/examples/import/import-module.md b/projects/demo/src/modules/components/input-file/examples/import/import-module.md
new file mode 100644
index 000000000000..b0bdc55bce86
--- /dev/null
+++ b/projects/demo/src/modules/components/input-file/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiInputFileModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiInputFileModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/input-file/examples/import/import-module.txt b/projects/demo/src/modules/components/input-file/examples/import/import-module.txt
deleted file mode 100644
index 62a344c117bd..000000000000
--- a/projects/demo/src/modules/components/input-file/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiInputFileModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiInputFileModule,
-    ],
-...
diff --git a/projects/demo/src/modules/components/input-file/examples/import/insert-template.txt b/projects/demo/src/modules/components/input-file/examples/import/insert-template.md
similarity index 82%
rename from projects/demo/src/modules/components/input-file/examples/import/insert-template.txt
rename to projects/demo/src/modules/components/input-file/examples/import/insert-template.md
index 01d2e2b5ef97..d5990cc493ca 100644
--- a/projects/demo/src/modules/components/input-file/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/input-file/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 <tui-input-file [formControl]="control"></tui-input-file>
+```
diff --git a/projects/demo/src/modules/components/input-file/input-file.component.ts b/projects/demo/src/modules/components/input-file/input-file.component.ts
index ff3e2157743a..b46ff3af5ff7 100644
--- a/projects/demo/src/modules/components/input-file/input-file.component.ts
+++ b/projects/demo/src/modules/components/input-file/input-file.component.ts
@@ -1,21 +1,10 @@
 import {Component, forwardRef} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL} from '@taiga-ui/core';
 import {TuiFileLike} from '@taiga-ui/kit';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -31,27 +20,27 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiInputFileComponent extends AbstractExampleTuiControl {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
     };
 
     readonly control = new FormControl();
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/import/declare-form.md b/projects/demo/src/modules/components/input-phone-international/examples/import/declare-form.md
new file mode 100644
index 000000000000..09caa3fe645e
--- /dev/null
+++ b/projects/demo/src/modules/components/input-phone-international/examples/import/declare-form.md
@@ -0,0 +1,22 @@
+```ts
+import {FormControl, FormGroup} from '@angular/forms';
+import {TuiCountryIsoCode} from '@taiga-ui/i18n';
+
+// ...
+
+@Component({
+  // ...
+})
+export class MyComponent {
+  readonly testForm = new FormGroup({
+    testValue: new FormControl('+78005553535'),
+  });
+
+  readonly countries: ReadonlyArray<TuiCountryIsoCode> = [
+    TuiCountryIsoCode.RU,
+    TuiCountryIsoCode.KZ,
+    TuiCountryIsoCode.UA,
+    TuiCountryIsoCode.BY,
+  ];
+}
+```
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/import/declare-form.txt b/projects/demo/src/modules/components/input-phone-international/examples/import/declare-form.txt
deleted file mode 100644
index 5d501b0c3529..000000000000
--- a/projects/demo/src/modules/components/input-phone-international/examples/import/declare-form.txt
+++ /dev/null
@@ -1,20 +0,0 @@
-import {FormControl, FormGroup} from '@angular/forms';
-import {TuiCountryIsoCode} from '@taiga-ui/i18n';
-
-...
-
-@Component({
-...
-})
-export class MyComponent {
-    readonly testForm = new FormGroup({
-        testValue: new FormControl('+78005553535')
-    });
-
-    readonly countries: ReadonlyArray<TuiCountryIsoCode> = [
-        TuiCountryIsoCode.RU,
-        TuiCountryIsoCode.KZ,
-        TuiCountryIsoCode.UA,
-        TuiCountryIsoCode.BY,
-    ]
-}
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/import/import-module.md b/projects/demo/src/modules/components/input-phone-international/examples/import/import-module.md
new file mode 100644
index 000000000000..e70b53468b70
--- /dev/null
+++ b/projects/demo/src/modules/components/input-phone-international/examples/import/import-module.md
@@ -0,0 +1,6 @@
+import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {TuiInputPhoneInternationalModule} from
+'@taiga-ui/kit';
+
+...
+
+@NgModule({ imports: [ ... FormsModule, ReactiveFormsModule, TuiInputPhoneInternationalModule ], ...
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/import/import-module.txt b/projects/demo/src/modules/components/input-phone-international/examples/import/import-module.txt
deleted file mode 100644
index deaeefd9ca01..000000000000
--- a/projects/demo/src/modules/components/input-phone-international/examples/import/import-module.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiInputPhoneInternationalModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        FormsModule,
-        ReactiveFormsModule,
-        TuiInputPhoneInternationalModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/import/insert-template.md b/projects/demo/src/modules/components/input-phone-international/examples/import/insert-template.md
new file mode 100644
index 000000000000..9f4b575ecd37
--- /dev/null
+++ b/projects/demo/src/modules/components/input-phone-international/examples/import/insert-template.md
@@ -0,0 +1,8 @@
+```html
+<form [formGroup]="testForm">
+  <tui-input-phone-international
+    formControlName="testValue"
+    [countries]="countries"
+  ></tui-input-phone-international>
+</form>
+```
diff --git a/projects/demo/src/modules/components/input-phone-international/examples/import/insert-template.txt b/projects/demo/src/modules/components/input-phone-international/examples/import/insert-template.txt
deleted file mode 100644
index 1364fa3ff2d2..000000000000
--- a/projects/demo/src/modules/components/input-phone-international/examples/import/insert-template.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-<form [formGroup]="testForm">
-    <tui-input-phone-international
-        formControlName="testValue"
-        [countries]="countries"
-    ></tui-input-phone-international>
-</form>
diff --git a/projects/demo/src/modules/components/input-phone-international/input-phone-international.component.ts b/projects/demo/src/modules/components/input-phone-international/input-phone-international.component.ts
index 0c2c2d9d35af..88c0cc75410f 100644
--- a/projects/demo/src/modules/components/input-phone-international/input-phone-international.component.ts
+++ b/projects/demo/src/modules/components/input-phone-international/input-phone-international.component.ts
@@ -1,6 +1,7 @@
 import {Component, forwardRef} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
     DEFAULT_MAX_HEIGHT,
     DEFAULT_MIN_HEIGHT,
@@ -8,17 +9,6 @@ import {
 } from '@taiga-ui/core';
 import {TuiCountryIsoCode} from '@taiga-ui/i18n';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleForm} from '!!raw-loader!./examples/import/declare-form.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -34,20 +24,20 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiInputPhoneInternationalComponent extends AbstractExampleTuiControl {
-    readonly exampleForm = exampleForm;
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleForm = import('!!raw-loader!./examples/import/declare-form.md');
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
     cleaner = false;
diff --git a/projects/demo/src/modules/components/input-tag/examples/import/import-module.md b/projects/demo/src/modules/components/input-tag/examples/import/import-module.md
new file mode 100644
index 000000000000..9be64f5634f7
--- /dev/null
+++ b/projects/demo/src/modules/components/input-tag/examples/import/import-module.md
@@ -0,0 +1,17 @@
+```ts
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiInputTagModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    FormsModule,
+    ReactiveFormsModule,
+    TuiInputTagModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/input-tag/examples/import/import-module.txt b/projects/demo/src/modules/components/input-tag/examples/import/import-module.txt
deleted file mode 100644
index 68ce57f86fa7..000000000000
--- a/projects/demo/src/modules/components/input-tag/examples/import/import-module.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiInputTagModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        FormsModule,
-        ReactiveFormsModule,
-        TuiInputTagModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/input-tag/examples/import/insert-template.txt b/projects/demo/src/modules/components/input-tag/examples/import/insert-template.md
similarity index 58%
rename from projects/demo/src/modules/components/input-tag/examples/import/insert-template.txt
rename to projects/demo/src/modules/components/input-tag/examples/import/insert-template.md
index f2b804bbfaf9..d14de180151d 100644
--- a/projects/demo/src/modules/components/input-tag/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/input-tag/examples/import/insert-template.md
@@ -1,5 +1,7 @@
+```html
 <ng-container [formGroup]="formName">
-    <tui-input-tag formControlName="controlName"></tui-input-tag>
+  <tui-input-tag formControlName="controlName"></tui-input-tag>
 </ng-container>
 
 <tui-input-tag [(ngModel)]="model"></tui-input-tag>
+```
diff --git a/projects/demo/src/modules/components/input-tag/input-tag.component.ts b/projects/demo/src/modules/components/input-tag/input-tag.component.ts
index fc011a3cf8cd..4c75dc8307cf 100644
--- a/projects/demo/src/modules/components/input-tag/input-tag.component.ts
+++ b/projects/demo/src/modules/components/input-tag/input-tag.component.ts
@@ -10,9 +10,6 @@ import {
 import {TuiHorizontalDirection, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {TuiStringifiableItem} from '@taiga-ui/kit';
 
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -28,8 +25,8 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiInputTagComponent extends AbstractExampleTuiControl {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
     readonly example1: TuiDocExample = {
         TypeScript: import('!!raw-loader!./examples/1/index.ts'),
diff --git a/projects/demo/src/modules/components/island/examples/import/import-module.md b/projects/demo/src/modules/components/island/examples/import/import-module.md
new file mode 100644
index 000000000000..d2e4070d3711
--- /dev/null
+++ b/projects/demo/src/modules/components/island/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiIslandModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiIslandModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/island/examples/import/import-module.txt b/projects/demo/src/modules/components/island/examples/import/import-module.txt
deleted file mode 100644
index ee437772e328..000000000000
--- a/projects/demo/src/modules/components/island/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiIslandModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiIslandModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/island/examples/import/insert-template.md b/projects/demo/src/modules/components/island/examples/import/insert-template.md
new file mode 100644
index 000000000000..d3ce3c35319d
--- /dev/null
+++ b/projects/demo/src/modules/components/island/examples/import/insert-template.md
@@ -0,0 +1,15 @@
+```html
+<tui-island>
+  <h3 class="tui-island__title">Title</h3>
+  <p class="tui-island__paragraph">Text</p>
+  <p class="tui-island__paragraph tui-island__paragraph_button">
+    <button
+      tuiButton
+      type="button"
+      appearance="secondary"
+    >
+      Button
+    </button>
+  </p>
+</tui-island>
+```
diff --git a/projects/demo/src/modules/components/island/examples/import/insert-template.txt b/projects/demo/src/modules/components/island/examples/import/insert-template.txt
deleted file mode 100644
index 9e7c4ddebb9e..000000000000
--- a/projects/demo/src/modules/components/island/examples/import/insert-template.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-<tui-island>
-    <h3 class="tui-island__title">
-        Title
-    </h3>
-    <p class="tui-island__paragraph">
-        Text
-    </p>
-    <p class="tui-island__paragraph tui-island__paragraph_button">
-        <button tuiButton type="button" appearance="secondary">Button</button>
-    </p>
-</tui-island>
diff --git a/projects/demo/src/modules/components/island/island.component.ts b/projects/demo/src/modules/components/island/island.component.ts
index 6a53a74ab930..d2952fe0ff15 100644
--- a/projects/demo/src/modules/components/island/island.component.ts
+++ b/projects/demo/src/modules/components/island/island.component.ts
@@ -1,21 +1,8 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-island',
     templateUrl: './island.template.html',
@@ -23,25 +10,25 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiIslandComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
     hoverable = false;
diff --git a/projects/demo/src/modules/components/label/examples/import/import-module.md b/projects/demo/src/modules/components/label/examples/import/import-module.md
new file mode 100644
index 000000000000..612c6566bc18
--- /dev/null
+++ b/projects/demo/src/modules/components/label/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiLabelModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiLabelModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/label/examples/import/import-module.txt b/projects/demo/src/modules/components/label/examples/import/import-module.txt
deleted file mode 100644
index 19ad4f1de941..000000000000
--- a/projects/demo/src/modules/components/label/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiLabelModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiLabelModule,
-    ],
-...
diff --git a/projects/demo/src/modules/components/label/examples/import/insert-template.md b/projects/demo/src/modules/components/label/examples/import/insert-template.md
new file mode 100644
index 000000000000..b5aa8612945a
--- /dev/null
+++ b/projects/demo/src/modules/components/label/examples/import/insert-template.md
@@ -0,0 +1,14 @@
+```html
+<label
+  tuiLabel
+  label="Some label"
+>
+  <tui-input
+    formControlName="testValue"
+    tuiTextfieldSize="m"
+    [tuiTextfieldLabelOutside]="true"
+  >
+    0,00
+  </tui-input>
+</label>
+```
diff --git a/projects/demo/src/modules/components/label/examples/import/insert-template.txt b/projects/demo/src/modules/components/label/examples/import/insert-template.txt
deleted file mode 100644
index ae39403a167c..000000000000
--- a/projects/demo/src/modules/components/label/examples/import/insert-template.txt
+++ /dev/null
@@ -1,9 +0,0 @@
-<label tuiLabel label="Some label">
-    <tui-input
-        formControlName="testValue"
-        tuiTextfieldSize="m"
-        [tuiTextfieldLabelOutside]="true"
-    >
-        0,00
-    </tui-input>
-</label>
diff --git a/projects/demo/src/modules/components/label/label.component.ts b/projects/demo/src/modules/components/label/label.component.ts
index b5e644079fd1..b3f07936a4ea 100644
--- a/projects/demo/src/modules/components/label/label.component.ts
+++ b/projects/demo/src/modules/components/label/label.component.ts
@@ -1,37 +1,29 @@
 import {Component, TemplateRef} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-label',
     templateUrl: './label.template.html',
     changeDetection,
 })
 export class ExampleTuiLabelComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
     readonly labelVariants = ['No default value', 'Template'];
diff --git a/projects/demo/src/modules/components/link/examples/import/import-module.md b/projects/demo/src/modules/components/link/examples/import/import-module.md
new file mode 100644
index 000000000000..b4e33478bcdf
--- /dev/null
+++ b/projects/demo/src/modules/components/link/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiLinkModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiLinkModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/link/examples/import/import-module.txt b/projects/demo/src/modules/components/link/examples/import/import-module.txt
deleted file mode 100644
index c93c6da621a2..000000000000
--- a/projects/demo/src/modules/components/link/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiLinkModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiLinkModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/link/examples/import/insert-template.md b/projects/demo/src/modules/components/link/examples/import/insert-template.md
new file mode 100644
index 000000000000..4b5ccb7ea20f
--- /dev/null
+++ b/projects/demo/src/modules/components/link/examples/import/insert-template.md
@@ -0,0 +1,17 @@
+```html
+<a
+  tuiLink
+  href="#"
+>
+  Link
+</a>
+
+<a
+  tuiLink
+  iconAlign="left"
+  href="#"
+  [icon]="tuiIconSettings"
+>
+  Link with icon left
+</a>
+```
diff --git a/projects/demo/src/modules/components/link/examples/import/insert-template.txt b/projects/demo/src/modules/components/link/examples/import/insert-template.txt
deleted file mode 100644
index 046265032e23..000000000000
--- a/projects/demo/src/modules/components/link/examples/import/insert-template.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-<a tuiLink href="#">Link</a>
-
-<a tuiLink
-   [icon]="tuiIconSettings"
-   iconAlign="left"
-   href="#">Link with icon left</a>
diff --git a/projects/demo/src/modules/components/link/link.component.ts b/projects/demo/src/modules/components/link/link.component.ts
index 76cdbd8b134a..441a34341b49 100644
--- a/projects/demo/src/modules/components/link/link.component.ts
+++ b/projects/demo/src/modules/components/link/link.component.ts
@@ -1,40 +1,30 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiHorizontalDirection} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-link',
     templateUrl: './link.template.html',
     changeDetection,
 })
 export class ExampleTuiLinkComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
     pseudo = false;
diff --git a/projects/demo/src/modules/components/marker-icon/examples/import/import-module.md b/projects/demo/src/modules/components/marker-icon/examples/import/import-module.md
new file mode 100644
index 000000000000..1994f09d114c
--- /dev/null
+++ b/projects/demo/src/modules/components/marker-icon/examples/import/import-module.md
@@ -0,0 +1,5 @@
+import {TuiMarkerIconModule} from '@taiga-ui/kit';
+
+...
+
+@NgModule({ imports: [ ... TuiMarkerIconModule ], ...
diff --git a/projects/demo/src/modules/components/marker-icon/examples/import/import-module.txt b/projects/demo/src/modules/components/marker-icon/examples/import/import-module.txt
deleted file mode 100644
index bedd9ee0246d..000000000000
--- a/projects/demo/src/modules/components/marker-icon/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiMarkerIconModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiMarkerIconModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/marker-icon/examples/import/insert-template.txt b/projects/demo/src/modules/components/marker-icon/examples/import/insert-template.md
similarity index 83%
rename from projects/demo/src/modules/components/marker-icon/examples/import/insert-template.txt
rename to projects/demo/src/modules/components/marker-icon/examples/import/insert-template.md
index 9c961acf7d18..448eb3ab5dc3 100644
--- a/projects/demo/src/modules/components/marker-icon/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/marker-icon/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 <tui-marker-icon [src]="tuiIconSettings"></tui-marker-icon>
+```
diff --git a/projects/demo/src/modules/components/marker-icon/marker-icon.component.ts b/projects/demo/src/modules/components/marker-icon/marker-icon.component.ts
index bdf3812331c1..c1916d093ff2 100644
--- a/projects/demo/src/modules/components/marker-icon/marker-icon.component.ts
+++ b/projects/demo/src/modules/components/marker-icon/marker-icon.component.ts
@@ -1,20 +1,9 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeXL, TuiSizeXS} from '@taiga-ui/core';
 import {TuiMarkerIconModeT} from '@taiga-ui/kit';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-marker-icon',
     changeDetection,
@@ -22,23 +11,23 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     styleUrls: ['./marker-icon.style.less'],
 })
 export class ExampleTuiMarkerIconComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
     readonly icons = ['tuiIconAttachLarge', 'tuiIconCallLarge', 'tuiIconStarLarge'];
diff --git a/projects/demo/src/modules/components/mobile-themes/mobile-themes.component.ts b/projects/demo/src/modules/components/mobile-themes/mobile-themes.component.ts
index cbf2d80ae43f..fa642a52e195 100644
--- a/projects/demo/src/modules/components/mobile-themes/mobile-themes.component.ts
+++ b/projects/demo/src/modules/components/mobile-themes/mobile-themes.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-mobile-themes',
@@ -14,13 +8,13 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiMobileThemesComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/components/notification/notification.component.ts b/projects/demo/src/modules/components/notification/notification.component.ts
index 7a1118d9fa38..5488d0ca99b9 100644
--- a/projects/demo/src/modules/components/notification/notification.component.ts
+++ b/projects/demo/src/modules/components/notification/notification.component.ts
@@ -1,35 +1,26 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiNotification} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleOptions} from '!!raw-loader!./examples/import/define-options.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-notification',
     templateUrl: './notification.template.html',
     changeDetection,
 })
 export class ExampleTuiNotificationComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly exampleOptions = exampleOptions;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
+    readonly exampleOptions = import('!!raw-loader!./examples/import/define-options.txt');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
     hasIcon = true;
diff --git a/projects/demo/src/modules/components/pagination/examples/import/import-module.md b/projects/demo/src/modules/components/pagination/examples/import/import-module.md
new file mode 100644
index 000000000000..5842252421f5
--- /dev/null
+++ b/projects/demo/src/modules/components/pagination/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiPaginationModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiPaginationModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/pagination/examples/import/import-module.txt b/projects/demo/src/modules/components/pagination/examples/import/import-module.txt
deleted file mode 100644
index de0a936fdafa..000000000000
--- a/projects/demo/src/modules/components/pagination/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiPaginationModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiPaginationModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/pagination/examples/import/insert-template.md b/projects/demo/src/modules/components/pagination/examples/import/insert-template.md
new file mode 100644
index 000000000000..452136c3acbd
--- /dev/null
+++ b/projects/demo/src/modules/components/pagination/examples/import/insert-template.md
@@ -0,0 +1,7 @@
+```html
+<tui-pagination
+  [length]="pageCount"
+  [index]="currentPage"
+  (indexChange)="goToPage($event)"
+></tui-pagination>
+```
diff --git a/projects/demo/src/modules/components/pagination/examples/import/insert-template.txt b/projects/demo/src/modules/components/pagination/examples/import/insert-template.txt
deleted file mode 100644
index 6957c1759ecb..000000000000
--- a/projects/demo/src/modules/components/pagination/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<tui-pagination [length]="pageCount"
-                [index]="currentPage"
-                (indexChange)="goToPage($event)"></tui-pagination>
diff --git a/projects/demo/src/modules/components/pagination/pagination.component.ts b/projects/demo/src/modules/components/pagination/pagination.component.ts
index 8278c156fa2b..c30e340d27b9 100644
--- a/projects/demo/src/modules/components/pagination/pagination.component.ts
+++ b/projects/demo/src/modules/components/pagination/pagination.component.ts
@@ -3,49 +3,36 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-pagination',
     templateUrl: './pagination.template.html',
     changeDetection,
 })
 export class ExampleTuiPaginationComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
     readonly example1: TuiDocExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
         LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
     readonly example2: TuiDocExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
         LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
     readonly example3: TuiDocExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
         LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
     };
 
     focusable = true;
diff --git a/projects/demo/src/modules/components/preview/examples/import/component.md b/projects/demo/src/modules/components/preview/examples/import/component.md
new file mode 100644
index 000000000000..6035dd42d396
--- /dev/null
+++ b/projects/demo/src/modules/components/preview/examples/import/component.md
@@ -0,0 +1,20 @@
+```ts
+import {Component, Inject, TemplateRef, ViewChild} from '@angular/core';
+import {TuiPreviewService} from '@taiga-ui/addon-preview';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {TuiDialogContext} from '@taiga-ui/core';
+
+@Component({
+  // ...
+})
+export class SomeComponent {
+  @ViewChild('preview')
+  readonly preview: TemplateRef<TuiDialogContext<void>>;
+
+  constructor(@Inject(PreviewDialogService) private readonly previewDialogService: PreviewDialogService) {}
+
+  show() {
+    this.previewDialogService.open(this.preview).subscribe();
+  }
+}
+```
diff --git a/projects/demo/src/modules/components/preview/examples/import/component.txt b/projects/demo/src/modules/components/preview/examples/import/component.txt
deleted file mode 100644
index 95c823f388dd..000000000000
--- a/projects/demo/src/modules/components/preview/examples/import/component.txt
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Component, Inject, TemplateRef, ViewChild} from '@angular/core';
-import {TuiPreviewService} from '@taiga-ui/addon-preview';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import {TuiDialogContext} from '@taiga-ui/core';
-
-@Component({
-    ...
-})
-export class SomeComponent {
-    @ViewChild('preview')
-    readonly preview: TemplateRef<TuiDialogContext<void>>;
-
-    constructor(
-        @Inject(PreviewDialogService) private readonly previewDialogService: PreviewDialogService,
-    ) {}
-
-    show() {
-        this.previewDialogService.open(this.preview).subscribe();
-    }
-}
diff --git a/projects/demo/src/modules/components/preview/examples/import/import-module.md b/projects/demo/src/modules/components/preview/examples/import/import-module.md
new file mode 100644
index 000000000000..0e0ac9b1b9fc
--- /dev/null
+++ b/projects/demo/src/modules/components/preview/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiPreviewModule} from '@taiga-ui/addon-preview';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiPreviewModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/preview/examples/import/import-module.txt b/projects/demo/src/modules/components/preview/examples/import/import-module.txt
deleted file mode 100644
index 7737b32cf489..000000000000
--- a/projects/demo/src/modules/components/preview/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiPreviewModule} from '@taiga-ui/addon-preview';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiPreviewModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/preview/examples/import/template.md b/projects/demo/src/modules/components/preview/examples/import/template.md
new file mode 100644
index 000000000000..bbf18d467201
--- /dev/null
+++ b/projects/demo/src/modules/components/preview/examples/import/template.md
@@ -0,0 +1,35 @@
+```html
+<ng-template #preview>
+  <tui-preview>
+    <tui-preview-title>{{title}}</tui-preview-title>
+    <tui-preview-pagination
+      [length]="2"
+      [(index)]="index"
+    ></tui-preview-pagination>
+
+    <button
+      tuiIconButton
+      tuiPreviewAction
+      icon="tuiIconTrash"
+      title="Delete"
+      (click)="delete()"
+    ></button>
+    <button
+      tuiIconButton
+      tuiPreviewAction
+      icon="tuiIconDownload"
+      title="Download"
+      (click)="download()"
+    ></button>
+
+    <div
+      polymorpheus-outlet
+      [content]="previewContent"
+    >
+      <ng-template let-src>
+        <img [src]="src" />
+      </ng-template>
+    </div>
+  </tui-preview>
+</ng-template>
+```
diff --git a/projects/demo/src/modules/components/preview/examples/import/template.txt b/projects/demo/src/modules/components/preview/examples/import/template.txt
deleted file mode 100644
index 13d2dd4fe9fc..000000000000
--- a/projects/demo/src/modules/components/preview/examples/import/template.txt
+++ /dev/null
@@ -1,30 +0,0 @@
-<ng-template #preview>
-    <tui-preview>
-        <tui-preview-title>{{title}}</tui-preview-title>
-        <tui-preview-pagination
-            [length]="2"
-            [(index)]="index"
-        ></tui-preview-pagination>
-
-        <button
-            tuiIconButton
-            tuiPreviewAction
-            icon="tuiIconTrash"
-            title="Delete"
-            (click)="delete()"
-        ></button>
-        <button
-            tuiIconButton
-            tuiPreviewAction
-            icon="tuiIconDownload"
-            title="Download"
-            (click)="download()"
-        ></button>
-
-        <div polymorpheus-outlet [content]="previewContent">
-            <ng-template let-src>
-                <img [src]="src" />
-            </ng-template>
-        </div>
-    </tui-preview>
-</ng-template>
diff --git a/projects/demo/src/modules/components/preview/preview.component.ts b/projects/demo/src/modules/components/preview/preview.component.ts
index f310d43c64b1..b598112ec095 100644
--- a/projects/demo/src/modules/components/preview/preview.component.ts
+++ b/projects/demo/src/modules/components/preview/preview.component.ts
@@ -1,20 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleComponent} from '!!raw-loader!./examples/import/component.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-preview',
@@ -22,25 +8,25 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiPreviewComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleComponent = exampleComponent;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleComponent = import('!!raw-loader!./examples/import/component.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        LESS: example1Less,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        LESS: example2Less,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        LESS: example3Less,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/components/primitive-checkbox/examples/import/define-options.md b/projects/demo/src/modules/components/primitive-checkbox/examples/import/define-options.md
new file mode 100644
index 000000000000..dc29692564c6
--- /dev/null
+++ b/projects/demo/src/modules/components/primitive-checkbox/examples/import/define-options.md
@@ -0,0 +1,19 @@
+```ts
+import {TUI_CHECKBOX_OPTIONS, TUI_CHECKBOX_DEFAULT_OPTIONS} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  providers: [
+    {
+      provide: TUI_CHECKBOX_OPTIONS,
+      useValue: {
+        ...TUI_CHECKBOX_DEFAULT_OPTIONS,
+        size: 'l',
+      },
+    },
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/primitive-checkbox/examples/import/define-options.txt b/projects/demo/src/modules/components/primitive-checkbox/examples/import/define-options.txt
deleted file mode 100644
index ca26c2e6eac1..000000000000
--- a/projects/demo/src/modules/components/primitive-checkbox/examples/import/define-options.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {TUI_CHECKBOX_OPTIONS, TUI_CHECKBOX_DEFAULT_OPTIONS} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    providers: [{
-        provide: TUI_CHECKBOX_OPTIONS,
-        useValue: {
-            ...TUI_CHECKBOX_DEFAULT_OPTIONS,
-            size: 'l'
-        }
-    }],
-...
diff --git a/projects/demo/src/modules/components/primitive-checkbox/examples/import/import-module.md b/projects/demo/src/modules/components/primitive-checkbox/examples/import/import-module.md
new file mode 100644
index 000000000000..720cc578b9b1
--- /dev/null
+++ b/projects/demo/src/modules/components/primitive-checkbox/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiPrimitiveCheckboxModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiPrimitiveCheckboxModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/primitive-checkbox/examples/import/import-module.txt b/projects/demo/src/modules/components/primitive-checkbox/examples/import/import-module.txt
deleted file mode 100644
index 42cf8f3eb714..000000000000
--- a/projects/demo/src/modules/components/primitive-checkbox/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiPrimitiveCheckboxModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiPrimitiveCheckboxModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/primitive-checkbox/examples/import/insert-template.txt b/projects/demo/src/modules/components/primitive-checkbox/examples/import/insert-template.md
similarity index 94%
rename from projects/demo/src/modules/components/primitive-checkbox/examples/import/insert-template.txt
rename to projects/demo/src/modules/components/primitive-checkbox/examples/import/insert-template.md
index a35f9fd3854f..64f4d9b48078 100644
--- a/projects/demo/src/modules/components/primitive-checkbox/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/primitive-checkbox/examples/import/insert-template.md
@@ -1,3 +1,5 @@
+```html
 <tui-primitive-checkbox [value]="true"></tui-primitive-checkbox>
 <tui-primitive-checkbox [value]="false"></tui-primitive-checkbox>
 <tui-primitive-checkbox [value]="null"></tui-primitive-checkbox>
+```
diff --git a/projects/demo/src/modules/components/primitive-checkbox/primitive-checkbox.component.ts b/projects/demo/src/modules/components/primitive-checkbox/primitive-checkbox.component.ts
index b6ba901e43d5..c0bb4ebb5090 100644
--- a/projects/demo/src/modules/components/primitive-checkbox/primitive-checkbox.component.ts
+++ b/projects/demo/src/modules/components/primitive-checkbox/primitive-checkbox.component.ts
@@ -2,19 +2,15 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiSizeL} from '@taiga-ui/core';
 
-import {default as exampleOptions} from '!!raw-loader!./examples/import/define-options.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
 @Component({
     selector: 'example-tui-checkbox',
     templateUrl: './primitive-checkbox.template.html',
     changeDetection,
 })
 export class ExampleTuiPrimitiveCheckboxComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleOptions = exampleOptions;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleOptions = import('!!raw-loader!./examples/import/define-options.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
     readonly sizeVariants: readonly TuiSizeL[] = ['m', 'l'];
 
diff --git a/projects/demo/src/modules/components/progress-circle/examples/import/import-module.md b/projects/demo/src/modules/components/progress-circle/examples/import/import-module.md
new file mode 100644
index 000000000000..630e4393959b
--- /dev/null
+++ b/projects/demo/src/modules/components/progress-circle/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiProgressModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiProgressModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/progress-circle/examples/import/import-module.txt b/projects/demo/src/modules/components/progress-circle/examples/import/import-module.txt
deleted file mode 100644
index 9f1153ac5e13..000000000000
--- a/projects/demo/src/modules/components/progress-circle/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiProgressModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiProgressModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/progress-circle/examples/import/insert-template.txt b/projects/demo/src/modules/components/progress-circle/examples/import/insert-template.md
similarity index 52%
rename from projects/demo/src/modules/components/progress-circle/examples/import/insert-template.txt
rename to projects/demo/src/modules/components/progress-circle/examples/import/insert-template.md
index 1740e61eb115..a25c9ae02cd4 100644
--- a/projects/demo/src/modules/components/progress-circle/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/progress-circle/examples/import/insert-template.md
@@ -1,4 +1,6 @@
+```html
 <tui-progress-circle
-    [max]="100"
-    [value]="70"
+  [max]="100"
+  [value]="70"
 ></tui-progress-circle>
+```
diff --git a/projects/demo/src/modules/components/progress-circle/progress-circle.component.ts b/projects/demo/src/modules/components/progress-circle/progress-circle.component.ts
index a115e86edd91..aa45bc2d6084 100644
--- a/projects/demo/src/modules/components/progress-circle/progress-circle.component.ts
+++ b/projects/demo/src/modules/components/progress-circle/progress-circle.component.ts
@@ -1,23 +1,8 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeS, TuiSizeXL} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-progress-circle',
     templateUrl: './progress-circle.template.html',
@@ -41,29 +26,29 @@ export class ExampleProgressCircleComponent {
 
     color = this.colorVariants[0];
 
-    readonly basicExample: FrontEndExample = {
-        HTML: example1Html,
-        TypeScript: example1Ts,
+    readonly basicExample: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
     };
 
-    readonly sizesExample: FrontEndExample = {
-        HTML: example2Html,
-        LESS: example2Less,
-        TypeScript: example2Ts,
+    readonly sizesExample: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
     };
 
-    readonly labelExample: FrontEndExample = {
-        HTML: example3Html,
-        LESS: example3Less,
-        TypeScript: example3Ts,
+    readonly labelExample: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
     };
 
-    readonly colorsExample: FrontEndExample = {
-        HTML: example4Html,
-        LESS: example4Less,
-        TypeScript: example4Ts,
+    readonly colorsExample: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
     };
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 }
diff --git a/projects/demo/src/modules/components/progress-segmented/examples/import/import-module.md b/projects/demo/src/modules/components/progress-segmented/examples/import/import-module.md
new file mode 100644
index 000000000000..630e4393959b
--- /dev/null
+++ b/projects/demo/src/modules/components/progress-segmented/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiProgressModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiProgressModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/progress-segmented/examples/import/import-module.txt b/projects/demo/src/modules/components/progress-segmented/examples/import/import-module.txt
deleted file mode 100644
index 9f1153ac5e13..000000000000
--- a/projects/demo/src/modules/components/progress-segmented/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiProgressModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiProgressModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/progress-segmented/examples/import/insert-template.txt b/projects/demo/src/modules/components/progress-segmented/examples/import/insert-template.md
similarity index 57%
rename from projects/demo/src/modules/components/progress-segmented/examples/import/insert-template.txt
rename to projects/demo/src/modules/components/progress-segmented/examples/import/insert-template.md
index 171b51cbcc17..4e9fbebfd6ff 100644
--- a/projects/demo/src/modules/components/progress-segmented/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/components/progress-segmented/examples/import/insert-template.md
@@ -1,4 +1,6 @@
+```html
 <tui-progress-segmented
-    [max]="5"
-    [value]="3"
+  [max]="5"
+  [value]="3"
 ></tui-progress-segmented>
+```
diff --git a/projects/demo/src/modules/components/progress-segmented/progress-segmented.component.ts b/projects/demo/src/modules/components/progress-segmented/progress-segmented.component.ts
index 14d6fcd4878f..6cf17e6964cc 100644
--- a/projects/demo/src/modules/components/progress-segmented/progress-segmented.component.ts
+++ b/projects/demo/src/modules/components/progress-segmented/progress-segmented.component.ts
@@ -1,23 +1,7 @@
 import {Component} from '@angular/core';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-progress-segmented',
     templateUrl: './progress-segmented.template.html',
@@ -42,30 +26,30 @@ export class ExampleProgressSegmentedComponent {
 
     color = this.colorVariants[0];
 
-    readonly basicExample: FrontEndExample = {
-        HTML: example1Html,
-        TypeScript: example1Ts,
-        LESS: example1Less,
+    readonly basicExample: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly sizesExample: FrontEndExample = {
-        HTML: example2Html,
-        TypeScript: example2Ts,
-        LESS: example2Less,
+    readonly sizesExample: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly colorsExample: FrontEndExample = {
-        HTML: example3Html,
-        TypeScript: example3Ts,
-        LESS: example3Less,
+    readonly colorsExample: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
-    readonly labelsExample: FrontEndExample = {
-        HTML: example4Html,
-        TypeScript: example4Ts,
-        LESS: example4Less,
+    readonly labelsExample: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
     };
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 }
diff --git a/projects/demo/src/modules/components/pull-to-refresh/examples/import/import-module.md b/projects/demo/src/modules/components/pull-to-refresh/examples/import/import-module.md
new file mode 100644
index 000000000000..3d17c86b125f
--- /dev/null
+++ b/projects/demo/src/modules/components/pull-to-refresh/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiPullToRefreshModule} from '@taiga-ui/addon-mobile';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiPullToRefreshModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/pull-to-refresh/examples/import/import-module.txt b/projects/demo/src/modules/components/pull-to-refresh/examples/import/import-module.txt
deleted file mode 100644
index e51cd61dbb10..000000000000
--- a/projects/demo/src/modules/components/pull-to-refresh/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiPullToRefreshModule} from '@taiga-ui/addon-mobile';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiPullToRefreshModule,
-    ],
-...
diff --git a/projects/demo/src/modules/components/pull-to-refresh/examples/import/insert-template.md b/projects/demo/src/modules/components/pull-to-refresh/examples/import/insert-template.md
new file mode 100644
index 000000000000..22ab91817778
--- /dev/null
+++ b/projects/demo/src/modules/components/pull-to-refresh/examples/import/insert-template.md
@@ -0,0 +1,3 @@
+```html
+<tui-pull-to-refresh (pulled)="onPulled()">content</tui-pull-to-refresh>
+```
diff --git a/projects/demo/src/modules/components/pull-to-refresh/examples/import/insert-template.txt b/projects/demo/src/modules/components/pull-to-refresh/examples/import/insert-template.txt
deleted file mode 100644
index 5622455d5200..000000000000
--- a/projects/demo/src/modules/components/pull-to-refresh/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<tui-pull-to-refresh (pulled)="onPulled()">
-    content
-</tui-pull-to-refresh>
diff --git a/projects/demo/src/modules/components/pull-to-refresh/pull-to-refresh.component.ts b/projects/demo/src/modules/components/pull-to-refresh/pull-to-refresh.component.ts
index c92722cd56da..6822fd8afcce 100644
--- a/projects/demo/src/modules/components/pull-to-refresh/pull-to-refresh.component.ts
+++ b/projects/demo/src/modules/components/pull-to-refresh/pull-to-refresh.component.ts
@@ -1,14 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-mobile-pull-to-refresh-page',
@@ -16,16 +8,16 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiPullToRefreshComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 }
diff --git a/projects/demo/src/modules/components/radio-block/examples/import/declare-form.md b/projects/demo/src/modules/components/radio-block/examples/import/declare-form.md
new file mode 100644
index 000000000000..dc7b6cc6040c
--- /dev/null
+++ b/projects/demo/src/modules/components/radio-block/examples/import/declare-form.md
@@ -0,0 +1,14 @@
+```ts
+import {FormControl, FormGroup} from '@angular/forms';
+
+// ...
+
+@Component({
+  // ...
+})
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl('orange'),
+  });
+}
+```
diff --git a/projects/demo/src/modules/components/radio-block/examples/import/import-module.md b/projects/demo/src/modules/components/radio-block/examples/import/import-module.md
new file mode 100644
index 000000000000..7196886f0111
--- /dev/null
+++ b/projects/demo/src/modules/components/radio-block/examples/import/import-module.md
@@ -0,0 +1,17 @@
+```ts
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiRadioBlockModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    FormsModule,
+    ReactiveFormsModule,
+    TuiRadioBlockModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/radio-block/examples/import/import-module.txt b/projects/demo/src/modules/components/radio-block/examples/import/import-module.txt
deleted file mode 100644
index 9ff74c4e1783..000000000000
--- a/projects/demo/src/modules/components/radio-block/examples/import/import-module.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiRadioBlockModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        FormsModule,
-        ReactiveFormsModule,
-        TuiRadioBlockModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/radio-block/examples/import/insert-template.md b/projects/demo/src/modules/components/radio-block/examples/import/insert-template.md
new file mode 100644
index 000000000000..e52c248677f5
--- /dev/null
+++ b/projects/demo/src/modules/components/radio-block/examples/import/insert-template.md
@@ -0,0 +1,22 @@
+```html
+<div [formGroup]="testForm">
+  <tui-radio-block
+    formControlName="testValue"
+    item="orange"
+  >
+    Oranges
+  </tui-radio-block>
+  <tui-radio-block
+    formControlName="testValue"
+    item="apple"
+  >
+    Apples
+  </tui-radio-block>
+  <tui-radio-block
+    formControlName="testValue"
+    item="pineapple"
+  >
+    Pineapples
+  </tui-radio-block>
+</div>
+```
diff --git a/projects/demo/src/modules/components/radio-block/examples/import/insert-template.txt b/projects/demo/src/modules/components/radio-block/examples/import/insert-template.txt
deleted file mode 100644
index ea3848d5928a..000000000000
--- a/projects/demo/src/modules/components/radio-block/examples/import/insert-template.txt
+++ /dev/null
@@ -1,14 +0,0 @@
-<div [formGroup]="testForm">
-    <tui-radio-block formControlName="testValue"
-                     item="orange">
-        Oranges
-    </tui-radio-block>
-    <tui-radio-block formControlName="testValue"
-                     item="apple">
-        Apples
-    </tui-radio-block>
-    <tui-radio-block formControlName="testValue"
-                     item="pineapple">
-        Pinapples
-    </tui-radio-block>
-</div>
diff --git a/projects/demo/src/modules/components/radio-block/radio-block.component.ts b/projects/demo/src/modules/components/radio-block/radio-block.component.ts
index 0244aba9c0b4..1077202ab63b 100644
--- a/projects/demo/src/modules/components/radio-block/radio-block.component.ts
+++ b/projects/demo/src/modules/components/radio-block/radio-block.component.ts
@@ -1,20 +1,9 @@
 import {Component, forwardRef} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiHorizontalDirection, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleForm} from '!!raw-loader!./examples/import/declare-form.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -30,24 +19,24 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiRadioBlockComponent extends AbstractExampleTuiControl {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly exampleForm = exampleForm;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
+    readonly exampleForm = import('!!raw-loader!./examples/import/declare-form.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
     readonly contentAlignVariants: readonly TuiHorizontalDirection[] = ['left', 'right'];
diff --git a/projects/demo/src/modules/components/radio-labeled/examples/import/declare-form.txt b/projects/demo/src/modules/components/radio-labeled/examples/import/declare-form.md
similarity index 51%
rename from projects/demo/src/modules/components/radio-labeled/examples/import/declare-form.txt
rename to projects/demo/src/modules/components/radio-labeled/examples/import/declare-form.md
index 19177f4b2490..0e736be06367 100644
--- a/projects/demo/src/modules/components/radio-labeled/examples/import/declare-form.txt
+++ b/projects/demo/src/modules/components/radio-labeled/examples/import/declare-form.md
@@ -1,12 +1,14 @@
+```ts
 import {FormControl, FormGroup} from '@angular/forms';
 
-...
+// ...
 
 @Component({
-    ...
+  // ...
 })
 export class MyComponent {
-    testForm = new FormGroup({
-        testValue: new FormControl()
-    });
+  testForm = new FormGroup({
+    testValue: new FormControl(),
+  });
 }
+```
diff --git a/projects/demo/src/modules/components/radio-labeled/examples/import/import-module.md b/projects/demo/src/modules/components/radio-labeled/examples/import/import-module.md
new file mode 100644
index 000000000000..a9748bfe99e5
--- /dev/null
+++ b/projects/demo/src/modules/components/radio-labeled/examples/import/import-module.md
@@ -0,0 +1,17 @@
+```ts
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiRadioLabeledModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    FormsModule,
+    ReactiveFormsModule,
+    TuiRadioLabeledModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/radio-labeled/examples/import/import-module.txt b/projects/demo/src/modules/components/radio-labeled/examples/import/import-module.txt
deleted file mode 100644
index 6e4d16d0ca95..000000000000
--- a/projects/demo/src/modules/components/radio-labeled/examples/import/import-module.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiRadioLabeledModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        FormsModule,
-        ReactiveFormsModule,
-        TuiRadioLabeledModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/radio-labeled/examples/import/insert-template.md b/projects/demo/src/modules/components/radio-labeled/examples/import/insert-template.md
new file mode 100644
index 000000000000..3d93fdfd5f05
--- /dev/null
+++ b/projects/demo/src/modules/components/radio-labeled/examples/import/insert-template.md
@@ -0,0 +1,22 @@
+```html
+<div [formGroup]="testForm">
+  <tui-radio-labeled
+    formControlName="testValue"
+    item="One"
+  >
+    One
+  </tui-radio-labeled>
+  <tui-radio-labeled
+    formControlName="testValue"
+    item="Two"
+  >
+    Two
+  </tui-radio-labeled>
+  <tui-radio-labeled
+    formControlName="testValue"
+    item="Three"
+  >
+    Three
+  </tui-radio-labeled>
+</div>
+```
diff --git a/projects/demo/src/modules/components/radio-labeled/examples/import/insert-template.txt b/projects/demo/src/modules/components/radio-labeled/examples/import/insert-template.txt
deleted file mode 100644
index 971e409da9ac..000000000000
--- a/projects/demo/src/modules/components/radio-labeled/examples/import/insert-template.txt
+++ /dev/null
@@ -1,14 +0,0 @@
-<div [formGroup]="testForm">
-    <tui-radio-labeled formControlName="testValue"
-                       item="One">
-        One
-    </tui-radio-labeled>
-    <tui-radio-labeled formControlName="testValue"
-                       item="Two">
-        Two
-    </tui-radio-labeled>
-    <tui-radio-labeled formControlName="testValue"
-                       item="Three">
-        Three
-    </tui-radio-labeled>
-</div>
diff --git a/projects/demo/src/modules/components/radio-labeled/radio-labeled.component.ts b/projects/demo/src/modules/components/radio-labeled/radio-labeled.component.ts
index 7ef2a2a84520..8591bba08a05 100644
--- a/projects/demo/src/modules/components/radio-labeled/radio-labeled.component.ts
+++ b/projects/demo/src/modules/components/radio-labeled/radio-labeled.component.ts
@@ -1,20 +1,9 @@
 import {Component, forwardRef} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleForm} from '!!raw-loader!./examples/import/declare-form.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -31,24 +20,24 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiRadioLabeledComponent extends AbstractExampleTuiControl {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly exampleForm = exampleForm;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
+    readonly exampleForm = import('!!raw-loader!./examples/import/declare-form.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
     readonly items = [{name: 'tariff1'}, {name: 'tariff2'}, {name: 'tariff3'}];
diff --git a/projects/demo/src/modules/components/radio-list/radio-list.component.ts b/projects/demo/src/modules/components/radio-list/radio-list.component.ts
index 0da9fc09618f..33fc393a429f 100644
--- a/projects/demo/src/modules/components/radio-list/radio-list.component.ts
+++ b/projects/demo/src/modules/components/radio-list/radio-list.component.ts
@@ -1,6 +1,7 @@
 import {Component, forwardRef} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
     ALWAYS_FALSE_HANDLER,
     ALWAYS_TRUE_HANDLER,
@@ -8,17 +9,6 @@ import {
 } from '@taiga-ui/cdk';
 import {TuiOrientationT, TuiSizeL} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleForm} from '!!raw-loader!./examples/import/declare-form.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -35,20 +25,20 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiRadioListComponent extends AbstractExampleTuiControl {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly exampleForm = exampleForm;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
+    readonly exampleForm = import('!!raw-loader!./examples/import/declare-form.txt');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
     readonly orientationVariants: readonly TuiOrientationT[] = ['vertical', 'horizontal'];
diff --git a/projects/demo/src/modules/components/radio/examples/import/declare-form.md b/projects/demo/src/modules/components/radio/examples/import/declare-form.md
new file mode 100644
index 000000000000..0e736be06367
--- /dev/null
+++ b/projects/demo/src/modules/components/radio/examples/import/declare-form.md
@@ -0,0 +1,14 @@
+```ts
+import {FormControl, FormGroup} from '@angular/forms';
+
+// ...
+
+@Component({
+  // ...
+})
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl(),
+  });
+}
+```
diff --git a/projects/demo/src/modules/components/radio/examples/import/declare-form.txt b/projects/demo/src/modules/components/radio/examples/import/declare-form.txt
deleted file mode 100644
index 19177f4b2490..000000000000
--- a/projects/demo/src/modules/components/radio/examples/import/declare-form.txt
+++ /dev/null
@@ -1,12 +0,0 @@
-import {FormControl, FormGroup} from '@angular/forms';
-
-...
-
-@Component({
-    ...
-})
-export class MyComponent {
-    testForm = new FormGroup({
-        testValue: new FormControl()
-    });
-}
diff --git a/projects/demo/src/modules/components/radio/examples/import/define-options.md b/projects/demo/src/modules/components/radio/examples/import/define-options.md
new file mode 100644
index 000000000000..e87914654a34
--- /dev/null
+++ b/projects/demo/src/modules/components/radio/examples/import/define-options.md
@@ -0,0 +1,19 @@
+```ts
+import {TUI_RADIO_OPTIONS, TUI_RADIO_DEFAULT_OPTIONS} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  providers: [
+    {
+      provide: TUI_RADIO_OPTIONS,
+      useValue: {
+        ...TUI_RADIO_DEFAULT_OPTIONS,
+        size: 'l',
+      },
+    },
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/radio/examples/import/define-options.txt b/projects/demo/src/modules/components/radio/examples/import/define-options.txt
deleted file mode 100644
index ab372fe5adb1..000000000000
--- a/projects/demo/src/modules/components/radio/examples/import/define-options.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {TUI_RADIO_OPTIONS, TUI_RADIO_DEFAULT_OPTIONS} from '@taiga-ui/core';
- 
-...
- 
-@NgModule({
-    providers: [{
-        provide: TUI_RADIO_OPTIONS,
-        useValue: {
-            ...TUI_RADIO_DEFAULT_OPTIONS,
-            size: 'l'
-        }
-    }],
-...
diff --git a/projects/demo/src/modules/components/radio/examples/import/import-module.md b/projects/demo/src/modules/components/radio/examples/import/import-module.md
new file mode 100644
index 000000000000..0ae06668b8c3
--- /dev/null
+++ b/projects/demo/src/modules/components/radio/examples/import/import-module.md
@@ -0,0 +1,17 @@
+```ts
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiRadioModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    FormsModule,
+    ReactiveFormsModule,
+    TuiRadioModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/radio/examples/import/import-module.txt b/projects/demo/src/modules/components/radio/examples/import/import-module.txt
deleted file mode 100644
index c19612a4e201..000000000000
--- a/projects/demo/src/modules/components/radio/examples/import/import-module.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiRadioModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        FormsModule,
-        ReactiveFormsModule,
-        TuiRadioModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/radio/examples/import/insert-template.md b/projects/demo/src/modules/components/radio/examples/import/insert-template.md
new file mode 100644
index 000000000000..bb64683edca3
--- /dev/null
+++ b/projects/demo/src/modules/components/radio/examples/import/insert-template.md
@@ -0,0 +1,16 @@
+```html
+<form [formGroup]="testForm">
+  <tui-radio
+    formControlName="testValue"
+    item="One"
+  ></tui-radio>
+  <tui-radio
+    formControlName="testValue"
+    item="Two"
+  ></tui-radio>
+  <tui-radio
+    formControlName="testValue"
+    item="Three"
+  ></tui-radio>
+</form>
+```
diff --git a/projects/demo/src/modules/components/radio/examples/import/insert-template.txt b/projects/demo/src/modules/components/radio/examples/import/insert-template.txt
deleted file mode 100644
index 833f7361fed7..000000000000
--- a/projects/demo/src/modules/components/radio/examples/import/insert-template.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-<form [formGroup]="testForm">
-    <tui-radio formControlName="testValue"
-               item="One"></tui-radio>
-    <tui-radio formControlName="testValue"
-               item="Two"></tui-radio>
-    <tui-radio formControlName="testValue"
-               item="Three"></tui-radio>
-</form>
diff --git a/projects/demo/src/modules/components/radio/radio.component.ts b/projects/demo/src/modules/components/radio/radio.component.ts
index ffedea71032a..e4fa805a8e99 100644
--- a/projects/demo/src/modules/components/radio/radio.component.ts
+++ b/projects/demo/src/modules/components/radio/radio.component.ts
@@ -1,19 +1,10 @@
 import {Component, forwardRef} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TUI_DEFAULT_IDENTITY_MATCHER, TuiIdentityMatcher} from '@taiga-ui/cdk';
 import {TuiSizeL} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleForm} from '!!raw-loader!./examples/import/declare-form.txt';
-import {default as exampleOptions} from '!!raw-loader!./examples/import/define-options.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 
@@ -29,19 +20,19 @@ import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstr
     ],
 })
 export class ExampleTuiRadioComponent extends AbstractExampleTuiControl {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly exampleForm = exampleForm;
-    readonly exampleOptions = exampleOptions;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
+    readonly exampleForm = import('!!raw-loader!./examples/import/declare-form.md');
+    readonly exampleOptions = import('!!raw-loader!./examples/import/define-options.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
     items = [
diff --git a/projects/demo/src/modules/components/scrollbar/examples/import/import-module.md b/projects/demo/src/modules/components/scrollbar/examples/import/import-module.md
new file mode 100644
index 000000000000..28a2d03af923
--- /dev/null
+++ b/projects/demo/src/modules/components/scrollbar/examples/import/import-module.md
@@ -0,0 +1,15 @@
+```ts
+import {TuiScrollbarModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  // ...
+  imports: [
+    //  ...
+    TuiScrollbarModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/scrollbar/examples/import/import-module.txt b/projects/demo/src/modules/components/scrollbar/examples/import/import-module.txt
deleted file mode 100644
index 1bd3ef145193..000000000000
--- a/projects/demo/src/modules/components/scrollbar/examples/import/import-module.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-import {TuiScrollbarModule} from '@taiga-ui/core';
-
-…
-
-@NgModule({
-    …
-    imports: [
-        …
-        TuiScrollbarModule,
-    ],
-…
diff --git a/projects/demo/src/modules/components/scrollbar/examples/import/insert-template.md b/projects/demo/src/modules/components/scrollbar/examples/import/insert-template.md
new file mode 100644
index 000000000000..d48325e22b02
--- /dev/null
+++ b/projects/demo/src/modules/components/scrollbar/examples/import/insert-template.md
@@ -0,0 +1,9 @@
+```html
+<tui-scrollbar>
+  <ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ul>
+</tui-scrollbar>
+```
diff --git a/projects/demo/src/modules/components/scrollbar/examples/import/insert-template.txt b/projects/demo/src/modules/components/scrollbar/examples/import/insert-template.txt
deleted file mode 100644
index 581a0ab9efc8..000000000000
--- a/projects/demo/src/modules/components/scrollbar/examples/import/insert-template.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<tui-scrollbar>
-    <ul>
-        <li>Item 1</li>
-        <li>Item 2</li>
-        <li>Item 3</li>
-    </ul>
-</tui-scrollbar>
diff --git a/projects/demo/src/modules/components/scrollbar/scrollbar.component.ts b/projects/demo/src/modules/components/scrollbar/scrollbar.component.ts
index 17bd86ba4105..fbbe4f861e67 100644
--- a/projects/demo/src/modules/components/scrollbar/scrollbar.component.ts
+++ b/projects/demo/src/modules/components/scrollbar/scrollbar.component.ts
@@ -1,65 +1,45 @@
 import {Component} from '@angular/core';
-
-import {default as example1Ts} from '!!raw-loader!./examples/1/component.ts';
-import {default as example1Less} from '!!raw-loader!./examples/1/style.less';
-import {default as example1Html} from '!!raw-loader!./examples/1/template.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/component.ts';
-import {default as example2Less} from '!!raw-loader!./examples/2/style.less';
-import {default as example2Html} from '!!raw-loader!./examples/2/template.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/component.ts';
-import {default as example3Less} from '!!raw-loader!./examples/3/style.less';
-import {default as example3Html} from '!!raw-loader!./examples/3/template.html';
-import {default as example4Ts} from '!!raw-loader!./examples/4/component.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/template.html';
-import {default as example5Ts} from '!!raw-loader!./examples/5/component.ts';
-import {default as example5Html} from '!!raw-loader!./examples/5/template.html';
-import {default as example6Ts} from '!!raw-loader!./examples/6/component.ts';
-import {default as example6Less} from '!!raw-loader!./examples/6/style.less';
-import {default as example6Html} from '!!raw-loader!./examples/6/template.html';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-scrollbar',
     templateUrl: './scrollbar.template.html',
 })
 export class ExampleTuiScrollbarComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/component.ts'),
+        HTML: import('!!raw-loader!./examples/1/template.html'),
+        LESS: import('!!raw-loader!./examples/1/style.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/component.ts'),
+        HTML: import('!!raw-loader!./examples/2/template.html'),
+        LESS: import('!!raw-loader!./examples/2/style.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/component.ts'),
+        HTML: import('!!raw-loader!./examples/3/template.html'),
+        LESS: import('!!raw-loader!./examples/3/style.less'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/component.ts'),
+        HTML: import('!!raw-loader!./examples/4/template.html'),
     };
 
-    readonly example5: FrontEndExample = {
-        TypeScript: example5Ts,
-        HTML: example5Html,
+    readonly example5: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/5/component.ts'),
+        HTML: import('!!raw-loader!./examples/5/template.html'),
     };
 
-    readonly example6: FrontEndExample = {
-        TypeScript: example6Ts,
-        HTML: example6Html,
-        LESS: example6Less,
+    readonly example6: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/6/component.ts'),
+        HTML: import('!!raw-loader!./examples/6/template.html'),
+        LESS: import('!!raw-loader!./examples/6/style.less'),
     };
 }
diff --git a/projects/demo/src/modules/components/sheet/examples/import/import-module.md b/projects/demo/src/modules/components/sheet/examples/import/import-module.md
new file mode 100644
index 000000000000..bd5b0d194667
--- /dev/null
+++ b/projects/demo/src/modules/components/sheet/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiSheetModule} from '@taiga-ui/addon-mobile';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiSheetModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/sheet/examples/import/import-module.txt b/projects/demo/src/modules/components/sheet/examples/import/import-module.txt
deleted file mode 100644
index f3fb2d43464f..000000000000
--- a/projects/demo/src/modules/components/sheet/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiSheetModule} from '@taiga-ui/addon-mobile';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiSheetModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/sheet/examples/import/insert-template.md b/projects/demo/src/modules/components/sheet/examples/import/insert-template.md
new file mode 100644
index 000000000000..ebb506ec880b
--- /dev/null
+++ b/projects/demo/src/modules/components/sheet/examples/import/insert-template.md
@@ -0,0 +1,6 @@
+```html
+<tui-root>
+  <!-- Your app content -->
+  <tui-sheets-host ngProjectAs="tuiOverContent"></tui-sheets-host>
+</tui-root>
+```
diff --git a/projects/demo/src/modules/components/sheet/examples/import/insert-template.txt b/projects/demo/src/modules/components/sheet/examples/import/insert-template.txt
deleted file mode 100644
index d2b23879221c..000000000000
--- a/projects/demo/src/modules/components/sheet/examples/import/insert-template.txt
+++ /dev/null
@@ -1,4 +0,0 @@
-<tui-root>
-    <!-- Your app content -->
-    <tui-sheets-host ngProjectAs="tuiOverContent"></tui-sheets-host>
-</tui-root>
diff --git a/projects/demo/src/modules/components/sheet/sheet.component.ts b/projects/demo/src/modules/components/sheet/sheet.component.ts
index d6229af00543..b468aa9b9746 100644
--- a/projects/demo/src/modules/components/sheet/sheet.component.ts
+++ b/projects/demo/src/modules/components/sheet/sheet.component.ts
@@ -1,5 +1,6 @@
 import {Component, Inject, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
     TUI_SHEET_DEFAULT_OPTIONS,
     TuiSheet,
@@ -8,27 +9,6 @@ import {
 import {TUI_IS_MOBILE} from '@taiga-ui/cdk';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
-import {default as example5Less} from '!!raw-loader!./examples/5/index.less';
-import {default as example5Ts} from '!!raw-loader!./examples/5/index.ts';
-import {default as example6Html} from '!!raw-loader!./examples/6/index.html';
-import {default as example6Less} from '!!raw-loader!./examples/6/index.less';
-import {default as example6Ts} from '!!raw-loader!./examples/6/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 // @dynamic
 @Component({
     selector: 'example-sheet',
@@ -40,43 +20,42 @@ export class ExampleTuiSheetComponent {
     @ViewChild('template')
     readonly templateRef: PolymorpheusContent<TuiSheet<any>> = '';
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
-        LESS: example4Less,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
     };
 
-    readonly example5: FrontEndExample = {
-        TypeScript: example5Ts,
-        HTML: example5Html,
-        LESS: example5Less,
+    readonly example5: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/5/index.ts'),
+        HTML: import('!!raw-loader!./examples/5/index.html'),
+        LESS: import('!!raw-loader!./examples/5/index.less'),
     };
 
-    readonly example6: FrontEndExample = {
-        TypeScript: example6Ts,
-        HTML: example6Html,
-        LESS: example6Less,
+    readonly example6: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/6/index.ts'),
+        HTML: import('!!raw-loader!./examples/6/index.html'),
+        LESS: import('!!raw-loader!./examples/6/index.less'),
     };
 
-    readonly exampleModule = exampleModule;
-
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
     closeable = TUI_SHEET_DEFAULT_OPTIONS.closeable;
     image = TUI_SHEET_DEFAULT_OPTIONS.image;
diff --git a/projects/demo/src/modules/components/radio-block/examples/import/declare-form.txt b/projects/demo/src/modules/components/slider-old/examples/import/declare-form.md
similarity index 51%
rename from projects/demo/src/modules/components/radio-block/examples/import/declare-form.txt
rename to projects/demo/src/modules/components/slider-old/examples/import/declare-form.md
index 7c8758c705a1..6c2b1dbc4d8d 100644
--- a/projects/demo/src/modules/components/radio-block/examples/import/declare-form.txt
+++ b/projects/demo/src/modules/components/slider-old/examples/import/declare-form.md
@@ -1,12 +1,14 @@
+```ts
 import {FormControl, FormGroup} from '@angular/forms';
 
-...
+// ...
 
 @Component({
-    ...
+  // ...
 })
 export class MyComponent {
-    testForm = new FormGroup({
-        testValue: new FormControl('orange')
-    });
+  testForm = new FormGroup({
+    testValue: new FormControl(0),
+  });
 }
+```
diff --git a/projects/demo/src/modules/components/slider-old/examples/import/declare-form.txt b/projects/demo/src/modules/components/slider-old/examples/import/declare-form.txt
deleted file mode 100644
index af74213b4797..000000000000
--- a/projects/demo/src/modules/components/slider-old/examples/import/declare-form.txt
+++ /dev/null
@@ -1,12 +0,0 @@
-import {FormControl, FormGroup} from '@angular/forms';
-
-...
-
-@Component({
-    ...
-})
-export class MyComponent {
-    testForm = new FormGroup({
-        testValue: new FormControl(0)
-    });
-}
diff --git a/projects/demo/src/modules/components/slider-old/examples/import/import-module.md b/projects/demo/src/modules/components/slider-old/examples/import/import-module.md
new file mode 100644
index 000000000000..157311bcc40f
--- /dev/null
+++ b/projects/demo/src/modules/components/slider-old/examples/import/import-module.md
@@ -0,0 +1,17 @@
+```ts
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiSliderModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    FormsModule,
+    ReactiveFormsModule,
+    TuiSliderModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/slider-old/examples/import/import-module.txt b/projects/demo/src/modules/components/slider-old/examples/import/import-module.txt
deleted file mode 100644
index 98131ce46ad3..000000000000
--- a/projects/demo/src/modules/components/slider-old/examples/import/import-module.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiSliderModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        FormsModule,
-        ReactiveFormsModule,
-        TuiSliderModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/slider-old/examples/import/insert-template.md b/projects/demo/src/modules/components/slider-old/examples/import/insert-template.md
new file mode 100644
index 000000000000..adea8fa51b30
--- /dev/null
+++ b/projects/demo/src/modules/components/slider-old/examples/import/insert-template.md
@@ -0,0 +1,11 @@
+```html
+<tui-slider
+  max="10"
+  [formControl]="control"
+></tui-slider>
+
+<tui-slider
+  [formControl]="testValue"
+  [max]="10"
+></tui-slider>
+```
diff --git a/projects/demo/src/modules/components/slider-old/examples/import/insert-template.txt b/projects/demo/src/modules/components/slider-old/examples/import/insert-template.txt
deleted file mode 100644
index e5883d6a4340..000000000000
--- a/projects/demo/src/modules/components/slider-old/examples/import/insert-template.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-<tui-slider [formControl]="control"
-            max="10"></tui-slider>
-
-<tui-slider [formControl]="testValue"
-            [max]="10"></tui-slider>
-
diff --git a/projects/demo/src/modules/components/slider-old/slider-old.component.ts b/projects/demo/src/modules/components/slider-old/slider-old.component.ts
index ea85a633f856..15821bb1f5e9 100644
--- a/projects/demo/src/modules/components/slider-old/slider-old.component.ts
+++ b/projects/demo/src/modules/components/slider-old/slider-old.component.ts
@@ -1,37 +1,28 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiPluralize, TuiSizeS} from '@taiga-ui/core';
 import {TuiKeySteps} from '@taiga-ui/kit';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleForm} from '!!raw-loader!./examples/import/declare-form.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-slider',
     templateUrl: './slider-old.template.html',
     changeDetection,
 })
 export class ExampleTuiSliderComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly exampleForm = exampleForm;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
+    readonly exampleForm = import('!!raw-loader!./examples/import/declare-form.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
     readonly control = new FormControl(8);
diff --git a/projects/demo/src/modules/components/stepper/examples/import/import-module.md b/projects/demo/src/modules/components/stepper/examples/import/import-module.md
new file mode 100644
index 000000000000..223dae7c1c33
--- /dev/null
+++ b/projects/demo/src/modules/components/stepper/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiStepperModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiStepperModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/stepper/examples/import/import-module.txt b/projects/demo/src/modules/components/stepper/examples/import/import-module.txt
deleted file mode 100644
index c9fd2c3d2892..000000000000
--- a/projects/demo/src/modules/components/stepper/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiStepperModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiStepperModule,
-    ],
-...
diff --git a/projects/demo/src/modules/components/stepper/examples/import/insert-template.md b/projects/demo/src/modules/components/stepper/examples/import/insert-template.md
new file mode 100644
index 000000000000..9bc735744ec7
--- /dev/null
+++ b/projects/demo/src/modules/components/stepper/examples/import/insert-template.md
@@ -0,0 +1,25 @@
+```html
+<tui-stepper>
+  <a
+    routerLink="/step-1"
+    routerLinkActive
+    tuiStep
+  >
+    One 1
+  </a>
+  <a
+    routerLink="/step-2"
+    routerLinkActive
+    tuiStep
+  >
+    Two 2
+  </a>
+  <a
+    routerLink="/step-3"
+    routerLinkActive
+    tuiStep
+  >
+    Three 3
+  </a>
+</tui-stepper>
+```
diff --git a/projects/demo/src/modules/components/stepper/examples/import/insert-template.txt b/projects/demo/src/modules/components/stepper/examples/import/insert-template.txt
deleted file mode 100644
index 4a0c2a31d693..000000000000
--- a/projects/demo/src/modules/components/stepper/examples/import/insert-template.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-<tui-stepper>
-    <a routerLink="/step-1" routerLinkActive tuiStep>
-        One 1
-    </a>
-    <a routerLink="/step-2" routerLinkActive tuiStep>
-        Two 2
-    </a>
-    <a routerLink="/step-3" routerLinkActive tuiStep>
-        Three 3
-    </a>
-</tui-stepper>
diff --git a/projects/demo/src/modules/components/stepper/stepper.component.ts b/projects/demo/src/modules/components/stepper/stepper.component.ts
index 6d4aa786ab13..0ec0909dbb63 100644
--- a/projects/demo/src/modules/components/stepper/stepper.component.ts
+++ b/projects/demo/src/modules/components/stepper/stepper.component.ts
@@ -1,34 +1,26 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiOrientationT} from '@taiga-ui/core';
 import {TuiStepStateT} from '@taiga-ui/kit';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-stepper',
     changeDetection,
     templateUrl: './stepper.template.html',
 })
 export class ExampleTuiStepperComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
     activeItemIndex = 0;
diff --git a/projects/demo/src/modules/components/svg/examples/import/import-module.md b/projects/demo/src/modules/components/svg/examples/import/import-module.md
new file mode 100644
index 000000000000..a2cb64b9db49
--- /dev/null
+++ b/projects/demo/src/modules/components/svg/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiSvgModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiSvgModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/svg/examples/import/import-module.txt b/projects/demo/src/modules/components/svg/examples/import/import-module.txt
deleted file mode 100644
index 795e6805a6f5..000000000000
--- a/projects/demo/src/modules/components/svg/examples/import/import-module.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-import {TuiSvgModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiSvgModule
-    ],
-    ...
-}
diff --git a/projects/demo/src/modules/components/svg/examples/import/insert-template.md b/projects/demo/src/modules/components/svg/examples/import/insert-template.md
new file mode 100644
index 000000000000..226bff518aeb
--- /dev/null
+++ b/projects/demo/src/modules/components/svg/examples/import/insert-template.md
@@ -0,0 +1,5 @@
+```html
+<tui-svg src="https://angular-colored-svg.stackblitz.io/assets/ng-girls.svg#ng-girls"></tui-svg>
+<tui-svg [src]="src"></tui-svg>
+<tui-svg src="iconName"></tui-svg>
+```
diff --git a/projects/demo/src/modules/components/svg/examples/import/insert-template.txt b/projects/demo/src/modules/components/svg/examples/import/insert-template.txt
deleted file mode 100644
index c77ce06a589e..000000000000
--- a/projects/demo/src/modules/components/svg/examples/import/insert-template.txt
+++ /dev/null
@@ -1,12 +0,0 @@
-<tui-svg
-    src="https://angular-colored-svg.stackblitz.io/assets/ng-girls.svg#ng-girls"
-></tui-svg>
-<tui-svg
-    [src]="src"
-></tui-svg>
-<tui-svg
-    src="iconName"
-></tui-svg>
-<tui-svg
-    src="iconName"
-></tui-svg>
diff --git a/projects/demo/src/modules/components/svg/svg.component.ts b/projects/demo/src/modules/components/svg/svg.component.ts
index 8835866bc75a..5d611f9ccfe9 100644
--- a/projects/demo/src/modules/components/svg/svg.component.ts
+++ b/projects/demo/src/modules/components/svg/svg.component.ts
@@ -1,18 +1,10 @@
 import {Component, Inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 import {default as imageUrl} from '!!file-loader!../../../assets/images/ts.svg';
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
 
 import {TuiThemeService} from '../../app/theme.service';
-import {FrontEndExample} from '../../interfaces/front-end-example';
 
 @Component({
     selector: 'example-tui-svg',
@@ -20,19 +12,19 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiSvgComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
     readonly iconVariants: readonly string[] = [
diff --git a/projects/demo/src/modules/components/tabs/examples/import/import-module.md b/projects/demo/src/modules/components/tabs/examples/import/import-module.md
new file mode 100644
index 000000000000..ceeb292aa88a
--- /dev/null
+++ b/projects/demo/src/modules/components/tabs/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiTabsModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiTabsModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/tabs/examples/import/import-module.txt b/projects/demo/src/modules/components/tabs/examples/import/import-module.txt
deleted file mode 100644
index 0ab5c54ac0b6..000000000000
--- a/projects/demo/src/modules/components/tabs/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiTabsModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiTabsModule,
-    ],
-...
diff --git a/projects/demo/src/modules/components/tabs/examples/import/insert-template.md b/projects/demo/src/modules/components/tabs/examples/import/insert-template.md
new file mode 100644
index 000000000000..f552b775a8fe
--- /dev/null
+++ b/projects/demo/src/modules/components/tabs/examples/import/insert-template.md
@@ -0,0 +1,35 @@
+```html
+Router links:
+<tui-tabs>
+  <a
+    tuiTab
+    routerLink="/page-1"
+    routerLinkActive
+  >
+    Page 1
+  </a>
+  <a
+    tuiTab
+    routerLink="/page-2"
+    routerLinkActive
+  >
+    Page 2
+  </a>
+</tui-tabs>
+
+Buttons:
+<tui-tabs [(activeItemIndex)]="activeItemIndex">
+  <button
+    tuiTab
+    (click)="onTabClick(1)"
+  >
+    Page 1
+  </button>
+  <button
+    tuiTab
+    (click)="onTabClick(2)"
+  >
+    Page 2
+  </button>
+</tui-tabs>
+```
diff --git a/projects/demo/src/modules/components/tabs/examples/import/insert-template.txt b/projects/demo/src/modules/components/tabs/examples/import/insert-template.txt
deleted file mode 100644
index 1e0fa171c507..000000000000
--- a/projects/demo/src/modules/components/tabs/examples/import/insert-template.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-Router links:
-<tui-tabs>
-    <a tuiTab routerLink='/page-1' routerLinkActive>Page 1</a>
-    <a tuiTab routerLink='/page-2' routerLinkActive>Page 2</a>
-</tui-tabs>
-
-Buttons:
-<tui-tabs [(activeItemIndex)]="activeItemIndex">
-    <button tuiTab (click)="onTabClick(1)">Page 1</button>
-    <button tuiTab (click)="onTabClick(2)">Page 2</button>
-</tui-tabs>
diff --git a/projects/demo/src/modules/components/tabs/tabs.component.ts b/projects/demo/src/modules/components/tabs/tabs.component.ts
index 46cf4848aba6..349dd616b522 100644
--- a/projects/demo/src/modules/components/tabs/tabs.component.ts
+++ b/projects/demo/src/modules/components/tabs/tabs.component.ts
@@ -1,26 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
-import {default as example5Less} from '!!raw-loader!./examples/5/index.less';
-import {default as example5Ts} from '!!raw-loader!./examples/5/index.ts';
-import {default as example6Html} from '!!raw-loader!./examples/6/index.html';
-import {default as example6Less} from '!!raw-loader!./examples/6/index.less';
-import {default as example6Ts} from '!!raw-loader!./examples/6/index.ts';
-import {default as example7Html} from '!!raw-loader!./examples/7/index.html';
-import {default as example7Ts} from '!!raw-loader!./examples/7/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-tabs',
@@ -29,45 +9,46 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
 })
 export class ExampleTuiTabsComponent {
     buttons = ['button 1', 'button 2', 'button 3', 'button 4'];
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-    };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
-    readonly example5: FrontEndExample = {
-        TypeScript: example5Ts,
-        HTML: example5Html,
-        LESS: example5Less,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
     };
 
-    readonly example6: FrontEndExample = {
-        TypeScript: example6Ts,
-        HTML: example6Html,
-        LESS: example6Less,
+    readonly example5: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/5/index.ts'),
+        HTML: import('!!raw-loader!./examples/5/index.html'),
+        LESS: import('!!raw-loader!./examples/5/index.less'),
     };
 
-    readonly example7: FrontEndExample = {
-        TypeScript: example7Ts,
-        HTML: example7Html,
+    readonly example6: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/6/index.ts'),
+        HTML: import('!!raw-loader!./examples/6/index.html'),
+        LESS: import('!!raw-loader!./examples/6/index.less'),
     };
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly example7: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/7/index.ts'),
+        HTML: import('!!raw-loader!./examples/7/index.html'),
+    };
 
     readonly moreContentVariants = ['', 'And more'];
 
diff --git a/projects/demo/src/modules/components/theme-night/examples/import/import-module.md b/projects/demo/src/modules/components/theme-night/examples/import/import-module.md
new file mode 100644
index 000000000000..7f6000c5277a
--- /dev/null
+++ b/projects/demo/src/modules/components/theme-night/examples/import/import-module.md
@@ -0,0 +1,15 @@
+```ts
+import {TuiThemeNightModule, TuiModeModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiThemeNightModule,
+    TuiModeModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/theme-night/examples/import/import-module.txt b/projects/demo/src/modules/components/theme-night/examples/import/import-module.txt
deleted file mode 100644
index fe4daccfbf00..000000000000
--- a/projects/demo/src/modules/components/theme-night/examples/import/import-module.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-import {TuiThemeNightModule, TuiModeModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiThemeNightModule,
-        TuiModeModule,
-    ],
-...
diff --git a/projects/demo/src/modules/components/theme-night/examples/import/insert-template.md b/projects/demo/src/modules/components/theme-night/examples/import/insert-template.md
new file mode 100644
index 000000000000..88cbef92ecb0
--- /dev/null
+++ b/projects/demo/src/modules/components/theme-night/examples/import/insert-template.md
@@ -0,0 +1,4 @@
+```html
+<tui-theme-night></tui-theme-night>
+<tui-root tuiMode="onDark">...</tui-root>
+```
diff --git a/projects/demo/src/modules/components/theme-night/examples/import/insert-template.txt b/projects/demo/src/modules/components/theme-night/examples/import/insert-template.txt
deleted file mode 100644
index 0e7fe4de1a14..000000000000
--- a/projects/demo/src/modules/components/theme-night/examples/import/insert-template.txt
+++ /dev/null
@@ -1,4 +0,0 @@
-<tui-theme-night></tui-theme-night>
-<tui-root tuiMode="onDark">
-  ...
-</tui-root>
diff --git a/projects/demo/src/modules/components/theme-night/theme-night.component.ts b/projects/demo/src/modules/components/theme-night/theme-night.component.ts
index be8bbc2118ed..34c9bc7b227e 100644
--- a/projects/demo/src/modules/components/theme-night/theme-night.component.ts
+++ b/projects/demo/src/modules/components/theme-night/theme-night.component.ts
@@ -1,15 +1,12 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
 @Component({
     selector: 'example-tui-theme-night',
     templateUrl: './theme-night.template.html',
     changeDetection,
 })
 export class ExampleTuiThemeNightComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 }
diff --git a/projects/demo/src/modules/components/theme-switcher/theme-switcher.component.ts b/projects/demo/src/modules/components/theme-switcher/theme-switcher.component.ts
index d781c6cb6ca2..b0ce4a64bbb0 100644
--- a/projects/demo/src/modules/components/theme-switcher/theme-switcher.component.ts
+++ b/projects/demo/src/modules/components/theme-switcher/theme-switcher.component.ts
@@ -1,11 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/elderly/elderly.component.ts';
-import {default as example1Less} from '!!raw-loader!./examples/elderly/elderly.style.less';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-theme-switcher',
@@ -14,9 +9,9 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiThemeSwitcherComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/elderly/elderly.component.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/elderly/elderly.style.less'),
     };
 }
diff --git a/projects/demo/src/modules/components/toggle/examples/import/declare-form.md b/projects/demo/src/modules/components/toggle/examples/import/declare-form.md
new file mode 100644
index 000000000000..0e736be06367
--- /dev/null
+++ b/projects/demo/src/modules/components/toggle/examples/import/declare-form.md
@@ -0,0 +1,14 @@
+```ts
+import {FormControl, FormGroup} from '@angular/forms';
+
+// ...
+
+@Component({
+  // ...
+})
+export class MyComponent {
+  testForm = new FormGroup({
+    testValue: new FormControl(),
+  });
+}
+```
diff --git a/projects/demo/src/modules/components/toggle/examples/import/declare-form.txt b/projects/demo/src/modules/components/toggle/examples/import/declare-form.txt
deleted file mode 100644
index 19177f4b2490..000000000000
--- a/projects/demo/src/modules/components/toggle/examples/import/declare-form.txt
+++ /dev/null
@@ -1,12 +0,0 @@
-import {FormControl, FormGroup} from '@angular/forms';
-
-...
-
-@Component({
-    ...
-})
-export class MyComponent {
-    testForm = new FormGroup({
-        testValue: new FormControl()
-    });
-}
diff --git a/projects/demo/src/modules/components/toggle/examples/import/define-options.md b/projects/demo/src/modules/components/toggle/examples/import/define-options.md
new file mode 100644
index 000000000000..ae513afbd64f
--- /dev/null
+++ b/projects/demo/src/modules/components/toggle/examples/import/define-options.md
@@ -0,0 +1,24 @@
+```ts
+import {ToggleOptions, TUI_TOGGLE_DEFAULT_OPTIONS, TUI_TOGGLE_OPTIONS} from '@taiga-ui/kit';
+
+// ...
+const options: Partial<ToggleOptions> = {
+  icons: {
+    toggleOff: ({$implicit}) => ($implicit === 'm' ? 'tuiIconChevronRight' : 'tuiIconChevronRightLarge'),
+    toggleOn: ({$implicit}) => ($implicit === 'm' ? 'tuiIconChevronLeft' : 'tuiIconChevronLeftLarge'),
+  },
+};
+
+@NgModule({
+  providers: [
+    {
+      provide: TUI_TOGGLE_OPTIONS,
+      useValue: {
+        ...TUI_TOGGLE_DEFAULT_OPTIONS,
+        ...options,
+      },
+    },
+  ],
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/toggle/examples/import/define-options.txt b/projects/demo/src/modules/components/toggle/examples/import/define-options.txt
deleted file mode 100644
index c63fbc9857ff..000000000000
--- a/projects/demo/src/modules/components/toggle/examples/import/define-options.txt
+++ /dev/null
@@ -1,25 +0,0 @@
-import {
-    ToggleOptions,
-    TUI_TOGGLE_DEFAULT_OPTIONS,
-    TUI_TOGGLE_OPTIONS,
-} from '@taiga-ui/kit';
-
-...
-const options: Partial<ToggleOptions> = {
-    icons: {
-        toggleOff: ({$implicit}) =>
-            $implicit === 'm' ? 'tuiIconChevronRight' : 'tuiIconChevronRightLarge',
-        toggleOn: ({$implicit}) =>
-            $implicit === 'm' ? 'tuiIconChevronLeft' : 'tuiIconChevronLeftLarge',
-    },
-};
-
-@NgModule({
-    providers: [{
-        provide: TUI_TOGGLE_OPTIONS,
-        useValue: {
-            ...TUI_TOGGLE_DEFAULT_OPTIONS,
-            ...options,
-        }
-    }],
-...
diff --git a/projects/demo/src/modules/components/toggle/examples/import/import-module.md b/projects/demo/src/modules/components/toggle/examples/import/import-module.md
new file mode 100644
index 000000000000..2ebbe1dd2007
--- /dev/null
+++ b/projects/demo/src/modules/components/toggle/examples/import/import-module.md
@@ -0,0 +1,17 @@
+```ts
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {TuiToggleModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    FormsModule,
+    ReactiveFormsModule,
+    TuiToggleModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/components/toggle/examples/import/import-module.txt b/projects/demo/src/modules/components/toggle/examples/import/import-module.txt
deleted file mode 100644
index 138a6ab92bc2..000000000000
--- a/projects/demo/src/modules/components/toggle/examples/import/import-module.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {TuiToggleModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        FormsModule,
-        ReactiveFormsModule,
-        TuiToggleModule
-    ],
-...
diff --git a/projects/demo/src/modules/components/toggle/examples/import/insert-template.md b/projects/demo/src/modules/components/toggle/examples/import/insert-template.md
new file mode 100644
index 000000000000..10e7e4f2e3a2
--- /dev/null
+++ b/projects/demo/src/modules/components/toggle/examples/import/insert-template.md
@@ -0,0 +1,5 @@
+```html
+<div [formGroup]="testForm">
+  <tui-toggle formControlName="testValue"></tui-toggle>
+</div>
+```
diff --git a/projects/demo/src/modules/components/toggle/examples/import/insert-template.txt b/projects/demo/src/modules/components/toggle/examples/import/insert-template.txt
deleted file mode 100644
index 9347a85f2c91..000000000000
--- a/projects/demo/src/modules/components/toggle/examples/import/insert-template.txt
+++ /dev/null
@@ -1,4 +0,0 @@
-<div [formGroup]="testForm">
-    <tui-toggle formControlName="testValue">
-    </tui-toggle>
-</div>
diff --git a/projects/demo/src/modules/components/toggle/toggle.component.ts b/projects/demo/src/modules/components/toggle/toggle.component.ts
index 96420ed27631..b83ac6853ef3 100644
--- a/projects/demo/src/modules/components/toggle/toggle.component.ts
+++ b/projects/demo/src/modules/components/toggle/toggle.component.ts
@@ -1,18 +1,9 @@
 import {Component, forwardRef} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleForm} from '!!raw-loader!./examples/import/declare-form.txt';
-import {default as exampleOptions} from '!!raw-loader!./examples/import/define-options.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
 import {AbstractExampleTuiInteractive} from '../abstract/interactive';
 
@@ -28,19 +19,19 @@ import {AbstractExampleTuiInteractive} from '../abstract/interactive';
     ],
 })
 export class ExampleTuiToggleComponent extends AbstractExampleTuiInteractive {
-    readonly exampleForm = exampleForm;
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly exampleOptions = exampleOptions;
-
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly exampleForm = import('!!raw-loader!./examples/import/declare-form.md');
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
+    readonly exampleOptions = import('!!raw-loader!./examples/import/define-options.md');
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
     showIcons = false;
diff --git a/projects/demo/src/modules/customization/dialogs/dialogs.component.ts b/projects/demo/src/modules/customization/dialogs/dialogs.component.ts
index 31f899697b98..e37c03647e19 100644
--- a/projects/demo/src/modules/customization/dialogs/dialogs.component.ts
+++ b/projects/demo/src/modules/customization/dialogs/dialogs.component.ts
@@ -1,15 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as examplePromptComp} from '!!raw-loader!./examples/1/prompt/prompt.component.ts';
-import {default as examplePromptModule} from '!!raw-loader!./examples/1/prompt/prompt.module';
-import {default as examplePromptService} from '!!raw-loader!./examples/1/prompt/prompt.service.ts';
-import {default as examplePromptLess} from '!!raw-loader!./examples/1/prompt/prompt.style.less';
-import {default as examplePromptHtml} from '!!raw-loader!./examples/1/prompt/prompt.template.html';
-import {default as examplePromptOptions} from '!!raw-loader!./examples/1/prompt/prompt-options.ts';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'dialogs',
@@ -17,15 +8,27 @@ import {default as examplePromptOptions} from '!!raw-loader!./examples/1/prompt/
     changeDetection,
 })
 export class DialogsComponent {
-    readonly example1 = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
-        'prompt/prompt.service.ts': examplePromptService,
-        'prompt/prompt-options.ts': examplePromptOptions,
-        'prompt/prompt.component.ts': examplePromptComp,
-        'prompt/prompt.template.html': examplePromptHtml,
-        'prompt/prompt.style.less': examplePromptLess,
-        'prompt/prompt.module.ts': examplePromptModule,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
+        'prompt/prompt.service.ts': import(
+            '!!raw-loader!./examples/1/prompt/prompt.service.ts'
+        ),
+        'prompt/prompt-options.ts': import(
+            '!!raw-loader!./examples/1/prompt/prompt-options.ts'
+        ),
+        'prompt/prompt.component.ts': import(
+            '!!raw-loader!./examples/1/prompt/prompt.component.ts'
+        ),
+        'prompt/prompt.template.html': import(
+            '!!raw-loader!./examples/1/prompt/prompt.template.html'
+        ),
+        'prompt/prompt.style.less': import(
+            '!!raw-loader!./examples/1/prompt/prompt.style.less'
+        ),
+        'prompt/prompt.module.ts': import(
+            '!!raw-loader!./examples/1/prompt/prompt.module'
+        ),
     };
 }
diff --git a/projects/demo/src/modules/customization/i18n/i18n.component.ts b/projects/demo/src/modules/customization/i18n/i18n.component.ts
index c401649cfb5c..fc13008f11ce 100644
--- a/projects/demo/src/modules/customization/i18n/i18n.component.ts
+++ b/projects/demo/src/modules/customization/i18n/i18n.component.ts
@@ -1,7 +1,7 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as readme} from '!!raw-loader!../../../../../i18n/README.md';
+import {from} from 'rxjs';
+import {map} from 'rxjs/operators';
 
 @Component({
     selector: 'i18n',
@@ -11,5 +11,9 @@ import {default as readme} from '!!raw-loader!../../../../../i18n/README.md';
     changeDetection,
 })
 export class I18nComponent {
-    readonly readme = readme.split('Supported languages:')[1];
+    readonly readme = from(
+        import('!!raw-loader!../../../../../i18n/README.md') as Promise<{
+            default: string;
+        }>,
+    ).pipe(map(readme => readme.default.split('Supported languages:')[1]));
 }
diff --git a/projects/demo/src/modules/customization/i18n/i18n.module.ts b/projects/demo/src/modules/customization/i18n/i18n.module.ts
index 89eeeb163a22..d776c802f40f 100644
--- a/projects/demo/src/modules/customization/i18n/i18n.module.ts
+++ b/projects/demo/src/modules/customization/i18n/i18n.module.ts
@@ -1,3 +1,4 @@
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
@@ -8,6 +9,7 @@ import {I18nComponent} from './i18n.component';
 
 @NgModule({
     imports: [
+        CommonModule,
         TuiCalendarModule,
         MarkdownModule,
         TuiLinkModule,
diff --git a/projects/demo/src/modules/customization/i18n/i18n.template.html b/projects/demo/src/modules/customization/i18n/i18n.template.html
index 331273c62811..3ca2d56c89ad 100644
--- a/projects/demo/src/modules/customization/i18n/i18n.template.html
+++ b/projects/demo/src/modules/customization/i18n/i18n.template.html
@@ -3,5 +3,5 @@
     i18n-header
     header="Internationalization"
 >
-    <markdown [data]="readme"></markdown>
+    <markdown [data]="(readme | async) || ''"></markdown>
 </tui-doc-page>
diff --git a/projects/demo/src/modules/customization/variables/variables.component.ts b/projects/demo/src/modules/customization/variables/variables.component.ts
index f8de654db580..040d0ba812da 100644
--- a/projects/demo/src/modules/customization/variables/variables.component.ts
+++ b/projects/demo/src/modules/customization/variables/variables.component.ts
@@ -1,10 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'variables',
@@ -12,9 +8,9 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class VariablesComponent {
-    readonly example1: FrontEndExample = {
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
     readonly vars: Record<string, string> = {
diff --git a/projects/demo/src/modules/decorators/default-prop/default-prop.component.ts b/projects/demo/src/modules/decorators/default-prop/default-prop.component.ts
index dc4df708bb82..3bf55261a98c 100644
--- a/projects/demo/src/modules/decorators/default-prop/default-prop.component.ts
+++ b/projects/demo/src/modules/decorators/default-prop/default-prop.component.ts
@@ -1,15 +1,13 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 
-import {default as exampleDecorator} from '!!raw-loader!./import/example-decorator.txt';
-
 @Component({
     selector: 'example-tui-default-prop',
     templateUrl: './default-prop.template.html',
     changeDetection,
 })
 export class ExampleTuiDefaultPropComponent {
-    exampleDecorator = exampleDecorator;
+    exampleDecorator = import('!!raw-loader!./import/example-decorator.md');
 
     quantity: number | undefined = 10;
 
diff --git a/projects/demo/src/modules/decorators/default-prop/import/example-decorator.md b/projects/demo/src/modules/decorators/default-prop/import/example-decorator.md
new file mode 100644
index 000000000000..45717cb82de8
--- /dev/null
+++ b/projects/demo/src/modules/decorators/default-prop/import/example-decorator.md
@@ -0,0 +1,10 @@
+```ts
+export class MyComponent {
+  @Input()
+  @tuiDefaultProp(
+    quantity => Number.isInteger(quantity) && quantity >= 5,
+    'Should be integer number more than min value',
+  )
+  quantity = 10;
+}
+```
diff --git a/projects/demo/src/modules/decorators/default-prop/import/example-decorator.txt b/projects/demo/src/modules/decorators/default-prop/import/example-decorator.txt
deleted file mode 100644
index 4565064f382a..000000000000
--- a/projects/demo/src/modules/decorators/default-prop/import/example-decorator.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-@Input()
-@tuiDefaultProp(
-    quantity => Number.isInteger(quantity) && quantity >= 5,
-    'Should be integer number more than min value'
-)
-quantity = 10;
diff --git a/projects/demo/src/modules/decorators/pure/import/example-decorator.md b/projects/demo/src/modules/decorators/pure/import/example-decorator.md
new file mode 100644
index 000000000000..b9014ff79871
--- /dev/null
+++ b/projects/demo/src/modules/decorators/pure/import/example-decorator.md
@@ -0,0 +1,13 @@
+```ts
+export class MyComponent {
+  @tuiPure
+  get complexCalculationWithFixedResult(): number {
+    // ...
+  }
+
+  @tuiPure
+  someMethod(arg1: number, arg2: {}): {} {
+    // ...
+  }
+}
+```
diff --git a/projects/demo/src/modules/decorators/pure/import/example-decorator.txt b/projects/demo/src/modules/decorators/pure/import/example-decorator.txt
deleted file mode 100644
index 8b61fc1ecbd1..000000000000
--- a/projects/demo/src/modules/decorators/pure/import/example-decorator.txt
+++ /dev/null
@@ -1,9 +0,0 @@
-@tuiPure
-get complexCalculationWithFixedResult(): number {
-    ...
-}
-
-@tuiPure
-someMethod(arg1: number, arg2: {}): {} {
-    ...
-}
diff --git a/projects/demo/src/modules/decorators/pure/pure.component.ts b/projects/demo/src/modules/decorators/pure/pure.component.ts
index 874841e4c458..f2f2bc5acafa 100644
--- a/projects/demo/src/modules/decorators/pure/pure.component.ts
+++ b/projects/demo/src/modules/decorators/pure/pure.component.ts
@@ -1,11 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as exampleDecorator} from '!!raw-loader!./import/example-decorator.txt';
-import {default as example2Ts} from '!!raw-loader!./pure-function.component.ts';
-import {default as example1Ts} from '!!raw-loader!./pure-getter.component.ts';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-pure',
@@ -13,13 +8,13 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiPureComponent {
-    readonly exampleDecorator = exampleDecorator;
+    readonly exampleDecorator = import('!!raw-loader!./import/example-decorator.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./pure-getter.component.ts'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./pure-function.component.ts'),
     };
 }
diff --git a/projects/demo/src/modules/decorators/required-setter/import/example-decorator.txt b/projects/demo/src/modules/decorators/required-setter/import/example-decorator.md
similarity index 59%
rename from projects/demo/src/modules/decorators/required-setter/import/example-decorator.txt
rename to projects/demo/src/modules/decorators/required-setter/import/example-decorator.md
index cf3bd9ffc919..24846d8122a4 100644
--- a/projects/demo/src/modules/decorators/required-setter/import/example-decorator.txt
+++ b/projects/demo/src/modules/decorators/required-setter/import/example-decorator.md
@@ -1,10 +1,14 @@
-@Input()
-@tuiRequiredSetter(
+```ts
+export class MyComponent {
+  @Input()
+  @tuiRequiredSetter(
     quantity => Number.isInteger(quantity) && quantity >= 10,
     'Should be integer number more than min value',
-)
-set quantity(quantity: number) {
+  )
+  set quantity(quantity: number) {
     this.items = new Array(quantity).fill(Math.floor(Math.random() * Math.floor(100)));
-}
+  }
 
-items: Array<number>;
+  items: Array<number>;
+}
+```
diff --git a/projects/demo/src/modules/decorators/required-setter/required-setter.component.ts b/projects/demo/src/modules/decorators/required-setter/required-setter.component.ts
index 331565076c49..efd0f209744f 100644
--- a/projects/demo/src/modules/decorators/required-setter/required-setter.component.ts
+++ b/projects/demo/src/modules/decorators/required-setter/required-setter.component.ts
@@ -1,15 +1,13 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 
-import {default as exampleDecorator} from '!!raw-loader!./import/example-decorator.txt';
-
 @Component({
     selector: 'example-tui-required-setter',
     templateUrl: './required-setter.template.html',
     changeDetection,
 })
 export class ExampleTuiRequiredSetterComponent {
-    exampleDecorator = exampleDecorator;
+    exampleDecorator = import('!!raw-loader!./import/example-decorator.md');
 
     quantity?: number;
 
diff --git a/projects/demo/src/modules/directives/active-zone/active-zone.component.ts b/projects/demo/src/modules/directives/active-zone/active-zone.component.ts
index f2f6168a689a..b1172021f45d 100644
--- a/projects/demo/src/modules/directives/active-zone/active-zone.component.ts
+++ b/projects/demo/src/modules/directives/active-zone/active-zone.component.ts
@@ -1,13 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleComponent} from '!!raw-loader!./examples/import/component.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-active-zone',
@@ -16,12 +9,12 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiActiveZoneComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly exampleComponent = exampleComponent;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
+    readonly exampleComponent = import('!!raw-loader!./examples/import/component.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/directives/active-zone/examples/import/component.md b/projects/demo/src/modules/directives/active-zone/examples/import/component.md
new file mode 100644
index 000000000000..606ae98b070c
--- /dev/null
+++ b/projects/demo/src/modules/directives/active-zone/examples/import/component.md
@@ -0,0 +1,9 @@
+```ts
+export class MyComponent {
+  active = false;
+
+  onActiveZone(active: boolean) {
+    this.active = active;
+  }
+}
+```
diff --git a/projects/demo/src/modules/directives/active-zone/examples/import/component.txt b/projects/demo/src/modules/directives/active-zone/examples/import/component.txt
deleted file mode 100644
index 84e6caa50f8c..000000000000
--- a/projects/demo/src/modules/directives/active-zone/examples/import/component.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-active = false;
-
-onActiveZone(active: boolean) {
-    this.active = active;
-}
diff --git a/projects/demo/src/modules/directives/active-zone/examples/import/import-module.md b/projects/demo/src/modules/directives/active-zone/examples/import/import-module.md
new file mode 100644
index 000000000000..77f15881a7ed
--- /dev/null
+++ b/projects/demo/src/modules/directives/active-zone/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiActiveZoneModule} from '@taiga-ui/cdk';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiActiveZoneModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/active-zone/examples/import/import-module.txt b/projects/demo/src/modules/directives/active-zone/examples/import/import-module.txt
deleted file mode 100644
index fda48bf86a26..000000000000
--- a/projects/demo/src/modules/directives/active-zone/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiActiveZoneModule} from '@taiga-ui/cdk';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiActiveZoneModule
-    ],
-...
diff --git a/projects/demo/src/modules/directives/active-zone/examples/import/insert-template.md b/projects/demo/src/modules/directives/active-zone/examples/import/insert-template.md
new file mode 100644
index 000000000000..69306b3017ee
--- /dev/null
+++ b/projects/demo/src/modules/directives/active-zone/examples/import/insert-template.md
@@ -0,0 +1,16 @@
+```html
+<div (tuiActiveZoneChange)="onActiveZone($event)">
+  <button
+    tuiButton
+    type="button"
+  >
+    Button 1
+  </button>
+  <button
+    tuiButton
+    type="button"
+  >
+    Button 2
+  </button>
+</div>
+```
diff --git a/projects/demo/src/modules/directives/active-zone/examples/import/insert-template.txt b/projects/demo/src/modules/directives/active-zone/examples/import/insert-template.txt
deleted file mode 100644
index e6fd6b898c39..000000000000
--- a/projects/demo/src/modules/directives/active-zone/examples/import/insert-template.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-<div (tuiActiveZoneChange)="onActiveZone($event)">
-    <button tuiButton type="button">
-        Button 1
-    </button>
-    <button tuiButton type="button">
-        Button 2
-    </button>
-</div>
diff --git a/projects/demo/src/modules/directives/auto-focus/auto-focus.component.ts b/projects/demo/src/modules/directives/auto-focus/auto-focus.component.ts
index 86df67755cfb..0a8af6c46240 100644
--- a/projects/demo/src/modules/directives/auto-focus/auto-focus.component.ts
+++ b/projects/demo/src/modules/directives/auto-focus/auto-focus.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-auto-focus',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiAutoFocusComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/directives/auto-focus/examples/import/import-module.md b/projects/demo/src/modules/directives/auto-focus/examples/import/import-module.md
new file mode 100644
index 000000000000..995d1c1e4591
--- /dev/null
+++ b/projects/demo/src/modules/directives/auto-focus/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiAutoFocusModule} from '@taiga-ui/cdk';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiAutoFocusModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/auto-focus/examples/import/import-module.txt b/projects/demo/src/modules/directives/auto-focus/examples/import/import-module.txt
deleted file mode 100644
index 1ecb46911ecf..000000000000
--- a/projects/demo/src/modules/directives/auto-focus/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiAutoFocusModule} from '@taiga-ui/cdk';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiAutoFocusModule,
-    ],
-...
diff --git a/projects/demo/src/modules/directives/auto-focus/examples/import/insert-template.md b/projects/demo/src/modules/directives/auto-focus/examples/import/insert-template.md
new file mode 100644
index 000000000000..fc54e81a3b37
--- /dev/null
+++ b/projects/demo/src/modules/directives/auto-focus/examples/import/insert-template.md
@@ -0,0 +1,15 @@
+```html
+<!-- Usual HTML element -->
+<div
+  tuiAutoFocus
+  tabindex="0"
+></div>
+
+<!-- Or focusable component of Taiga UI -->
+<tui-input
+  tuiAutoFocus
+  [(ngModel)]="model"
+>
+  Input
+</tui-input>
+```
diff --git a/projects/demo/src/modules/directives/auto-focus/examples/import/insert-template.txt b/projects/demo/src/modules/directives/auto-focus/examples/import/insert-template.txt
deleted file mode 100644
index 57193e95e8f2..000000000000
--- a/projects/demo/src/modules/directives/auto-focus/examples/import/insert-template.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<!-- Usual HTML element -->
-<div tuiAutoFocus tabindex="0"></div>
-
-<!-- Or focusable component of Taiga UI -->
-<tui-input tuiAutoFocus [(ngModel)]="model">
-    Input
-</tui-input>
diff --git a/projects/demo/src/modules/directives/described-by/described-by.component.ts b/projects/demo/src/modules/directives/described-by/described-by.component.ts
index a15572161c6a..f76cfdfd8d5c 100644
--- a/projects/demo/src/modules/directives/described-by/described-by.component.ts
+++ b/projects/demo/src/modules/directives/described-by/described-by.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-described-by',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiDescribeByComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.ts b/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.ts
index 349c2634b232..82e6aa176f79 100644
--- a/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.ts
+++ b/projects/demo/src/modules/directives/dropdown-context/dropdown-context.component.ts
@@ -1,5 +1,6 @@
 import {Component, forwardRef} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
     DEFAULT_MAX_HEIGHT,
     DEFAULT_MIN_HEIGHT,
@@ -8,21 +9,8 @@ import {
     TuiVerticalDirection,
 } from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1LESS} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2LESS} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3LESS} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
 import {ExampleTuiDropdown} from '../../components/abstract/dropdown-controller-documentation/dropdown-controller-documentation.component';
 import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
-import {FrontEndExample} from '../../interfaces/front-end-example';
 
 @Component({
     selector: 'example-dropdown-context',
@@ -37,25 +25,25 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     ],
 })
 export class ExampleTuiDropdownContextComponent implements ExampleTuiDropdown {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly exampleBasic: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1LESS,
+    readonly exampleBasic: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly exampleContextMenu: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2LESS,
+    readonly exampleContextMenu: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly exampleReportMistakeForm: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3LESS,
+    readonly exampleReportMistakeForm: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
     readonly dropdownAlignVariants: readonly TuiHorizontalDirection[] = ['left', 'right'];
diff --git a/projects/demo/src/modules/directives/dropdown-controller/dropdown-controller.component.ts b/projects/demo/src/modules/directives/dropdown-controller/dropdown-controller.component.ts
index 78d9746c75cc..0d308c0400d9 100644
--- a/projects/demo/src/modules/directives/dropdown-controller/dropdown-controller.component.ts
+++ b/projects/demo/src/modules/directives/dropdown-controller/dropdown-controller.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-dropdown-controller',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiDropdownControllerComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/directives/dropdown-controller/examples/import/import-module.md b/projects/demo/src/modules/directives/dropdown-controller/examples/import/import-module.md
new file mode 100644
index 000000000000..1d7d93471105
--- /dev/null
+++ b/projects/demo/src/modules/directives/dropdown-controller/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiDropdownControllerModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiDropdownControllerModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/dropdown-controller/examples/import/import-module.txt b/projects/demo/src/modules/directives/dropdown-controller/examples/import/import-module.txt
deleted file mode 100644
index 41a6698de9e9..000000000000
--- a/projects/demo/src/modules/directives/dropdown-controller/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiDropdownControllerModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiDropdownControllerModule,
-    ],
-...
diff --git a/projects/demo/src/modules/directives/dropdown-controller/examples/import/insert-template.md b/projects/demo/src/modules/directives/dropdown-controller/examples/import/insert-template.md
new file mode 100644
index 000000000000..a59d0e8952f2
--- /dev/null
+++ b/projects/demo/src/modules/directives/dropdown-controller/examples/import/insert-template.md
@@ -0,0 +1,13 @@
+```html
+<div
+  tuiDropdownAlign="left"
+  class="wrapper"
+>
+  <tui-hosted-dropdown
+    [open]="open"
+    [content]="content"
+  >
+    ...
+  </tui-hosted-dropdown>
+</div>
+```
diff --git a/projects/demo/src/modules/directives/dropdown-controller/examples/import/insert-template.txt b/projects/demo/src/modules/directives/dropdown-controller/examples/import/insert-template.txt
deleted file mode 100644
index 10d0a6442f91..000000000000
--- a/projects/demo/src/modules/directives/dropdown-controller/examples/import/insert-template.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="wrapper" tuiDropdownAlign="left">
-    <tui-hosted-dropdown [open]="open" [content]="content">
-        ...
-    </tui-hosted-dropdown>
-</div>
diff --git a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.component.ts b/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.component.ts
index 23a9a72d9039..e464f0971dd8 100644
--- a/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.component.ts
+++ b/projects/demo/src/modules/directives/dropdown-selection/dropdown-selection.component.ts
@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
     DEFAULT_MAX_HEIGHT,
     DEFAULT_MIN_HEIGHT,
@@ -9,16 +10,6 @@ import {
 } from '@taiga-ui/core';
 import {TuiDropdownPositionT} from '@taiga-ui/kit';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-dropdown-selection',
     templateUrl: './dropdown-selection.template.html',
@@ -26,18 +17,18 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiDropdownSelectionComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
     positionVariants: TuiDropdownPositionT[] = ['selection', 'word', 'tag'];
diff --git a/projects/demo/src/modules/directives/dropdown-selection/examples/import/import-module.md b/projects/demo/src/modules/directives/dropdown-selection/examples/import/import-module.md
new file mode 100644
index 000000000000..95444166ef64
--- /dev/null
+++ b/projects/demo/src/modules/directives/dropdown-selection/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiDropdownSelectionModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiDropdownSelectionModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/dropdown-selection/examples/import/import-module.txt b/projects/demo/src/modules/directives/dropdown-selection/examples/import/import-module.txt
deleted file mode 100644
index 15e84280b796..000000000000
--- a/projects/demo/src/modules/directives/dropdown-selection/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiDropdownSelectionModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiDropdownSelectionModule
-    ],
-...
diff --git a/projects/demo/src/modules/directives/dropdown-selection/examples/import/insert-template.md b/projects/demo/src/modules/directives/dropdown-selection/examples/import/insert-template.md
new file mode 100644
index 000000000000..747de019649c
--- /dev/null
+++ b/projects/demo/src/modules/directives/dropdown-selection/examples/import/insert-template.md
@@ -0,0 +1,10 @@
+```html
+<div
+  tuiDropdownSelection
+  [tuiDropdownContent]="content"
+>
+  Host element
+</div>
+
+<ng-template #content>Dropdown content</ng-template>
+```
diff --git a/projects/demo/src/modules/directives/dropdown-selection/examples/import/insert-template.txt b/projects/demo/src/modules/directives/dropdown-selection/examples/import/insert-template.txt
deleted file mode 100644
index 6f9f9ec970a4..000000000000
--- a/projects/demo/src/modules/directives/dropdown-selection/examples/import/insert-template.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<div tuiDropdownSelection [tuiDropdownContent]="content">
-    Host element
-</div>
-
-<ng-template #content>
-    Dropdown content
-</ng-template>
diff --git a/projects/demo/src/modules/directives/dropdown/dropdown.component.ts b/projects/demo/src/modules/directives/dropdown/dropdown.component.ts
index 88d1d20f4737..d8577bc29be0 100644
--- a/projects/demo/src/modules/directives/dropdown/dropdown.component.ts
+++ b/projects/demo/src/modules/directives/dropdown/dropdown.component.ts
@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {
     DEFAULT_MAX_HEIGHT,
     DEFAULT_MIN_HEIGHT,
@@ -8,17 +9,6 @@ import {
     TuiVerticalDirection,
 } from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-dropdown',
     templateUrl: './dropdown.template.html',
@@ -26,22 +16,22 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiDropdownComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
     tuiDropdownMinHeight = DEFAULT_MIN_HEIGHT;
diff --git a/projects/demo/src/modules/directives/elastic-sticky/elastic-sticky.component.ts b/projects/demo/src/modules/directives/elastic-sticky/elastic-sticky.component.ts
index 60f7047129c0..a43c37198a1b 100644
--- a/projects/demo/src/modules/directives/elastic-sticky/elastic-sticky.component.ts
+++ b/projects/demo/src/modules/directives/elastic-sticky/elastic-sticky.component.ts
@@ -1,14 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleComponent} from '!!raw-loader!./examples/import/component.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-elastic-sticky',
@@ -16,13 +8,13 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiElasticStickyComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
+    readonly exampleComponent = import('!!raw-loader!./examples/import/component.txt');
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly exampleComponent = exampleComponent;
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
+    };
 }
diff --git a/projects/demo/src/modules/directives/element/element.component.ts b/projects/demo/src/modules/directives/element/element.component.ts
index 17bf3ed1b611..f69589665c80 100644
--- a/projects/demo/src/modules/directives/element/element.component.ts
+++ b/projects/demo/src/modules/directives/element/element.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-element',
@@ -15,13 +9,13 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiElementComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+    };
 
     readonly elementRefText = '{read: ElementRef}';
 }
diff --git a/projects/demo/src/modules/directives/for/for.component.ts b/projects/demo/src/modules/directives/for/for.component.ts
index 4f7fa540e258..f63e94b5ae69 100644
--- a/projects/demo/src/modules/directives/for/for.component.ts
+++ b/projects/demo/src/modules/directives/for/for.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-for',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiForComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+    };
 }
diff --git a/projects/demo/src/modules/directives/highlight/examples/import/import-module.md b/projects/demo/src/modules/directives/highlight/examples/import/import-module.md
new file mode 100644
index 000000000000..589fe6d72c99
--- /dev/null
+++ b/projects/demo/src/modules/directives/highlight/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiHighlightModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiHighlightModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/highlight/examples/import/import-module.txt b/projects/demo/src/modules/directives/highlight/examples/import/import-module.txt
deleted file mode 100644
index 9c05440b1b4b..000000000000
--- a/projects/demo/src/modules/directives/highlight/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiHighlightModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiHighlightModule,
-    ],
-...
diff --git a/projects/demo/src/modules/directives/highlight/examples/import/insert-template.md b/projects/demo/src/modules/directives/highlight/examples/import/insert-template.md
new file mode 100644
index 000000000000..ec00b0cd8e7c
--- /dev/null
+++ b/projects/demo/src/modules/directives/highlight/examples/import/insert-template.md
@@ -0,0 +1,8 @@
+```html
+<div
+  [tuiHighlight]="query"
+  [tuiHighlightColor]="'#228B22'"
+>
+  ...
+</div>
+```
diff --git a/projects/demo/src/modules/directives/highlight/examples/import/insert-template.txt b/projects/demo/src/modules/directives/highlight/examples/import/insert-template.txt
deleted file mode 100644
index 81767b4b6e89..000000000000
--- a/projects/demo/src/modules/directives/highlight/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<div [tuiHighlight]="query" [tuiHighlightColor]="'#228B22'">
-  ...
-</div>
diff --git a/projects/demo/src/modules/directives/highlight/highlight.component.ts b/projects/demo/src/modules/directives/highlight/highlight.component.ts
index 2f9aab19a8c0..187f7c2aebdd 100644
--- a/projects/demo/src/modules/directives/highlight/highlight.component.ts
+++ b/projects/demo/src/modules/directives/highlight/highlight.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-highlight',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiHighlightComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+    };
 }
diff --git a/projects/demo/src/modules/directives/hint-controller/examples/import/import-module.md b/projects/demo/src/modules/directives/hint-controller/examples/import/import-module.md
new file mode 100644
index 000000000000..d36fbd5d3c7f
--- /dev/null
+++ b/projects/demo/src/modules/directives/hint-controller/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiHintControllerModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiHintControllerModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/hint-controller/examples/import/import-module.txt b/projects/demo/src/modules/directives/hint-controller/examples/import/import-module.txt
deleted file mode 100644
index 37024ed1b8c8..000000000000
--- a/projects/demo/src/modules/directives/hint-controller/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiHintControllerModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiHintControllerModule,
-    ],
-...
diff --git a/projects/demo/src/modules/directives/hint-controller/examples/import/insert-template.md b/projects/demo/src/modules/directives/hint-controller/examples/import/insert-template.md
new file mode 100644
index 000000000000..e96cbf7a93f8
--- /dev/null
+++ b/projects/demo/src/modules/directives/hint-controller/examples/import/insert-template.md
@@ -0,0 +1,8 @@
+```html
+<div
+  tuiHintContent="Hello"
+  class="wrapper"
+>
+  <tui-primitive-textfield>...</tui-primitive-textfield>
+</div>
+```
diff --git a/projects/demo/src/modules/directives/hint-controller/examples/import/insert-template.txt b/projects/demo/src/modules/directives/hint-controller/examples/import/insert-template.txt
deleted file mode 100644
index 030462462a35..000000000000
--- a/projects/demo/src/modules/directives/hint-controller/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="wrapper" tuiHintContent="Hello">
-    <tui-primitive-textfield>...</tui-primitive-textfield>
-</div>
diff --git a/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts b/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts
index 1a9a1291c2a2..575c14292006 100644
--- a/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts
+++ b/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts
@@ -1,26 +1,20 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiDirection, TuiHintModeT} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-hint-controller',
     templateUrl: './hint-controller.template.html',
     changeDetection,
 })
 export class ExampleTuiHintControllerComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
     readonly modeVariants: readonly TuiHintModeT[] = ['error'];
diff --git a/projects/demo/src/modules/directives/hint/hint.component.ts b/projects/demo/src/modules/directives/hint/hint.component.ts
index 331373f2ffb6..17f7e4586fa4 100644
--- a/projects/demo/src/modules/directives/hint/hint.component.ts
+++ b/projects/demo/src/modules/directives/hint/hint.component.ts
@@ -1,14 +1,9 @@
 import {Component, forwardRef} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 import {AbstractExampleTuiHint} from '../../components/abstract/hint';
 import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
-import {FrontEndExample} from '../../interfaces/front-end-example';
 
 @Component({
     selector: 'example-hint',
@@ -22,12 +17,12 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     ],
 })
 export class ExampleTuiHintComponent extends AbstractExampleTuiHint {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
     id = '';
diff --git a/projects/demo/src/modules/directives/lazy-loading/lazy-loading.component.ts b/projects/demo/src/modules/directives/lazy-loading/lazy-loading.component.ts
index d9a9d92530ac..4f7973bb9b3e 100644
--- a/projects/demo/src/modules/directives/lazy-loading/lazy-loading.component.ts
+++ b/projects/demo/src/modules/directives/lazy-loading/lazy-loading.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-lazy-loading',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiLazyLoadingComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+    };
 }
diff --git a/projects/demo/src/modules/directives/let/examples/import/import-module.md b/projects/demo/src/modules/directives/let/examples/import/import-module.md
new file mode 100644
index 000000000000..41ad5e8d3f7e
--- /dev/null
+++ b/projects/demo/src/modules/directives/let/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiLetModule} from '@taiga-ui/cdk';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiLetModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/let/examples/import/import-module.txt b/projects/demo/src/modules/directives/let/examples/import/import-module.txt
deleted file mode 100644
index 512e8d23f8d8..000000000000
--- a/projects/demo/src/modules/directives/let/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiLetModule} from '@taiga-ui/cdk';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiLetModule
-    ],
-...
diff --git a/projects/demo/src/modules/directives/let/examples/import/insert-template.md b/projects/demo/src/modules/directives/let/examples/import/insert-template.md
new file mode 100644
index 000000000000..24a76ceb1560
--- /dev/null
+++ b/projects/demo/src/modules/directives/let/examples/import/insert-template.md
@@ -0,0 +1,15 @@
+```html
+<ng-container *tuiLet="someStream | async as streamValue">
+  <p>
+    {{streamValue}}
+    <tui-tooltip [content]="template"></tui-tooltip>
+  </p>
+  <button
+    tuiButton
+    type="button"
+  >
+    Delete {{streamValue}}
+  </button>
+  <ng-template #template>{{streamValue}} is a current value of a someStream</ng-template>
+</ng-container>
+```
diff --git a/projects/demo/src/modules/directives/let/examples/import/insert-template.txt b/projects/demo/src/modules/directives/let/examples/import/insert-template.txt
deleted file mode 100644
index 2eecc12add94..000000000000
--- a/projects/demo/src/modules/directives/let/examples/import/insert-template.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-<ng-container *tuiLet="someStream | async as streamValue">
-    <p>
-        {{streamValue}}
-        <tui-tooltip [content]="template"></tui-tooltip>
-    </p>
-    <button tuiButton type="button">Delete {{streamValue}}</button>
-    <ng-template #template>
-        {{streamValue}} is a current value of a someStream
-    </ng-template>
-</ng-container>
diff --git a/projects/demo/src/modules/directives/let/let.component.ts b/projects/demo/src/modules/directives/let/let.component.ts
index ee02fdf1aa23..48c39dfb5c1c 100644
--- a/projects/demo/src/modules/directives/let/let.component.ts
+++ b/projects/demo/src/modules/directives/let/let.component.ts
@@ -1,14 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-let',
@@ -16,16 +8,16 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiLetComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/directives/manual-hint/examples/import/import-module.md b/projects/demo/src/modules/directives/manual-hint/examples/import/import-module.md
new file mode 100644
index 000000000000..3b720062ba7c
--- /dev/null
+++ b/projects/demo/src/modules/directives/manual-hint/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiManualHintModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiManualHintModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/manual-hint/examples/import/import-module.txt b/projects/demo/src/modules/directives/manual-hint/examples/import/import-module.txt
deleted file mode 100644
index cc25b8398448..000000000000
--- a/projects/demo/src/modules/directives/manual-hint/examples/import/import-module.txt
+++ /dev/null
@@ -1,9 +0,0 @@
-import {TuiManualHintModule} from '@taiga-ui/core'; 
-
-... 
-@NgModule({
-    imports: [
-        ... 
-        TuiManualHintModule 
-    ], 
-...
diff --git a/projects/demo/src/modules/directives/manual-hint/examples/import/insert-template.md b/projects/demo/src/modules/directives/manual-hint/examples/import/insert-template.md
new file mode 100644
index 000000000000..a23b26d7c303
--- /dev/null
+++ b/projects/demo/src/modules/directives/manual-hint/examples/import/insert-template.md
@@ -0,0 +1,21 @@
+```html
+<button
+  tuiButton
+  type="button"
+  tuiManualHint="Custom host with text tooltip"
+  [tuiManualHintShow]="true"
+>
+  Press me
+</button>
+
+<button
+  tuiButton
+  type="button"
+  [tuiManualHint]="template"
+  [tuiManualHintShow]="true"
+>
+  Press that ↑
+</button>
+
+<ng-template #template>Reusable template</ng-template>
+```
diff --git a/projects/demo/src/modules/directives/manual-hint/examples/import/insert-template.txt b/projects/demo/src/modules/directives/manual-hint/examples/import/insert-template.txt
deleted file mode 100644
index 27454c0585f3..000000000000
--- a/projects/demo/src/modules/directives/manual-hint/examples/import/insert-template.txt
+++ /dev/null
@@ -1,21 +0,0 @@
-<button
-    tuiButton
-    type="button"
-    tuiManualHint="Custom host with text tooltip"
-    [tuiManualHintShow]="true"
->
-    Press me
-</button>
-
-<button
-  tuiButton
-  type="button"
-  [tuiManualHint]="template"
-  [tuiManualHintShow]="true"
->
-    Press that ↑
-</button>
-
-<ng-template #template>
-    Reusable template
-</ng-template>
diff --git a/projects/demo/src/modules/directives/manual-hint/manual-hint.component.ts b/projects/demo/src/modules/directives/manual-hint/manual-hint.component.ts
index cb150c8ffa92..d3676363b8b1 100644
--- a/projects/demo/src/modules/directives/manual-hint/manual-hint.component.ts
+++ b/projects/demo/src/modules/directives/manual-hint/manual-hint.component.ts
@@ -1,14 +1,9 @@
 import {Component, forwardRef} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 import {AbstractExampleTuiHint} from '../../components/abstract/hint';
 import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
-import {FrontEndExample} from '../../interfaces/front-end-example';
 
 @Component({
     selector: 'example-manual-hint',
@@ -22,12 +17,12 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     ],
 })
 export class ExampleTuiManualHintComponent extends AbstractExampleTuiHint {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
     show = false;
diff --git a/projects/demo/src/modules/directives/media/media.component.ts b/projects/demo/src/modules/directives/media/media.component.ts
index dca5c79df6e0..b37393de8545 100644
--- a/projects/demo/src/modules/directives/media/media.component.ts
+++ b/projects/demo/src/modules/directives/media/media.component.ts
@@ -1,18 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-media',
@@ -20,25 +8,25 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiMediaComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
+    };
 
     readonly volumeVariants: readonly number[] = [1, 0.5, 0.25, 0];
 
diff --git a/projects/demo/src/modules/directives/mode/mode.component.ts b/projects/demo/src/modules/directives/mode/mode.component.ts
index 32c11ffb17ec..38edeb537536 100644
--- a/projects/demo/src/modules/directives/mode/mode.component.ts
+++ b/projects/demo/src/modules/directives/mode/mode.component.ts
@@ -1,13 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-mode',
@@ -15,12 +8,12 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiModeComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 }
diff --git a/projects/demo/src/modules/directives/overscroll/examples/import/import-module.md b/projects/demo/src/modules/directives/overscroll/examples/import/import-module.md
new file mode 100644
index 000000000000..52344e89583a
--- /dev/null
+++ b/projects/demo/src/modules/directives/overscroll/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiOverscrollModule} from '@taiga-ui/cdk';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiOverscrollModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/overscroll/examples/import/import-module.txt b/projects/demo/src/modules/directives/overscroll/examples/import/import-module.txt
deleted file mode 100644
index 50221f4a5e80..000000000000
--- a/projects/demo/src/modules/directives/overscroll/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiOverscrollModule} from '@taiga-ui/cdk';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiOverscrollModule
-    ],
-...
diff --git a/projects/demo/src/modules/directives/overscroll/examples/import/insert-template.md b/projects/demo/src/modules/directives/overscroll/examples/import/insert-template.md
new file mode 100644
index 000000000000..49f6274293e6
--- /dev/null
+++ b/projects/demo/src/modules/directives/overscroll/examples/import/insert-template.md
@@ -0,0 +1,3 @@
+```html
+<div tuiOverscroll="all">...</div>
+```
diff --git a/projects/demo/src/modules/directives/overscroll/examples/import/insert-template.txt b/projects/demo/src/modules/directives/overscroll/examples/import/insert-template.txt
deleted file mode 100644
index b7f40b735424..000000000000
--- a/projects/demo/src/modules/directives/overscroll/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<div tuiOverscroll="all">
-    ...
-</div>
diff --git a/projects/demo/src/modules/directives/overscroll/overscroll.component.ts b/projects/demo/src/modules/directives/overscroll/overscroll.component.ts
index 047114bd9346..5e9b5a527219 100644
--- a/projects/demo/src/modules/directives/overscroll/overscroll.component.ts
+++ b/projects/demo/src/modules/directives/overscroll/overscroll.component.ts
@@ -1,19 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-overscroll',
@@ -21,24 +8,24 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiOverscrollComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 }
diff --git a/projects/demo/src/modules/directives/pan/pan.component.ts b/projects/demo/src/modules/directives/pan/pan.component.ts
index 7c058ada4465..d735287cedf7 100644
--- a/projects/demo/src/modules/directives/pan/pan.component.ts
+++ b/projects/demo/src/modules/directives/pan/pan.component.ts
@@ -1,13 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-pan',
@@ -15,12 +8,12 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiPanComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 }
diff --git a/projects/demo/src/modules/directives/pointer-hint/examples/import/import-module.md b/projects/demo/src/modules/directives/pointer-hint/examples/import/import-module.md
new file mode 100644
index 000000000000..0e34bbaa9980
--- /dev/null
+++ b/projects/demo/src/modules/directives/pointer-hint/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiPointerHintModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiPointerHintModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/pointer-hint/examples/import/import-module.txt b/projects/demo/src/modules/directives/pointer-hint/examples/import/import-module.txt
deleted file mode 100644
index fd1dfafe461f..000000000000
--- a/projects/demo/src/modules/directives/pointer-hint/examples/import/import-module.txt
+++ /dev/null
@@ -1,9 +0,0 @@
-import {TuiPointerHintModule} from '@taiga-ui/core'; 
-
-... 
-@NgModule({
-    imports: [ 
-        ... 
-        TuiPointerHintModule 
-    ],
-...
diff --git a/projects/demo/src/modules/directives/pointer-hint/examples/import/insert-template.md b/projects/demo/src/modules/directives/pointer-hint/examples/import/insert-template.md
new file mode 100644
index 000000000000..ad8ba5a0ad44
--- /dev/null
+++ b/projects/demo/src/modules/directives/pointer-hint/examples/import/insert-template.md
@@ -0,0 +1,3 @@
+```html
+<div tuiPointerHint>Block with pointer hint</div>
+```
diff --git a/projects/demo/src/modules/directives/pointer-hint/examples/import/insert-template.txt b/projects/demo/src/modules/directives/pointer-hint/examples/import/insert-template.txt
deleted file mode 100644
index 56bf28044cbf..000000000000
--- a/projects/demo/src/modules/directives/pointer-hint/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<div tuiPointerHint>
-    Block with pointer hint
-</div>
diff --git a/projects/demo/src/modules/directives/pointer-hint/pointer-hint.component.ts b/projects/demo/src/modules/directives/pointer-hint/pointer-hint.component.ts
index a1c7cb1c8d27..ea7ecf1ae55e 100644
--- a/projects/demo/src/modules/directives/pointer-hint/pointer-hint.component.ts
+++ b/projects/demo/src/modules/directives/pointer-hint/pointer-hint.component.ts
@@ -1,14 +1,9 @@
 import {Component, forwardRef} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 import {AbstractExampleTuiHint} from '../../components/abstract/hint';
 import {ABSTRACT_PROPS_ACCESSOR} from '../../components/abstract/inherited-documentation/abstract-props-accessor';
-import {FrontEndExample} from '../../interfaces/front-end-example';
 
 @Component({
     selector: 'example-pointer-hint',
@@ -22,12 +17,12 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     ],
 })
 export class ExampleTuiPointerHintComponent extends AbstractExampleTuiHint {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
     showDelay = 0;
diff --git a/projects/demo/src/modules/directives/present/examples/import/import-module.md b/projects/demo/src/modules/directives/present/examples/import/import-module.md
new file mode 100644
index 000000000000..8030e60f3fd1
--- /dev/null
+++ b/projects/demo/src/modules/directives/present/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiPresentModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiPresentModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/present/examples/import/import-module.txt b/projects/demo/src/modules/directives/present/examples/import/import-module.txt
deleted file mode 100644
index 11ae2a3e524a..000000000000
--- a/projects/demo/src/modules/directives/present/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiPresentModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiPresentModule
-    ],
-...
diff --git a/projects/demo/src/modules/directives/present/examples/import/insert-template.md b/projects/demo/src/modules/directives/present/examples/import/insert-template.md
new file mode 100644
index 000000000000..88982e48e10a
--- /dev/null
+++ b/projects/demo/src/modules/directives/present/examples/import/insert-template.md
@@ -0,0 +1,15 @@
+```html
+<div
+  [class.hidden]="!visible"
+  (tuiPresentChange)="onPresentChange($event)"
+>
+  I am a component hidden with CSS
+</div>
+or
+<div
+  *ngIf="visible"
+  (tuiPresentChange)="onPresentChange($event)"
+>
+  I am a component hidden with *ngIf
+</div>
+```
diff --git a/projects/demo/src/modules/directives/present/examples/import/insert-template.txt b/projects/demo/src/modules/directives/present/examples/import/insert-template.txt
deleted file mode 100644
index 3d93daf341d7..000000000000
--- a/projects/demo/src/modules/directives/present/examples/import/insert-template.txt
+++ /dev/null
@@ -1,9 +0,0 @@
-<div [class.hidden]="!visible"
-     (tuiPresentChange)="onPresentChange($event)">
-    I am a component hidden with CSS
-</div>
-or
-<div *ngIf="visible"
-     (tuiPresentChange)="onPresentChange($event)">
-    I am a component hidden with *ngIf
-</div>
diff --git a/projects/demo/src/modules/directives/present/present.component.ts b/projects/demo/src/modules/directives/present/present.component.ts
index dee0a5508f1e..5594218ce8dd 100644
--- a/projects/demo/src/modules/directives/present/present.component.ts
+++ b/projects/demo/src/modules/directives/present/present.component.ts
@@ -1,13 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-present',
@@ -15,12 +8,12 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiPresentComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 }
diff --git a/projects/demo/src/modules/directives/ripple/examples/import/import-module.md b/projects/demo/src/modules/directives/ripple/examples/import/import-module.md
new file mode 100644
index 000000000000..7913653e882e
--- /dev/null
+++ b/projects/demo/src/modules/directives/ripple/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiRippleModule} from '@taiga-ui/addon-mobile';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiRippleModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/ripple/examples/import/import-module.txt b/projects/demo/src/modules/directives/ripple/examples/import/import-module.txt
deleted file mode 100644
index a2488c6c6b70..000000000000
--- a/projects/demo/src/modules/directives/ripple/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiRippleModule} from '@taiga-ui/addon-mobile';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiRippleModule,
-    ],
-...
diff --git a/projects/demo/src/modules/directives/ripple/examples/import/insert-template.md b/projects/demo/src/modules/directives/ripple/examples/import/insert-template.md
new file mode 100644
index 000000000000..408bcef9bb39
--- /dev/null
+++ b/projects/demo/src/modules/directives/ripple/examples/import/insert-template.md
@@ -0,0 +1,3 @@
+```html
+<tui-island tuiRipple>...</tui-island>
+```
diff --git a/projects/demo/src/modules/directives/ripple/examples/import/insert-template.txt b/projects/demo/src/modules/directives/ripple/examples/import/insert-template.txt
deleted file mode 100644
index 9c51c897e803..000000000000
--- a/projects/demo/src/modules/directives/ripple/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<tui-island tuiRipple>
-    ...
-</tui-island>
diff --git a/projects/demo/src/modules/directives/ripple/ripple.component.ts b/projects/demo/src/modules/directives/ripple/ripple.component.ts
index 057f634a36e0..c220fed3028f 100644
--- a/projects/demo/src/modules/directives/ripple/ripple.component.ts
+++ b/projects/demo/src/modules/directives/ripple/ripple.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-ripple',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiRippleComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+    };
 }
diff --git a/projects/demo/src/modules/directives/sidebar/sidebar.component.ts b/projects/demo/src/modules/directives/sidebar/sidebar.component.ts
index 3737f2856aa9..ce4d93a24cc9 100644
--- a/projects/demo/src/modules/directives/sidebar/sidebar.component.ts
+++ b/projects/demo/src/modules/directives/sidebar/sidebar.component.ts
@@ -1,14 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleComponent} from '!!raw-loader!./examples/import/component.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-sidebar',
@@ -16,13 +8,13 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiSidebarComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
+    readonly exampleComponent = import('!!raw-loader!./examples/import/component.txt');
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly exampleComponent = exampleComponent;
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
+    };
 }
diff --git a/projects/demo/src/modules/directives/swipe/examples/import/import-module.md b/projects/demo/src/modules/directives/swipe/examples/import/import-module.md
new file mode 100644
index 000000000000..415a5b3c5e93
--- /dev/null
+++ b/projects/demo/src/modules/directives/swipe/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiSwipeModule} from '@taiga-ui/cdk';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiSwipeModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/swipe/examples/import/import-module.txt b/projects/demo/src/modules/directives/swipe/examples/import/import-module.txt
deleted file mode 100644
index 37d7145fbc38..000000000000
--- a/projects/demo/src/modules/directives/swipe/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiSwipeModule} from '@taiga-ui/cdk';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiSwipeModule,
-    ],
-...
diff --git a/projects/demo/src/modules/directives/swipe/examples/import/insert-template.txt b/projects/demo/src/modules/directives/swipe/examples/import/insert-template.md
similarity index 70%
rename from projects/demo/src/modules/directives/swipe/examples/import/insert-template.txt
rename to projects/demo/src/modules/directives/swipe/examples/import/insert-template.md
index cdd4032651ca..0c74eb63c58a 100644
--- a/projects/demo/src/modules/directives/swipe/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/directives/swipe/examples/import/insert-template.md
@@ -1,2 +1,3 @@
+```html
 <div (tuiSwipe)="..."></div>
-
+```
diff --git a/projects/demo/src/modules/directives/swipe/swipe.component.ts b/projects/demo/src/modules/directives/swipe/swipe.component.ts
index b5cdececcc1a..f9ef7e00da0d 100644
--- a/projects/demo/src/modules/directives/swipe/swipe.component.ts
+++ b/projects/demo/src/modules/directives/swipe/swipe.component.ts
@@ -1,16 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-swipe',
@@ -18,18 +8,18 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiSwipeComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 }
diff --git a/projects/demo/src/modules/directives/textfield-controller/examples/import/import-module.md b/projects/demo/src/modules/directives/textfield-controller/examples/import/import-module.md
new file mode 100644
index 000000000000..f7b7b83d030b
--- /dev/null
+++ b/projects/demo/src/modules/directives/textfield-controller/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiTextfieldControllerModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiTextfieldControllerModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/textfield-controller/examples/import/import-module.txt b/projects/demo/src/modules/directives/textfield-controller/examples/import/import-module.txt
deleted file mode 100644
index c3c937dcbde0..000000000000
--- a/projects/demo/src/modules/directives/textfield-controller/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiTextfieldControllerModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiTextfieldControllerModule,
-    ],
-...
diff --git a/projects/demo/src/modules/directives/textfield-controller/examples/import/insert-template.md b/projects/demo/src/modules/directives/textfield-controller/examples/import/insert-template.md
new file mode 100644
index 000000000000..b560e8f343f6
--- /dev/null
+++ b/projects/demo/src/modules/directives/textfield-controller/examples/import/insert-template.md
@@ -0,0 +1,8 @@
+```html
+<div
+  class="wrapper"
+  [tuiTextfieldCleaner]="true"
+>
+  <tui-input>...</tui-input>
+</div>
+```
diff --git a/projects/demo/src/modules/directives/textfield-controller/examples/import/insert-template.txt b/projects/demo/src/modules/directives/textfield-controller/examples/import/insert-template.txt
deleted file mode 100644
index 4f2c196eb49a..000000000000
--- a/projects/demo/src/modules/directives/textfield-controller/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="wrapper" [tuiTextfieldCleaner]="true">
-    <tui-input>...</tui-input>
-</div>
diff --git a/projects/demo/src/modules/directives/textfield-controller/textfield-controller.component.ts b/projects/demo/src/modules/directives/textfield-controller/textfield-controller.component.ts
index bac5a48fa64e..649dd2b17f6c 100644
--- a/projects/demo/src/modules/directives/textfield-controller/textfield-controller.component.ts
+++ b/projects/demo/src/modules/directives/textfield-controller/textfield-controller.component.ts
@@ -1,28 +1,22 @@
 import {Component} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiAutofillFieldName, TuiInputModeT, TuiInputTypeT} from '@taiga-ui/cdk';
 import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-textfield-controller',
     templateUrl: './textfield-controller.template.html',
     changeDetection,
 })
 export class ExampleTuiTextfieldControllerComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
     readonly sizeVariants: ReadonlyArray<TuiSizeS | TuiSizeL> = ['s', 'm', 'l'];
diff --git a/projects/demo/src/modules/directives/touchable/touchable.component.ts b/projects/demo/src/modules/directives/touchable/touchable.component.ts
index 0260a4234526..fddc8e2e545c 100644
--- a/projects/demo/src/modules/directives/touchable/touchable.component.ts
+++ b/projects/demo/src/modules/directives/touchable/touchable.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-touchable',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiTouchableComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+    };
 }
diff --git a/projects/demo/src/modules/directives/validator/examples/import/import-module.md b/projects/demo/src/modules/directives/validator/examples/import/import-module.md
new file mode 100644
index 000000000000..6596637dd3e9
--- /dev/null
+++ b/projects/demo/src/modules/directives/validator/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiValidatorModule} from '@taiga-ui/cdk';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiValidatorModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/directives/validator/examples/import/import-module.txt b/projects/demo/src/modules/directives/validator/examples/import/import-module.txt
deleted file mode 100644
index 710d54cccd66..000000000000
--- a/projects/demo/src/modules/directives/validator/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiValidatorModule} from '@taiga-ui/cdk';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiValidatorModule,
-    ],
-...
diff --git a/projects/demo/src/modules/directives/validator/examples/import/insert-template.md b/projects/demo/src/modules/directives/validator/examples/import/insert-template.md
new file mode 100644
index 000000000000..314faba0a2d7
--- /dev/null
+++ b/projects/demo/src/modules/directives/validator/examples/import/insert-template.md
@@ -0,0 +1,6 @@
+```html
+<tui-input
+  formControlName="control"
+  [tuiValidator]="validator"
+></tui-input>
+```
diff --git a/projects/demo/src/modules/directives/validator/examples/import/insert-template.txt b/projects/demo/src/modules/directives/validator/examples/import/insert-template.txt
deleted file mode 100644
index 089b0439866d..000000000000
--- a/projects/demo/src/modules/directives/validator/examples/import/insert-template.txt
+++ /dev/null
@@ -1,4 +0,0 @@
-<tui-input
-    formControlName="control"
-    [tuiValidator]="validator"
-></tui-input>
diff --git a/projects/demo/src/modules/directives/validator/validator.component.ts b/projects/demo/src/modules/directives/validator/validator.component.ts
index a2d48d27396c..c2aafed0d7f3 100644
--- a/projects/demo/src/modules/directives/validator/validator.component.ts
+++ b/projects/demo/src/modules/directives/validator/validator.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-validator',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiValidatorComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/directives/zoom/zoom.component.ts b/projects/demo/src/modules/directives/zoom/zoom.component.ts
index 5b66203d545f..5962ca4545ee 100644
--- a/projects/demo/src/modules/directives/zoom/zoom.component.ts
+++ b/projects/demo/src/modules/directives/zoom/zoom.component.ts
@@ -1,13 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleComponent} from '!!raw-loader!./examples/import/component.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-zoom',
@@ -15,12 +8,12 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiZoomComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
-    readonly exampleComponent = exampleComponent;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.txt');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.txt');
+    readonly exampleComponent = import('!!raw-loader!./examples/import/component.txt');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/info/doc/doc.component.ts b/projects/demo/src/modules/info/doc/doc.component.ts
index ce5dba688de0..e9c60a9f83ce 100644
--- a/projects/demo/src/modules/info/doc/doc.component.ts
+++ b/projects/demo/src/modules/info/doc/doc.component.ts
@@ -1,8 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 
-import {default as docReadme} from '!!raw-loader!../../../../../addon-doc/README.md';
-
 @Component({
     selector: 'doc',
     templateUrl: 'doc.template.html',
@@ -10,6 +8,4 @@ import {default as docReadme} from '!!raw-loader!../../../../../addon-doc/README
     encapsulation: ViewEncapsulation.None,
     changeDetection,
 })
-export class DocComponent {
-    readonly docReadme = docReadme;
-}
+export class DocComponent {}
diff --git a/projects/demo/src/modules/info/testing/disable-animation/disable-animation.component.ts b/projects/demo/src/modules/info/testing/disable-animation/disable-animation.component.ts
index 9cbf37cb2ffa..9b9fc4f531cd 100644
--- a/projects/demo/src/modules/info/testing/disable-animation/disable-animation.component.ts
+++ b/projects/demo/src/modules/info/testing/disable-animation/disable-animation.component.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
 
-import {default as disableAnimationExample} from '!!raw-loader!./examples/disable-all-animation.txt';
-
 @Component({
     selector: 'disable-animation',
     templateUrl: './disable-animation.template.html',
 })
 export class DisableAnimationComponent {
-    readonly disableAnimationExample = disableAnimationExample;
+    readonly disableAnimationExample = import(
+        '!!raw-loader!./examples/disable-all-animation.md'
+    );
 }
diff --git a/projects/demo/src/modules/info/testing/disable-animation/examples/disable-all-animation.md b/projects/demo/src/modules/info/testing/disable-animation/examples/disable-all-animation.md
new file mode 100644
index 000000000000..7d89c8808fd6
--- /dev/null
+++ b/projects/demo/src/modules/info/testing/disable-animation/examples/disable-all-animation.md
@@ -0,0 +1,18 @@
+```ts
+import {TUI_IS_CYPRESS} from '@taiga-ui/cdk';
+import {TUI_ANIMATIONS_DURATION} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  // ...
+  providers: [
+    // ...
+    {
+      provide: TUI_ANIMATIONS_DURATION,
+      useFactory: () => (inject(TUI_IS_CYPRESS) ? 0 : 300),
+    },
+  ],
+})
+export class AppModule {}
+```
diff --git a/projects/demo/src/modules/info/testing/disable-animation/examples/disable-all-animation.txt b/projects/demo/src/modules/info/testing/disable-animation/examples/disable-all-animation.txt
deleted file mode 100644
index 4aa2a2eb6076..000000000000
--- a/projects/demo/src/modules/info/testing/disable-animation/examples/disable-all-animation.txt
+++ /dev/null
@@ -1,14 +0,0 @@
-import {TUI_IS_CYPRESS} from '@taiga-ui/cdk';
-import {TUI_ANIMATIONS_DURATION} from '@taiga-ui/core';
-...
-@NgModule({
-    ...
-    providers: [
-        ...
-        {
-            provide: TUI_ANIMATIONS_DURATION,
-            useFactory: () => (inject(TUI_IS_CYPRESS) ? 0 : 300),
-        }
-    ],
-})
-export class AppModule {}
diff --git a/projects/demo/src/modules/interfaces/front-end-example.ts b/projects/demo/src/modules/interfaces/front-end-example.ts
deleted file mode 100644
index 8680c2eaece4..000000000000
--- a/projects/demo/src/modules/interfaces/front-end-example.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @deprecated: use TUI_EXAMPLE_PRIMARY_FILE_NAME instead
- */
-export const EXAMPLE_PRIMARY_FILE_NAME = {
-    TS: 'TypeScript',
-    LESS: 'LESS',
-    HTML: 'HTML',
-} as const;
-
-/**
- * @deprecated: use TuiDocExample instead
- */
-export interface FrontEndExample {
-    [EXAMPLE_PRIMARY_FILE_NAME.TS]?: string;
-    [EXAMPLE_PRIMARY_FILE_NAME.HTML]?: string;
-    [EXAMPLE_PRIMARY_FILE_NAME.LESS]?: string;
-}
diff --git a/projects/demo/src/modules/markup/colors/colors.component.ts b/projects/demo/src/modules/markup/colors/colors.component.ts
index 031a297280f7..581bda0d277d 100644
--- a/projects/demo/src/modules/markup/colors/colors.component.ts
+++ b/projects/demo/src/modules/markup/colors/colors.component.ts
@@ -1,8 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 
-import {default as basicImportsLess} from '!!raw-loader!./examples/import/basic-imports-less.txt';
-
 import {
     BASE,
     BASE_NIGHT,
@@ -22,7 +20,9 @@ import {
     changeDetection,
 })
 export class ColorsComponent {
-    readonly basicImportsLess = basicImportsLess;
+    readonly basicImportsLess = import(
+        '!!raw-loader!./examples/import/basic-imports-less.md'
+    );
 
     readonly base = BASE;
     readonly baseNight = BASE_NIGHT;
diff --git a/projects/demo/src/modules/markup/colors/examples/import/basic-imports-less.md b/projects/demo/src/modules/markup/colors/examples/import/basic-imports-less.md
new file mode 100644
index 000000000000..843bf41eb557
--- /dev/null
+++ b/projects/demo/src/modules/markup/colors/examples/import/basic-imports-less.md
@@ -0,0 +1,5 @@
+```less
+.class {
+  background-color: var(--tui-success-fill);
+}
+```
diff --git a/projects/demo/src/modules/markup/colors/examples/import/basic-imports-less.txt b/projects/demo/src/modules/markup/colors/examples/import/basic-imports-less.txt
deleted file mode 100644
index 517bc592358d..000000000000
--- a/projects/demo/src/modules/markup/colors/examples/import/basic-imports-less.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-.class {
-    background-color: var(--tui-success-fill);
-}
diff --git a/projects/demo/src/modules/markup/form/form.component.ts b/projects/demo/src/modules/markup/form/form.component.ts
index 34c6ae4cc6e3..58b1384322a7 100644
--- a/projects/demo/src/modules/markup/form/form.component.ts
+++ b/projects/demo/src/modules/markup/form/form.component.ts
@@ -1,11 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./example/index.html';
-import {default as example1Less} from '!!raw-loader!./example/index.style.less';
-import {default as example1Ts} from '!!raw-loader!./example/index.ts';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-form',
@@ -13,9 +8,9 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class FormComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./example/index.ts'),
+        HTML: import('!!raw-loader!./example/index.html'),
+        LESS: import('!!raw-loader!./example/index.style.less'),
     };
 }
diff --git a/projects/demo/src/modules/markup/grid/grid.component.ts b/projects/demo/src/modules/markup/grid/grid.component.ts
index d2eb0d121fbb..7d8b7ea008be 100644
--- a/projects/demo/src/modules/markup/grid/grid.component.ts
+++ b/projects/demo/src/modules/markup/grid/grid.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'grid',
@@ -15,13 +9,13 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class GridComponent {
-    readonly example1: FrontEndExample = {
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 }
diff --git a/projects/demo/src/modules/markup/lists/lists.component.ts b/projects/demo/src/modules/markup/lists/lists.component.ts
index 30dbae289714..a2e2e155e3b7 100644
--- a/projects/demo/src/modules/markup/lists/lists.component.ts
+++ b/projects/demo/src/modules/markup/lists/lists.component.ts
@@ -1,15 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
-import {default as example6Html} from '!!raw-loader!./examples/6/index.html';
-import {default as example7Html} from '!!raw-loader!./examples/7/index.html';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'lists',
@@ -17,31 +8,31 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ListsComponent {
-    readonly example1: FrontEndExample = {
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 
-    readonly example4: FrontEndExample = {
-        HTML: example4Html,
+    readonly example4: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/4/index.html'),
     };
 
-    readonly example5: FrontEndExample = {
-        HTML: example5Html,
+    readonly example5: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/5/index.html'),
     };
 
-    readonly example6: FrontEndExample = {
-        HTML: example6Html,
+    readonly example6: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/6/index.html'),
     };
 
-    readonly example7: FrontEndExample = {
-        HTML: example7Html,
+    readonly example7: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/7/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/markup/skeleton/skeleton.component.ts b/projects/demo/src/modules/markup/skeleton/skeleton.component.ts
index bd7e35c47ad2..333f63b60ced 100644
--- a/projects/demo/src/modules/markup/skeleton/skeleton.component.ts
+++ b/projects/demo/src/modules/markup/skeleton/skeleton.component.ts
@@ -1,14 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'skeleton',
@@ -16,15 +8,15 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class SkeletonComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 }
diff --git a/projects/demo/src/modules/markup/spaces/examples/import/basic-imports-less.txt b/projects/demo/src/modules/markup/spaces/examples/import/basic-imports-less.md
similarity index 80%
rename from projects/demo/src/modules/markup/spaces/examples/import/basic-imports-less.txt
rename to projects/demo/src/modules/markup/spaces/examples/import/basic-imports-less.md
index a527b044f967..8020105b2a5b 100644
--- a/projects/demo/src/modules/markup/spaces/examples/import/basic-imports-less.txt
+++ b/projects/demo/src/modules/markup/spaces/examples/import/basic-imports-less.md
@@ -1 +1,3 @@
+```less
 @import '~@taiga-ui/core/styles/taiga-ui-local';
+```
diff --git a/projects/demo/src/modules/markup/spaces/examples/import/index-less.txt b/projects/demo/src/modules/markup/spaces/examples/import/index-less.md
similarity index 80%
rename from projects/demo/src/modules/markup/spaces/examples/import/index-less.txt
rename to projects/demo/src/modules/markup/spaces/examples/import/index-less.md
index cfb7d16800ed..0470ccca3f15 100644
--- a/projects/demo/src/modules/markup/spaces/examples/import/index-less.txt
+++ b/projects/demo/src/modules/markup/spaces/examples/import/index-less.md
@@ -1 +1,3 @@
+```less
 @import '~@taiga-ui/core/styles/taiga-ui-global';
+```
diff --git a/projects/demo/src/modules/markup/spaces/spaces.component.ts b/projects/demo/src/modules/markup/spaces/spaces.component.ts
index 879b31db1727..2bd637ce3728 100644
--- a/projects/demo/src/modules/markup/spaces/spaces.component.ts
+++ b/projects/demo/src/modules/markup/spaces/spaces.component.ts
@@ -1,16 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.style.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.style.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleBasicImportsLess} from '!!raw-loader!./examples/import/basic-imports-less.txt';
-import {default as exampleIndexLess} from '!!raw-loader!./examples/import/index-less.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'spaces',
@@ -18,18 +8,21 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class SpacesComponent {
-    readonly exampleBasicImportsLess = exampleBasicImportsLess;
-    readonly exampleIndexLess = exampleIndexLess;
+    readonly exampleBasicImportsLess = import(
+        '!!raw-loader!./examples/import/basic-imports-less.md'
+    );
+
+    readonly exampleIndexLess = import('!!raw-loader!./examples/import/index-less.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.style.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.style.less'),
     };
 }
diff --git a/projects/demo/src/modules/markup/tables/tables.component.ts b/projects/demo/src/modules/markup/tables/tables.component.ts
index 4ebb2e4af0de..a7afa2686453 100644
--- a/projects/demo/src/modules/markup/tables/tables.component.ts
+++ b/projects/demo/src/modules/markup/tables/tables.component.ts
@@ -1,10 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'tables',
@@ -13,8 +9,8 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class TablesComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/pipes/currency/currency.component.ts b/projects/demo/src/modules/pipes/currency/currency.component.ts
index a7dfd0ec955e..b33a9a955cc9 100644
--- a/projects/demo/src/modules/pipes/currency/currency.component.ts
+++ b/projects/demo/src/modules/pipes/currency/currency.component.ts
@@ -1,14 +1,7 @@
 import {Component} from '@angular/core';
 import {FormControl, Validators} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/template.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/component.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/template.html';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-currency',
@@ -16,16 +9,16 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiCurrencyComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        HTML: import('!!raw-loader!./examples/1/template.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/component.ts'),
+        HTML: import('!!raw-loader!./examples/2/template.html'),
     };
 
     readonly currencyVariants = [null, 826, 840, 'EUR', 'RUB', 'UGX', 'USD'];
diff --git a/projects/demo/src/modules/pipes/currency/examples/import/import-module.md b/projects/demo/src/modules/pipes/currency/examples/import/import-module.md
new file mode 100644
index 000000000000..ca6a4f44ae1b
--- /dev/null
+++ b/projects/demo/src/modules/pipes/currency/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiCurrencyPipeModule} from '@taiga-ui/addon-commerce';
+
+//...
+
+@NgModule({
+  imports: [
+    //...
+    TuiCurrencyPipeModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/pipes/currency/examples/import/import-module.txt b/projects/demo/src/modules/pipes/currency/examples/import/import-module.txt
deleted file mode 100644
index 8191d3800139..000000000000
--- a/projects/demo/src/modules/pipes/currency/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiCurrencyPipeModule} from '@taiga-ui/addon-commerce';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiCurrencyPipeModule
-    ],
-...
diff --git a/projects/demo/src/modules/pipes/currency/examples/import/insert-template.md b/projects/demo/src/modules/pipes/currency/examples/import/insert-template.md
new file mode 100644
index 000000000000..a7119d7754c0
--- /dev/null
+++ b/projects/demo/src/modules/pipes/currency/examples/import/insert-template.md
@@ -0,0 +1,3 @@
+```html
+<tui-input-number [postfix]="826 | tuiCurrency">Type a sum</tui-input-number>
+```
diff --git a/projects/demo/src/modules/pipes/currency/examples/import/insert-template.txt b/projects/demo/src/modules/pipes/currency/examples/import/insert-template.txt
deleted file mode 100644
index 2099f08a4333..000000000000
--- a/projects/demo/src/modules/pipes/currency/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<tui-input-number [postfix]="826 | tuiCurrency">
-    Type a sum
-</tui-input-number>
\ No newline at end of file
diff --git a/projects/demo/src/modules/pipes/filter-by-input/examples/import/import-module.md b/projects/demo/src/modules/pipes/filter-by-input/examples/import/import-module.md
new file mode 100644
index 000000000000..9757d99528d6
--- /dev/null
+++ b/projects/demo/src/modules/pipes/filter-by-input/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiFilterByInputPipeModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiFilterByInputPipeModule,
+  ],
+  //  ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/pipes/filter-by-input/examples/import/import-module.txt b/projects/demo/src/modules/pipes/filter-by-input/examples/import/import-module.txt
deleted file mode 100644
index 2206ccd5343b..000000000000
--- a/projects/demo/src/modules/pipes/filter-by-input/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiFilterByInputPipeModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiFilterByInputPipeModule,
-    ],
-...
diff --git a/projects/demo/src/modules/pipes/filter-by-input/examples/import/insert-template.md b/projects/demo/src/modules/pipes/filter-by-input/examples/import/insert-template.md
new file mode 100644
index 000000000000..c208e617c6b5
--- /dev/null
+++ b/projects/demo/src/modules/pipes/filter-by-input/examples/import/insert-template.md
@@ -0,0 +1,9 @@
+```html
+<tui-input [formControl]="user">
+  User
+  <tui-data-list-wrapper
+    *tuiDataList
+    [items]="items | tuiFilterByInput"
+  ></tui-data-list-wrapper>
+</tui-input>
+```
diff --git a/projects/demo/src/modules/pipes/filter-by-input/examples/import/insert-template.txt b/projects/demo/src/modules/pipes/filter-by-input/examples/import/insert-template.txt
deleted file mode 100644
index 60f13d563b6e..000000000000
--- a/projects/demo/src/modules/pipes/filter-by-input/examples/import/insert-template.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<tui-input [formControl]="user">
-    User
-    <tui-data-list-wrapper
-        *tuiDataList
-        [items]="items | tuiFilterByInput"
-    ></tui-data-list-wrapper>
-</tui-input>
diff --git a/projects/demo/src/modules/pipes/filter-by-input/filter-by-input.component.ts b/projects/demo/src/modules/pipes/filter-by-input/filter-by-input.component.ts
index ee091f68a2aa..fc75bbcdcf5b 100644
--- a/projects/demo/src/modules/pipes/filter-by-input/filter-by-input.component.ts
+++ b/projects/demo/src/modules/pipes/filter-by-input/filter-by-input.component.ts
@@ -1,16 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-filter-by-input',
@@ -18,21 +8,21 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiFilterByInputComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/pipes/filter/examples/import/import-module.md b/projects/demo/src/modules/pipes/filter/examples/import/import-module.md
new file mode 100644
index 000000000000..216085dd7d8a
--- /dev/null
+++ b/projects/demo/src/modules/pipes/filter/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiFilterPipeModule} from '@taiga-ui/cdk';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiFilterPipeModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/pipes/filter/examples/import/import-module.txt b/projects/demo/src/modules/pipes/filter/examples/import/import-module.txt
deleted file mode 100644
index 300985ae5a45..000000000000
--- a/projects/demo/src/modules/pipes/filter/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiFilterPipeModule} from '@taiga-ui/cdk';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiFilterPipeModule
-    ],
-...
diff --git a/projects/demo/src/modules/pipes/filter/examples/import/insert-template.md b/projects/demo/src/modules/pipes/filter/examples/import/insert-template.md
new file mode 100644
index 000000000000..91462044154c
--- /dev/null
+++ b/projects/demo/src/modules/pipes/filter/examples/import/insert-template.md
@@ -0,0 +1,3 @@
+```html
+<div *ngFor="let item of items | tuiFilter: matcher: someArg">{{item}}</div>
+```
diff --git a/projects/demo/src/modules/pipes/filter/examples/import/insert-template.txt b/projects/demo/src/modules/pipes/filter/examples/import/insert-template.txt
deleted file mode 100644
index bc93a621aa1f..000000000000
--- a/projects/demo/src/modules/pipes/filter/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<div *ngFor="let item of items | tuiFilter: matcher: someArg">
-    {{item}}
-</div>
diff --git a/projects/demo/src/modules/pipes/filter/filter.component.ts b/projects/demo/src/modules/pipes/filter/filter.component.ts
index 900e6ea3ba3c..f16d6052306b 100644
--- a/projects/demo/src/modules/pipes/filter/filter.component.ts
+++ b/projects/demo/src/modules/pipes/filter/filter.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Ts} from '!!raw-loader!./examples/1/component.ts';
-import {default as example1Html} from '!!raw-loader!./examples/1/template.html';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-filter',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiFilterComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/component.ts'),
+        HTML: import('!!raw-loader!./examples/1/template.html'),
     };
 }
diff --git a/projects/demo/src/modules/pipes/format-number/examples/import/import-module.md b/projects/demo/src/modules/pipes/format-number/examples/import/import-module.md
new file mode 100644
index 000000000000..5fc3cab18849
--- /dev/null
+++ b/projects/demo/src/modules/pipes/format-number/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiFormatNumberPipeModule} from '@taiga-ui/core';
+
+//...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiFormatNumberPipeModule,
+  ],
+  //  ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/pipes/format-number/examples/import/import-module.txt b/projects/demo/src/modules/pipes/format-number/examples/import/import-module.txt
deleted file mode 100644
index 8111835e8364..000000000000
--- a/projects/demo/src/modules/pipes/format-number/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiFormatNumberPipeModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiFormatNumberPipeModule
-    ],
-...
diff --git a/projects/demo/src/modules/pipes/format-number/examples/import/insert-template.md b/projects/demo/src/modules/pipes/format-number/examples/import/insert-template.md
new file mode 100644
index 000000000000..22acb427bd79
--- /dev/null
+++ b/projects/demo/src/modules/pipes/format-number/examples/import/insert-template.md
@@ -0,0 +1,3 @@
+```html
+Formatted number: {{index | tuiFormatNumber}}
+```
diff --git a/projects/demo/src/modules/pipes/format-number/examples/import/insert-template.txt b/projects/demo/src/modules/pipes/format-number/examples/import/insert-template.txt
deleted file mode 100644
index a9e2b4d20f96..000000000000
--- a/projects/demo/src/modules/pipes/format-number/examples/import/insert-template.txt
+++ /dev/null
@@ -1 +0,0 @@
-Fomatted number: {{index | tuiFormatNumber}}
diff --git a/projects/demo/src/modules/pipes/format-number/format-number.component.ts b/projects/demo/src/modules/pipes/format-number/format-number.component.ts
index abe29a5f571d..29b8bb7eccce 100644
--- a/projects/demo/src/modules/pipes/format-number/format-number.component.ts
+++ b/projects/demo/src/modules/pipes/format-number/format-number.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-format-number',
@@ -15,12 +9,12 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiFormatNumberComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
     value = 100;
diff --git a/projects/demo/src/modules/pipes/format-phone/examples/import/import-module.md b/projects/demo/src/modules/pipes/format-phone/examples/import/import-module.md
new file mode 100644
index 000000000000..1beec9263ff1
--- /dev/null
+++ b/projects/demo/src/modules/pipes/format-phone/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiFormatPhonePipeModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiFormatPhonePipeModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/pipes/format-phone/examples/import/import-module.txt b/projects/demo/src/modules/pipes/format-phone/examples/import/import-module.txt
deleted file mode 100644
index 155a00d88f3d..000000000000
--- a/projects/demo/src/modules/pipes/format-phone/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiFormatPhonePipeModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiFormatPhonePipeModule
-    ],
-...
diff --git a/projects/demo/src/modules/pipes/format-phone/examples/import/insert-template.md b/projects/demo/src/modules/pipes/format-phone/examples/import/insert-template.md
new file mode 100644
index 000000000000..8cd05e089c98
--- /dev/null
+++ b/projects/demo/src/modules/pipes/format-phone/examples/import/insert-template.md
@@ -0,0 +1,4 @@
+```html
+Formatted number: {{ phone | tuiFormatPhone}} Formatted number with custom params: {{ phone | tuiFormatPhone: 'country
+code' : 'mask'}}
+```
diff --git a/projects/demo/src/modules/pipes/format-phone/examples/import/insert-template.txt b/projects/demo/src/modules/pipes/format-phone/examples/import/insert-template.txt
deleted file mode 100644
index 62ae07863418..000000000000
--- a/projects/demo/src/modules/pipes/format-phone/examples/import/insert-template.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-Formatted number: {{ phone | tuiFormatPhone}}
-
-Formatted number with custom params: {{ phone | tuiFormatPhone: 'country code' : 'mask'}}
diff --git a/projects/demo/src/modules/pipes/format-phone/format-phone.component.ts b/projects/demo/src/modules/pipes/format-phone/format-phone.component.ts
index 107b28fe85c4..e24b7c2e7c08 100644
--- a/projects/demo/src/modules/pipes/format-phone/format-phone.component.ts
+++ b/projects/demo/src/modules/pipes/format-phone/format-phone.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-format-phone',
@@ -15,12 +9,12 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiFormatPhoneComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
     index = '+78005557778';
diff --git a/projects/demo/src/modules/pipes/mapper/examples/import/import-module.md b/projects/demo/src/modules/pipes/mapper/examples/import/import-module.md
new file mode 100644
index 000000000000..076a7a58f8bf
--- /dev/null
+++ b/projects/demo/src/modules/pipes/mapper/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiMapperPipeModule} from '@taiga-ui/cdk';
+
+// ...
+
+@NgModule({
+  imports: [
+    //    ...
+    TuiMapperPipeModule,
+  ],
+  //  ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/pipes/mapper/examples/import/import-module.txt b/projects/demo/src/modules/pipes/mapper/examples/import/import-module.txt
deleted file mode 100644
index 069c405d8731..000000000000
--- a/projects/demo/src/modules/pipes/mapper/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiMapperPipeModule} from '@taiga-ui/cdk';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiMapperPipeModule
-    ],
-...
diff --git a/projects/demo/src/modules/pipes/mapper/examples/import/insert-template.txt b/projects/demo/src/modules/pipes/mapper/examples/import/insert-template.md
similarity index 76%
rename from projects/demo/src/modules/pipes/mapper/examples/import/insert-template.txt
rename to projects/demo/src/modules/pipes/mapper/examples/import/insert-template.md
index 893e9d1f7e3f..cd277bfec55d 100644
--- a/projects/demo/src/modules/pipes/mapper/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/pipes/mapper/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 {{item | tuiMapper: mapper: someArg}}
+```
diff --git a/projects/demo/src/modules/pipes/mapper/mapper.component.ts b/projects/demo/src/modules/pipes/mapper/mapper.component.ts
index b66e429a52ef..f5342662f7b6 100644
--- a/projects/demo/src/modules/pipes/mapper/mapper.component.ts
+++ b/projects/demo/src/modules/pipes/mapper/mapper.component.ts
@@ -1,14 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Ts} from '!!raw-loader!./examples/1/component.ts';
-import {default as example1Html} from '!!raw-loader!./examples/1/template.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/component.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/template.html';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-mapper',
@@ -17,16 +9,16 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiMapperComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/component.ts'),
+        HTML: import('!!raw-loader!./examples/1/template.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/component.ts'),
+        HTML: import('!!raw-loader!./examples/2/template.html'),
     };
 }
diff --git a/projects/demo/src/modules/pipes/pluralize/examples/import/import-module.md b/projects/demo/src/modules/pipes/pluralize/examples/import/import-module.md
new file mode 100644
index 000000000000..e0af21e02a2f
--- /dev/null
+++ b/projects/demo/src/modules/pipes/pluralize/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiPluralizePipeModule} from '@taiga-ui/core';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiPluralizePipeModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/pipes/pluralize/examples/import/import-module.txt b/projects/demo/src/modules/pipes/pluralize/examples/import/import-module.txt
deleted file mode 100644
index e45b9aef4153..000000000000
--- a/projects/demo/src/modules/pipes/pluralize/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiPluralizePipeModule} from '@taiga-ui/core';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiPluralizePipeModule
-    ],
-...
diff --git a/projects/demo/src/modules/pipes/pluralize/examples/import/insert-template.txt b/projects/demo/src/modules/pipes/pluralize/examples/import/insert-template.md
similarity index 86%
rename from projects/demo/src/modules/pipes/pluralize/examples/import/insert-template.txt
rename to projects/demo/src/modules/pipes/pluralize/examples/import/insert-template.md
index d5279a099747..e2321071e2bc 100644
--- a/projects/demo/src/modules/pipes/pluralize/examples/import/insert-template.txt
+++ b/projects/demo/src/modules/pipes/pluralize/examples/import/insert-template.md
@@ -1 +1,3 @@
+```html
 Showed {{index}} {{index | tuiPluralize: ['result', 'results', 'results']}}
+```
diff --git a/projects/demo/src/modules/pipes/pluralize/pluralize.component.ts b/projects/demo/src/modules/pipes/pluralize/pluralize.component.ts
index 624284cf9b8b..3e1ffe8943d7 100644
--- a/projects/demo/src/modules/pipes/pluralize/pluralize.component.ts
+++ b/projects/demo/src/modules/pipes/pluralize/pluralize.component.ts
@@ -2,9 +2,6 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiPluralize} from '@taiga-ui/core';
 
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
 @Component({
     selector: 'example-tui-pluralize',
     templateUrl: './pluralize.template.html',
@@ -12,8 +9,8 @@ import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-temp
     changeDetection,
 })
 export class ExampleTuiPluralizeComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
     index = 10;
 
diff --git a/projects/demo/src/modules/pipes/stringify-content/examples/import/import-module.md b/projects/demo/src/modules/pipes/stringify-content/examples/import/import-module.md
new file mode 100644
index 000000000000..3cf82d083d9c
--- /dev/null
+++ b/projects/demo/src/modules/pipes/stringify-content/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiStringifyContentPipeModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiStringifyContentPipeModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/pipes/stringify-content/examples/import/import-module.txt b/projects/demo/src/modules/pipes/stringify-content/examples/import/import-module.txt
deleted file mode 100644
index e5814e18a978..000000000000
--- a/projects/demo/src/modules/pipes/stringify-content/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiStringifyContentPipeModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiStringifyContentPipeModule,
-    ],
-...
diff --git a/projects/demo/src/modules/pipes/stringify-content/examples/import/insert-template.md b/projects/demo/src/modules/pipes/stringify-content/examples/import/insert-template.md
new file mode 100644
index 000000000000..e1b7b6b6c3e8
--- /dev/null
+++ b/projects/demo/src/modules/pipes/stringify-content/examples/import/insert-template.md
@@ -0,0 +1,12 @@
+```html
+<tui-combo-box
+  [stringify]="stringify"
+  [(ngModel)]="value"
+>
+  <tui-data-list-wrapper
+    *tuiDataList
+    [items]="items"
+    [itemContent]="stringify | tuiStringifyContent"
+  ></tui-data-list-wrapper>
+</tui-combo-box>
+```
diff --git a/projects/demo/src/modules/pipes/stringify-content/examples/import/insert-template.txt b/projects/demo/src/modules/pipes/stringify-content/examples/import/insert-template.txt
deleted file mode 100644
index ac8658821188..000000000000
--- a/projects/demo/src/modules/pipes/stringify-content/examples/import/insert-template.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-<tui-combo-box [stringify]="stringify" [(ngModel)]="value">
-    <tui-data-list-wrapper
-        *tuiDataList
-        [items]="items"
-        [itemContent]="stringify | tuiStringifyContent"
-    ></tui-data-list-wrapper>
-</tui-combo-box>
diff --git a/projects/demo/src/modules/pipes/stringify-content/stringify-content.component.ts b/projects/demo/src/modules/pipes/stringify-content/stringify-content.component.ts
index 15c6a99de14c..7d4e6fe2030d 100644
--- a/projects/demo/src/modules/pipes/stringify-content/stringify-content.component.ts
+++ b/projects/demo/src/modules/pipes/stringify-content/stringify-content.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-stringify-content',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiStringifyContentComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/pipes/stringify/examples/import/import-module.md b/projects/demo/src/modules/pipes/stringify/examples/import/import-module.md
new file mode 100644
index 000000000000..2093ca0d1035
--- /dev/null
+++ b/projects/demo/src/modules/pipes/stringify/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiStringifyPipeModule} from '@taiga-ui/kit';
+
+// ...
+
+@NgModule({
+  imports: [
+    //...
+    TuiStringifyPipeModule,
+  ],
+  //  ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/pipes/stringify/examples/import/import-module.txt b/projects/demo/src/modules/pipes/stringify/examples/import/import-module.txt
deleted file mode 100644
index 06587a5ca948..000000000000
--- a/projects/demo/src/modules/pipes/stringify/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiStringifyPipeModule} from '@taiga-ui/kit';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiStringifyPipeModule,
-    ],
-...
diff --git a/projects/demo/src/modules/pipes/stringify/examples/import/insert-template.md b/projects/demo/src/modules/pipes/stringify/examples/import/insert-template.md
new file mode 100644
index 000000000000..4c3c25fcbca5
--- /dev/null
+++ b/projects/demo/src/modules/pipes/stringify/examples/import/insert-template.md
@@ -0,0 +1,8 @@
+```html
+<tui-combo-box
+  [stringify]="'name' | tuiStringify"
+  [(ngModel)]="value"
+>
+  <!-- ... -->
+</tui-combo-box>
+```
diff --git a/projects/demo/src/modules/pipes/stringify/examples/import/insert-template.txt b/projects/demo/src/modules/pipes/stringify/examples/import/insert-template.txt
deleted file mode 100644
index c7486aacbad5..000000000000
--- a/projects/demo/src/modules/pipes/stringify/examples/import/insert-template.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-<tui-combo-box
-    [stringify]="'name' | tuiStringify"
-    [(ngModel)]="value"
->
-    <!-- ... -->
-</tui-combo-box>
diff --git a/projects/demo/src/modules/pipes/stringify/stringify.component.ts b/projects/demo/src/modules/pipes/stringify/stringify.component.ts
index dd2be9299ee0..d4191505d566 100644
--- a/projects/demo/src/modules/pipes/stringify/stringify.component.ts
+++ b/projects/demo/src/modules/pipes/stringify/stringify.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-stringify',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiStringifyComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/services/destroy/destroy.component.ts b/projects/demo/src/modules/services/destroy/destroy.component.ts
index 0c4eef46983d..39590d216e00 100644
--- a/projects/demo/src/modules/services/destroy/destroy.component.ts
+++ b/projects/demo/src/modules/services/destroy/destroy.component.ts
@@ -1,11 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as exampleTs} from '!!raw-loader!./examples/1/component.ts';
-import {default as exampleHtml} from '!!raw-loader!./examples/1/template.html';
-import {default as injectService} from '!!raw-loader!./examples/inject-service.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-destroy',
@@ -13,10 +8,10 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiDestroyComponent {
-    injectService = injectService;
+    injectService = import('!!raw-loader!./examples/inject-service.md');
 
-    readonly example: FrontEndExample = {
-        TypeScript: exampleTs,
-        HTML: exampleHtml,
+    readonly example: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/component.ts'),
+        HTML: import('!!raw-loader!./examples/1/template.html'),
     };
 }
diff --git a/projects/demo/src/modules/services/destroy/examples/inject-service.md b/projects/demo/src/modules/services/destroy/examples/inject-service.md
new file mode 100644
index 000000000000..59f37d5ef163
--- /dev/null
+++ b/projects/demo/src/modules/services/destroy/examples/inject-service.md
@@ -0,0 +1,7 @@
+```ts
+import {TuiDestroyService} from '@taiga-ui/cdk';
+
+export class MyComponent {
+  constructor(@Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService) {}
+}
+```
diff --git a/projects/demo/src/modules/services/destroy/examples/inject-service.txt b/projects/demo/src/modules/services/destroy/examples/inject-service.txt
deleted file mode 100644
index 6ae58dce0bd4..000000000000
--- a/projects/demo/src/modules/services/destroy/examples/inject-service.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-import {TuiDestroyService} from '@taiga-ui/cdk';
-...
-constructor(
-    @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService
-) {}
-...
diff --git a/projects/demo/src/modules/services/scroll/examples/import/import-module.txt b/projects/demo/src/modules/services/scroll/examples/import/import-module.md
similarity index 53%
rename from projects/demo/src/modules/services/scroll/examples/import/import-module.txt
rename to projects/demo/src/modules/services/scroll/examples/import/import-module.md
index d9aff4a0ec91..db61e8ec17a2 100644
--- a/projects/demo/src/modules/services/scroll/examples/import/import-module.txt
+++ b/projects/demo/src/modules/services/scroll/examples/import/import-module.md
@@ -1,7 +1,11 @@
+```ts
 import {NgModule} from '@angular/core';
 import {TuiScrollService} from '@taiga-ui/cdk';
 
 @NgModule({
-    ...
-    providers: [ TuiScrollService ],
-    ...
+  // ...
+  providers: [TuiScrollService],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/services/scroll/examples/import/inject-service.md b/projects/demo/src/modules/services/scroll/examples/import/inject-service.md
new file mode 100644
index 000000000000..c873c089f75c
--- /dev/null
+++ b/projects/demo/src/modules/services/scroll/examples/import/inject-service.md
@@ -0,0 +1,5 @@
+```ts
+export class MyComponent {
+  constructor(@Inject(TuiScrollService) private tuiScrollService: TuiScrollService) {}
+}
+```
diff --git a/projects/demo/src/modules/services/scroll/examples/import/inject-service.txt b/projects/demo/src/modules/services/scroll/examples/import/inject-service.txt
deleted file mode 100644
index 4e2be771b145..000000000000
--- a/projects/demo/src/modules/services/scroll/examples/import/inject-service.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-... 
-constructor(@Inject(TuiScrollService) private tuiScrollService: TuiScrollService) { }
-...
diff --git a/projects/demo/src/modules/services/scroll/examples/import/scroll.md b/projects/demo/src/modules/services/scroll/examples/import/scroll.md
new file mode 100644
index 000000000000..09b8a94c6383
--- /dev/null
+++ b/projects/demo/src/modules/services/scroll/examples/import/scroll.md
@@ -0,0 +1,3 @@
+```ts
+this.tuiScrollService.scroll$(this.elementRef.nativeElement, 500).subscribe();
+```
diff --git a/projects/demo/src/modules/services/scroll/examples/import/scroll.txt b/projects/demo/src/modules/services/scroll/examples/import/scroll.txt
deleted file mode 100644
index e27354aa4b0f..000000000000
--- a/projects/demo/src/modules/services/scroll/examples/import/scroll.txt
+++ /dev/null
@@ -1 +0,0 @@
-this.tuiScrollService.scroll$( this.elementRef.nativeElement, 500 ).subscribe();
diff --git a/projects/demo/src/modules/services/scroll/scroll.component.ts b/projects/demo/src/modules/services/scroll/scroll.component.ts
index 445b1025fae4..a151c2045267 100644
--- a/projects/demo/src/modules/services/scroll/scroll.component.ts
+++ b/projects/demo/src/modules/services/scroll/scroll.component.ts
@@ -1,14 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleInjectService} from '!!raw-loader!./examples/import/inject-service.txt';
-import {default as exampleScroll} from '!!raw-loader!./examples/import/scroll.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 // TODO: Update to use new scroll$
 @Component({
@@ -18,13 +10,15 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiScrollComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleInjectService = exampleInjectService;
-    readonly exampleScroll = exampleScroll;
+    readonly exampleScroll = import('!!raw-loader!./examples/import/scroll.md');
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleInjectService = import(
+        '!!raw-loader!./examples/import/inject-service.md'
+    );
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 }
diff --git a/projects/demo/src/modules/services/scroll/scroll.template.html b/projects/demo/src/modules/services/scroll/scroll.template.html
index 830925743475..e212a659acc2 100644
--- a/projects/demo/src/modules/services/scroll/scroll.template.html
+++ b/projects/demo/src/modules/services/scroll/scroll.template.html
@@ -83,7 +83,7 @@
                 <p i18n>
                     Call
                     <code>scroll$</code>
-                    method and subscribe to returened
+                    method and subscribe to returned
                     <code>Observable</code>
                     :
                 </p>
diff --git a/projects/demo/src/modules/services/svg/examples/inject-service.md b/projects/demo/src/modules/services/svg/examples/inject-service.md
new file mode 100644
index 000000000000..0d67dfa9b291
--- /dev/null
+++ b/projects/demo/src/modules/services/svg/examples/inject-service.md
@@ -0,0 +1,9 @@
+```ts
+import {TuiSvgService, tuiIconTrashLarge} from '@taiga-ui/core';
+
+export class MyComponent {
+  constructor(@Inject(TuiSvgService) tuiSvgService: TuiSvgService) {
+    tuiSvgService.define({tuiIconTrashLarge});
+  }
+}
+```
diff --git a/projects/demo/src/modules/services/svg/examples/inject-service.txt b/projects/demo/src/modules/services/svg/examples/inject-service.txt
deleted file mode 100644
index b309b5223286..000000000000
--- a/projects/demo/src/modules/services/svg/examples/inject-service.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-import {TuiSvgService, tuiIconTrashLarge} from '@taiga-ui/core';
-...
-constructor(@Inject(TuiSvgService) tuiSvgService: TuiSvgService) {
-    tuiSvgService.define({tuiIconTrashLarge}); 
-} 
-...
diff --git a/projects/demo/src/modules/services/svg/svg.component.ts b/projects/demo/src/modules/services/svg/svg.component.ts
index c642071e4380..50fe3ea636da 100644
--- a/projects/demo/src/modules/services/svg/svg.component.ts
+++ b/projects/demo/src/modules/services/svg/svg.component.ts
@@ -3,15 +3,13 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiSvgService} from '@taiga-ui/core';
 import {tuiIconTrashLarge} from '@taiga-ui/icons';
 
-import {default as injectService} from '!!raw-loader!./examples/inject-service.txt';
-
 @Component({
     selector: 'example-tui-svg',
     templateUrl: './svg.template.html',
     changeDetection,
 })
 export class ExampleTuiSvgComponent {
-    injectService = injectService;
+    injectService = import('!!raw-loader!./examples/inject-service.md');
 
     constructor(@Inject(TuiSvgService) tuiSvgService: TuiSvgService) {
         tuiSvgService.define({tuiIconTrashLarge});
diff --git a/projects/demo/src/modules/services/table-bar/examples/import/lazy-module.md b/projects/demo/src/modules/services/table-bar/examples/import/lazy-module.md
new file mode 100644
index 000000000000..c5052a5950c6
--- /dev/null
+++ b/projects/demo/src/modules/services/table-bar/examples/import/lazy-module.md
@@ -0,0 +1,15 @@
+```ts
+import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
+import {TuiTableBarsService} from '@taiga-ui/addon-tablebars';
+import {Injector} from '@angular/core';
+import {CustomTableBarsComponent} from 'customTableBars.component';
+// ...
+
+export class LazyModule {
+  constructor(@Inject(TuiTableBarsService) private readonly tableBarsService: TuiTableBarsService) {
+    // ...
+    this.tableBarsService.showTableBar(new PolymorpheusComponent(CustomTableBarsComponent, this.injector)).subscribe();
+    // ...
+  }
+}
+```
diff --git a/projects/demo/src/modules/services/table-bar/examples/import/lazy-module.txt b/projects/demo/src/modules/services/table-bar/examples/import/lazy-module.txt
deleted file mode 100644
index 47648cee01b8..000000000000
--- a/projects/demo/src/modules/services/table-bar/examples/import/lazy-module.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus';
-import {TuiTableBarsService} from '@taiga-ui/addon-tablebars';
-import {Injector} from '@angular/core';
-import {CustomTableBarsComponent} from 'customTableBars.component';
-...
-
-constructor(@Inject(TuiTableBarsService) private readonly tableBarsService: TuiTableBarsService) {
-
-...
-    this.tableBarsService
-        .showTableBar(new PolymorpheusComponent(CustomTableBarsComponent, this.injector))
-        .subscribe();
-...
diff --git a/projects/demo/src/modules/services/table-bar/examples/import/module.md b/projects/demo/src/modules/services/table-bar/examples/import/module.md
new file mode 100644
index 000000000000..1c4526a7e00a
--- /dev/null
+++ b/projects/demo/src/modules/services/table-bar/examples/import/module.md
@@ -0,0 +1,15 @@
+```ts
+import {TuiTableBarsHostModule} from '@taiga-ui/addon-tablebars';
+import {TuiRootModule} from '@taiga-ui/core';
+// ...
+
+@NgModule({
+  imports: [
+    TuiRootModule,
+    TuiTableBarsHostModule,
+    // ...
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/services/table-bar/examples/import/module.txt b/projects/demo/src/modules/services/table-bar/examples/import/module.txt
deleted file mode 100644
index e36717788eec..000000000000
--- a/projects/demo/src/modules/services/table-bar/examples/import/module.txt
+++ /dev/null
@@ -1,11 +0,0 @@
-import {TuiTableBarsHostModule} from '@taiga-ui/addon-tablebars';
-import {TuiRootModule} from '@taiga-ui/core';
-...
-
-@NgModule({
-    imports: [
-        TuiRootModule,
-        TuiTableBarsHostModule,
-        ...
-    ]
-...
diff --git a/projects/demo/src/modules/services/table-bar/examples/import/service-usage-html.md b/projects/demo/src/modules/services/table-bar/examples/import/service-usage-html.md
new file mode 100644
index 000000000000..8e0a99c26ebf
--- /dev/null
+++ b/projects/demo/src/modules/services/table-bar/examples/import/service-usage-html.md
@@ -0,0 +1,3 @@
+```html
+<ng-template #tableBarTemplate><p>Template</p></ng-template>
+```
diff --git a/projects/demo/src/modules/services/table-bar/examples/import/service-usage-html.txt b/projects/demo/src/modules/services/table-bar/examples/import/service-usage-html.txt
deleted file mode 100644
index ba88303415f6..000000000000
--- a/projects/demo/src/modules/services/table-bar/examples/import/service-usage-html.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-<ng-template #tableBarTemplate>
-    <p>Template</p>
-</ng-template>
diff --git a/projects/demo/src/modules/services/table-bar/examples/import/service-usage.md b/projects/demo/src/modules/services/table-bar/examples/import/service-usage.md
new file mode 100644
index 000000000000..a509c8568b5a
--- /dev/null
+++ b/projects/demo/src/modules/services/table-bar/examples/import/service-usage.md
@@ -0,0 +1,19 @@
+```ts
+import {TuiTableBarsService} from '@taiga-ui/addon-tablebars';
+// ...
+export class AppComponent {
+  @ViewChild('tableBarTemplate')
+  tableBarTemplate: TemplateRef<Record<string, unknown>>;
+
+  constructor(@Inject(TuiTableBarsService) private readonly tableBarsService: TuiTableBarsService) {
+    // ...
+    this.tableBarsService
+      .showTableBar(this.tableBarTemplate, {
+        mode: 'onLight',
+        hasCloseButton: true,
+      })
+      .subscribe();
+    // ...
+  }
+}
+```
diff --git a/projects/demo/src/modules/services/table-bar/examples/import/service-usage.txt b/projects/demo/src/modules/services/table-bar/examples/import/service-usage.txt
deleted file mode 100644
index fa87e900d112..000000000000
--- a/projects/demo/src/modules/services/table-bar/examples/import/service-usage.txt
+++ /dev/null
@@ -1,16 +0,0 @@
-import {TuiTableBarsService} from '@taiga-ui/addon-tablebars';
-...
-
-@ViewChild('tableBarTemplate')
-tableBarTemplate: TemplateRef<Record<string, unknown>>;
-
-constructor(@Inject(TuiTableBarsService) private readonly tableBarsService: TuiTableBarsService) {
-
-...
-    this.tableBarsService
-        .showTableBar(this.tableBarTemplate, {
-            mode: 'onLight',
-            hasCloseButton: true,
-        })
-    .subscribe();
-...
diff --git a/projects/demo/src/modules/services/table-bar/examples/import/template.md b/projects/demo/src/modules/services/table-bar/examples/import/template.md
new file mode 100644
index 000000000000..a66abea41a0d
--- /dev/null
+++ b/projects/demo/src/modules/services/table-bar/examples/import/template.md
@@ -0,0 +1,6 @@
+```html
+<tui-root>
+  <!-- The rest of your application -->
+  <tui-table-bars-host ngProjectAs="tuiOverAlerts"></tui-table-bars-host>
+</tui-root>
+```
diff --git a/projects/demo/src/modules/services/table-bar/examples/import/template.txt b/projects/demo/src/modules/services/table-bar/examples/import/template.txt
deleted file mode 100644
index 55fcb35539c3..000000000000
--- a/projects/demo/src/modules/services/table-bar/examples/import/template.txt
+++ /dev/null
@@ -1,4 +0,0 @@
-<tui-root>
-    <!-- The rest of your application -->
-    <tui-table-bars-host ngProjectAs="tuiOverAlerts"></tui-table-bars-host>
-</tui-root>
diff --git a/projects/demo/src/modules/services/table-bar/table-bar.component.ts b/projects/demo/src/modules/services/table-bar/table-bar.component.ts
index e5fddc7755ed..071130825da5 100644
--- a/projects/demo/src/modules/services/table-bar/table-bar.component.ts
+++ b/projects/demo/src/modules/services/table-bar/table-bar.component.ts
@@ -1,22 +1,12 @@
 import {Component, Inject, OnDestroy, ViewChild} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiTableBarsService} from '@taiga-ui/addon-tablebars';
 import {TuiBrightness} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Subject, Subscription} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleLazyModule} from '!!raw-loader!./examples/import/lazy-module.txt';
-import {default as exampleModule} from '!!raw-loader!./examples/import/module.txt';
-import {default as exampleServiceUsage} from '!!raw-loader!./examples/import/service-usage.txt';
-import {default as exampleServiceUsageHtml} from '!!raw-loader!./examples/import/service-usage-html.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-table-bar',
     templateUrl: './table-bar.template.html',
@@ -29,16 +19,22 @@ export class ExampleTuiTableBarComponent implements OnDestroy {
     @ViewChild('tableBarTemplate')
     readonly tableBarTemplate: PolymorpheusContent = '';
 
-    readonly exampleServiceUsage = exampleServiceUsage;
-    readonly exampleServiceUsageHtml = exampleServiceUsageHtml;
-    readonly exampleLazyModule = exampleLazyModule;
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleServiceUsage = import(
+        '!!raw-loader!./examples/import/service-usage.md'
+    );
+
+    readonly exampleServiceUsageHtml = import(
+        '!!raw-loader!./examples/import/service-usage-html.md'
+    );
+
+    readonly exampleLazyModule = import('!!raw-loader!./examples/import/lazy-module.md');
+    readonly exampleModule = import('!!raw-loader!./examples/import/module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
     readonly modeVariants: readonly TuiBrightness[] = ['onLight', 'onDark'];
diff --git a/projects/demo/src/modules/tables/reorder/examples/import/import-module.md b/projects/demo/src/modules/tables/reorder/examples/import/import-module.md
new file mode 100644
index 000000000000..404be8111cff
--- /dev/null
+++ b/projects/demo/src/modules/tables/reorder/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiReorderModule} from '@taiga-ui/addon-table';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiReorderModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/tables/reorder/examples/import/import-module.txt b/projects/demo/src/modules/tables/reorder/examples/import/import-module.txt
deleted file mode 100644
index 377b4297dd29..000000000000
--- a/projects/demo/src/modules/tables/reorder/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiReorderModule} from '@taiga-ui/addon-table/components/reorder';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiReorderModule,
-    ],
-...
diff --git a/projects/demo/src/modules/tables/reorder/examples/import/insert-template.md b/projects/demo/src/modules/tables/reorder/examples/import/insert-template.md
new file mode 100644
index 000000000000..4512998ff30f
--- /dev/null
+++ b/projects/demo/src/modules/tables/reorder/examples/import/insert-template.md
@@ -0,0 +1,6 @@
+```html
+<tui-reorder
+  [(items)]="items"
+  [(enabled)]="enabled"
+></tui-reorder>
+```
diff --git a/projects/demo/src/modules/tables/reorder/examples/import/insert-template.txt b/projects/demo/src/modules/tables/reorder/examples/import/insert-template.txt
deleted file mode 100644
index a5345c481aeb..000000000000
--- a/projects/demo/src/modules/tables/reorder/examples/import/insert-template.txt
+++ /dev/null
@@ -1 +0,0 @@
-<tui-reorder [(items)]="items" [(enabled)]="enabled"></tui-reorder>
diff --git a/projects/demo/src/modules/tables/reorder/reorder.component.ts b/projects/demo/src/modules/tables/reorder/reorder.component.ts
index 6325382c79ea..81ab131de88c 100644
--- a/projects/demo/src/modules/tables/reorder/reorder.component.ts
+++ b/projects/demo/src/modules/tables/reorder/reorder.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-reorder',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiReorderComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+    };
 }
diff --git a/projects/demo/src/modules/tables/resizable-column/examples/import/import-module.md b/projects/demo/src/modules/tables/resizable-column/examples/import/import-module.md
new file mode 100644
index 000000000000..057521685bb6
--- /dev/null
+++ b/projects/demo/src/modules/tables/resizable-column/examples/import/import-module.md
@@ -0,0 +1,14 @@
+```ts
+import {TuiResizableColumnModule} from '@taiga-ui/addon-table';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiResizableColumnModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```
diff --git a/projects/demo/src/modules/tables/resizable-column/examples/import/import-module.txt b/projects/demo/src/modules/tables/resizable-column/examples/import/import-module.txt
deleted file mode 100644
index a53f068d296e..000000000000
--- a/projects/demo/src/modules/tables/resizable-column/examples/import/import-module.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-import {TuiResizableColumnModule} from '@taiga-ui/addon-table/components/resizableColumn';
-
-...
-
-@NgModule({
-    imports: [
-        ...
-        TuiResizableColumnModule,
-    ],
-...
diff --git a/projects/demo/src/modules/tables/resizable-column/examples/import/insert-template.md b/projects/demo/src/modules/tables/resizable-column/examples/import/insert-template.md
new file mode 100644
index 000000000000..2cdb14cdb788
--- /dev/null
+++ b/projects/demo/src/modules/tables/resizable-column/examples/import/insert-template.md
@@ -0,0 +1,10 @@
+```html
+<table>
+  <thead>
+    <th tuiResizableColumn></th>
+    <th></th>
+    <th tuiResizableColumn></th>
+  </thead>
+  ...
+</table>
+```
diff --git a/projects/demo/src/modules/tables/resizable-column/examples/import/insert-template.txt b/projects/demo/src/modules/tables/resizable-column/examples/import/insert-template.txt
deleted file mode 100644
index 330811161584..000000000000
--- a/projects/demo/src/modules/tables/resizable-column/examples/import/insert-template.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-<table>
-    <thead>
-        <th tuiResizableColumn></th>
-        <th></th>
-        <th tuiResizableColumn></th>
-    </thead>
-    ...
-</table>
diff --git a/projects/demo/src/modules/tables/resizable-column/resizable-column.component.ts b/projects/demo/src/modules/tables/resizable-column/resizable-column.component.ts
index c9355dce0378..8e28cf17c8fb 100644
--- a/projects/demo/src/modules/tables/resizable-column/resizable-column.component.ts
+++ b/projects/demo/src/modules/tables/resizable-column/resizable-column.component.ts
@@ -1,12 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-resizable-column',
@@ -14,11 +8,11 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiResizableColumnComponent {
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-    };
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+    };
 }
diff --git a/projects/demo/src/modules/utils/browser/browser.component.ts b/projects/demo/src/modules/utils/browser/browser.component.ts
index 2a78386a4092..685a7621d56a 100644
--- a/projects/demo/src/modules/utils/browser/browser.component.ts
+++ b/projects/demo/src/modules/utils/browser/browser.component.ts
@@ -1,11 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as importComponentExample} from '!!raw-loader!./examples/import/import-component.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-browser',
@@ -13,10 +8,12 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleBrowserComponent {
-    readonly importComponentExample = importComponentExample;
+    readonly importComponentExample = import(
+        '!!raw-loader!./examples/import/import-component.md'
+    );
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 }
diff --git a/projects/demo/src/modules/utils/browser/examples/import/import-component.md b/projects/demo/src/modules/utils/browser/examples/import/import-component.md
new file mode 100644
index 000000000000..b8dffa35d90a
--- /dev/null
+++ b/projects/demo/src/modules/utils/browser/examples/import/import-component.md
@@ -0,0 +1,12 @@
+```ts
+import {isIE} from '@taiga-ui/cdk';
+import {USER_AGENT} from '@ng-web-apis/common';
+
+// ...
+export class MyComponent {
+  areThereProblems = isIE(this.userAgent);
+
+  constructor(@Inject(USER_AGENT) private readonly userAgent: string) {}
+}
+// ...
+```
diff --git a/projects/demo/src/modules/utils/browser/examples/import/import-component.txt b/projects/demo/src/modules/utils/browser/examples/import/import-component.txt
deleted file mode 100644
index feab83c03be5..000000000000
--- a/projects/demo/src/modules/utils/browser/examples/import/import-component.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-import {isIE} from '@taiga-ui/cdk';
-import {USER_AGENT} from '@ng-web-apis/common';
-
-...
-    constructor(@Inject(USER_AGENT) private readonly userAgent: string) {}
-
-    areThereProblems = isIE(this.userAgent);
-...
diff --git a/projects/demo/src/modules/utils/dom/dom.component.ts b/projects/demo/src/modules/utils/dom/dom.component.ts
index b7be4f0ac5a6..db59803db009 100644
--- a/projects/demo/src/modules/utils/dom/dom.component.ts
+++ b/projects/demo/src/modules/utils/dom/dom.component.ts
@@ -1,8 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 
-import {default as importComponentExample} from '!!raw-loader!./examples/import/import-component.txt';
-
 @Component({
     selector: 'example-dom',
     templateUrl: './dom.template.html',
@@ -10,5 +8,5 @@ import {default as importComponentExample} from '!!raw-loader!./examples/import/
     changeDetection,
 })
 export class ExampleDomComponent {
-    importComponentExample = importComponentExample;
+    importComponentExample = import('!!raw-loader!./examples/import/import-component.md');
 }
diff --git a/projects/demo/src/modules/utils/dom/examples/import/import-component.md b/projects/demo/src/modules/utils/dom/examples/import/import-component.md
new file mode 100644
index 000000000000..709f79b00009
--- /dev/null
+++ b/projects/demo/src/modules/utils/dom/examples/import/import-component.md
@@ -0,0 +1,7 @@
+```ts
+import {isElementAtPoint} from '@taiga-ui/cdk';
+
+//...
+isAtPoint = isElementAtPoint(element, point.x, point.y);
+//...
+```
diff --git a/projects/demo/src/modules/utils/dom/examples/import/import-component.txt b/projects/demo/src/modules/utils/dom/examples/import/import-component.txt
deleted file mode 100644
index 032f5c505fbf..000000000000
--- a/projects/demo/src/modules/utils/dom/examples/import/import-component.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-import {isElementAtPoint} from '@taiga-ui/cdk';
-
-...
-    isAtPoint = isElementAtPoint(element, point.x, point.y)
-...
diff --git a/projects/demo/src/modules/utils/format/examples/import/import-component.md b/projects/demo/src/modules/utils/format/examples/import/import-component.md
new file mode 100644
index 000000000000..f673267a9d26
--- /dev/null
+++ b/projects/demo/src/modules/utils/format/examples/import/import-component.md
@@ -0,0 +1,7 @@
+```ts
+import {getCurrencySymbol} from '@taiga-ui/kit';
+
+// ...
+currency = getCurrencySymbol(currency);
+// ...
+```
diff --git a/projects/demo/src/modules/utils/format/examples/import/import-component.txt b/projects/demo/src/modules/utils/format/examples/import/import-component.txt
deleted file mode 100644
index 2d24c16656f6..000000000000
--- a/projects/demo/src/modules/utils/format/examples/import/import-component.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-import {getCurrencySymbol} from '@taiga-ui/kit';
-
-...
-    currency = getCurrencySymbol(currency);
-...
diff --git a/projects/demo/src/modules/utils/format/format.component.ts b/projects/demo/src/modules/utils/format/format.component.ts
index 84ed088b0578..999c3234f214 100644
--- a/projects/demo/src/modules/utils/format/format.component.ts
+++ b/projects/demo/src/modules/utils/format/format.component.ts
@@ -1,27 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
-import {default as example5Less} from '!!raw-loader!./examples/5/index.less';
-import {default as example5Ts} from '!!raw-loader!./examples/5/index.ts';
-import {default as example6Html} from '!!raw-loader!./examples/6/index.html';
-import {default as example6Less} from '!!raw-loader!./examples/6/index.less';
-import {default as example6Ts} from '!!raw-loader!./examples/6/index.ts';
-import {default as importComponentExample} from '!!raw-loader!./examples/import/import-component.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-format',
@@ -29,41 +8,43 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleFormatComponent {
-    readonly importComponentExample = importComponentExample;
-
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly importComponentExample = import(
+        '!!raw-loader!./examples/import/import-component.md'
+    );
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
-        LESS: example4Less,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
     };
 
-    readonly example5: FrontEndExample = {
-        TypeScript: example5Ts,
-        HTML: example5Html,
-        LESS: example5Less,
+    readonly example5: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/5/index.ts'),
+        HTML: import('!!raw-loader!./examples/5/index.html'),
+        LESS: import('!!raw-loader!./examples/5/index.less'),
     };
 
-    readonly example6: FrontEndExample = {
-        TypeScript: example6Ts,
-        HTML: example6Html,
-        LESS: example6Less,
+    readonly example6: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/6/index.ts'),
+        HTML: import('!!raw-loader!./examples/6/index.html'),
+        LESS: import('!!raw-loader!./examples/6/index.less'),
     };
 }
diff --git a/projects/demo/src/modules/utils/math/examples/import/import-component.md b/projects/demo/src/modules/utils/math/examples/import/import-component.md
new file mode 100644
index 000000000000..dae1e631c316
--- /dev/null
+++ b/projects/demo/src/modules/utils/math/examples/import/import-component.md
@@ -0,0 +1,7 @@
+```ts
+import {clamp} from '@taiga-ui/cdk';
+
+// ...
+clamped = clamp(value, min, max);
+// ...
+```
diff --git a/projects/demo/src/modules/utils/math/examples/import/import-component.txt b/projects/demo/src/modules/utils/math/examples/import/import-component.txt
deleted file mode 100644
index 4efe1a8aa22e..000000000000
--- a/projects/demo/src/modules/utils/math/examples/import/import-component.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-import {clamp} from '@taiga-ui/cdk';
-
-...
-    clamped = clamp(value, min, max)
-...
diff --git a/projects/demo/src/modules/utils/math/math.component.ts b/projects/demo/src/modules/utils/math/math.component.ts
index 7c5918fd0a9c..34f295d4fe9a 100644
--- a/projects/demo/src/modules/utils/math/math.component.ts
+++ b/projects/demo/src/modules/utils/math/math.component.ts
@@ -1,24 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
-import {default as example5Less} from '!!raw-loader!./examples/5/index.less';
-import {default as example5Ts} from '!!raw-loader!./examples/5/index.ts';
-import {default as importComponentExample} from '!!raw-loader!./examples/import/import-component.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-math',
@@ -26,35 +8,37 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleMathComponent {
-    readonly importComponentExample = importComponentExample;
-
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly importComponentExample = import(
+        '!!raw-loader!./examples/import/import-component.md'
+    );
+
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
-        LESS: example4Less,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
     };
 
-    readonly example5: FrontEndExample = {
-        TypeScript: example5Ts,
-        HTML: example5Html,
-        LESS: example5Less,
+    readonly example5: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/5/index.ts'),
+        HTML: import('!!raw-loader!./examples/5/index.html'),
+        LESS: import('!!raw-loader!./examples/5/index.less'),
     };
 }
diff --git a/projects/demo/src/modules/utils/miscellaneous/examples/import/import-component.md b/projects/demo/src/modules/utils/miscellaneous/examples/import/import-component.md
new file mode 100644
index 000000000000..b49885bf7111
--- /dev/null
+++ b/projects/demo/src/modules/utils/miscellaneous/examples/import/import-component.md
@@ -0,0 +1,7 @@
+```ts
+import {getPaymentSystem} from '@taiga-ui/kit';
+
+//...
+paymentSystem = getPaymentSystem(cardNumber);
+// ...
+```
diff --git a/projects/demo/src/modules/utils/miscellaneous/examples/import/import-component.txt b/projects/demo/src/modules/utils/miscellaneous/examples/import/import-component.txt
deleted file mode 100644
index 1a883e8ee34e..000000000000
--- a/projects/demo/src/modules/utils/miscellaneous/examples/import/import-component.txt
+++ /dev/null
@@ -1,5 +0,0 @@
-import {getPaymentSystem} from '@taiga-ui/kit';
-
-...
-    paymentSystem = getPaymentSystem(cardNumber);
-...
diff --git a/projects/demo/src/modules/utils/miscellaneous/miscellaneous.component.ts b/projects/demo/src/modules/utils/miscellaneous/miscellaneous.component.ts
index 3b6292fbbe21..a1eb762654ba 100644
--- a/projects/demo/src/modules/utils/miscellaneous/miscellaneous.component.ts
+++ b/projects/demo/src/modules/utils/miscellaneous/miscellaneous.component.ts
@@ -1,19 +1,6 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
-import {default as example5Less} from '!!raw-loader!./examples/5/index.less';
-import {default as example5Ts} from '!!raw-loader!./examples/5/index.ts';
-import {default as importComponentExample} from '!!raw-loader!./examples/import/import-component.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-format',
@@ -21,27 +8,29 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleMiscellaneousComponent {
-    readonly importComponentExample = importComponentExample;
+    readonly importComponentExample = import(
+        '!!raw-loader!./examples/import/import-component.md'
+    );
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
-        LESS: example4Less,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
     };
 
-    readonly example5: FrontEndExample = {
-        TypeScript: example5Ts,
-        HTML: example5Html,
-        LESS: example5Less,
+    readonly example5: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/5/index.ts'),
+        HTML: import('!!raw-loader!./examples/5/index.html'),
+        LESS: import('!!raw-loader!./examples/5/index.less'),
     };
 }