diff --git a/apps/daffio/src/app/docs/api/api.module.ts b/apps/daffio/src/app/docs/api/api.module.ts
index fac2eacf36..2c5c1e6d0f 100644
--- a/apps/daffio/src/app/docs/api/api.module.ts
+++ b/apps/daffio/src/app/docs/api/api.module.ts
@@ -5,8 +5,8 @@ import { DaffArticleModule } from '@daffodil/design/article';
 import { DaffContainerModule } from '@daffodil/design/container';
 
 import { DaffioDocsApiRoutingModule } from './api-routing.module';
+import { daffioDocsApiContentComponentProvider } from './components/api-content/api-content.provider';
 import { DaffioApiListModule } from './components/api-list/api-list.module';
-import { daffioDocsApiComponentProvider } from './components/doc/provider';
 import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
 
 @NgModule({
@@ -25,7 +25,7 @@ import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.
     DaffioApiListPageComponent,
   ],
   providers: [
-    daffioDocsApiComponentProvider(),
+    daffioDocsApiContentComponentProvider(),
   ],
 })
 export class DaffioApiModule {}
diff --git a/apps/daffio/src/app/docs/api/components/doc/component.html b/apps/daffio/src/app/docs/api/components/api-content/api-content.component.html
similarity index 100%
rename from apps/daffio/src/app/docs/api/components/doc/component.html
rename to apps/daffio/src/app/docs/api/components/api-content/api-content.component.html
diff --git a/apps/daffio/src/app/docs/api/components/doc/component.ts b/apps/daffio/src/app/docs/api/components/api-content/api-content.component.ts
similarity index 65%
rename from apps/daffio/src/app/docs/api/components/doc/component.ts
rename to apps/daffio/src/app/docs/api/components/api-content/api-content.component.ts
index 0c795470d1..0fb0567e24 100644
--- a/apps/daffio/src/app/docs/api/components/doc/component.ts
+++ b/apps/daffio/src/app/docs/api/components/api-content/api-content.component.ts
@@ -4,20 +4,20 @@ import {
   input,
   computed,
 } from '@angular/core';
-import { DaffioSafeHtmlPipe } from 'apps/daffio/src/app/core/html-sanitizer/safe.pipe';
 
 import {
   DaffApiDoc,
   DaffDocKind,
 } from '@daffodil/docs-utils';
 
+import { DaffioSafeHtmlPipe } from '../../../../core/html-sanitizer/safe.pipe';
 import { DaffioDocArticleModule } from '../../../components/doc-article/module';
-import { DaffioDocComponent } from '../../../components/doc-renderer/component.type';
+import { DaffioDocsDynamicContent } from '../../../dynamic-content/dynamic-content.type';
 import { DaffioApiPackageComponent } from '../api-package/api-package.component';
 
 @Component({
-  selector: 'daffio-api-doc',
-  templateUrl: './component.html',
+  selector: 'daffio-docs-api-content',
+  templateUrl: './api-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
@@ -26,7 +26,7 @@ import { DaffioApiPackageComponent } from '../api-package/api-package.component'
     DaffioSafeHtmlPipe,
   ],
 })
