diff --git a/docsite/docs/configuration/configuration.mdx b/docsite/docs/configuration/configuration.mdx
index 01613e60..99030fb0 100644
--- a/docsite/docs/configuration/configuration.mdx
+++ b/docsite/docs/configuration/configuration.mdx
@@ -8,6 +8,7 @@ import TabItem from '@theme/TabItem';
 import CodeBlock from '@theme/CodeBlock';
 import SchemaLink from "../../src/components/SchemaLink";
 import AIOExample from "../../src/components/AIOExample";
+import FileExample from "../../src/components/FileExample";
 
 import AIOConfig from '!!raw-loader!../../../config/config.json.example';
 import AzuracastConfig from '!!raw-loader!../../../config/azuracast.json.example';
@@ -685,7 +686,7 @@ See the [Last.fm (Client)](#lastfm) setup for registration instructions.
 
             <summary>Example</summary>
 
-            <CodeBlock title="CONFIG_DIR/lastfm.json" language="json5">{LastfmConfig}</CodeBlock>
+            <FileExample title="CONFIG_DIR/lastfm.json" data={LastfmConfig}/>
 
         </details>
 
@@ -786,7 +787,7 @@ For Koito, [create an API Key from your Account page.](https://koito.io/guides/s
 
             <summary>Example</summary>
 
-            <CodeBlock title="CONFIG_DIR/listenbrainz.json" language="json5">{ListenbrainzConfig}</CodeBlock>
+            <FileExample title="CONFIG_DIR/listenbrainz.json" data={ListenbrainzConfig}/>
 
         </details>
 
@@ -2346,7 +2347,7 @@ or replace `localhost:9078` with your own base URL
 
             <summary>Example</summary>
 
-            <CodeBlock title="CONFIG_DIR/lastfm.json" language="json5">{LastfmConfig}</CodeBlock>
+            <FileExample title="CONFIG_DIR/lastfm.json" data={LastfmConfig} client/>
 
         </details>
 
@@ -2357,7 +2358,7 @@ or replace `localhost:9078` with your own base URL
 
             <summary>Example</summary>
 
-            <AIOExample client data={LastfmConfig} name="lastfm"/>
+            <AIOExample client data={LastfmConfig} name="lastfm" client/>
 
         </details>
 
@@ -2389,7 +2390,7 @@ For Koito, [create an API Key from your Account page.](https://koito.io/guides/s
 
             <summary>Example</summary>
 
-            <CodeBlock title="CONFIG_DIR/listenbrainz.json" language="json5">{ListenbrainzConfig}</CodeBlock>
+            <FileExample title="CONFIG_DIR/listenbrainz.json" data={ListenbrainzConfig} client/>
 
         </details>
 
@@ -2400,7 +2401,7 @@ For Koito, [create an API Key from your Account page.](https://koito.io/guides/s
 
             <summary>Example</summary>
 
-            <AIOExample client data={ListenbrainzConfig} name="listenbrainz"/>
+            <AIOExample client data={ListenbrainzConfig} name="listenbrainz" client/>
 
         </details>
 
diff --git a/docsite/src/components/AIOExample.tsx b/docsite/src/components/AIOExample.tsx
index 7fd0b572..bb2194f0 100644
--- a/docsite/src/components/AIOExample.tsx
+++ b/docsite/src/components/AIOExample.tsx
@@ -23,7 +23,7 @@ const AIOExample = (props: AIOProps) => {
     let configObj;
     // eslint-disable-next-line prefer-const
     try {
-        configObj = json5.parse(data);
+        configObj = json5.parse(data) as object[];
     } catch (e) {
         console.error(e);
         return <Admonition type="danger" title="Unexpected Error">
@@ -31,9 +31,12 @@ const AIOExample = (props: AIOProps) => {
             <CodeBlock>{e.message}</CodeBlock>
         </Admonition>
     }
-    configObj[0].type = name;
     const configType = client ? 'clients' : 'sources';
 
+    configObj = configObj.filter(x => x.configureAs === undefined || x.configureAs === (client ? 'client' : 'source'));
+    configObj = configObj.map(x => ({...x, type: name}));
+
+
     const aio = {[configType]: configObj};
     return <CodeBlock title="CONFIG_DIR/config.json" language="json5">{JSON.stringify(aio, null, 2)}</CodeBlock>
 }
diff --git a/docsite/src/components/FileExample.tsx b/docsite/src/components/FileExample.tsx
new file mode 100644
index 00000000..0a81fbb0
--- /dev/null
+++ b/docsite/src/components/FileExample.tsx
@@ -0,0 +1,49 @@
+import React, { Fragment } from "react"
+import CodeBlock, {Props as CodeBlockProps} from '@theme/CodeBlock';
+import Admonition from '@theme/Admonition';
+import ErrorBoundary from "@docusaurus/ErrorBoundary"
+import Error from "@theme/Error"
+import { Simulate } from "react-dom/test-utils";
+import error = Simulate.error;
+import json5 from 'json5';
+
+export interface FileProps extends Omit<CodeBlockProps, 'children'> {
+    data: string
+    client?: boolean
+}
+
+const FileExample = (props: FileProps) => {
+    const {
+        data,
+        client = false,
+        ...rest
+    } = props;
+
+    let configObj;
+    // eslint-disable-next-line prefer-const
+    try {
+        configObj = json5.parse(data) as object[];
+    } catch (e) {
+        console.error(e);
+        return <Admonition type="danger" title="Unexpected Error">
+            <p>Example component crashed because of error!</p>
+            <CodeBlock>{e.message}</CodeBlock>
+        </Admonition>
+    }
+
+    configObj = configObj.filter(x => x.configureAs === undefined || x.configureAs === (client ? 'client' : 'source'));
+
+    return <CodeBlock {...rest} language="json5">{JSON.stringify(configObj, null, 2)}</CodeBlock>
+}
+
+const WrappedFileExample = (props: FileProps) => {
+    return <ErrorBoundary
+        fallback={({error}) => (
+            <div>
+                <p>Example component crashed because of error: {error.message}.</p>
+            </div>
+        )}
+    ><FileExample {...props} /></ErrorBoundary>
+}
+
+export default WrappedFileExample;