diff --git a/package.json b/package.json
index a8b17e87..a5c26e9c 100644
--- a/package.json
+++ b/package.json
@@ -105,6 +105,7 @@
   "dependencies": {
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@reuters-graphics/svelte-markdown": "^0.0.3",
     "@sveltejs/kit": "^2.20.7",
     "dayjs": "^1.11.13",
     "es-toolkit": "^1.35.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d85af0c..9a095814 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       '@fortawesome/free-solid-svg-icons':
         specifier: ^6.7.2
         version: 6.7.2
+      '@reuters-graphics/svelte-markdown':
+        specifier: ^0.0.3
+        version: 0.0.3(svelte@5.28.0)
       '@sveltejs/kit':
         specifier: ^2.20.7
         version: 2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.28.0)(vite@6.3.2(@types/node@22.10.7)(jiti@2.4.2)(sass@1.86.3)(yaml@2.7.0)))(svelte@5.28.0)(vite@6.3.2(@types/node@22.10.7)(jiti@2.4.2)(sass@1.86.3)(yaml@2.7.0))
@@ -738,6 +741,11 @@ packages:
     resolution: {integrity: sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw==}
     engines: {node: '>=18'}
 
+  '@reuters-graphics/svelte-markdown@0.0.3':
+    resolution: {integrity: sha512-K3DWKjm1XZxnwua+Vz9c7BRFrkFVWpVU+DnMKBPu3eadhCpT09Z0y+1MhJgs/573h4BpraZFuUVCl1h4XUxd1Q==}
+    peerDependencies:
+      svelte: ^5.0.0
+
   '@reuters-graphics/yaks-eslint@0.1.1':
     resolution: {integrity: sha512-cECaoVOAR/nMZPfT7lLY/WvcBjY7rlvSKD59QhpV3Yq2mSmoBwMDHAugjp1ndcQBRt9r/pM7aGL1iZouz4CxVQ==}
     engines: {node: '>=18'}
@@ -1903,6 +1911,10 @@ packages:
   entities@2.2.0:
     resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   err-code@2.0.3:
     resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
 
@@ -3237,6 +3249,9 @@ packages:
     resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
     engines: {node: '>=18'}
 
+  parse5@7.2.1:
+    resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
+
   pascal-case@3.1.2:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
 
@@ -3729,6 +3744,9 @@ packages:
   space-separated-tokens@1.1.5:
     resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
 
+  spark-md5@3.0.2:
+    resolution: {integrity: sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==}
+
   spawndamnit@3.0.1:
     resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
 
@@ -4837,6 +4855,15 @@ snapshots:
 
   '@publint/pack@0.1.2': {}
 
+  '@reuters-graphics/svelte-markdown@0.0.3(svelte@5.28.0)':
+    dependencies:
+      es-toolkit: 1.35.0
+      marked: 15.0.7
+      marked-smartypants: 1.1.9(marked@15.0.7)
+      parse5: 7.2.1
+      spark-md5: 3.0.2
+      svelte: 5.28.0
+
   '@reuters-graphics/yaks-eslint@0.1.1(@types/eslint@9.6.1)(eslint@9.24.0(jiti@2.4.2))(prettier@3.5.3)(svelte@5.28.0)(typescript@5.8.3)':
     dependencies:
       '@eslint/js': 9.22.0
@@ -6134,6 +6161,8 @@ snapshots:
 
   entities@2.2.0: {}
 
+  entities@4.5.0: {}
+
   err-code@2.0.3: {}
 
   error-ex@1.3.2:
@@ -8061,6 +8090,10 @@ snapshots:
 
   parse-ms@4.0.0: {}
 
+  parse5@7.2.1:
+    dependencies:
+      entities: 4.5.0
+
   pascal-case@3.1.2:
     dependencies:
       no-case: 3.0.4
@@ -8578,6 +8611,8 @@ snapshots:
 
   space-separated-tokens@1.1.5: {}
 
+  spark-md5@3.0.2: {}
+
   spawndamnit@3.0.1:
     dependencies:
       cross-spawn: 7.0.6
diff --git a/src/components/BodyText/BodyText.svelte b/src/components/BodyText/BodyText.svelte
index fca78da8..7e33c455 100644
--- a/src/components/BodyText/BodyText.svelte
+++ b/src/components/BodyText/BodyText.svelte
@@ -1,6 +1,6 @@
 <!-- @component `BodyText` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-bodytext--docs) -->
 <script lang="ts">