-export class DaffioDocApiComponent implements DaffioDocComponent<DaffApiDoc> {
+export class DaffioDocsApiContentComponent implements DaffioDocsDynamicContent<DaffApiDoc> {
   static readonly kind = DaffDocKind.API;
 
   readonly isApiPackage = computed(() => this.doc().docType === 'package');
diff --git a/apps/daffio/src/app/docs/api/components/api-content/api-content.provider.ts b/apps/daffio/src/app/docs/api/components/api-content/api-content.provider.ts
new file mode 100644
index 0000000000..7638714f0d
--- /dev/null
+++ b/apps/daffio/src/app/docs/api/components/api-content/api-content.provider.ts
@@ -0,0 +1,4 @@
+import { DaffioDocsApiContentComponent } from './api-content.component';
+import { provideDaffioDocsDynamicContentComponents } from '../../../dynamic-content/dynamic-content-components.token';
+
+export const daffioDocsApiContentComponentProvider = () => provideDaffioDocsDynamicContentComponents(DaffioDocsApiContentComponent);
diff --git a/apps/daffio/src/app/docs/api/components/doc/provider.ts b/apps/daffio/src/app/docs/api/components/doc/provider.ts
deleted file mode 100644
index 38e23f356c..0000000000
--- a/apps/daffio/src/app/docs/api/components/doc/provider.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { DaffioDocApiComponent } from './component';
-import { provideDaffioDocRendererComponents } from '../../../components/doc-renderer/token';
-
-export const daffioDocsApiComponentProvider = () => provideDaffioDocRendererComponents(DaffioDocApiComponent);
diff --git a/apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.spec.ts b/apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.spec.ts
index 468372de7e..70096d6e27 100644
--- a/apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.spec.ts
+++ b/apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.spec.ts
@@ -10,12 +10,12 @@ import {
 import { By } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { DaffioRoute } from 'apps/daffio/src/app/core/router/route.type';
 import { BehaviorSubject } from 'rxjs';
 
 import { DaffDocsApiNavList } from '@daffodil/docs-utils';
 
 import { DaffioApiListPageComponent } from './api-list-page.component';
+import { DaffioRoute } from '../../../../core/router/route.type';
 import { DaffioApiListComponent } from '../../components/api-list/api-list.component';
 
 @Component({
diff --git a/apps/daffio/src/app/docs/components/doc-default/component.html b/apps/daffio/src/app/docs/components/default-content/default-content.component.html
similarity index 100%
rename from apps/daffio/src/app/docs/components/doc-default/component.html
rename to apps/daffio/src/app/docs/components/default-content/default-content.component.html
diff --git a/apps/daffio/src/app/docs/components/doc-default/component.ts b/apps/daffio/src/app/docs/components/default-content/default-content.component.ts
similarity index 60%
rename from apps/daffio/src/app/docs/components/doc-default/component.ts
rename to apps/daffio/src/app/docs/components/default-content/default-content.component.ts
index f46b2a18cb..f1c9ee883a 100644
--- a/apps/daffio/src/app/docs/components/doc-default/component.ts
+++ b/apps/daffio/src/app/docs/components/default-content/default-content.component.ts
@@ -7,12 +7,12 @@ import {
 import { DaffDoc } from '@daffodil/docs-utils';
 
 import { DaffioSafeHtmlPipe } from '../../../core/html-sanitizer/safe.pipe';
+import { DaffioDocsDynamicContent } from '../../dynamic-content/dynamic-content.type';
 import { DaffioDocArticleModule } from '../doc-article/module';
-import { DaffioDocComponent } from '../doc-renderer/component.type';
 
 @Component({
-  selector: 'daffio-doc-default',
-  templateUrl: './component.html',
+  selector: 'daffio-doc-default-content',
+  templateUrl: './default-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
@@ -20,6 +20,6 @@ import { DaffioDocComponent } from '../doc-renderer/component.type';
     DaffioSafeHtmlPipe,
   ],
 })
-export class DaffioDocDefaultComponent<T extends DaffDoc = DaffDoc> implements DaffioDocComponent<T> {
+export class DaffioDocsDefaultContentComponent<T extends DaffDoc = DaffDoc> implements DaffioDocsDynamicContent<T> {
   doc = input<T>();
 }
diff --git a/apps/daffio/src/app/docs/components/doc-renderer/component.ts b/apps/daffio/src/app/docs/components/doc-renderer/component.ts
deleted file mode 100644
index bd63c5e990..0000000000
--- a/apps/daffio/src/app/docs/components/doc-renderer/component.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { NgComponentOutlet } from '@angular/common';
-import {
-  Component,
-  Inject,
-  Input,
-  Type,
-} from '@angular/core';
-
-import { daffArrayToDict } from '@daffodil/core';
-import {
-  DaffDoc,
-  DaffDocKind,
-} from '@daffodil/docs-utils';
-
-import { DaffioDocComponent } from './component.type';
-import {
-  DAFFIO_DOC_RENDERER_COMPONENTS,
-  DaffioDocComponentInjection,
-} from './token';
-import { DaffioDocDefaultComponent } from '../doc-default/component';
-
-@Component({
-  selector: 'daffio-doc-renderer',
-  standalone: true,
-  imports: [
-    NgComponentOutlet,
-  ],
-  template: `
-		<ng-template [ngComponentOutlet]="component" [ngComponentOutletInputs]="{doc}"></ng-template>
-	`,
-})
-export class DaffioDocRendererComponent<T extends DaffDoc = DaffDoc> {
-  private readonly _map: Record<DaffDocKind, DaffioDocComponentInjection<T>> = daffArrayToDict(this.components, (c) => c.kind);
-
-  @Input() doc: DaffDoc;
-
-  get component(): Type<DaffioDocComponent<T>> {
-    return this._map[this.doc.kind] || DaffioDocDefaultComponent;
-  }
-
-  constructor(
-    @Inject(DAFFIO_DOC_RENDERER_COMPONENTS) private components: Array<DaffioDocComponentInjection<T>>,
-  ) {}
-}
diff --git a/apps/daffio/src/app/docs/components/doc-renderer/token.ts b/apps/daffio/src/app/docs/components/doc-renderer/token.ts
deleted file mode 100644
index c594854137..0000000000
--- a/apps/daffio/src/app/docs/components/doc-renderer/token.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Type } from '@angular/core';
-
-import { createMultiInjectionToken } from '@daffodil/core';
-import {
-  DaffDoc,
-  DaffDocKind,
-} from '@daffodil/docs-utils';
-
-import { DaffioDocComponent } from './component.type';
-
-export type DaffioDocComponentInjection<T extends DaffDoc = DaffDoc> = {readonly kind: DaffDocKind} & Type<DaffioDocComponent<T>>;
-
-export const {
-  token: DAFFIO_DOC_RENDERER_COMPONENTS,
-  provider: provideDaffioDocRendererComponents,
-} = createMultiInjectionToken<DaffioDocComponentInjection>('DAFFIO_DOC_RENDERER_COMPONENTS');
diff --git a/apps/daffio/src/app/docs/dynamic-content/dynamic-content-component.service.ts b/apps/daffio/src/app/docs/dynamic-content/dynamic-content-component.service.ts
new file mode 100644
index 0000000000..3f0e95239b
--- /dev/null
+++ b/apps/daffio/src/app/docs/dynamic-content/dynamic-content-component.service.ts
@@ -0,0 +1,31 @@
+import {
+  Inject,
+  Injectable,
+  Type,
+} from '@angular/core';
+
+import { daffArrayToDict } from '@daffodil/core';
+import {
+  DaffDoc,
+  DaffDocKind,
+} from '@daffodil/docs-utils';
+
+import {
+  DAFFIO_DOCS_DYNAMIC_CONTENT_COMPONENTS,
+  DaffioDocsDynamicContentComponentInjection,
+} from './dynamic-content-components.token';
+import { DaffioDocsDynamicContent } from './dynamic-content.type';
+import { DaffioDocsDefaultContentComponent } from '../components/default-content/default-content.component';
+
+@Injectable()
+export class DaffioDocsDynamicContentComponentService<T extends DaffDoc = DaffDoc> {
+  private readonly _map: Record<DaffDocKind, DaffioDocsDynamicContentComponentInjection<T>> = daffArrayToDict(this.components, (c) => c.kind);
+
+  constructor(
+    @Inject(DAFFIO_DOCS_DYNAMIC_CONTENT_COMPONENTS) private components: Array<DaffioDocsDynamicContentComponentInjection<T>>,
+  ) {}
+
+  getComponent(doc: T): Type<DaffioDocsDynamicContent<T>> {
+    return this._map[doc.kind] || DaffioDocsDefaultContentComponent;
+  }
+}
diff --git a/apps/daffio/src/app/docs/dynamic-content/dynamic-content-components.token.ts b/apps/daffio/src/app/docs/dynamic-content/dynamic-content-components.token.ts
new file mode 100644
index 0000000000..01f2c768e1
--- /dev/null
+++ b/apps/daffio/src/app/docs/dynamic-content/dynamic-content-components.token.ts
@@ -0,0 +1,16 @@
+import { Type } from '@angular/core';
+
+import { createMultiInjectionToken } from '@daffodil/core';
+import {
+  DaffDoc,
+  DaffDocKind,
+} from '@daffodil/docs-utils';
+
+import { DaffioDocsDynamicContent } from './dynamic-content.type';
+
+export type DaffioDocsDynamicContentComponentInjection<T extends DaffDoc = DaffDoc> = {readonly kind: DaffDocKind} & Type<DaffioDocsDynamicContent<T>>;
+
+export const {
+  token: DAFFIO_DOCS_DYNAMIC_CONTENT_COMPONENTS,
+  provider: provideDaffioDocsDynamicContentComponents,
+} = createMultiInjectionToken<DaffioDocsDynamicContentComponentInjection>('DAFFIO_DOCS_DYNAMIC_CONTENT_COMPONENTS');
diff --git a/apps/daffio/src/app/docs/components/doc-renderer/component.type.ts b/apps/daffio/src/app/docs/dynamic-content/dynamic-content.type.ts
similarity index 62%
rename from apps/daffio/src/app/docs/components/doc-renderer/component.type.ts
rename to apps/daffio/src/app/docs/dynamic-content/dynamic-content.type.ts
index 905f378fd2..50831c4908 100644
--- a/apps/daffio/src/app/docs/components/doc-renderer/component.type.ts
+++ b/apps/daffio/src/app/docs/dynamic-content/dynamic-content.type.ts
@@ -2,6 +2,6 @@ import { InputSignal } from '@angular/core';
 
 import { DaffDoc } from '@daffodil/docs-utils';
 
-export interface DaffioDocComponent<T extends DaffDoc = DaffDoc> {
+export interface DaffioDocsDynamicContent<T extends DaffDoc = DaffDoc> {
   doc: InputSignal<T>;
 }
diff --git a/apps/daffio/src/app/docs/guides/components/doc/provider.ts b/apps/daffio/src/app/docs/guides/components/doc/provider.ts
deleted file mode 100644
index bccc66b4ac..0000000000
--- a/apps/daffio/src/app/docs/guides/components/doc/provider.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { DaffioDocsGuidesContentComponent } from './component';
-import { provideDaffioDocRendererComponents } from '../../../components/doc-renderer/token';
-
-export const daffioDocsGuideComponentProvider = () => provideDaffioDocRendererComponents(DaffioDocsGuidesContentComponent);
diff --git a/apps/daffio/src/app/docs/guides/components/doc/component.html b/apps/daffio/src/app/docs/guides/components/guides-content/guides-content.component.html
similarity index 100%
rename from apps/daffio/src/app/docs/guides/components/doc/component.html
rename to apps/daffio/src/app/docs/guides/components/guides-content/guides-content.component.html
diff --git a/apps/daffio/src/app/docs/guides/components/doc/component.ts b/apps/daffio/src/app/docs/guides/components/guides-content/guides-content.component.ts
similarity index 69%
rename from apps/daffio/src/app/docs/guides/components/doc/component.ts
rename to apps/daffio/src/app/docs/guides/components/guides-content/guides-content.component.ts
index 5886454cc7..f6d055c427 100644
--- a/apps/daffio/src/app/docs/guides/components/doc/component.ts
+++ b/apps/daffio/src/app/docs/guides/components/guides-content/guides-content.component.ts
@@ -3,19 +3,19 @@ import {
   ChangeDetectionStrategy,
   input,
 } from '@angular/core';
-import { DaffioSafeHtmlPipe } from 'apps/daffio/src/app/core/html-sanitizer/safe.pipe';
 
 import {
   DaffGuideDoc,
   DaffDocKind,
 } from '@daffodil/docs-utils';
 
+import { DaffioSafeHtmlPipe } from '../../../../core/html-sanitizer/safe.pipe';
 import { DaffioDocArticleModule } from '../../../components/doc-article/module';
-import { DaffioDocComponent } from '../../../components/doc-renderer/component.type';
+import { DaffioDocsDynamicContent } from '../../../dynamic-content/dynamic-content.type';
 
 @Component({
   selector: 'daffio-docs-guides-content',
-  templateUrl: './component.html',
+  templateUrl: './guides-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
@@ -23,7 +23,7 @@ import { DaffioDocComponent } from '../../../components/doc-renderer/component.t
     DaffioSafeHtmlPipe,
   ],
 })
-export class DaffioDocsGuidesContentComponent implements DaffioDocComponent<DaffGuideDoc> {
+export class DaffioDocsGuidesContentComponent implements DaffioDocsDynamicContent<DaffGuideDoc> {
   static readonly kind = DaffDocKind.GUIDE;
 
   doc = input<DaffGuideDoc>();
diff --git a/apps/daffio/src/app/docs/guides/components/guides-content/guides-content.provider.ts b/apps/daffio/src/app/docs/guides/components/guides-content/guides-content.provider.ts
new file mode 100644
index 0000000000..f64392b092
--- /dev/null
+++ b/apps/daffio/src/app/docs/guides/components/guides-content/guides-content.provider.ts
@@ -0,0 +1,4 @@
+import { DaffioDocsGuidesContentComponent } from './guides-content.component';
+import { provideDaffioDocsDynamicContentComponents } from '../../../dynamic-content/dynamic-content-components.token';
+
+export const daffioDocsGuidesContentComponentProvider = () => provideDaffioDocsDynamicContentComponents(DaffioDocsGuidesContentComponent);
diff --git a/apps/daffio/src/app/docs/guides/guides.module.ts b/apps/daffio/src/app/docs/guides/guides.module.ts
index b85c2d1f07..6e2ecd9e2b 100644
--- a/apps/daffio/src/app/docs/guides/guides.module.ts
+++ b/apps/daffio/src/app/docs/guides/guides.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { daffioDocsGuideComponentProvider } from './components/doc/provider';
+import { daffioDocsGuidesContentComponentProvider } from './components/guides-content/guides-content.provider';
 import { DaffioGuidesRoutingModule } from './guides-routing.module';
 
 @NgModule({
@@ -8,7 +8,7 @@ import { DaffioGuidesRoutingModule } from './guides-routing.module';
     DaffioGuidesRoutingModule,
   ],
   providers: [
-    daffioDocsGuideComponentProvider(),
+    daffioDocsGuidesContentComponentProvider(),
   ],
 })
 export class DaffioGuidesModule {}
diff --git a/apps/daffio/src/app/docs/packages/components/doc/provider.ts b/apps/daffio/src/app/docs/packages/components/doc/provider.ts
deleted file mode 100644
index 834e6fa22e..0000000000
--- a/apps/daffio/src/app/docs/packages/components/doc/provider.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { DaffioDocPackagesContentComponent } from './component';
-import { provideDaffioDocRendererComponents } from '../../../components/doc-renderer/token';
-
-export const daffioDocsPackageComponentProvider = () => provideDaffioDocRendererComponents(DaffioDocPackagesContentComponent);
diff --git a/apps/daffio/src/app/docs/packages/components/doc/component.html b/apps/daffio/src/app/docs/packages/components/packages-content/packages-content.component.html
similarity index 100%
rename from apps/daffio/src/app/docs/packages/components/doc/component.html
rename to apps/daffio/src/app/docs/packages/components/packages-content/packages-content.component.html
diff --git a/apps/daffio/src/app/docs/packages/components/doc/component.ts b/apps/daffio/src/app/docs/packages/components/packages-content/packages-content.component.ts
similarity index 61%
rename from apps/daffio/src/app/docs/packages/components/doc/component.ts
rename to apps/daffio/src/app/docs/packages/components/packages-content/packages-content.component.ts
index 106b4299e3..740d0c2ee3 100644
--- a/apps/daffio/src/app/docs/packages/components/doc/component.ts
+++ b/apps/daffio/src/app/docs/packages/components/packages-content/packages-content.component.ts
@@ -3,19 +3,19 @@ import {
   ChangeDetectionStrategy,
   input,
 } from '@angular/core';
-import { DaffioSafeHtmlPipe } from 'apps/daffio/src/app/core/html-sanitizer/safe.pipe';
 
 import {
   DaffPackageGuideDoc,
   DaffDocKind,
 } from '@daffodil/docs-utils';
 
+import { DaffioSafeHtmlPipe } from '../../../../core/html-sanitizer/safe.pipe';
 import { DaffioDocArticleModule } from '../../../components/doc-article/module';
-import { DaffioDocComponent } from '../../../components/doc-renderer/component.type';
+import { DaffioDocsDynamicContent } from '../../../dynamic-content/dynamic-content.type';
 
 @Component({
   selector: 'daffio-docs-packages-content',
-  templateUrl: './component.html',
+  templateUrl: './packages-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
@@ -23,7 +23,7 @@ import { DaffioDocComponent } from '../../../components/doc-renderer/component.t
     DaffioSafeHtmlPipe,
   ],
 })
-export class DaffioDocPackagesContentComponent implements DaffioDocComponent<DaffPackageGuideDoc> {
+export class DaffioDocsPackagesContentComponent implements DaffioDocsDynamicContent<DaffPackageGuideDoc> {
   static readonly kind = DaffDocKind.PACKAGE;
 
   doc = input<DaffPackageGuideDoc>();
diff --git a/apps/daffio/src/app/docs/packages/components/packages-content/packages-content.provider.ts b/apps/daffio/src/app/docs/packages/components/packages-content/packages-content.provider.ts
new file mode 100644
index 0000000000..72ca6157cc
--- /dev/null
+++ b/apps/daffio/src/app/docs/packages/components/packages-content/packages-content.provider.ts
@@ -0,0 +1,4 @@
+import { DaffioDocsPackagesContentComponent } from './packages-content.component';
+import { provideDaffioDocsDynamicContentComponents } from '../../../dynamic-content/dynamic-content-components.token';
+
+export const daffioDocsPackagesContentComponentProvider = () => provideDaffioDocsDynamicContentComponents(DaffioDocsPackagesContentComponent);
diff --git a/apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.spec.ts b/apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.spec.ts
index 6d74f999fe..04eaa5057d 100644
--- a/apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.spec.ts
+++ b/apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.spec.ts
@@ -12,10 +12,10 @@ import {
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { DaffioRoute } from 'apps/daffio/src/app/core/router/route.type';
 import { BehaviorSubject } from 'rxjs';
 
 import { DaffioDocsPackageCardsContainer } from './package-cards.component';
+import { DaffioRoute } from '../../../../core/router/route.type';
 
 describe('DaffioDocsPackageCardsContainer', () => {
   let component: DaffioDocsPackageCardsContainer;
diff --git a/apps/daffio/src/app/docs/packages/packages.module.ts b/apps/daffio/src/app/docs/packages/packages.module.ts
index 5b494e483c..883cbc3606 100644
--- a/apps/daffio/src/app/docs/packages/packages.module.ts
+++ b/apps/daffio/src/app/docs/packages/packages.module.ts
@@ -5,7 +5,7 @@ import { RouterModule } from '@angular/router';
 import { DaffContainerModule } from '@daffodil/design/container';
 import { DaffHeroModule } from '@daffodil/design/hero';
 
-import { daffioDocsPackageComponentProvider } from './components/doc/provider';
+import { daffioDocsPackagesContentComponentProvider } from './components/packages-content/packages-content.provider';
 import { DaffioDocsPackageCardsContainerModule } from './containers/package-cards/package-cards.module';
 import { DaffioPackagesRoutingModule } from './packages-routing.module';
 import { DaffioPackagesOverviewPageComponent } from './pages/packages-overview/packages-overview.component';
@@ -27,7 +27,7 @@ import { DaffioPackagesOverviewPageComponent } from './pages/packages-overview/p
     DaffioPackagesOverviewPageComponent,
   ],
   providers: [
-    daffioDocsPackageComponentProvider(),
+    daffioDocsPackagesContentComponentProvider(),
   ],
 })
 export class DaffioPackagesModule {}
diff --git a/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.html b/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.html
index 0a48730666..ea25057459 100644
--- a/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.html
+++ b/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.html
@@ -1 +1 @@
-<daffio-doc-renderer [doc]="doc$ | async"></daffio-doc-renderer>
+<ng-template [ngComponentOutlet]="component$ | async" [ngComponentOutletInputs]="{doc: doc$ | async}"></ng-template>
\ No newline at end of file
diff --git a/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.spec.ts b/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.spec.ts
index 26b822193e..86b2c29990 100644
--- a/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.spec.ts
+++ b/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.spec.ts
@@ -1,6 +1,6 @@
 import {
   Component,
-  Input,
+  input,
 } from '@angular/core';
 import {
   ComponentFixture,
@@ -18,10 +18,16 @@ import { DaffDoc } from '@daffodil/docs-utils';
 
 import { DaffioDocsPageComponent } from './docs-page.component';
 import { DaffioDocsFactory } from '../../../docs/testing/factories/docs.factory';
+import { DaffioDocsDynamicContentComponentService } from '../../dynamic-content/dynamic-content-component.service';
+import { DaffioDocsDynamicContent } from '../../dynamic-content/dynamic-content.type';
 
-@Component({ selector: 'daffio-doc-renderer', template: '' })
-class MockDaffioDocRendererComponent {
-  @Input() doc: DaffDoc;
+@Component({
+  selector: 'daffio-mock-content',
+  template: '',
+  standalone: true,
+})
+class MockContentComponent implements DaffioDocsDynamicContent {
+  doc = input<DaffDoc>();
 }
 
 describe('DaffioDocsPageComponent', () => {
@@ -31,12 +37,12 @@ describe('DaffioDocsPageComponent', () => {
   const stubActivatedRoute = {
     data: new BehaviorSubject({}),
   };
+  let componentServiceSpy: jasmine.SpyObj<DaffioDocsDynamicContentComponentService>;
 
   beforeEach(waitForAsync(() => {
+    componentServiceSpy = jasmine.createSpyObj('DaffioDocsDynamicContentComponentService', ['getComponent']);
+
     TestBed.configureTestingModule({
-      declarations: [
-        MockDaffioDocRendererComponent,
-      ],
       imports: [
         DaffioDocsPageComponent,
         RouterTestingModule,
@@ -46,15 +52,32 @@ describe('DaffioDocsPageComponent', () => {
         provideMockStore(),
       ],
     })
+      .overrideComponent(
+        DaffioDocsPageComponent,
+        {
+          remove: {
+            providers: [
+              DaffioDocsDynamicContentComponentService,
+            ],
+          },
+          add: {
+            providers: [
+              {
+                provide: DaffioDocsDynamicContentComponentService,
+                useValue: componentServiceSpy,
+              },
+            ],
+          },
+        },
+      )
       .compileComponents();
-  }));
 
-  beforeEach(() => {
+    componentServiceSpy.getComponent.and.returnValue(MockContentComponent);
     fixture = TestBed.createComponent(DaffioDocsPageComponent);
     component = fixture.componentInstance;
     stubActivatedRoute.data.next({ doc });
     fixture.detectChanges();
-  });
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
@@ -65,8 +88,8 @@ describe('DaffioDocsPageComponent', () => {
     expect(component.doc$).toBeObservable(expected);
   });
 
-  it('should pass the down the observed doc to the `daffio-doc-article`', () => {
-    const docViewerComponent: MockDaffioDocRendererComponent = fixture.debugElement.query(By.css('daffio-doc-renderer')).componentInstance;
-    expect(docViewerComponent.doc).toEqual(doc);
+  it('should render the dynamic component with the doc', () => {
+    const docViewerComponent: MockContentComponent = fixture.debugElement.query(By.directive(MockContentComponent)).componentInstance;
+    expect(docViewerComponent.doc()).toEqual(doc);
   });
 });
diff --git a/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.ts b/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.ts
index 5f686e10a9..619759b54b 100644
--- a/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.ts
+++ b/apps/daffio/src/app/docs/pages/docs-page/docs-page.component.ts
@@ -1,8 +1,12 @@
-import { AsyncPipe } from '@angular/common';
+import {
+  AsyncPipe,
+  NgComponentOutlet,
+} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   OnInit,
+  Type,
 } from '@angular/core';
 import {
   ActivatedRoute,
@@ -13,7 +17,8 @@ import { map } from 'rxjs/operators';
 
 import { DaffDoc } from '@daffodil/docs-utils';
 
-import { DaffioDocRendererComponent } from '../../components/doc-renderer/component';
+import { DaffioDocsDynamicContentComponentService } from '../../dynamic-content/dynamic-content-component.service';
+import { DaffioDocsDynamicContent } from '../../dynamic-content/dynamic-content.type';
 
 @Component({
   selector: 'daffio-docs-page',
@@ -23,15 +28,25 @@ import { DaffioDocRendererComponent } from '../../components/doc-renderer/compon
   imports: [
     AsyncPipe,
     RouterModule,
-    DaffioDocRendererComponent,
+    NgComponentOutlet,
+  ],
+  providers: [
+    DaffioDocsDynamicContentComponentService,
   ],
 })
 export class DaffioDocsPageComponent implements OnInit {
   doc$: Observable<DaffDoc>;
+  component$: Observable<Type<DaffioDocsDynamicContent>>;
 
-  constructor(private route: ActivatedRoute) { }
+  constructor(
+    private route: ActivatedRoute,
+    private componentService: DaffioDocsDynamicContentComponentService,
+  ) {}
 
   ngOnInit() {
     this.doc$ = this.route.data.pipe(map((data: { doc: DaffDoc }) => data.doc));
+    this.component$ = this.doc$.pipe(
+      map((doc) => this.componentService.getComponent(doc)),
+    );
   }
 }