diff --git a/src/app/showcase/layout/doc/code/app.code.component.ts b/src/app/showcase/layout/doc/code/app.code.component.ts
new file mode 100644
index 00000000000..44a86a335c1
--- /dev/null
+++ b/src/app/showcase/layout/doc/code/app.code.component.ts
@@ -0,0 +1,95 @@
+import { CommonModule } from '@angular/common';
+import { Component, ElementRef, Input, NgModule, ViewChild } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { TooltipModule } from 'primeng/tooltip';
+import { Code, ExtFile, RouteFile } from 'src/app/showcase/domain/code';
+import { useCodeSandbox, useStackBlitz } from '../codeeditor';
+
+@Component({
+    selector: 'app-code',
+    templateUrl: './app.code.component.html'
+})
+export class AppCodeComponent {
+    @Input() code!: Code;
+
+    @Input() service!: any;
+
+    @Input() selector!: string;
+
+    @Input() extFiles: ExtFile[] = [];
+
+    @Input() routeFiles: RouteFile[] = [];
+
+    @Input() hideToggleCode: boolean = false;
+
+    @Input() hideCodeSandbox: boolean = false;
+
+    @Input() hideStackBlitz: boolean = false;
+
+    @ViewChild('codeElement') codeElement: ElementRef;
+
+    fullCodeVisible: boolean = false;
+
+    lang!: string;
+
+    ngAfterViewChecked() {
+        if (typeof window !== undefined && window['Prism'] && this.codeElement && !this.codeElement.nativeElement.classList.contains('prism')) {
+            window['Prism'].highlightElement(this.codeElement.nativeElement);
+            this.codeElement.nativeElement.classList.add('prism');
+            this.codeElement.nativeElement.parentElement.setAttribute('tabindex', '-1');
+        }
+    }
+
+    ngOnInit() {
+        this.lang = this.getInitialLang();
+    }
+
+    changeLang(lang: string) {
+        this.lang = lang;
+    }
+
+    getInitialLang(): string {
+        if (this.code) {
+            return Object.keys(this.code)[0];
+        }   
+    }
+
+    async copyCode() {
+        await navigator.clipboard.writeText(this.code[this.lang]);
+    }
+
+    getCode(lang: string = 'basic') {
+        if (this.code) {
+            if (this.fullCodeVisible || this.hideToggleCode) {
+                return this.code[lang];
+            } else {
+                return this.code['basic'];
+            }
+        }
+    }
+
+    toggleCode() {
+        this.fullCodeVisible = !this.fullCodeVisible;
+        this.fullCodeVisible && (this.lang = 'html');
+        !this.fullCodeVisible && (this.lang = 'basic');
+    }
+
+    openStackBlitz() {
+        if (this.code) {
+            useStackBlitz({ code: this.code, selector: this.selector, extFiles: this.extFiles, routeFiles: this.routeFiles });
+        }
+    }
+
+    openCodeSandbox() {
+        if (this.code) {
+            useCodeSandbox({ code: this.code, selector: this.selector, extFiles: this.extFiles, routeFiles: this.routeFiles });
+        }
+    }
+}
+
+@NgModule({
+    imports: [CommonModule, ButtonModule, TooltipModule],
+    exports: [AppCodeComponent],
+    declarations: [AppCodeComponent]
+})
+export class AppCodeModule {}
diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts
index 3d7d0361e25..2e6bf0a76ab 100644
--- a/src/app/showcase/layout/doc/codeeditor/templates.ts
+++ b/src/app/showcase/layout/doc/codeeditor/templates.ts
@@ -20,15 +20,43 @@ const PrimeNG = {
         'PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.'
 };
 
+const demoDependencies = [
+  "@angular-devkit/build-angular",
+  "@angular/animations",
+  "@angular/cdk",
+  "@angular/cli",
+  "@angular/common",
+  "@angular/compiler",
+  "@angular/compiler-cli",
+  "@angular/core",
+  "@angular/forms",
+  "@angular/material",
+  "@angular/material-moment-adapter",
+  "@angular/platform-browser",
+  "@angular/platform-browser-dynamic",
+  "@angular/platform-server",
+  "@angular/router",
+  "@nguniversal/builders",
+  "@nguniversal/common",
+  "@nguniversal/express-engine",
+  "quill",
+  "primeflex",
+  "chart.js",
+  "primeicons",
+  "rxjs",
+  "tslib",
+  "zone.js"
+];
+
 const getAppDependencies = () => {
-    const dependencies = {};
-    for (const key in app_dependencies) {
-        if (checkDependency(key)) {
-            dependencies[key] = app_dependencies[key];
-        }
-    }
+  const dependencies = {};
+  for (const key in app_dependencies) {
+      if (demoDependencies.includes(key)) {
+          dependencies[key] = app_dependencies[key];
+      }
+  }
 
-    return dependencies;
+  return dependencies;
 };
 
 const getDependencies = () => {
@@ -42,10 +70,6 @@ const getDependencies = () => {
     return dependencies;
 };
 
-const checkDependency = (dep: string) => {
-    return !(dep.startsWith('jasmine') || dep.startsWith('del') || dep.startsWith('gulp') || dep.startsWith('jspdf') || dep.startsWith('prism') || dep.startsWith('del') || dep.startsWith('@stackblitz'));
-};
-
 const getServiceImports = (service: string[]) => {
     return service.map((s) => `import { ${s} } from 'src/service/${s.toLowerCase()}';`).join('');
 };
@@ -455,6 +479,8 @@ Firefox ESR
 not ios_saf 15.2-15.3
 not safari 15.2-15.3`;
 
+
+
 const getAngularApp = (props: Props = {}) => {
     const { code, extFiles, routeFiles, selector } = props;
     const dependencies = getDependencies();
@@ -704,7 +730,7 @@ export class AppModule {}`;
         'src/index.html': { content: index_html },
         'src/karma.conf.js': { content: karma_conf_js },
         'src/styles.scss': { content: staticStyles.global },
-        'src/flags.css': { content: staticStyles.flags }
+        'src/flags.css': { content: staticStyles.flags },
     };
 
     const files = {