diff --git a/.github/workflows/nightly-rebuild.yml b/.github/workflows/nightly-rebuild.yml
new file mode 100644
index 00000000..9fe0da14
--- /dev/null
+++ b/.github/workflows/nightly-rebuild.yml
@@ -0,0 +1,34 @@
+name: 'Nightly rebuild 🌙'
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  upload:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: ./.github/actions/build
+
+      - uses: actions/upload-pages-artifact@v1
+        with:
+          path: src/.vuepress/dist
+
+  deploy-ghp:
+    needs: upload
+    runs-on: ubuntu-22.04
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/package.json b/package.json
index 519e2972..4f3fbd6c 100755
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
     "markdown-it-multimd-table": "^4.1.3",
     "mock-fs": "^5.1.2",
     "only-allow": "^1.1.1",
+    "openapi-types": "^12.1.3",
     "plop": "^4.0.0",
     "postcss-import": "^15.1.0",
     "prettier": "^2.8.8",
@@ -90,7 +91,8 @@
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
     "vite-svg-loader": "^4.0.0",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "yaml": "^2.4.1"
   },
   "packageManager": "yarn@3.2.2",
   "volta": {
diff --git a/src/.vuepress/config.ts b/src/.vuepress/config.ts
index fcbac78e..2c88dd41 100755
--- a/src/.vuepress/config.ts
+++ b/src/.vuepress/config.ts
@@ -6,6 +6,7 @@ import {viteConfig} from './viteConfig';
 import {myParcelTheme} from './theme';
 import {sitemapPlugin} from './plugins/sitemap';
 import {parseTranslationsPlugin} from './plugins/parseTranslations';
+import {openApiPlugin} from './plugins/openApi';
 import {googleTagManagerPlugin} from './plugins/gtm/node';
 import {DIR_CONFIG, DIR_VUEPRESS} from './dirs';
 import {head} from './config/head';
@@ -25,6 +26,10 @@ export default defineUserConfig({
   }),
 
   plugins: [
+    openApiPlugin({
+      yamlUrls: [],
+    }),
+
     parseTranslationsPlugin({
       defaultLocale: 'en-GB',
       configDir: path.resolve(DIR_CONFIG, 'navigation'),
diff --git a/src/.vuepress/plugins/openApi.ts b/src/.vuepress/plugins/openApi.ts
new file mode 100644
index 00000000..27989940
--- /dev/null
+++ b/src/.vuepress/plugins/openApi.ts
@@ -0,0 +1,77 @@
+import {parse as parseYaml} from 'yaml';
+import {createPage, type Plugin} from 'vuepress';
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import {kebabCase} from 'lodash-es';
+import {resolveRefs} from '../theme/client/utils/openApiHelpers';
+
+interface OpenApiPluginConfig {
+  yamlUrls: string[];
+}
+
+export const openApiPlugin = (config: OpenApiPluginConfig): Plugin => ({
+  name: '@myparcel/vuepress-openapi',
+  async onInitialized(app) {
+    // Find all yaml files in config.yamlUrls and create a page for each of them
+    await Promise.all(
+      config.yamlUrls?.map(async (url) => {
+        const document = (await fetch(url).then(async (res) => parseYaml(await res.text()))) as OpenApiType.Document;
+        // Use the basename of the file as the slug
+        const resolvedDocument = resolveRefs(document);
+
+        // Now generate the page contents
+        app.pages.push(await createPage(app, generateOpenApiPage(resolvedDocument)));
+      }),
+    );
+  },
+});
+
+function generateOpenApiPage(document: OpenApiType.Document) {
+  return {
+    path: `/api-reference/${kebabCase(document.info.title)}`,
+    content: renderMarkdown(document),
+  };
+}
+
+function renderMarkdown(document: OpenApiType.Document): string {
+  return `\
+---
+title: ${document.info.title}
+description: ${document.info.description}
+---
+Version ${document.info.version}
+
+${document.info.description ?? ''}
+
+${document.security ? '## Authorization' : ''}
+<OpenApiSecurityRequirements
+:security='${JSON.stringify(document.security ?? [])}'
+:security-schemes='${JSON.stringify(document.components?.securitySchemes ?? [])}' />
+
+${document.servers?.length ? '## Servers' : ''}
+<OpenApiServers :servers='${JSON.stringify(document.servers ?? [])}' />
+
+${renderPaths(document, document.paths, 'Endpoints')}
+
+${renderPaths(document, document.webhooks, 'Webhooks')}
+`;
+}
+
+function renderPaths(
+  document: OpenApiType.Document,
+  paths: OpenApiType.PathsObject | undefined,
+  heading: string,
+): string {
+  if (!paths || !Object.keys(paths).length) return '';
+
+  let chapters = `## ${heading}`;
+
+  for (const [path, pathObj] of Object.entries(paths)) {
+    chapters += `
+### ${path}
+\n
+<OpenApiPath :path='${JSON.stringify(pathObj)}' :components='${JSON.stringify(document.components)}' title='${path}' />
+    `;
+  }
+
+  return chapters;
+}
diff --git a/src/.vuepress/theme/client/components/global/OpenApi.vue b/src/.vuepress/theme/client/components/global/OpenApi.vue
new file mode 100644
index 00000000..5e0ad966
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApi.vue
@@ -0,0 +1,34 @@
+<template>
+  <section class="open-api">
+    <OpenApiInfo :info="resolvedDocument.info" />
+
+    <article
+      v-for="(item, path) in resolvedDocument.paths"
+      :key="path">
+      <OpenApiPath
+        v-if="item"
+        :path="item"
+        :components="document.components"
+        :title="path" />
+    </article>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import OpenApiPath from './OpenApiPath.vue';
+import OpenApiInfo from './OpenApiInfo.vue';
+import { resolveRefs } from '@mptheme/client/utils/openApiHelpers';
+
+const props = defineProps<{
+  document: OpenApiType.Document;
+}>();
+
+const resolvedDocument = computed(() => resolveRefs(props.document));
+
+// Recursively loop through the entire document and replace any $ref keys with their corresponding values
+type RecursiveType = {
+  [key: string]: unknown | RecursiveType | RecursiveType[];
+};
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiExample.vue b/src/.vuepress/theme/client/components/global/OpenApiExample.vue
new file mode 100644
index 00000000..2e780b98
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiExample.vue
@@ -0,0 +1,51 @@
+<template>
+  <div v-if="example">
+    <strong class="inline-block text-sm">{{ title || 'Example' }}:</strong>&nbsp;
+    <Markdown
+      v-if="isExampleObject(example) && example.summary"
+      class="text-sm"
+      :content="example.summary" />
+
+    <Markdown
+      v-if="isExampleObject(example) && example.description"
+      class="text-sm"
+      :content="example.description" />
+
+    <CodeBlock
+      v-if="formattedExample && isMultilineString"
+      :code="formattedExample" />
+
+    <code
+      v-else
+      class="p-1">
+      {{ formattedExample }}
+    </code>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import {formatExample} from '@mptheme/client/utils/openApiHelpers';
+import {isExampleObject} from '@mptheme/client/utils/openApiGuards';
+import Markdown from '@mptheme/client/components/global/Markdown.vue';
+import CodeBlock from './CodeBlock.vue';
+
+const props = defineProps<{
+  title?: string;
+  example?: OpenApiType.ExampleObject | unknown;
+}>();
+
+const formattedExample = computed(() => {
+  if (!props.example) return undefined;
+
+  if (isExampleObject(props.example)) return formatExample(props.example.value);
+
+  if (typeof props.example === 'object') return formatExample(props.example);
+
+  return props.example.toString();
+});
+
+// Check the formattedExample for linebreaks, if it has those, it's a multiline string
+const isMultilineString = computed(() => formattedExample.value?.includes('\n'));
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiInfo.vue b/src/.vuepress/theme/client/components/global/OpenApiInfo.vue
new file mode 100644
index 00000000..fb2ca7e6
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiInfo.vue
@@ -0,0 +1,20 @@
+<template>
+  <section class="open-api-info">
+    <hgroup>
+      <h2>{{ info.title }}</h2>
+      <p>(v{{ info.version }})</p>
+      <Markdown
+        v-if="info.description"
+        :content="info.description" />
+    </hgroup>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import Markdown from './Markdown.vue';
+
+defineProps<{
+  info: OpenApiType.Document['info'];
+}>();
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiOperation.vue b/src/.vuepress/theme/client/components/global/OpenApiOperation.vue
new file mode 100644
index 00000000..a53ccccd
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiOperation.vue
@@ -0,0 +1,54 @@
+<template>
+  <header class="bg-gray-100 dark:bg-gray-800 mb-4 mt-4 open-api-operation p-3">
+    <strong>Endpoint:</strong>
+    <code
+      class="dark:text-black inline-block leading-none m-0 ml-3 p-1 rounded-sm text-sm"
+      :class="methodClass">
+      {{ method.toUpperCase() }}
+    </code>
+    <pre class="dark:text-gray-100 inline m-0 ml-2 p-0 text-gray-700 text-sm">{{ endpoint }}</pre>
+    <br />
+
+    <template v-if="securityRequirements?.length && securitySchemes">
+      <strong>Authentication:</strong>&nbsp;
+      <OpenApiSecurityRequirements
+        class="text-sm"
+        :security="securityRequirements"
+        :security-schemes="securitySchemes" />
+    </template>
+  </header>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import OpenApiSecurityRequirements from '@mptheme/client/components/global/OpenApiSecurityRequirements.vue';
+
+const props = defineProps<{
+  method: OpenApiType.HttpMethods;
+  endpoint: string;
+  securityRequirements?: OpenApiType.SecurityRequirementObject[];
+  securitySchemes?: Record<string, OpenApiType.SecuritySchemeObject>;
+}>();
+
+const methodClass = computed(() => {
+  return {
+    'bg-green-200': props.method === 'get',
+    'dark:bg-green-200': props.method === 'get',
+    'bg-blue-200': props.method === 'post',
+    'dark:bg-blue-200': props.method === 'post',
+    'bg-yellow-200': props.method === 'put',
+    'dark:bg-yellow-200': props.method === 'put',
+    'bg-red-200': props.method === 'delete',
+    'dark:bg-red-200': props.method === 'delete',
+    'bg-purple-200': props.method === 'patch',
+    'dark:bg-purple-200': props.method === 'patch',
+    'bg-gray-200': props.method === 'options',
+    'dark:bg-gray-200': props.method === 'options',
+    'bg-indigo-200': props.method === 'head',
+    'dark:bg-indigo-200': props.method === 'head',
+    'bg-pink-200': props.method === 'trace',
+    'dark:bg-pink-200': props.method === 'trace',
+  };
+});
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiPath.vue b/src/.vuepress/theme/client/components/global/OpenApiPath.vue
new file mode 100644
index 00000000..08877e25
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiPath.vue
@@ -0,0 +1,84 @@
+<template>
+  <article class="open-api-path">
+    <div
+      v-for="(operation, method) in path"
+      :key="method">
+      <template v-if="typeof operation === 'object'">
+        <h3 v-if="'operationId' in operation">
+          {{ operation.operationId }}
+        </h3>
+
+        <p v-if="'summary' in operation">{{ operation.summary }}</p>
+
+        <OpenApiOperation
+          :method="method"
+          :endpoint="title"
+          :security-schemes="components?.securitySchemes as Record<string, OpenApiType.SecuritySchemeObject>"
+          :security-requirements="'security' in operation ? operation.security : undefined" />
+
+        <Markdown
+          v-if="'description' in operation && operation.description?.length"
+          :content="operation.description" />
+
+        <template v-if="'parameters' in operation">
+          <h4>Request parameters</h4>
+          <table>
+            <thead>
+              <th>Parameter</th>
+              <th>Location</th>
+              <th>Information</th>
+            </thead>
+            <tr
+              v-for="parameter in operation.parameters"
+              :key="isParameterType(parameter) ? parameter.name : parameter.$ref">
+              <OpenApiRequestParam
+                v-if="isParameterType(parameter)"
+                :parameter="parameter" />
+            </tr>
+          </table>
+        </template>
+        <template v-if="'requestBody' in operation && operation.requestBody">
+          <h4>Request body</h4>
+
+          <template v-if="operation.requestBody?.description">
+            <Markdown :content="operation.requestBody?.description"></Markdown>
+          </template>
+          <DetailsExpand
+            v-if="'content' in operation.requestBody && operation.requestBody.content"
+            tag="h5"
+            title="Schema">
+            <div
+              v-for="(content, key) in operation.requestBody.content"
+              :key="key">
+              <strong>{{ key }}</strong>
+              <OpenApiSchema
+                v-if="content.schema && (isSchemaObject(content.schema) || isArraySchemaObject(content.schema))"
+                :schema="content.schema" />
+            </div>
+          </DetailsExpand>
+        </template>
+
+        <OpenApiResponses
+          v-if="'responses' in operation"
+          :responses="operation.responses" />
+      </template>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import {isParameterType, isArraySchemaObject, isSchemaObject} from '@mptheme/client/utils/openApiGuards';
+import OpenApiSchema from './OpenApiSchema.vue';
+import OpenApiResponses from './OpenApiResponses.vue';
+import OpenApiRequestParam from './OpenApiRequestParam.vue';
+import OpenApiOperation from './OpenApiOperation.vue';
+import Markdown from './Markdown.vue';
+import DetailsExpand from './DetailsExpand.vue';
+
+defineProps<{
+  title: string;
+  path: OpenApiType.PathItemObject;
+  components?: OpenApiType.ComponentsObject;
+}>();
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiRequestParam.vue b/src/.vuepress/theme/client/components/global/OpenApiRequestParam.vue
new file mode 100644
index 00000000..503ba467
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiRequestParam.vue
@@ -0,0 +1,84 @@
+<template>
+  <td>
+    <template v-if="parameter.name">
+      <strong>{{ parameter.name }}</strong>
+      <span
+        v-if="parameter.required"
+        class="text-red-500"
+        title="Required">
+        *
+      </span>
+      <span
+        v-for="flag in flags"
+        :key="flag">
+        {{ flag }}
+      </span>
+    </template>
+
+    <OpenApiSchema
+      v-if="parameter.schema"
+      :schema="parameter.schema" />
+
+    <Markdown
+      v-if="parameter.description && !schemaHasDescription(parameter.schema)"
+      class="text-gray-500 text-sm"
+      :content="parameter.description" />
+
+    <OpenApiExample
+      v-if="parameter.example"
+      :example="parameter.example" />
+    <div v-if="parameter.examples">
+      <strong>Examples:</strong>
+      <OpenApiExample
+        v-for="(example, exampleName) in parameter.examples"
+        :key="exampleName"
+        :title="exampleName.toString()"
+        :example="example">
+      </OpenApiExample>
+    </div>
+  </td>
+
+  <td class="align-top">
+    <code v-if="parameter.in">{{ parameter.in }}</code>
+  </td>
+
+  <td class="align-top">
+    <div v-if="parameter.style">
+      Style: <code>{{ parameter.style }}</code>
+    </div>
+  </td>
+</template>
+
+<script setup lang="ts">
+import {computed, defineProps} from 'vue';
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import OpenApiSchema from './OpenApiSchema.vue';
+import OpenApiExample from './OpenApiExample.vue';
+import Markdown from './Markdown.vue';
+
+const props = defineProps<{
+  parameter: OpenApiType.ParameterObject;
+}>();
+
+function schemaHasDescription(schema: OpenApiType.SchemaObject | undefined): boolean {
+  return !!(schema && 'description' in schema && schema.description?.length);
+}
+
+const flags = computed(() => {
+  const arr: string[] = [];
+
+  if (props.parameter.deprecated) {
+    arr.push('Deprecated');
+  }
+
+  if (props.parameter.allowEmptyValue) {
+    arr.push('Allow empty');
+  }
+
+  if (props.parameter.allowReserved) {
+    arr.push('Allow reserved');
+  }
+
+  return arr;
+});
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiResponses.vue b/src/.vuepress/theme/client/components/global/OpenApiResponses.vue
new file mode 100644
index 00000000..8b612776
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiResponses.vue
@@ -0,0 +1,77 @@
+<template>
+  <div v-if="hasItems">
+    <h4>Responses</h4>
+    <ul class="m-0 p-0">
+      <li
+        v-for="(response, code) in responseObjects"
+        :key="code"
+        class="m-0 p-0">
+        <Http :code="code" />
+
+        <Markdown
+          v-if="response.description"
+          class="text-gray-500 text-sm"
+          :content="response.description" />
+
+        <template v-for="(item, type) in response.content">
+          <DetailsExpand
+            v-if="'schema' in item && !!item.schema"
+            :key="`schema${type}`"
+            title="Schema"
+            tag="strong">
+            <OpenApiSchema
+              :title="type.toString()"
+              :schema="item.schema" />
+          </DetailsExpand>
+
+          <DetailsExpand
+            v-if="'example' in item && item.example"
+            :key="`example${type}`"
+            title="Example response"
+            tag="strong">
+            <OpenApiExample :example="item.example" />
+          </DetailsExpand>
+
+          <DetailsExpand
+            v-if="'examples' in item && item.examples"
+            :key="`examples${type}`"
+            title="Example responses"
+            tag="strong">
+            <OpenApiExample
+              v-for="example in item.examples"
+              :key="isExampleObject(example) ? example.value : example.$ref"
+              :example="example" />
+          </DetailsExpand>
+        </template>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import {isReponseObject, isExampleObject} from '@mptheme/client/utils/openApiGuards';
+import OpenApiSchema from './OpenApiSchema.vue';
+import OpenApiExample from './OpenApiExample.vue';
+import Markdown from './Markdown.vue';
+import Http from './Http.vue';
+import DetailsExpand from './DetailsExpand.vue';
+
+const props = defineProps<{
+  responses: OpenApiType.ResponsesObject;
+}>();
+
+const hasItems = computed<boolean>(() => Object.entries(props.responses).length > 0);
+
+// Adds a computed to get only the OpenApiType.ResponseObject types from the responses prop.
+const responseObjects = computed<Record<string, OpenApiType.ResponseObject>>(() => {
+  const objects: Record<string, OpenApiType.ResponseObject> = {};
+  Object.entries(props.responses)
+    .filter((response): response is [string, OpenApiType.ResponseObject] => isReponseObject(response))
+    .forEach(([code, response]) => {
+      objects[code] = response;
+    });
+  return objects;
+});
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiSchema.vue b/src/.vuepress/theme/client/components/global/OpenApiSchema.vue
new file mode 100644
index 00000000..09f20a2d
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiSchema.vue
@@ -0,0 +1,164 @@
+<template>
+  <div v-if="schema">
+    <OpenApiSchemaInfo
+      :schema="schema"
+      :title="title" />
+
+    <div v-if="isArraySchemaObject(schema) && schema.items">
+      <OpenApiSchema
+        :schema="schema.items"
+        title="Items" />
+    </div>
+
+    <table
+      v-if="isSchemaObject(schema) && schema.properties"
+      class="border-collapse border-spacing-0 table-auto">
+      <thead class="bg-gray-200 dark:bg-opacity-10">
+        <th>Name</th>
+        <th v-if="anyPropertyHasNesting(schema.properties)">Content</th>
+      </thead>
+
+      <tbody>
+        <tr
+          v-for="(property, key) in schema.properties"
+          :key="key"
+          :has-nested-table="propertyHasNesting(key, Object.keys(property))">
+          <td class="align-top">
+            <OpenApiSchemaInfo
+              :schema="property"
+              :is-required="schema.required?.includes(key.toString())"
+              :title="key.toString()" />
+          </td>
+
+          <td
+            v-if="isSchemaObject(property) && propertyHasNesting(key, Object.keys(property))"
+            class="align-top">
+            <a
+              v-if="collapsible"
+              href="#"
+              class="inline-flex items-center no-link-styles text-goldfish-500 text-sm"
+              @click.prevent="showNested = !showNested">
+              <template v-if="showNested">
+                <span>Hide content</span>
+                <i class="align-middle flex-1 icon-chevron-left inline-flex" />
+              </template>
+              <template v-else><span>Show content</span> <i class="align-middle icon-chevron-right" /></template>
+            </a>
+
+            <div
+              v-if="isArraySchemaObject(property) && property.items"
+              class="px-2 py-2">
+              <OpenApiSchema
+                v-show="!collapsible || (collapsible && showNested)"
+                :schema="property.items"
+                :collapsible="true" />
+            </div>
+
+            <div
+              v-if="property.properties"
+              class="px-2 py-2">
+              <OpenApiSchema
+                v-show="!collapsible || (collapsible && showNested)"
+                :schema="{properties: property.properties}"
+                :collapsible="true" />
+            </div>
+
+            <div
+              v-if="property.allOf"
+              class="px-2 py-2">
+              <strong>All of:</strong>
+              <div
+                v-for="allOf in property.allOf"
+                :key="isSchemaObject(allOf) ? allOf.title : allOf.$ref">
+                <OpenApiSchema
+                  v-show="!collapsible || (collapsible && showNested)"
+                  :schema="allOf"
+                  :collapsible="true" />
+              </div>
+            </div>
+
+            <div
+              v-if="property.oneOf"
+              class="px-2 py-2">
+              <strong>One of:</strong>
+              <div
+                v-for="oneOf in property.oneOf"
+                :key="isSchemaObject(oneOf) ? oneOf.title : oneOf.$ref">
+                <OpenApiSchema
+                  v-show="!collapsible || (collapsible && showNested)"
+                  :schema="oneOf"
+                  :collapsible="true" />
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <template v-if="isSchemaObject(schema)">
+      <div v-if="schema.additionalProperties && schema.additionalProperties !== true">
+        <OpenApiSchema
+          :schema="schema.additionalProperties"
+          title="Additonal properties" />
+      </div>
+
+      <div v-if="schema.not">
+        <OpenApiSchema
+          :schema="schema.not"
+          title="Not" />
+      </div>
+
+      <div v-if="schema.allOf">
+        <em>All of:</em>
+        <div
+          v-for="allOf in schema.allOf"
+          :key="isSchemaObject(allOf) ? allOf.title : allOf.$ref"
+          class="ml-3">
+          <OpenApiSchema
+            :schema="allOf"
+            :collapsible="false" />
+        </div>
+      </div>
+
+      <div v-if="schema.oneOf">
+        <em>One of:</em>
+        <div
+          v-for="oneOf in schema.oneOf"
+          :key="isSchemaObject(oneOf) ? oneOf.title : oneOf.$ref">
+          class="ml-3">
+          <OpenApiSchema
+            :schema="oneOf"
+            :collapsible="false" />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue';
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import {isArraySchemaObject, isSchemaObject} from '@mptheme/client/utils/openApiGuards';
+import OpenApiSchemaInfo from './OpenApiSchemaInfo.vue';
+
+defineProps<{
+  schema: OpenApiType.SchemaObject | OpenApiType.ReferenceObject;
+  title?: string;
+  collapsible?: boolean;
+}>();
+
+const showNested = ref(false);
+
+function anyPropertyHasNesting(properties: OpenApiType.SchemaObject['properties']) {
+  return properties
+    ? Object.keys(properties).some((key) => propertyHasNesting(key, Object.keys(properties[key])))
+    : false;
+}
+
+function propertyHasNesting(key: string | number, children: string[]) {
+  return (
+    key === 'reference' ||
+    ['properties', 'items', 'oneOf', 'allOf'].some((propertyName) => children.includes(propertyName))
+  );
+}
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiSchemaInfo.vue b/src/.vuepress/theme/client/components/global/OpenApiSchemaInfo.vue
new file mode 100644
index 00000000..62225667
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiSchemaInfo.vue
@@ -0,0 +1,152 @@
+<template>
+  <header>
+    <strong v-if="title">{{ title }}</strong>
+    <strong v-else-if="schema.title">{{ schema.title }}</strong>
+    <span
+      v-if="isRequired"
+      title="Required"
+      class="text-red-600"
+      >*</span
+    >
+    <pre
+      v-if="schema.type"
+      class="m-0 p-0 text-sm whitespace-nowrap">
+          {{ schema.type }}
+          <template v-if="schema.format">({{ schema.format }})</template>
+      </pre>
+
+    <Markdown
+      v-if="schema.description"
+      :content="schema.description"
+      class="m-0 p-0 text-gray-500 text-sm" />
+
+    <div v-if="schema.enum?.length">
+      <strong class="text-sm">Possible values:</strong>
+      <ul
+        v-if="schema.enum.length < 10"
+        class="columns-2 list-disc">
+        <li
+          v-for="value in schema.enum"
+          :key="value">
+          <code>{{ value }}</code>
+        </li>
+      </ul>
+      <details v-else>
+        <summary>View all</summary>
+        <ul class="columns-2 list-disc">
+          <li
+            v-for="value in schema.enum"
+            :key="value">
+            <code>{{ value }}</code>
+          </li>
+        </ul>
+      </details>
+    </div>
+
+    <div v-if="schema.externalDocs">
+      <Markdown
+        v-if="schema.externalDocs.description"
+        :content="schema.externalDocs.description" />
+      <a
+        :href="schema.externalDocs.url"
+        target="_blank"
+        rel="noopener"
+        >External documentation</a
+      >
+    </div>
+
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.default"
+      label="Default"
+      :value="schema.default"
+    />
+
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.pattern"
+      label="Pattern"
+      :value="schema.pattern"
+    />
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.multipleOf !== undefined"
+      label="Multiple of"
+      :value="schema.multipleOf"
+    />
+
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.maximum !== undefined"
+      label="Max"
+      :value="schema.exclusiveMaximum ? '<' : '<=' + schema.maximum"
+    />
+
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.minimum !== undefined"
+      label="Min"
+      :value="schema.exclusiveMinimum ? '>' : '>=' + schema.minimum"
+    />
+
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.maxLength !== undefined"
+      label="Max length"
+      :value="schema.maxLength"
+    />
+
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.minLength !== undefined"
+      label="Min length"
+      :value="schema.minLength"
+    />
+
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.maxItems !== undefined"
+      label="Max items"
+      :value="schema.maxItems"
+    />
+
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.minItems !== undefined"
+      label="Min items"
+      :value="schema.minItems"
+    />
+
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.maxProperties !== undefined"
+      label="Max properties"
+      :value="schema.maxProperties"
+    />
+
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.minProperties !== undefined"
+      label="Min properties"
+      :value="schema.minProperties"
+    />
+
+    <OpenApiSchemaInfoRestriction
+      v-if="schema.additionalProperties !== undefined && typeof schema.additionalProperties === 'boolean'"
+      label="Additional properties"
+      :value="!!schema.additionalProperties"
+    />
+
+    <template v-if="schema.example">
+      <OpenApiExample :example="schema.example" />
+    </template>
+
+    <template v-if="schema.examples">
+      <OpenApiExample
+        v-for="example in schema.examples"
+        :key="example"
+        :example="example" />
+    </template>
+  </header>
+</template>
+
+<script setup lang="ts">
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import {Markdown} from '@mptheme/client/components/global';
+import OpenApiExample from './OpenApiExample.vue';
+
+defineProps<{
+  title?: string;
+  schema: OpenApiType.SchemaObject;
+  isRequired?: boolean;
+}>();
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiSchemaInfoRestriction.vue b/src/.vuepress/theme/client/components/global/OpenApiSchemaInfoRestriction.vue
new file mode 100644
index 00000000..1c648407
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiSchemaInfoRestriction.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="whitespace-nowrap">
+    <strong class="inline-block text-sm">{{ label }}:</strong>
+    <code class="ml-2 p-1">{{ value }}</code>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  value: string | number;
+}>();
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiSecurityRequirements.vue b/src/.vuepress/theme/client/components/global/OpenApiSecurityRequirements.vue
new file mode 100644
index 00000000..d605387a
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiSecurityRequirements.vue
@@ -0,0 +1,42 @@
+<template>
+  <div v-if="Object.keys(resolvedSchemes)?.length">
+    <ul>
+      <OpenApiSecurityScheme
+        v-for="(securityItem, name) in resolvedSchemes"
+        :key="name"
+        :scheme="securityItem" />
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import {OpenApiSecurityScheme} from '@mptheme/client/components/global';
+
+const props = defineProps<{
+  security: OpenApiType.SecurityRequirementObject[];
+  securitySchemes: Record<string, OpenApiType.SecuritySchemeObject>;
+}>();
+
+const resolvedSchemes = computed(() => {
+  const resolved: Record<string, OpenApiType.SecuritySchemeObject> = {};
+
+  for (const requirement of props.security) {
+    const scheme = resolveRequirementToScheme(requirement);
+
+    if (scheme) {
+      resolved[Object.keys(requirement)[0]] = scheme;
+    }
+  }
+
+  return resolved;
+});
+
+function resolveRequirementToScheme(
+  requirement: OpenApiType.SecurityRequirementObject,
+): OpenApiType.SecuritySchemeObject | undefined {
+  // Find the securityScheme with the same key as the securityRequirement
+  return props.securitySchemes[Object.keys(requirement)[0]];
+}
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiSecurityScheme.vue b/src/.vuepress/theme/client/components/global/OpenApiSecurityScheme.vue
new file mode 100644
index 00000000..97658281
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiSecurityScheme.vue
@@ -0,0 +1,27 @@
+<template>
+  <li v-if="scheme.type === 'apiKey'">
+    <strong>API Key</strong><br />
+    <code class="m-0 p-0 text-sm whitespace-nowrap"> {{ scheme.in }}: {{ scheme.name }} </code>
+    <Markdown
+      v-if="scheme.description"
+      class="m-0 p-0 text-gray-600 text-sm"
+      :content="scheme.description" />
+  </li>
+  <li v-else-if="scheme.type === 'http'">
+    <strong>HTTP</strong><br />
+    <code class="m-0 p-0 text-sm whitespace-nowrap"> {{ scheme.scheme }}: {{ scheme.bearerFormat }} </code>
+    <Markdown
+      v-if="scheme.description"
+      class="m-0 p-0 text-gray-600 text-sm"
+      :content="scheme.description" />
+  </li>
+</template>
+
+<script setup lang="ts">
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import Markdown from '@mptheme/client/components/global/Markdown.vue';
+
+defineProps<{
+  scheme: OpenApiType.SecuritySchemeObject;
+}>();
+</script>
diff --git a/src/.vuepress/theme/client/components/global/OpenApiServers.vue b/src/.vuepress/theme/client/components/global/OpenApiServers.vue
new file mode 100644
index 00000000..1058779c
--- /dev/null
+++ b/src/.vuepress/theme/client/components/global/OpenApiServers.vue
@@ -0,0 +1,23 @@
+<template>
+  <ul
+    v-if="servers?.length"
+    class="open-api-servers">
+    <li
+      v-for="server in servers"
+      :key="server.url">
+      <code>{{ server.url }}</code>
+      <Markdown
+        v-if="server.description"
+        :content="server.description" />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import Markdown from './Markdown.vue';
+
+defineProps<{
+  servers: OpenApiType.Document['servers'];
+}>();
+</script>
diff --git a/src/.vuepress/theme/client/components/global/index.ts b/src/.vuepress/theme/client/components/global/index.ts
index fc4ccbdd..c8e848a8 100644
--- a/src/.vuepress/theme/client/components/global/index.ts
+++ b/src/.vuepress/theme/client/components/global/index.ts
@@ -62,3 +62,29 @@ export {default as Shield} from './Shield';
 export {default as Stack} from './Stack.vue';
 
 export {default as TeamMember} from './TeamMember.vue';
+
+export {default as OpenApi} from './OpenApi.vue';
+
+export {default as OpenApiExample} from './OpenApiExample.vue';
+
+export {default as OpenApiInfo} from './OpenApiInfo.vue';
+
+export {default as OpenApiOperation} from './OpenApiOperation.vue';
+
+export {default as OpenApiPath} from './OpenApiPath.vue';
+
+export {default as OpenApiRequestParam} from './OpenApiRequestParam.vue';
+
+export {default as OpenApiResponses} from './OpenApiResponses.vue';
+
+export {default as OpenApiSchema} from './OpenApiSchema.vue';
+
+export {default as OpenApiSchemaInfo} from './OpenApiSchemaInfo.vue';
+
+export {default as OpenApiSchemaInfoRestriction} from './OpenApiSchemaInfoRestriction.vue';
+
+export {default as OpenApiSecurityRequirements} from './OpenApiSecurityRequirements.vue';
+
+export {default as OpenApiSecurityScheme} from './OpenApiSecurityScheme.vue';
+
+export {default as OpenApiServers} from './OpenApiServers.vue';
diff --git a/src/.vuepress/theme/client/utils/openApiGuards.ts b/src/.vuepress/theme/client/utils/openApiGuards.ts
new file mode 100644
index 00000000..ca137a93
--- /dev/null
+++ b/src/.vuepress/theme/client/utils/openApiGuards.ts
@@ -0,0 +1,27 @@
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+
+export function isParameterType(
+  parameter: OpenApiType.ParameterObject | OpenApiType.ReferenceObject,
+): parameter is OpenApiType.ParameterObject {
+  return 'in' in parameter && 'schema' in parameter;
+}
+
+// Guard to check if the schema is an OpenApiType.SchemaObject.
+export const isSchemaObject = (schema: object): schema is OpenApiType.SchemaObject => {
+  return typeof schema === 'object';
+};
+
+// Guard to check if the schema is an OpenApiType.ArraySchemaObject.
+export const isArraySchemaObject = (schema: object): schema is OpenApiType.ArraySchemaObject => {
+  return typeof schema === 'object' && 'items' in schema;
+};
+
+// Guard to check if the response is an OpenApiType.ResponseObject.
+export const isReponseObject = (response: object): response is OpenApiType.ResponseObject => {
+  return typeof response === 'object';
+};
+
+// Guard to check if example is an Example object
+export const isExampleObject = (example: unknown): example is OpenApiType.ExampleObject => {
+  return !!example && typeof example === 'object' && 'value' in example;
+};
diff --git a/src/.vuepress/theme/client/utils/openApiHelpers.ts b/src/.vuepress/theme/client/utils/openApiHelpers.ts
new file mode 100644
index 00000000..c82f0901
--- /dev/null
+++ b/src/.vuepress/theme/client/utils/openApiHelpers.ts
@@ -0,0 +1,50 @@
+import {type OpenAPIV3_1 as OpenApiType} from 'openapi-types';
+import {get} from 'lodash-es';
+
+type RecursiveType = {
+  [key: string]: unknown | RecursiveType | RecursiveType[];
+};
+
+/**
+ * Formats an example object, array or primitive to a string
+ */
+export function formatExample(example: unknown): string {
+  const spacing = 2;
+
+  return JSON.stringify(example, null, spacing);
+}
+
+/**
+ * Resolves all $ref keys in the document with their corresponding values
+ */
+export function resolveRefs(document: OpenApiType.Document): OpenApiType.Document {
+  const resolvedDocument = {...document};
+
+  function resolveRefsRecursive(obj: RecursiveType) {
+    if (Array.isArray(obj)) {
+      for (const item of obj) {
+        resolveRefsRecursive(item);
+      }
+    } else if (typeof obj === 'object') {
+      for (const key in obj) {
+        if (key === '$ref') {
+          const lookup = obj[key] as string;
+          // Lookup is a string that defines the path to the referenced object like '#/components/schemas/Example'
+          const path = lookup.split('/').slice(1);
+          // Find the referenced object in the document using lodash's get function
+          const referencedObject = get(resolvedDocument, path);
+          // Remove the $ref: '...' key from the object and replace it with the referenced object itself
+          obj = Object.assign(obj, referencedObject);
+        } else if (typeof obj[key] === 'object' || Array.isArray(obj[key])) {
+          const guarded = obj[key] as RecursiveType;
+          // If the value is an object or an array, recursively call this function
+          resolveRefsRecursive(guarded);
+        }
+      }
+    }
+  }
+
+  resolveRefsRecursive(resolvedDocument);
+
+  return resolvedDocument;
+}
diff --git a/yarn.lock b/yarn.lock
index 5da7bf24..4892c7e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1002,6 +1002,7 @@ __metadata:
     markdown-it-multimd-table: ^4.1.3
     mock-fs: ^5.1.2
     only-allow: ^1.1.1
+    openapi-types: ^12.1.3
     plop: ^4.0.0
     postcss-import: ^15.1.0
     prettier: ^2.8.8
@@ -1015,6 +1016,7 @@ __metadata:
     vitest: ^0.34.6
     vue-recaptcha: ^2.0.2
     vuepress: 2.0.0-beta.67
+    yaml: ^2.4.1
   languageName: unknown
   linkType: soft
 
@@ -7480,6 +7482,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"openapi-types@npm:^12.1.3":
+  version: 12.1.3
+  resolution: "openapi-types@npm:12.1.3"
+  checksum: 7fa5547f87a58d2aa0eba6e91d396f42d7d31bc3ae140e61b5d60b47d2fd068b48776f42407d5a8da7280cf31195aa128c2fc285e8bb871d1105edee5647a0bb
+  languageName: node
+  linkType: hard
+
 "opener@npm:^1.5.1":
   version: 1.5.2
   resolution: "opener@npm:1.5.2"
@@ -11267,6 +11276,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "yaml@npm:2.4.1"
+  bin:
+    yaml: bin.mjs
+  checksum: 4c391d07a5d5e935e058babb71026c9cdc9a6fd889e35dd91b53cfb0a12691b67c6c5c740858e71345fef18cd9c13c554a6dda9196f59820d769d94041badb0b
+  languageName: node
+  linkType: hard
+
 "yargs-parser@npm:^20.2.2":
   version: 20.2.9
   resolution: "yargs-parser@npm:20.2.9"