-  import Markdown from '../Markdown/Markdown.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
   import Block from '../Block/Block.svelte';
   interface Props {
     /** A markdown text string. */
diff --git a/src/components/EndNotes/EndNotes.svelte b/src/components/EndNotes/EndNotes.svelte
index 32a7ab6e..7c921bec 100644
--- a/src/components/EndNotes/EndNotes.svelte
+++ b/src/components/EndNotes/EndNotes.svelte
@@ -12,7 +12,7 @@
   }
 
   import Block from '../Block/Block.svelte';
-  import Markdown from '../Markdown/Markdown.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
   interface Props {
     /**
      * An array of endnote items.
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index e8cef209..a9deaffe 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -9,7 +9,7 @@
   import TextBlock from './components/TextBlock.svelte';
   import Block from '../Block/Block.svelte';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-  import Markdown from '../Markdown/Markdown.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
 
   interface Props {
     /** Content to place inside `GraphicBlock` */
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 1858db98..73e45097 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -7,7 +7,7 @@
   // Components
   import Block from '../Block/Block.svelte';
   import Byline from '../Byline/Byline.svelte';
-  import Markdown from '../Markdown/Markdown.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
 
   interface Props {
     /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
diff --git a/src/components/InfoBox/InfoBox.svelte b/src/components/InfoBox/InfoBox.svelte
index 52d915a8..1aa5d1fe 100644
--- a/src/components/InfoBox/InfoBox.svelte
+++ b/src/components/InfoBox/InfoBox.svelte
@@ -56,7 +56,7 @@
   }: Props = $props();
 
   import Block from '../Block/Block.svelte';
-  import Markdown from '../Markdown/Markdown.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
 </script>
 
 <aside class="infobox {theme}">
diff --git a/src/components/Markdown/Markdown.mdx b/src/components/Markdown/Markdown.mdx
deleted file mode 100644
index e454f0bf..00000000
--- a/src/components/Markdown/Markdown.mdx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Meta, Canvas } from '@storybook/blocks';
-import * as MarkdownStories from './Markdown.stories.svelte';
-
-<Meta of={MarkdownStories} />
-
-# Markdown
-
-The `Markdown` component renders a markdown string into HTML.
-
-```svelte
-<script>
-  import { Markdown } from '@reuters-graphics/graphics-components';
-</script>
-
-<Markdown source={'My *awesome* text in **markdown** with "smart quotes".'} />
-```
-
-<Canvas of={MarkdownStories.Demo} />
-
-... well, almost.
-
-Owing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `staticMarkdown` rune to `{ static: false }` in the browser.
-
-For example, if you're refreshing some data with markdown strings in a SvelteKit project using a [load function](https://kit.svelte.dev/docs/load), set the rune to reflect the [`building`](https://kit.svelte.dev/docs/modules#$app-environment-building) variable, which will correctly [prerender](https://kit.svelte.dev/docs/glossary#prerendering) your markdown content AND update it after fresh data is fetched in the browser.
-
-```javascript
-// +layout.js
-import { staticMarkdown } from '@reuters-graphics/graphics-components';
-import { building } from '$app/environment';
-
-/** @type {import('./$types').LayoutLoad} */
-export const load = async () => {
-  // Set the staticMarkdown rune with the value of building.
-  staticMarkdown.static = building;
-
-  // Now this content will correctly refresh when a reader loads your page.
-  const resp = await fetch(
-    'https://graphics.thomsonreuters.com/data/my-page-content.json'
-  );
-  const content = await resp.json();
-
-  return { content };
-};
-```
-
-If you're not updating your markdown content as above, you can safely leave the `staticMarkdown` rune alone and your page will do the right thing.
diff --git a/src/components/Markdown/Markdown.stories.svelte b/src/components/Markdown/Markdown.stories.svelte
deleted file mode 100644
index e2041319..00000000
--- a/src/components/Markdown/Markdown.stories.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Markdown from './Markdown.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Text elements/Markdown',
-    component: Markdown,
-  });
-</script>
-
-<Story
-  name="Demo"
-  args={{
-    source: 'My *awesome* text in **markdown** with "smart quotes".',
-  }}
-/>
diff --git a/src/components/Markdown/Markdown.svelte b/src/components/Markdown/Markdown.svelte
deleted file mode 100644
index 235b3541..00000000
--- a/src/components/Markdown/Markdown.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<!-- @component `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-markdown--docs) -->
-<script lang="ts">
-  import type { Action } from 'svelte/action';
-  import { marked } from 'marked';
-  import { markedSmartypants } from 'marked-smartypants';
-  import { staticMarkdown } from './state.svelte';
-
-  marked.use(markedSmartypants());
-
-  interface Props {
-    /** A Markdown formatted string */
-    source: string;
-    /** Parse markdown inline, i.e., without wrapping it in paragraph tags */
-    parseInline?: boolean;
-  }
-
-  let { source, parseInline = false }: Props = $props();
-
-  let markdown = $derived(
-    parseInline ?
-      (marked.parseInline(source) as string)
-    : (marked.parse(source) as string)
-  );
-
-  const setInnerHTML: Action<HTMLElement, string> = (node, html) => {
-    node.innerHTML = html;
-    return {
-      update(html) {
-        node.innerHTML = html;
-      },
-      destroy() {
-        node.innerHTML = '';
-      },
-    };
-  };
-</script>
-
-{#if source}
-  {#key source}
-    {#if staticMarkdown.static}
-      <div>
-        {@html markdown}
-      </div>
-    {:else}
-      <div use:setInnerHTML={markdown}></div>
-    {/if}
-  {/key}
-{/if}
-
-<style>
-  div {
-    display: contents;
-  }
-</style>
diff --git a/src/components/Markdown/state.svelte.ts b/src/components/Markdown/state.svelte.ts
deleted file mode 100644
index 714d01fd..00000000
--- a/src/components/Markdown/state.svelte.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Set to `false` in the browser to ensure Markdown content correctly updates
- * when a SvelteKit app hyrates.
- *
- * @example
- * ```javascript
- * // +layout.js
- * import { staticMarkdown } from '@reuters-graphics/graphics-components';
- * import { building } from '$app/environment';
- *
- * export const load = async() => {
- *   // Set the store with the value of building.
- *   staticMarkdown.static = building;
- *
- *   // Markdown using this content will correctly refresh when
- *   // a reader loads your page.
- *   const content = await fetchPageContent();
- *
- *   return { content };
- * }
- * ```
- */
-export const staticMarkdown = $state({ static: true });
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index 6d13c172..50f23855 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -2,7 +2,7 @@
 <script lang="ts">
   import Block from '../Block/Block.svelte';
   import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-  import Markdown from '../Markdown/Markdown.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
 
   // Utils
   import { random4 } from '../../utils';
diff --git a/src/components/Scroller/Embedded/Foreground.svelte b/src/components/Scroller/Embedded/Foreground.svelte
index d3fe2d81..a5e5c601 100644
--- a/src/components/Scroller/Embedded/Foreground.svelte
+++ b/src/components/Scroller/Embedded/Foreground.svelte
@@ -2,7 +2,8 @@
   import type { ScrollerStep } from '../../@types/global';
 
   import Block from '../../Block/Block.svelte';
-  import Markdown from '../../Markdown/Markdown.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+
   interface Props {
     step: ScrollerStep;
     index: number;
diff --git a/src/components/Scroller/Foreground.svelte b/src/components/Scroller/Foreground.svelte
index 196144c1..f0f26f90 100644
--- a/src/components/Scroller/Foreground.svelte
+++ b/src/components/Scroller/Foreground.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { ScrollerStep } from '../@types/global';
 
-  import Markdown from '../Markdown/Markdown.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+
   interface Props {
     steps: ScrollerStep[];
   }
diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
index b29ed5fe..ea292d9c 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -3,7 +3,7 @@
   import Fa from 'svelte-fa';
   import { faLink } from '@fortawesome/free-solid-svg-icons';
   import Block from '../Block/Block.svelte';
-  import Markdown from '../Markdown/Markdown.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
 
   interface Event {
     title: string;
diff --git a/src/index.js b/src/index.js
index 277c0f25..aaa8a3de 100644
--- a/src/index.js
+++ b/src/index.js
@@ -25,12 +25,10 @@ export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
 export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
 export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte';
-export { default as Markdown } from './components/Markdown/Markdown.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
 export { pym } from './components/PymChild/state.svelte.js';
-export { staticMarkdown } from './components/Markdown/state.svelte.js';
 export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
 export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';