diff --git a/packages/react-core/src/components/JumpLinks/examples/JumpLinks.md b/packages/react-core/src/components/JumpLinks/examples/JumpLinks.md
index 4074b0c67d1..b0ceedcc9a0 100644
--- a/packages/react-core/src/components/JumpLinks/examples/JumpLinks.md
+++ b/packages/react-core/src/components/JumpLinks/examples/JumpLinks.md
@@ -9,89 +9,26 @@ propComponents: ['JumpLinks', 'JumpLinksItem']
 These examples are static because they have no element to scroll spy on that makes sense. Check out the [React demos](./react-demos) to see scroll spying in action!
 
 ### Basic
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksBasic.tsx'
 ```
 
 ### With centered list
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks isCentered>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksWithCenteredList.tsx'
 ```
 
 ### With label
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<React.Fragment>
-  <JumpLinks label="Jump to section">
-    <JumpLinksItem>Inactive section</JumpLinksItem>
-    <JumpLinksItem isActive>Active section</JumpLinksItem>
-    <JumpLinksItem>Inactive section</JumpLinksItem>
-  </JumpLinks>
-  <JumpLinks isCentered label="Jump to section">
-    <JumpLinksItem>Inactive section</JumpLinksItem>
-    <JumpLinksItem isActive>Active section</JumpLinksItem>
-    <JumpLinksItem>Inactive section</JumpLinksItem>
-  </JumpLinks>
-</React.Fragment>
+```ts file='./JumpLinksWithLabel.tsx'
 ```
 
 ### Vertical
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks isVertical>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksVertical.tsx'
 ```
 
 ### Vertical with label
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks isVertical label="Jump to section">
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksVerticalWithLabel.tsx'
 ```
 
 ### Expandable vertical with subsection
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
-
-<JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem>
-    Section with active subsection
-    <JumpLinksList>
-      <JumpLinksItem isActive>Active subsection</JumpLinksItem>
-      <JumpLinksItem>Inactive subsection</JumpLinksItem>
-      <JumpLinksItem>Inactive subsection</JumpLinksItem>
-    </JumpLinksList>
-  </JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksExpandableVerticalWithSubsection.tsx'
 ```
 
diff --git a/packages/react-core/src/components/JumpLinks/examples/JumpLinksBasic.tsx b/packages/react-core/src/components/JumpLinks/examples/JumpLinksBasic.tsx
new file mode 100644
index 00000000000..c638b4efb25
--- /dev/null
+++ b/packages/react-core/src/components/JumpLinks/examples/JumpLinksBasic.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksBasic: React.FunctionComponent = () => (
+  <JumpLinks>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem isActive>Active section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);
diff --git a/packages/react-core/src/components/JumpLinks/examples/JumpLinksExpandableVerticalWithSubsection.tsx b/packages/react-core/src/components/JumpLinks/examples/JumpLinksExpandableVerticalWithSubsection.tsx
new file mode 100644
index 00000000000..40b45fd46dd
--- /dev/null
+++ b/packages/react-core/src/components/JumpLinks/examples/JumpLinksExpandableVerticalWithSubsection.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
+
+export const JumpLinksExpandableVerticalWithSubsection: React.FunctionComponent = () => (
+  <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem>
+      Section with active subsection
+      <JumpLinksList>
+        <JumpLinksItem isActive>Active subsection</JumpLinksItem>
+        <JumpLinksItem>Inactive subsection</JumpLinksItem>
+        <JumpLinksItem>Inactive subsection</JumpLinksItem>
+      </JumpLinksList>
+    </JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);
diff --git a/packages/react-core/src/components/JumpLinks/examples/JumpLinksVertical.tsx b/packages/react-core/src/components/JumpLinks/examples/JumpLinksVertical.tsx
new file mode 100644
index 00000000000..a087d74cab3
--- /dev/null
+++ b/packages/react-core/src/components/JumpLinks/examples/JumpLinksVertical.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksVertical: React.FunctionComponent = () => (
+  <JumpLinks isVertical>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem isActive>Active section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);
diff --git a/packages/react-core/src/components/JumpLinks/examples/JumpLinksVerticalWithLabel.tsx b/packages/react-core/src/components/JumpLinks/examples/JumpLinksVerticalWithLabel.tsx
new file mode 100644
index 00000000000..0fafa87c303
--- /dev/null
+++ b/packages/react-core/src/components/JumpLinks/examples/JumpLinksVerticalWithLabel.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksVerticalWithLabel: React.FunctionComponent = () => (
+  <JumpLinks isVertical label="Jump to section">
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem isActive>Active section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);
diff --git a/packages/react-core/src/components/JumpLinks/examples/JumpLinksWithCenteredList.tsx b/packages/react-core/src/components/JumpLinks/examples/JumpLinksWithCenteredList.tsx
new file mode 100644
index 00000000000..d317775f2de
--- /dev/null
+++ b/packages/react-core/src/components/JumpLinks/examples/JumpLinksWithCenteredList.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksWithCenteredList: React.FunctionComponent = () => (
+  <JumpLinks isCentered>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem isActive>Active section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);
diff --git a/packages/react-core/src/components/JumpLinks/examples/JumpLinksWithLabel.tsx b/packages/react-core/src/components/JumpLinks/examples/JumpLinksWithLabel.tsx
new file mode 100644
index 00000000000..5f189a7896b
--- /dev/null
+++ b/packages/react-core/src/components/JumpLinks/examples/JumpLinksWithLabel.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksWithLabel: React.FunctionComponent = () => (
+  <>
+    <JumpLinks label="Jump to section">
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem isActive>Active section</JumpLinksItem>
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+    </JumpLinks>
+    <JumpLinks isCentered label="Jump to section">
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem isActive>Active section</JumpLinksItem>
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+    </JumpLinks>
+  </>
+);