diff --git a/README.md b/README.md
index 72d9af1..9d46e7e 100644
--- a/README.md
+++ b/README.md
@@ -1,129 +1,3 @@
 # GOV.UK Prototype Components · [![test](https://github.com/x-govuk/govuk-prototype-components/actions/workflows/test.yml/badge.svg)](https://github.com/x-govuk/govuk-prototype-components/actions/workflows/test.yml)
 
-GOV.UK Prototype Components contains the code you need to use common or experimental components that are not yet in the GOV.UK Design System.
-
-These components are currently experimental and more research is needed to validate them.
-
-| Component | Description |
-| - | - |
-| [xGovukAutocomplete](https://x-govuk.github.io/govuk-prototype-components/autocomplete/) | Implements the [Accessible autocomplete pattern](https://github.com/alphagov/accessible-autocomplete) to enhance a fixed list of options provided by a `<select>` element. |
-| [xGovukMasthead](https://x-govuk.github.io/govuk-prototype-components/masthead/) | Implements the masthead component [used on many GOV.UK product pages](https://github.com/alphagov/product-page-example). |
-| [xGovukPrimaryNavigation](https://x-govuk.github.io/govuk-prototype-components/primary-navigation/) | Implements the primary navigation component used on the GOV.UK Design System website. |
-| [xGovukRelatedNavigation](https://x-govuk.github.io/govuk-prototype-components/related-navigation/) | Implements [related navigation component](https://components.publishing.service.gov.uk/component-guide/related_navigation) found in the `govuk_publishing_components` gem. |
-| [xGovukSubNavigation](https://x-govuk.github.io/govuk-prototype-components/sub-navigation/) | Implements the sub navigation component used on the GOV.UK Design System website. |
-
-Two JavaScript-only modules are also provided:
-
-| Module | Description |
-| - | - |
-| [Edge](https://x-govuk.github.io/govuk-prototype-components/edge/) | Define the edges of your prototype for research. |
-| [Warn on unsaved changes](https://x-govuk.github.io/govuk-prototype-components/warn-on-unsaved-changes/) | Warn users if they try to leave a page without saving changes to a form. |
-
-> [!NOTE]\
-> Prior to v1.0.0, this project included a collection of decorated form components. These can now be found in the [`govuk-decorated-components`](https://github.com/x-govuk/govuk-decorated-components) package.
-
-## Requirements
-
-Node.js v18 or later.
-
-## Installation
-
-```shell
-npm install @x-govuk/govuk-prototype-components
-```
-
-## Usage with the GOV.UK Prototype Kit
-
-GOV.UK Prototype Components are designed to work with the GOV.UK Prototype Kit.
-
-If you are using v13 or later of the kit, the components will be immediately available once you have installed the package, and can be [managed alongside other plugins in your prototype](https://prototype-kit.service.gov.uk/docs/install-and-use-plugins).
-
-## Advanced usage
-
-If you are using an earlier version of the GOV.UK Prototype Kit, or only want to install selected components, you can do so by following the instructions below.
-
-### CSS
-
-To import all the Sass rules from GOV.UK Prototype Components, add the following to your Sass file:
-
-```scss
-@import "node_modules/@x-govuk/govuk-prototype-components/x-govuk/all";
-```
-
-You can also import Sass rules for an individual component. For example, to import styles for the masthead component, add the following to your Sass file:
-
-```scss
-@import "node_modules/@x-govuk/govuk-prototype-components/x-govuk/components/masthead/masthead";
-```
-
-### JavaScript
-
-To import the JavaScript for the GOV.UK Prototype Components, you can either:
-
-* add the GOV.UK Prototype Components JavaScript file to your HTML
-* import the JavaScript using a bundler like [Webpack](https://webpack.js.org/)
-
-#### Add the JavaScript file to your HTML
-
-If you decide to add the JavaScript to your HTML, first either:
-
-* set up your routing so that requests for the JavaScript file are served from `node_modules/@x-govuk/govuk-prototype-components/x-govuk/all.js`
-* copy the `node_modules/@x-govuk/govuk-prototype-components/x-govuk/all.js` file into your application
-
-Then import the JavaScript file before the closing `</body>` tag of your HTML page or page template, and run the `initAll` function to initialise all the components.
-
-```html
-<body>
-  ...
-  <script src="<YOUR-APP>/<YOUR-JS-FILE>.js"></script>
-  <script>
-    window.GOVUKPrototypeComponents.initAll()
-  </script>
-</body>
-```
-
-#### Import JavaScript using ES modules
-
-If you decide to import using a bundler, use `import` to import all GOV.UK Prototype Components, then run the `initAll` function to initialise them:
-
-```js
-import { initAll } from '@x-govuk/govuk-prototype-components'
-
-initAll()
-```
-
-You can also import the JavaScript for an individual component. For example, to import the autocomplete component, add the following to your JavaScript file:
-
-```js
-import { Autocomplete } from '@x-govuk/govuk-prototype-components'
-
-const myAutocomplete = document.querySelector('#my-autocomplete')
-new Autocomplete(myAutocomplete).init()
-```
-
-#### Import JavaScript using Common JS
-
-If you’re using a bundler that uses CommonJS (like [Browserify](http://browserify.org/)), use `require`:
-
-```js
-const GOVUKPrototypeComponents = require('@x-govuk/govuk-prototype-components')
-
-GOVUKPrototypeComponents.initAll()
-```
-
-It is not possible to import individual components using CommonJS.
-
-## Contribute
-
-The project repository is public and anyone can contribute.
-
-[View this project on GitHub](https://github.com/x-govuk/govuk-prototype-components).
-
-## Releasing a new version
-
-`npm run release`
-
-This command will ask you what version you want to use. It will then publish a new version on NPM, create and push a new git tag and then generate release notes ready for posting on GitHub.
-
-> ![NOTE]
-> Releasing a new version requires permission to publish packages to the `@x-govuk` organisation.
+See [GOV.UK Prototype Components documentation](https://x-govuk.github.io/govuk-prototype-components/).
diff --git a/docs/_components/example/_example.scss b/docs/_components/example/_example.scss
new file mode 100644
index 0000000..34315e0
--- /dev/null
+++ b/docs/_components/example/_example.scss
@@ -0,0 +1,25 @@
+.app-example__frame {
+  background: govuk-colour("white");
+  border: 0;
+  border-right: 1px solid $govuk-border-colour;
+  display: block;
+  max-width: 100%;
+  width: 100%;
+}
+
+.app-example__new-window {
+  @include govuk-font($size: 16);
+}
+
+.app-example__tabs {
+  .govuk-tabs__panel#preview {
+    padding: 0;
+    padding-right: 1px;
+  }
+}
+
+.app-example__toolbar {
+  background: $govuk-body-background-colour;
+  border-top: 1px solid $govuk-border-colour;
+  padding: govuk-spacing(2);
+}
diff --git a/docs/_components/example/macro.njk b/docs/_components/example/macro.njk
new file mode 100644
index 0000000..cc0aedf
--- /dev/null
+++ b/docs/_components/example/macro.njk
@@ -0,0 +1,3 @@
+{% macro appExample(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/docs/_components/example/template.njk b/docs/_components/example/template.njk
new file mode 100644
index 0000000..d935546
--- /dev/null
+++ b/docs/_components/example/template.njk
@@ -0,0 +1,32 @@
+{% from "govuk/components/tabs/macro.njk" import govukTabs %}
+
+{%- set nunjucksHtml %}
+
+```js
+{{ getNunjucksCode(params.component) }}
+```
+{% endset %}
+
+{%- set previewHtml -%}
+<iframe class="app-example__frame" data-module="app-example-frame" src="/examples/{{ params.component }}"></iframe>
+<p class="app-example__toolbar">
+  <a class="app-example__new-window" href="/examples/{{ params.component }}" target="_blank">Open this example in a new tab</a>
+</p>
+{%- endset %}
+
+{{ govukTabs({
+  classes: "app-example__tabs",
+  items: [{
+    label: "Preview",
+    id: "preview",
+    panel: {
+      html: previewHtml
+    }
+  }, {
+    label: "Nunjucks",
+    id: "nunjucks",
+    panel: {
+      html: nunjucksHtml
+    }
+  }]
+}) }}
diff --git a/docs/_layouts/example.njk b/docs/_layouts/example.njk
new file mode 100644
index 0000000..43f1872
--- /dev/null
+++ b/docs/_layouts/example.njk
@@ -0,0 +1,18 @@
+{% extends "layouts/base.njk" %}
+{% from "x-govuk/components/autocomplete/macro.njk" import xGovukAutocomplete %}
+
+{% block header %}{% endblock %}
+
+{% block content %}
+  {{ content }}
+{% endblock %}
+
+{% block scripts %}
+  <script src="/assets/iframeResizer.contentWindow.js"></script>
+  <script src="/assets/x-govuk/all.js"></script>
+  <script>
+    window.GOVUKPrototypeComponents.initAll()
+  </script>
+{% endblock %}
+
+{% block footer %}{% endblock %}
diff --git a/docs/_layouts/product.njk b/docs/_layouts/product.njk
new file mode 100644
index 0000000..9ce5e2d
--- /dev/null
+++ b/docs/_layouts/product.njk
@@ -0,0 +1 @@
+{% extends "layouts/product.njk" %}
diff --git a/docs/_layouts/sub-navigation.njk b/docs/_layouts/sub-navigation.njk
new file mode 100644
index 0000000..2045168
--- /dev/null
+++ b/docs/_layouts/sub-navigation.njk
@@ -0,0 +1,8 @@
+{% extends "layouts/sub-navigation.njk" %}
+
+{% block scripts %}
+  <script src="/assets/iframeResizer.js"></script>
+  <script>
+    iFrameResize({ log: true }, `[data-module="app-example-frame"]`)
+  </script>
+{% endblock %}
diff --git a/x-govuk/components/autocomplete/README.md b/docs/autocomplete.md
similarity index 85%
rename from x-govuk/components/autocomplete/README.md
rename to docs/autocomplete.md
index f336ff4..1ed7cd3 100644
--- a/x-govuk/components/autocomplete/README.md
+++ b/docs/autocomplete.md
@@ -1,52 +1,18 @@
-# Autocomplete
+---
+title: Autocomplete
+layout: sub-navigation
+order: 1
+---
 
 The autocomplete component implements the [Accessible autocomplete pattern](https://github.com/alphagov/accessible-autocomplete) to enhance a fixed list of options provided by a `<select>` element.
 
 This component may be useful if you want users to pick from a number of options. Unlike an autosuggest component, this component will only allow users to choose from a predetermined list of options.
 
-## Example usage
-
-```njk
-{{ xGovukAutocomplete({
-  id: "country",
-  name: "country",
-  allowEmpty: false,
-  label: {
-    classes: "govuk-label--l",
-    isPageHeading: true,
-    text: "Pick a country"
-  },
-  items: [
-    { text: "Austria" },
-    { text: "Belgium" },
-    { text: "Bulgaria" },
-    { text: "Croatia" },
-    { text: "Republic of Cyprus" },
-    { text: "Czech Republic" },
-    { text: "Denmark" },
-    { text: "Estonia" },
-    { text: "Finland" },
-    { text: "France" },
-    { text: "Germany" },
-    { text: "Greece" },
-    { text: "Hungary" },
-    { text: "Ireland" },
-    { text: "Italy" },
-    { text: "Latvia" },
-    { text: "Lithuania" },
-    { text: "Luxembourg" },
-    { text: "Malta" },
-    { text: "Netherlands" },
-    { text: "Poland" },
-    { text: "Portugal" },
-    { text: "Romania" },
-    { text: "Slovakia" },
-    { text: "Slovenia" },
-    { text: "Spain" },
-    { text: "Sweden" }
-  ]
+{% from "example/macro.njk" import appExample %}
+
+{{ appExample({
+  component: "autocomplete"
 }) }}
-```
 
 ## Component options
 
diff --git a/x-govuk/components/edge/README.md b/docs/edge.md
similarity index 96%
rename from x-govuk/components/edge/README.md
rename to docs/edge.md
index dcb14e5..442961f 100644
--- a/x-govuk/components/edge/README.md
+++ b/docs/edge.md
@@ -1,4 +1,8 @@
-# Edge
+---
+title: Edge
+layout: sub-navigation
+order: 2
+---
 
 A javascript component to make it easy to define the edges of your prototype for research.
 
diff --git a/docs/examples/autocomplete.njk b/docs/examples/autocomplete.njk
new file mode 100644
index 0000000..76ff78e
--- /dev/null
+++ b/docs/examples/autocomplete.njk
@@ -0,0 +1,46 @@
+---
+title: Autocomplete example
+layout: example.njk
+eleventyExcludeFromCollections: true
+---
+{% from "x-govuk/components/autocomplete/macro.njk" import xGovukAutocomplete %}
+
+{{ xGovukAutocomplete({
+  id: "country",
+  name: "country",
+  allowEmpty: false,
+  label: {
+    classes: "govuk-label--l",
+    isPageHeading: true,
+    text: "Pick a country"
+  },
+  items: [
+    { text: "Austria" },
+    { text: "Belgium" },
+    { text: "Bulgaria" },
+    { text: "Croatia" },
+    { text: "Republic of Cyprus" },
+    { text: "Czech Republic" },
+    { text: "Denmark" },
+    { text: "Estonia" },
+    { text: "Finland" },
+    { text: "France" },
+    { text: "Germany" },
+    { text: "Greece" },
+    { text: "Hungary" },
+    { text: "Ireland" },
+    { text: "Italy" },
+    { text: "Latvia" },
+    { text: "Lithuania" },
+    { text: "Luxembourg" },
+    { text: "Malta" },
+    { text: "Netherlands" },
+    { text: "Poland" },
+    { text: "Portugal" },
+    { text: "Romania" },
+    { text: "Slovakia" },
+    { text: "Slovenia" },
+    { text: "Spain" },
+    { text: "Sweden" }
+  ]
+}) }}
diff --git a/docs/examples/masthead.njk b/docs/examples/masthead.njk
new file mode 100644
index 0000000..ef9241f
--- /dev/null
+++ b/docs/examples/masthead.njk
@@ -0,0 +1,28 @@
+---
+title: Masthead example
+layout: example.njk
+eleventyExcludeFromCollections: true
+---
+{% from "x-govuk/components/masthead/macro.njk" import xGovukMasthead %}
+
+{{ xGovukMasthead({
+  classes: "x-govuk-masthead--large",
+  phaseBanner: {
+    text: "This is a new service"
+  },
+  breadcrumbs: {
+    items: [{
+      href: "/",
+      text: "Home"
+    }]
+  },
+  title: {
+    text: "Design your service using GOV.UK styles, components and patterns"
+  },
+  description: {
+    text: "Use this design system to make your service consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done."
+  },
+  startButton: {
+    href: "/get-started/"
+  }
+}) }}
diff --git a/docs/examples/primary-navigation.njk b/docs/examples/primary-navigation.njk
new file mode 100644
index 0000000..7289f62
--- /dev/null
+++ b/docs/examples/primary-navigation.njk
@@ -0,0 +1,17 @@
+---
+title: Primary navigation
+layout: example.njk
+eleventyExcludeFromCollections: true
+---
+{% from "x-govuk/components/primary-navigation/macro.njk" import xGovukPrimaryNavigation %}
+
+{{ xGovukPrimaryNavigation({
+  visuallyHiddenTitle: "Navigation",
+  items: [{
+    text: "About this project",
+    href: "#"
+  }, {
+    text: "Contact us",
+    href: "#"
+  }]
+}) }}
diff --git a/docs/examples/related-navigation.njk b/docs/examples/related-navigation.njk
new file mode 100644
index 0000000..3ee8b69
--- /dev/null
+++ b/docs/examples/related-navigation.njk
@@ -0,0 +1,25 @@
+---
+title: Related navigation example
+layout: example.njk
+eleventyExcludeFromCollections: true
+---
+{% from "x-govuk/components/related-navigation/macro.njk" import xGovukRelatedNavigation %}
+
+{{ xGovukRelatedNavigation({
+  sections: [{
+    items: [{
+      text: "Find and compare schools in England",
+      href: "/school-performance-tables"
+    }, {
+      text: "Types of school",
+      href: "/types-of-school"
+    }],
+    subsections: [{
+      title: "Explore the topic",
+      items: [{
+        text: "Schools and curriculum",
+        href: "/browse/education/school-life"
+      }]
+    }]
+  }]
+}) }}
diff --git a/docs/examples/sub-navigation.njk b/docs/examples/sub-navigation.njk
new file mode 100644
index 0000000..01e9a49
--- /dev/null
+++ b/docs/examples/sub-navigation.njk
@@ -0,0 +1,26 @@
+---
+title: Sub navigation example
+layout: example.njk
+eleventyExcludeFromCollections: true
+---
+{% from "x-govuk/components/sub-navigation/macro.njk" import xGovukSubNavigation %}
+
+{{ xGovukSubNavigation({
+  visuallyHiddenTitle: "Navigation",
+  items: [{
+    text: "About this project",
+    href: "/about"
+  }, {
+    text: "Contact us",
+    href: "/contact",
+    current: true,
+    parent: true,
+    children: [{
+      text: "By email",
+      href: "/contact/email"
+    }, {
+      text: "By telephone",
+      href: "/contact/telephone"
+    }]
+  }]
+}) }}
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 0000000..414b1e8
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,135 @@
+---
+homepage: true
+layout: product
+includeInBreadcrumbs: true
+title: GOV.UK Prototype Components
+description: Common and experimental components that are not yet part of the GOV.UK Design System
+---
+
+GOV.UK Prototype Components contains the code you need to use common or experimental components that are not yet in the GOV.UK Design System.
+
+These components are currently experimental and more research is needed to validate them.
+
+| Component | Description |
+| - | - |
+| [xGovukAutocomplete](/autocomplete) | Implements the [Accessible autocomplete pattern](https://github.com/alphagov/accessible-autocomplete) to enhance a fixed list of options provided by a `<select>` element. |
+| [xGovukMasthead](/masthead) | Implements the masthead component [used on many GOV.UK product pages](https://github.com/alphagov/product-page-example). |
+| [xGovukPrimaryNavigation](/primary-navigation) | Implements the primary navigation component used on the GOV.UK Design System website. |
+| [xGovukRelatedNavigation](/related-navigation/) | Implements [related navigation component](https://components.publishing.service.gov.uk/component-guide/related_navigation) found in the `govuk_publishing_components` gem. |
+| [xGovukSubNavigation](/sub-navigation) | Implements the sub navigation component used on the GOV.UK Design System website. |
+
+Two JavaScript-only modules are also provided:
+
+| Module | Description |
+| - | - |
+| [Edge](/edge) | Define the edges of your prototype for research. |
+| [Warn on unsaved changes](/warn-on-unsaved-changes) | Warn users if they try to leave a page without saving changes to a form. |
+
+> **NOTE**
+> Prior to v1.0.0, this project included a collection of decorated form components. These can now be found in the [`govuk-decorated-components`](https://github.com/x-govuk/govuk-decorated-components) package.
+
+## Requirements
+
+Node.js v18 or later.
+
+## Installation
+
+```shell
+npm install @x-govuk/govuk-prototype-components
+```
+
+## Usage with the GOV.UK Prototype Kit
+
+GOV.UK Prototype Components are designed to work with the GOV.UK Prototype Kit.
+
+If you are using v13 or later of the kit, the components will be immediately available once you have installed the package, and can be [managed alongside other plugins in your prototype](https://prototype-kit.service.gov.uk/docs/install-and-use-plugins).
+
+## Advanced usage
+
+If you are using an earlier version of the GOV.UK Prototype Kit, or only want to install selected components, you can do so by following the instructions below.
+
+### CSS
+
+To import all the Sass rules from GOV.UK Prototype Components, add the following to your Sass file:
+
+```scss
+@import "node_modules/@x-govuk/govuk-prototype-components/x-govuk/all";
+```
+
+You can also import Sass rules for an individual component. For example, to import styles for the masthead component, add the following to your Sass file:
+
+```scss
+@import "node_modules/@x-govuk/govuk-prototype-components/x-govuk/components/masthead/masthead";
+```
+
+### JavaScript
+
+To import the JavaScript for the GOV.UK Prototype Components, you can either:
+
+* add the GOV.UK Prototype Components JavaScript file to your HTML
+* import the JavaScript using a bundler like [Webpack](https://webpack.js.org/)
+
+#### Add the JavaScript file to your HTML
+
+If you decide to add the JavaScript to your HTML, first either:
+
+* set up your routing so that requests for the JavaScript file are served from `node_modules/@x-govuk/govuk-prototype-components/x-govuk/all.js`
+* copy the `node_modules/@x-govuk/govuk-prototype-components/x-govuk/all.js` file into your application
+
+Then import the JavaScript file before the closing `</body>` tag of your HTML page or page template, and run the `initAll` function to initialise all the components.
+
+```html
+<body>
+  ...
+  <script src="<YOUR-APP>/<YOUR-JS-FILE>.js"></script>
+  <script>
+    window.GOVUKPrototypeComponents.initAll()
+  </script>
+</body>
+```
+
+#### Import JavaScript using ES modules
+
+If you decide to import using a bundler, use `import` to import all GOV.UK Prototype Components, then run the `initAll` function to initialise them:
+
+```js
+import { initAll } from '@x-govuk/govuk-prototype-components'
+
+initAll()
+```
+
+You can also import the JavaScript for an individual component. For example, to import the autocomplete component, add the following to your JavaScript file:
+
+```js
+import { Autocomplete } from '@x-govuk/govuk-prototype-components'
+
+const myAutocomplete = document.querySelector('#my-autocomplete')
+new Autocomplete(myAutocomplete).init()
+```
+
+#### Import JavaScript using Common JS
+
+If you’re using a bundler that uses CommonJS (like [Browserify](http://browserify.org/)), use `require`:
+
+```js
+const GOVUKPrototypeComponents = require('@x-govuk/govuk-prototype-components')
+
+GOVUKPrototypeComponents.initAll()
+```
+
+It is not possible to import individual components using CommonJS.
+
+## Contribute
+
+The project repository is public and anyone can contribute.
+
+[View this project on GitHub](https://github.com/x-govuk/govuk-prototype-components).
+
+## Releasing a new version
+
+`npm run release`
+
+This command will ask you what version you want to use. It will then publish a new version on NPM, create and push a new git tag and then generate release notes ready for posting on GitHub.
+
+> **NOTE**
+> Releasing a new version requires permission to publish packages to the `@x-govuk` organisation.
diff --git a/x-govuk/components/masthead/README.md b/docs/masthead.md
similarity index 88%
rename from x-govuk/components/masthead/README.md
rename to docs/masthead.md
index d4f8937..066eb65 100644
--- a/x-govuk/components/masthead/README.md
+++ b/docs/masthead.md
@@ -1,37 +1,18 @@
-# Masthead
+---
+title: Masthead
+layout: sub-navigation
+order: 3
+---
 
 The masthead component is based on the component used on [GOV.UK product pages](https://github.com/alphagov/product-page-example).
 
 This component may be useful if you are prototyping product or marketing pages.
 
-## Example usage
-
-```njk
-{{ xGovukMasthead({
-  classes: "x-govuk-masthead--large",
-  phaseBanner: {
-    text: "This is a new service"
-  },
-  breadcrumbs: {
-    items: [{
-      href: "/",
-      text: "Home"
-    }]
-  },
-  title: {
-    text: "Design your service using GOV.UK styles, components and patterns"
-  },
-  description: {
-    text: "Use this design system to make your service consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done."
-  },
-  startButton: {
-    href: "/get-started/"
-  },
-  image: {
-    src: "/images/homepage-illustration.svg"
-  }
+{% from "example/macro.njk" import appExample %}
+
+{{ appExample({
+  component: "masthead"
 }) }}
-```
 
 ## Component options
 
diff --git a/x-govuk/components/primary-navigation/README.md b/docs/primary-navigation.md
similarity index 86%
rename from x-govuk/components/primary-navigation/README.md
rename to docs/primary-navigation.md
index 7fc1888..d2c8ac8 100644
--- a/x-govuk/components/primary-navigation/README.md
+++ b/docs/primary-navigation.md
@@ -1,21 +1,16 @@
-# Primary navigation
+---
+title: Primary navigation
+layout: sub-navigation
+order: 4
+---
 
 Implements the primary navigation component used on the GOV.UK Design System website.
 
-## Example usage
-
-```njk
-{{ xGovukPrimaryNavigation({
-  visuallyHiddenTitle: "Navigation",
-  items: [{
-    text: "About this project",
-    href: "/about"
-  }, {
-    text: "Contact us",
-    href: "/contact"
-  }]
+{% from "example/macro.njk" import appExample %}
+
+{{ appExample({
+  component: "primary-navigation"
 }) }}
-```
 
 ## Component options
 
diff --git a/x-govuk/components/related-navigation/README.md b/docs/related-navigation.md
similarity index 84%
rename from x-govuk/components/related-navigation/README.md
rename to docs/related-navigation.md
index 6273da6..e61a418 100644
--- a/x-govuk/components/related-navigation/README.md
+++ b/docs/related-navigation.md
@@ -1,31 +1,18 @@
-# Related navigation
+---
+title: Related navigation
+layout: sub-navigation
+order: 5
+---
 
 The related navigation component is [a GOV.UK Publishing specific component](https://components.publishing.service.gov.uk/component-guide/related_navigation).
 
 This component may be useful if you are prototyping guidance pages that could be published on GOV.UK, or if your service needs to show related navigation.
 
-## Example usage
+{% from "example/macro.njk" import appExample %}
 
-```njk
-{{ xGovukRelatedNavigation({
-  sections: [{
-    items: [{
-      text: "Find and compare schools in England",
-      href: "/school-performance-tables"
-    }, {
-      text: "Types of school",
-      href: "/types-of-school"
-    }],
-    subsections: [{
-      title: "Explore the topic",
-      items: [{
-        text: "Schools and curriculum",
-        href: "/browse/education/school-life"
-      }]
-    }]
-  }]
+{{ appExample({
+  component: "related-navigation"
 }) }}
-```
 
 ## Component options
 
diff --git a/docs/styles/application.scss b/docs/styles/application.scss
new file mode 100644
index 0000000..c8d8d12
--- /dev/null
+++ b/docs/styles/application.scss
@@ -0,0 +1,3 @@
+@import "govuk-frontend/govuk/base";
+
+@import "../_components/example/_example.scss";
diff --git a/x-govuk/components/sub-navigation/README.md b/docs/sub-navigation.md
similarity index 83%
rename from x-govuk/components/sub-navigation/README.md
rename to docs/sub-navigation.md
index d365529..d3a31c9 100644
--- a/x-govuk/components/sub-navigation/README.md
+++ b/docs/sub-navigation.md
@@ -1,30 +1,16 @@
-# Sub navigation
+---
+title: Sub navigation
+layout: sub-navigation
+order: 6
+---
 
 Implements the sub navigation component used on the GOV.UK Design System website.
 
-## Example usage
-
-```njk
-{{ xGovukSubNavigation({
-  visuallyHiddenTitle: "Navigation",
-  items: [{
-    text: "About this project",
-    href: "/about"
-  }, {
-    text: "Contact us",
-    href: "/contact",
-    current: true,
-    parent: true,
-    children: [{
-      text: "By email",
-      href: "/contact/email"
-    }, {
-      text: "By telephone",
-      href: "/contact/telephone"
-    }]
-  }]
+{% from "example/macro.njk" import appExample %}
+
+{{ appExample({
+  component: "sub-navigation"
 }) }}
-```
 
 ## Component options
 
diff --git a/x-govuk/components/warn-on-unsaved-changes/README.md b/docs/warn-on-unsaved-changes.md
similarity index 91%
rename from x-govuk/components/warn-on-unsaved-changes/README.md
rename to docs/warn-on-unsaved-changes.md
index 5fb1a1f..f943142 100644
--- a/x-govuk/components/warn-on-unsaved-changes/README.md
+++ b/docs/warn-on-unsaved-changes.md
@@ -1,4 +1,8 @@
-# Warn on unsaved changes
+---
+title: Warn on saved changes
+layout: sub-navigation
+order: 7
+---
 
 A javascript component to warn users if they try to leave a page without saving their changes to a form.
 
diff --git a/eleventy.config.js b/eleventy.config.js
index d256043..56eb8ec 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,5 +1,6 @@
-const process = require('node:process')
 const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin')
+const fs = require('fs')
+const matter = require('gray-matter')
 
 module.exports = function (eleventyConfig) {
   // Plugins
@@ -20,6 +21,9 @@ module.exports = function (eleventyConfig) {
     url: process.env.GITHUB_ACTIONS
       ? 'https://x-govuk.github.io/govuk-prototype-components/'
       : '/',
+    stylesheets: [
+      '/styles/application.css'
+    ],
     header: {
       organisationLogo: 'x-govuk',
       organisationName: 'X-GOVUK',
@@ -35,26 +39,44 @@ module.exports = function (eleventyConfig) {
     }
   })
 
-  // Ignores
-  eleventyConfig.ignores.add('**/*/*.js')
-  eleventyConfig.ignores.add('**/*/*.scss')
-  eleventyConfig.ignores.add('**/*/*.njk')
+  /**
+   * Fetch raw Nunjucks code for given `componentName` and return a string.
+   *
+   * This is needed as Nunjucks `include` tag parses included code, and
+   * currently provides no way to fetch it un-rendered.
+   *
+   * @param {string} componentName - Name of component
+   * @returns {string} - Rendered Nunjucks template
+   * @see {@link https://github.com/mozilla/nunjucks/issues/788}
+   */
+  eleventyConfig.addNunjucksGlobal('getNunjucksCode', (componentName) => {
+    const componentPath = `docs/examples/${componentName}.njk`
+    const componentFile = fs.readFileSync(componentPath, 'utf-8')
+    const { content } = matter(componentFile)
 
-  // Transforms
-  eleventyConfig.addTransform('remove-h1', (content, outputPath) => {
-    // Remove first `h1` as it repeats what’s already shown in page title
-    content = content.replace(/<h1\s*.*tabindex="-1"\s*.*>\s*.*<\/h1>/, '')
-    return content
+    // Remove `{% from "..." import ... %}` line as this is not needed by users
+    const nunjucksCode = content.replace(/{%\sfrom\s[^\n]+\n\n/, '')
+
+    return nunjucksCode
+  })
+
+  // Passthrough
+  eleventyConfig.addPassthroughCopy('./assets')
+  eleventyConfig.addPassthroughCopy({
+    './node_modules/@x-govuk/govuk-prototype-components/x-govuk/*.js': './assets/x-govuk'
+  })
+  eleventyConfig.addPassthroughCopy({
+    './node_modules/iframe-resizer/js/*.js': './assets'
   })
 
-  // Config
   return {
     dataTemplateEngine: 'njk',
     htmlTemplateEngine: 'njk',
-    markdownTemplateEngine: false,
+    markdownTemplateEngine: 'njk',
     dir: {
-      input: 'x-govuk/components',
-      layouts: '../../node_modules/@x-govuk/govuk-eleventy-plugin/layouts'
+      input: 'docs',
+      layouts: '_layouts',
+      includes: '_components'
     },
     pathPrefix: process.env.GITHUB_ACTIONS
       ? '/govuk-prototype-components'
diff --git a/package-lock.json b/package-lock.json
index 07af333..9259041 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,11 +13,14 @@
         "eventslibjs": "^1.2.0"
       },
       "devDependencies": {
-        "@11ty/eleventy": "^2.0.0",
+        "@11ty/eleventy": "^2.0.1",
         "@rollup/plugin-commonjs": "^25.0.0",
         "@rollup/plugin-node-resolve": "^15.0.1",
-        "@x-govuk/govuk-eleventy-plugin": "^5.0.6",
+        "@x-govuk/govuk-eleventy-plugin": "^5.0.3",
+        "@x-govuk/govuk-prototype-components": "file:./",
+        "iframe-resizer": "^4.3.9",
         "np": "^9.0.0",
+        "rimraf": "^5.0.5",
         "rollup": "^4.4.0",
         "standard": "^17.0.0",
         "stylelint": "^15.0.0",
@@ -941,32 +944,6 @@
         }
       }
     },
-    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.7.0.tgz",
-      "integrity": "sha512-rGku10pL1StFlFvXX5pEv88KdGW6DHUghsxyP/aRYb9eH+74jTGJ3U0S/rtlsQ4yYq1Hcc7AMkoJOb1xu29Fxw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
-    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.7.0.tgz",
-      "integrity": "sha512-/EBw0cuJ/KVHiU2qyVYUhogXz7W2vXxBzeE9xtVIMC+RyitlY2vvaoysMUqASpkUtoNIHlnKTu/l7mXOPgnKOA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ]
-    },
     "node_modules/@rollup/rollup-darwin-arm64": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.7.0.tgz",
@@ -980,136 +957,6 @@
         "darwin"
       ]
     },
-    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.7.0.tgz",
-      "integrity": "sha512-/ImhO+T/RWJ96hUbxiCn2yWI0/MeQZV/aeukQQfhxiSXuZJfyqtdHPUPrc84jxCfXTxbJLmg4q+GBETeb61aNw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.7.0.tgz",
-      "integrity": "sha512-zhye8POvTyUXlKbfPBVqoHy3t43gIgffY+7qBFqFxNqVtltQLtWeHNAbrMnXiLIfYmxcoL/feuLDote2tx+Qbg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.7.0.tgz",
-      "integrity": "sha512-RAdr3OJnUum6Vs83cQmKjxdTg31zJnLLTkjhcFt0auxM6jw00GD6IPFF42uasYPr/wGC6TRm7FsQiJyk0qIEfg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.7.0.tgz",
-      "integrity": "sha512-nhWwYsiJwZGq7SyR3afS3EekEOsEAlrNMpPC4ZDKn5ooYSEjDLe9W/xGvoIV8/F/+HNIY6jY8lIdXjjxfxopXw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.7.0.tgz",
-      "integrity": "sha512-rlfy5RnQG1aop1BL/gjdH42M2geMUyVQqd52GJVirqYc787A/XVvl3kQ5NG/43KXgOgE9HXgCaEH05kzQ+hLoA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.7.0.tgz",
-      "integrity": "sha512-cCkoGlGWfBobdDtiiypxf79q6k3/iRVGu1HVLbD92gWV5WZbmuWJCgRM4x2N6i7ljGn1cGytPn9ZAfS8UwF6vg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.7.0.tgz",
-      "integrity": "sha512-R2oBf2p/Arc1m+tWmiWbpHBjEcJnHVnv6bsypu4tcKdrYTpDfl1UT9qTyfkIL1iiii5D4WHxUHCg5X0pzqmxFg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.7.0.tgz",
-      "integrity": "sha512-CPtgaQL1aaPc80m8SCVEoxFGHxKYIt3zQYC3AccL/SqqiWXblo3pgToHuBwR8eCP2Toa+X1WmTR/QKFMykws7g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.7.0.tgz",
-      "integrity": "sha512-pmioUlttNh9GXF5x2CzNa7Z8kmRTyhEzzAC+2WOOapjewMbl+3tGuAnxbwc5JyG8Jsz2+hf/QD/n5VjimOZ63g==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.7.0.tgz",
-      "integrity": "sha512-SeZzC2QhhdBQUm3U0c8+c/P6UlRyBcLL2Xp5KX7z46WXZxzR8RJSIWL9wSUeBTgxog5LTPJuPj0WOT9lvrtP7Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ]
-    },
     "node_modules/@samverschueren/stream-to-observable": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz",
@@ -1389,23 +1236,8 @@
       }
     },
     "node_modules/@x-govuk/govuk-prototype-components": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@x-govuk/govuk-prototype-components/-/govuk-prototype-components-2.1.0.tgz",
-      "integrity": "sha512-Pqh3lylxR5JCpzUrMvd/2LU9clpU694Fk9nkZ6XS6lYxAQCWZA1WycKLGGXGmMX293CC9b8+eRoZELy3lQQtFw==",
-      "dev": true,
-      "dependencies": {
-        "accessible-autocomplete": "^2.0.4",
-        "eventslibjs": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      },
-      "optionalDependencies": {
-        "govuk-prototype-kit": "^13.14.1"
-      },
-      "peerDependencies": {
-        "govuk-frontend": "^4.1.0"
-      }
+      "resolved": "",
+      "link": true
     },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
@@ -6109,6 +5941,19 @@
         }
       ]
     },
+    "node_modules/iframe-resizer": {
+      "version": "4.3.9",
+      "resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.3.9.tgz",
+      "integrity": "sha512-MCt+V/THB4a9OcAdrWo5NsI2CRpeMM4ijhTfiLtsdgDJXWYXf62Ve8yO8rKGmYNs991zty/EolYOxActlkfU+A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/davidjbradshaw/iframe-resizer/blob/master/FUNDING.md"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
diff --git a/package.json b/package.json
index c63bee5..1b9745b 100644
--- a/package.json
+++ b/package.json
@@ -41,11 +41,14 @@
     "eventslibjs": "^1.2.0"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^2.0.0",
+    "@11ty/eleventy": "^2.0.1",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@x-govuk/govuk-eleventy-plugin": "^5.0.6",
+    "@x-govuk/govuk-eleventy-plugin": "^5.0.3",
+    "@x-govuk/govuk-prototype-components": "file:./",
+    "iframe-resizer": "^4.3.9",
     "np": "^9.0.0",
+    "rimraf": "^5.0.5",
     "rollup": "^4.4.0",
     "standard": "^17.0.0",
     "stylelint": "^15.0.0",
diff --git a/x-govuk/components/components.11tydata.js b/x-govuk/components/components.11tydata.js
deleted file mode 100644
index 9ae0dd5..0000000
--- a/x-govuk/components/components.11tydata.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const humanise = (string) => {
-  string = string.replace('/README', '').replace('/', '')
-  string = string.replaceAll('-', ' ')
-  string = string.trim().replace(/^\w/, (c) => c.toUpperCase())
-  return string
-}
-
-const slugify = (string) => {
-  string = string.replace('/README', '').replace('/', '')
-  return string
-}
-
-module.exports = {
-  layout: 'sub-navigation',
-  tags: ['component'],
-  eleventyComputed: {
-    title: data => humanise(data.page.filePathStem),
-    permalink: data => `${slugify(data.page.filePathStem)}/`
-  },
-  eleventyNavigation: {
-    parent: 'GOV.UK Prototype Components'
-  }
-}
diff --git a/x-govuk/components/index.md b/x-govuk/components/index.md
deleted file mode 100644
index de1495e..0000000
--- a/x-govuk/components/index.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-templateEngineOverride: njk
-homepage: true
-layout: product
-includeInBreadcrumbs: true
-collection: Components
-override:tags: []
-pagination:
-  data: collections.component
-  size: 20
-eleventyComputed:
-  title: GOV.UK Prototype Components
-  description: Common and experimental components that are not yet part of the GOV.UK Design System
-  permalink: "/"
----
-{% filter markdown %}{% include "../../README.md" %}{% endfilter %}