diff --git a/dotcom-rendering/src/devServer/docs/interactive.tsx b/dotcom-rendering/src/devServer/docs/interactive.tsx
new file mode 100644
index 00000000000..66f8f594d7d
--- /dev/null
+++ b/dotcom-rendering/src/devServer/docs/interactive.tsx
@@ -0,0 +1,16 @@
+import { Available } from './available';
+
+export const Interactive = () => (
+	<>
+		<Available targets={['dotcom', 'live apps', 'amp']} />
+		<p>
+			Interactives are actually a kind of <a href="../article">article</a>
+			, but DCAR has a separate endpoint for them for performance reasons.
+			You can find some examples on the{' '}
+			<a href="https://www.theguardian.com/interactive">
+				Interactives front
+			</a>
+			.
+		</p>
+	</>
+);
diff --git a/dotcom-rendering/src/devServer/routers/amp.ts b/dotcom-rendering/src/devServer/routers/amp.ts
index 12f7c0c61b8..f6b138097ad 100644
--- a/dotcom-rendering/src/devServer/routers/amp.ts
+++ b/dotcom-rendering/src/devServer/routers/amp.ts
@@ -1,11 +1,13 @@
 import express from 'express';
 import { Amp } from '../docs/amp';
 import { Article } from '../docs/article';
+import { Interactive } from '../docs/interactive';
 import { sendReact } from '../send';
 
 const amp = express.Router();
 
 amp.get('/', sendReact('AMP', Amp));
 amp.get('/article', sendReact('Article', Article));
+amp.get('/interactive', sendReact('Interactive', Interactive));
 
 export { amp };
diff --git a/dotcom-rendering/src/devServer/routers/dotcom.ts b/dotcom-rendering/src/devServer/routers/dotcom.ts
index e5fd5ccb3a5..4780183e832 100644
--- a/dotcom-rendering/src/devServer/routers/dotcom.ts
+++ b/dotcom-rendering/src/devServer/routers/dotcom.ts
@@ -2,6 +2,7 @@ import { Router } from 'express';
 import { Article } from '../docs/article';
 import { Dotcom } from '../docs/dotcom';
 import { Front } from '../docs/front';
+import { Interactive } from '../docs/interactive';
 import { TagPage } from '../docs/tagPage';
 import { sendReact } from '../send';
 
@@ -11,5 +12,6 @@ dotcom.get('/', sendReact('Dotcom', Dotcom));
 dotcom.get('/article', sendReact('Article', Article));
 dotcom.get('/front', sendReact('Front', Front));
 dotcom.get('/tag-page', sendReact('Tag Page', TagPage));
+dotcom.get('/interactive', sendReact('Interactive', Interactive));
 
 export { dotcom };
diff --git a/dotcom-rendering/src/devServer/routers/liveApps.ts b/dotcom-rendering/src/devServer/routers/liveApps.ts
index 11871afe843..ab77d7d434b 100644
--- a/dotcom-rendering/src/devServer/routers/liveApps.ts
+++ b/dotcom-rendering/src/devServer/routers/liveApps.ts
@@ -1,5 +1,6 @@
 import express from 'express';
 import { Article } from '../docs/article';
+import { Interactive } from '../docs/interactive';
 import { LiveApps } from '../docs/liveApps';
 import { sendReact } from '../send';
 
@@ -7,5 +8,6 @@ const liveApps = express.Router();
 
 liveApps.get('/', sendReact('Live Apps', LiveApps));
 liveApps.get('/article', sendReact('Article', Article));
+liveApps.get('/interactive', sendReact('Interactive', Interactive));
 
 export { liveApps };
diff --git a/dotcom-rendering/src/devServer/routers/pages.ts b/dotcom-rendering/src/devServer/routers/pages.ts
index d4637161e74..21c76c4c469 100644
--- a/dotcom-rendering/src/devServer/routers/pages.ts
+++ b/dotcom-rendering/src/devServer/routers/pages.ts
@@ -1,6 +1,7 @@
 import { Router } from 'express';
 import { Article } from '../docs/article';
 import { Front } from '../docs/front';
+import { Interactive } from '../docs/interactive';
 import { Pages } from '../docs/pages';
 import { TagPage } from '../docs/tagPage';
 import { sendReact } from '../send';
@@ -11,5 +12,6 @@ pages.get('/', sendReact('Pages', Pages));
 pages.get('/article', sendReact('Article', Article));
 pages.get('/front', sendReact('Front', Front));
 pages.get('/tag-page', sendReact('Tag Page', TagPage));
+pages.get('/interactive', sendReact('Interactive', Interactive));
 
 export { pages };