diff --git a/.barrelsby.json b/.barrelsby.json
index c836672e..18d85e3e 100644
--- a/.barrelsby.json
+++ b/.barrelsby.json
@@ -2,7 +2,7 @@
   "directory": "src",
   "delete": true,
   "flat": true,
-  "include": ["components", "utils"],
+  "include": ["components", "plugins", "utils"],
   "exclude": [".*\\.test\\.ts$"],
   "singleQuotes": true
 }
diff --git a/src/components/features/markdown-example/markdown-example.component.ts b/src/components/features/markdown-example/markdown-example.component.ts
index ea186182..91c6314b 100644
--- a/src/components/features/markdown-example/markdown-example.component.ts
+++ b/src/components/features/markdown-example/markdown-example.component.ts
@@ -52,7 +52,7 @@ export class MarkdownExample extends ColorSchemable(LitElement) {
 
   protected override render(): TemplateResult {
     return html`
-      <wcp-tabs .tabs="${MARKDOWN_EXAMPLE_TABS}" active-tab="${ifDefined(this.#config.initialCodePreviewTab)}">
+      <wcp-tabs .tabs="${MARKDOWN_EXAMPLE_TABS}" active-tab="${ifDefined(this.#config?.initialCodePreviewTab)}">
         ${map(Object.keys(MARKDOWN_EXAMPLE_TABS), (tab) => html`<slot name="${tab}" slot="${tab}"></slot>`)}
       </wcp-tabs>
     `;
diff --git a/src/components/features/preview/preview.component.ts b/src/components/features/preview/preview.component.ts
index 14e0231d..22556258 100644
--- a/src/components/features/preview/preview.component.ts
+++ b/src/components/features/preview/preview.component.ts
@@ -72,7 +72,7 @@ export class Preview extends ColorSchemable(LitElement) {
         () => html`
           <nav>
             ${map(
-              this.#config.previewPlugins ?? [],
+              this.#config?.previewPlugins ?? [],
               (plugin, index) => html`
                 ${when(index > 0, () => html`<hr />`)} ${staticHtml`
                   <${unsafeStatic(plugin)}
diff --git a/src/components/features/stage/stage.component.ts b/src/components/features/stage/stage.component.ts
index 8b19007c..6a36ee1b 100644
--- a/src/components/features/stage/stage.component.ts
+++ b/src/components/features/stage/stage.component.ts
@@ -1,11 +1,12 @@
 import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
-import { customElement, eventOptions, property, state } from 'lit/decorators.js';
+import { customElement, eventOptions, property, queryAssignedElements, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { map } from 'lit/directives/map.js';
 import { when } from 'lit/directives/when.js';
 
 import { ColorSchemable } from '@/mixins/color-schemable.mixin.js';
-import { type StagePlugin, findAllPlugins } from '@/utils/plugin.utils.js';
+import { log } from '@/utils/log.utils.js';
+import { isStagePlugin, type StagePlugin } from '@/utils/plugin.utils.js';
 
 import styles from './stage.component.scss';
 
@@ -34,6 +35,9 @@ import styles from './stage.component.scss';
 export class Stage extends ColorSchemable(LitElement) {
   static override readonly styles = unsafeCSS(styles);
 
+  @queryAssignedElements()
+  private readonly assignedPlugins!: HTMLElement[];
+
   @state()
   private _plugins: StagePlugin[] = [];
 
@@ -54,9 +58,9 @@ export class Stage extends ColorSchemable(LitElement) {
   }
 
   @eventOptions({ passive: true })
-  protected handleSlotChange(event: Event) {
-    const slot = event.target as HTMLSlotElement;
-    const plugins = findAllPlugins(slot);
+  protected handleSlotChange() {
+    const plugins = this.assignedPlugins.filter(isStagePlugin);
+    log.info(`Found ${plugins.length} stage plugins.`)
 
     // once the plugins are slotted into their respective targets, the slot
     // change listener may be called again with an empty result set
diff --git a/src/components/features/toggle-color-scheme/README.md b/src/components/features/toggle-color-scheme/README.md
index c5d64bc8..4ed1b33e 100644
--- a/src/components/features/toggle-color-scheme/README.md
+++ b/src/components/features/toggle-color-scheme/README.md
@@ -15,9 +15,3 @@ Shows a button to toggle the desired color-scheme.
 | Method              | Type       |
 |---------------------|------------|
 | `handleButtonClick` | `(): void` |
-
-## Events
-
-| Event                     |
-|---------------------------|
-| `wcp-color-scheme:toggle` |
diff --git a/src/components/features/toggle-color-scheme/toggle-color-scheme.component.ts b/src/components/features/toggle-color-scheme/toggle-color-scheme.component.ts
index 0ef68d33..19045144 100644
--- a/src/components/features/toggle-color-scheme/toggle-color-scheme.component.ts
+++ b/src/components/features/toggle-color-scheme/toggle-color-scheme.component.ts
@@ -2,6 +2,7 @@ import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement, eventOptions } from 'lit/decorators.js';
 
 import { ColorSchemable } from '@/mixins/color-schemable.mixin.js';
+import { persist } from '@/utils/state.utils.js';
 
 import styles from './toggle-color-scheme.component.scss';
 
@@ -19,9 +20,8 @@ export class ToggleColorScheme extends ColorSchemable(LitElement) {
 
   @eventOptions({ passive: true })
   handleButtonClick() {
-    const detail = this.colorScheme === 'dark' ? 'light' : 'dark';
-    const event = new CustomEvent('wcp-color-scheme:toggle', { detail });
-    window.dispatchEvent(event);
+    const colorScheme = this.colorScheme === 'dark' ? 'light' : 'dark';
+    persist('color-scheme', colorScheme);
   }
 
   protected override render(): TemplateResult {
diff --git a/src/components/features/toggle-sidebar/README.md b/src/components/features/toggle-sidebar/README.md
index ab90d5cc..1b1936f7 100644
--- a/src/components/features/toggle-sidebar/README.md
+++ b/src/components/features/toggle-sidebar/README.md
@@ -13,9 +13,3 @@ Shows a button to toggle sidebar.
 | Method              | Type       |
 |---------------------|------------|
 | `handleButtonClick` | `(): void` |
-
-## Events
-
-| Event              |
-|--------------------|
-| `wcp-aside:toggle` |
diff --git a/src/components/features/toggle-sidebar/toggle-sidebar.component.ts b/src/components/features/toggle-sidebar/toggle-sidebar.component.ts
index 6499a1d5..f4e4032f 100644
--- a/src/components/features/toggle-sidebar/toggle-sidebar.component.ts
+++ b/src/components/features/toggle-sidebar/toggle-sidebar.component.ts
@@ -1,6 +1,8 @@
 import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement, eventOptions } from 'lit/decorators.js';
 
+import { persist, read } from '@/utils/state.utils.js';
+
 import styles from './toggle-sidebar.component.scss';
 
 /**
@@ -17,7 +19,7 @@ export class ToggleSidebar extends LitElement {
 
   @eventOptions({ passive: true })
   handleButtonClick() {
-    window.dispatchEvent(new CustomEvent('wcp-aside:toggle'));
+    persist('aside-visible', !read('aside-visible'));
   }
 
   protected override render(): TemplateResult {
diff --git a/src/components/layout/aside/README.md b/src/components/layout/aside/README.md
index b3e16a62..38684589 100644
--- a/src/components/layout/aside/README.md
+++ b/src/components/layout/aside/README.md
@@ -15,15 +15,14 @@ window.dispatchEvent(new CustomEvent('wcp-aside:toggle', { detail: true }));
 
 | Property            | Attribute | Type      | Default                                          | Description                                      |
 |---------------------|-----------|-----------|--------------------------------------------------|--------------------------------------------------|
-| `hidden`            | `hidden`  | `boolean` | false                                            | Used to toggle the width of the aside bar        |
-| `listenAsideToggle` |           |           | "(({ detail }: CustomEvent<boolean \| null>) => {\n    this.hidden = detail ?? !this.hidden;\n    this.emitToggled();\n  }).bind(this)" |                                                  |
+| `hidden`            | `hidden`  | `boolean` | true                                             | Used to toggle the width of the aside bar        |
+| `listenAsideToggle` |           |           | "(({ detail }: CustomEvent<boolean>) => {\n    this.hidden = !detail;\n  }).bind(this)" |                                                  |
 | `role`              | `role`    | `string`  | "complementary"                                  | Presets the aria role to `complementary` as we do not use te aside element directly |
 
 ## Methods
 
 | Method              | Type       |
 |---------------------|------------|
-| `emitToggled`       | `(): void` |
 | `handleButtonClick` | `(): void` |
 
 ## Events
diff --git a/src/components/layout/aside/aside.component.ts b/src/components/layout/aside/aside.component.ts
index d23a0768..1b535910 100644
--- a/src/components/layout/aside/aside.component.ts
+++ b/src/components/layout/aside/aside.component.ts
@@ -2,6 +2,7 @@ import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement, eventOptions, property } from 'lit/decorators.js';
 
 import { ColorSchemable } from '@/mixins/color-schemable.mixin.js';
+import { persist, read } from '@/utils/state.utils.js';
 
 import styles from './aside.component.scss';
 
@@ -38,7 +39,7 @@ export class Aside extends ColorSchemable(LitElement) {
    * Used to toggle the width of the aside bar
    */
   @property({ type: Boolean, reflect: true })
-  override hidden = false;
+  override hidden = !read('aside-visible');
 
   /**
    * Presets the aria role to `complementary` as we do not use te aside element directly
@@ -47,35 +48,23 @@ export class Aside extends ColorSchemable(LitElement) {
   @property({ type: String, reflect: true })
   override role = 'complementary';
 
-  emitToggled() {
-    const event = new CustomEvent('wcp-aside:toggled', {
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-      detail: this.hidden,
-    });
-    this.dispatchEvent(event);
-  }
-
   @eventOptions({ passive: true })
   handleButtonClick() {
-    this.hidden = true;
-    this.emitToggled();
+    persist('aside-visible', false);
   }
 
-  listenAsideToggle = (({ detail }: CustomEvent<boolean | null>) => {
-    this.hidden = detail ?? !this.hidden;
-    this.emitToggled();
+  listenAsideToggle = (({ detail }: CustomEvent<boolean>) => {
+    this.hidden = !detail;
   }).bind(this);
 
   override connectedCallback() {
     super.connectedCallback();
-    window.addEventListener('wcp-aside:toggle', this.listenAsideToggle, false);
+    window.addEventListener('wcp-state-changed:aside-visible', this.listenAsideToggle, false);
   }
 
   override disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener('wcp-aside:toggle', this.listenAsideToggle, false);
+    window.removeEventListener('wcp-state-changed:aside-visible', this.listenAsideToggle, false);
   }
 
   protected override render(): TemplateResult {
@@ -94,11 +83,8 @@ export class Aside extends ColorSchemable(LitElement) {
 }
 
 declare global {
-  interface WindowEventMap {
-    'wcp-aside:toggle': CustomEvent<boolean | null>;
-  }
-  interface HTMLElementEventMap {
-    'wcp-aside:toggled': CustomEvent<boolean>;
+  interface State {
+    ['aside-visible']: boolean;
   }
   interface HTMLElementTagNameMap {
     'wcp-aside': Aside;
diff --git a/src/components/layout/layout/README.md b/src/components/layout/layout/README.md
index 7da67416..87873287 100644
--- a/src/components/layout/layout/README.md
+++ b/src/components/layout/layout/README.md
@@ -1,5 +1,7 @@
 # wcp-layout
 
+**Mixins:** ColorSchemable
+
 ## Example
 
 ```html
diff --git a/src/components/layout/layout/layout.component.scss b/src/components/layout/layout/layout.component.scss
index 3a239cf8..c0d7402d 100644
--- a/src/components/layout/layout/layout.component.scss
+++ b/src/components/layout/layout/layout.component.scss
@@ -1,9 +1,28 @@
 @use '@/styles/utils' as utils;
 
+// prettier-ignore
+:host {
+  ---wcp-layout-dark-background: var(--wcp-layout-dark-background, var(--wcp-color-blue-17));
+  ---wcp-layout-dark-color: var(--wcp-layout-dark-color, var(--wcp-color-grey-96));
+
+  ---wcp-layout-light-background: var(--wcp-layout-light-background, var(--wcp-color-blue-80));
+  ---wcp-layout-light-color: var(--wcp-layout-light-color, var(--wcp-color-grey-96));
+}
+
+:host {
+  @include utils.color-scheme() using ($color-scheme) {
+    ---wcp-layout-background: var(---wcp-layout-#{$color-scheme}-background);
+    ---wcp-layout-color: var(---wcp-layout-#{$color-scheme}-color);
+  }
+}
+
 :host {
   display: flex;
   flex-direction: row;
 
   height: 100%;
   overflow: hidden;
+
+  background-color: var(---wcp-layout-background);
+  color: var(---wcp-layout-color);
 }
diff --git a/src/components/layout/layout/layout.component.ts b/src/components/layout/layout/layout.component.ts
index 2ea1464b..449a5c90 100644
--- a/src/components/layout/layout/layout.component.ts
+++ b/src/components/layout/layout/layout.component.ts
@@ -1,6 +1,8 @@
 import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
+import { ColorSchemable } from '@/mixins/color-schemable.mixin.js';
+
 import styles from './layout.component.scss';
 
 /**
@@ -17,7 +19,7 @@ import styles from './layout.component.scss';
  * @slot - Receives the content of the main section
  */
 @customElement('wcp-layout')
-export class Layout extends LitElement {
+export class Layout extends ColorSchemable(LitElement) {
   static override readonly styles = unsafeCSS(styles);
 
   protected override render(): TemplateResult {
diff --git a/src/components/root/README.md b/src/components/root/README.md
index bc1a25f5..af7a3a72 100644
--- a/src/components/root/README.md
+++ b/src/components/root/README.md
@@ -1,22 +1,20 @@
 # wcp-root
 
-**Mixins:** ColorSchemable
-
 ## Properties
 
-| Property          | Attribute      | Modifiers | Type                  | Default     | Description                                      |
-|-------------------|----------------|-----------|-----------------------|-------------|--------------------------------------------------|
-| `configUrl`       | `config-url`   |           | `string \| undefined` |             | Allows to set a url to load a config file from.  |
-| `inline`          | `inline`       |           | `boolean`             | false       | Flags the component to be displayed inline and not standalone. Requires the surrounding<br />layout to provide the necessary styles like for any other block element. |
-| `manifestUrl`     | `manifest-url` |           | `string`              |             | Defines the location of the custom element manifest file. |
-| `navigationItems` |                |           |                       | "new Map()" |                                                  |
-| `navigationRef`   |                | readonly  |                       |             |                                                  |
+| Property        | Attribute      | Modifiers | Type                  | Default | Description                                      |
+|-----------------|----------------|-----------|-----------------------|---------|--------------------------------------------------|
+| `configUrl`     | `config-url`   |           | `string \| undefined` |         | Allows to set a url to load a config file from.  |
+| `inline`        | `inline`       |           | `boolean`             | false   | Flags the component to be displayed inline and not standalone. Requires the surrounding<br />layout to provide the necessary styles like for any other block element. |
+| `manifestUrl`   | `manifest-url` |           | `string`              |         | Defines the location of the custom element manifest file. |
+| `navigationRef` |                | readonly  |                       |         |                                                  |
 
 ## Methods
 
-| Method              | Type                      |
-|---------------------|---------------------------|
-| `handleSearchInput` | `({ detail }: any): void` |
+| Method                      | Type                      |
+|-----------------------------|---------------------------|
+| `handleSearchInput`         | `({ detail }: any): void` |
+| `handleSplashTransitionEnd` | `(event: any): void`      |
 
 ## Events
 
diff --git a/src/components/root/root-splash/README.md b/src/components/root/root-splash/README.md
new file mode 100644
index 00000000..0bca0be6
--- /dev/null
+++ b/src/components/root/root-splash/README.md
@@ -0,0 +1,32 @@
+# wcp-root-splash
+
+Shows a splash screen whilst initializing the application.
+
+## Example
+
+# Basic usage
+
+```html
+<wcp-root-splash>Loading...</wcp-root-splash>
+```
+
+## Properties
+
+| Property | Type      | Description                                      |
+|----------|-----------|--------------------------------------------------|
+| `hidden` | `boolean` | Use the global hidden attribute to fade out the splash screen. |
+
+## Slots
+
+| Name | Description                                      |
+|------|--------------------------------------------------|
+|      | The text content to be displayed in the splash screen. |
+
+## CSS Custom Properties
+
+| Property                                   | Description                                      |
+|--------------------------------------------|--------------------------------------------------|
+| `--wcp-root-splash-dark-background-color`  | The background color of the splash screen in dark mode. |
+| `--wcp-root-splash-dark-color`             | The text color of the splash screen in dark mode. |
+| `--wcp-root-splash-light-background-color` | The background color of the splash screen in light mode. |
+| `--wcp-root-splash-light-color`            | The text color of the splash screen in light mode. |
diff --git a/src/components/root/root-splash/root-splash.component.scss b/src/components/root/root-splash/root-splash.component.scss
new file mode 100644
index 00000000..47924d7c
--- /dev/null
+++ b/src/components/root/root-splash/root-splash.component.scss
@@ -0,0 +1,41 @@
+@use '@/styles/utils' as utils;
+
+:host {
+  ---wcp-root-splash-dark-background-color: var(--wcp-root-splash-dark-background-color, var(--wcp-color-blue-17));
+  ---wcp-root-splash-dark-color: var(--wcp-root-splash-dark-color, var(--wcp-color-grey-96));
+  ---wcp-root-splash-light-background-color: var(--wcp-root-splash-light-background-color, var(--wcp-color-grey-96));
+  ---wcp-root-splash-light-color: var(--wcp-root-splash-light-color, var(--wcp-color-blue-80));
+
+  @media (prefers-color-scheme: dark) {
+    ---wcp-root-splash-background-color: var(---wcp-root-splash-dark-background-color);
+    ---wcp-root-splash-color: var(---wcp-root-splash-dark-color);
+  }
+
+  @media (prefers-color-scheme: light) {
+    ---wcp-root-splash-background-color: var(---wcp-root-splash-light-background-color);
+    ---wcp-root-splash-color: var(---wcp-root-splash-light-color);
+  }
+}
+
+:host {
+  position: fixed;
+  inset: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  background-color: var(---wcp-root-splash-background-color);
+  color: var(---wcp-root-splash-color);
+  font: var(--wcp-font-family);
+
+  transition: opacity 1s ease-in-out;
+
+  // prevent user interaction with splash screen
+  pointer-events: none;
+}
+
+:host([hidden]) {
+  opacity: 0;
+}
diff --git a/src/components/root/root-splash/root-splash.component.ts b/src/components/root/root-splash/root-splash.component.ts
new file mode 100644
index 00000000..afedc0fc
--- /dev/null
+++ b/src/components/root/root-splash/root-splash.component.ts
@@ -0,0 +1,38 @@
+import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import styles from './root-splash.component.scss';
+
+/**
+ * Shows a splash screen whilst initializing the application.
+ * 
+ * @property {boolean} [hidden] - Use the global hidden attribute to fade out the splash screen.
+ *
+ * @cssprop --wcp-root-splash-dark-background-color - The background color of the splash screen in dark mode.
+ * @cssprop --wcp-root-splash-dark-color - The text color of the splash screen in dark mode.
+ * @cssprop --wcp-root-splash-light-background-color - The background color of the splash screen in light mode.
+ * @cssprop --wcp-root-splash-light-color - The text color of the splash screen in light mode.
+ * 
+ * @slot {Loading...} - The text content to be displayed in the splash screen.
+ * 
+ * @example
+ * # Basic usage
+ * 
+ * ```html
+ * <wcp-root-splash>Loading...</wcp-root-splash>
+ * ```
+ */
+@customElement('wcp-root-splash')
+export class RootSplash extends LitElement {
+  static override readonly styles = unsafeCSS(styles);
+
+  protected override render(): TemplateResult {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wcp-root-splash': RootSplash;
+  }
+}
diff --git a/src/components/root/root.component.scss b/src/components/root/root.component.scss
index fb2b8885..e917904d 100644
--- a/src/components/root/root.component.scss
+++ b/src/components/root/root.component.scss
@@ -1,32 +1,14 @@
 @use '@/styles/utils' as utils;
 @use '@/styles/defaults';
 
-// host (wcp-root) specific custom properties
-// prettier-ignore
-:host {
-  ---wcp-root-dark-background: var(--wcp-root-dark-background, var(--wcp-color-blue-17));
-  ---wcp-root-dark-color: var(--wcp-root-dark-color, var(--wcp-color-grey-96));
-
-  ---wcp-root-light-background: var(--wcp-root-light-background, var(--wcp-color-blue-80));
-  ---wcp-root-light-color: var(--wcp-root-light-color, var(--wcp-color-grey-96));
-}
-
 :host {
   display: block;
 
-  background-color: var(---wcp-root-background);
-  color: var(---wcp-root-color);
-
   font-family: var(--wcp-font-family);
   font-feature-settings: normal;
   font-size: 15px;
   line-height: 1.3;
 
-  @include utils.color-scheme() using ($color-scheme) {
-    ---wcp-root-background: var(---wcp-root-#{$color-scheme}-background);
-    ---wcp-root-color: var(---wcp-root-#{$color-scheme}-color);
-  }
-
   @include utils.breakpoint(sm) {
     font-size: 13px;
   }
@@ -55,8 +37,8 @@
 wcp-topbar {
   position: sticky;
   inset: 0 0 auto;
+}
 
-  @include utils.color-scheme() using ($color-scheme) {
-    background: var(---wcp-root-#{$color-scheme}-background);
-  }
+wcp-root-splash {
+  z-index: 10;
 }
diff --git a/src/components/root/root.component.ts b/src/components/root/root.component.ts
index 921d25fe..0286a030 100644
--- a/src/components/root/root.component.ts
+++ b/src/components/root/root.component.ts
@@ -1,21 +1,23 @@
 import type { CustomElementDeclaration } from 'custom-elements-manifest/schema.d.js';
 
 import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
+import { unsafeStatic, html as staticHtml } from 'lit/static-html.js';
 import { customElement, eventOptions, property, query, state } from 'lit/decorators.js';
+
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { map } from 'lit/directives/map.js';
 import { when } from 'lit/directives/when.js';
 
-import { ColorSchemable } from '@/mixins/color-schemable.mixin.js';
 import { getConfig, loadConfig } from '@/utils/config.utils.js';
+import { loadManifest } from '@/utils/manifest.utils.js';
 import { type GroupedNavigationItems, prepareNavigation } from '@/utils/navigation.utils.js';
-import { Routable } from '@/mixins/routable.mixin.js';
+import { Router } from '@/utils/router.utils.js';
 
 import type { RootNavigation } from './root-navigation/root-navigation.component.js';
 import { prepareRoutes } from './root.routes.js';
 
 import logo from '@/assets/icons/logo.svg';
 import styles from './root.component.scss';
-import { loadManifest } from '../../utils/manifest.utils.js';
 
 /**
  * @slot logo - Allows setting a custom logo to be displayed in the title.
@@ -32,14 +34,19 @@ import { loadManifest } from '../../utils/manifest.utils.js';
  * @emits wcp-root:active-element-changed - Fired when the active element changes. Carries the declaration of the new active element with it.
  */
 @customElement('wcp-root')
-export class Root extends Routable()(ColorSchemable(LitElement)) {
+export class Root extends LitElement {
   static override readonly styles = unsafeCSS(styles);
 
+  readonly #router = new Router(this);
+
   @state()
   private ready = false;
 
   @state()
-  navigationItems: GroupedNavigationItems = new Map();
+  private topbarPlugins: string[] = [];
+
+  @state()
+  private navigationItems: GroupedNavigationItems = new Map();
 
   @query('wcp-root-navigation')
   readonly navigationRef!: RootNavigation;
@@ -68,7 +75,16 @@ export class Root extends Routable()(ColorSchemable(LitElement)) {
     this.navigationRef.searchTerms = detail.toLowerCase().split(' ');
   }
 
+  @eventOptions({ passive: true })
+  handleSplashTransitionEnd(event: Event) {
+    const splash = event.target as HTMLElement;
+    splash.remove();
+  }
+
   override async connectedCallback() {
+    // do not block the render loop to show some loading indicator
+    super.connectedCallback();
+
     // once connected, load the config and the manifest
     const config = await loadConfig(this.configUrl);
     const manifest = await loadManifest(this.manifestUrl, config.excludeElements);
@@ -76,23 +92,33 @@ export class Root extends Routable()(ColorSchemable(LitElement)) {
     // set the document title and prepare the navigation
     document.title = config.labels.title;
     this.navigationItems = prepareNavigation(manifest, config);
+    this.topbarPlugins = config.topbarPlugins ?? [];
 
     // prepare and set routes
     const routes = prepareRoutes();
-    this.router.registerRoutes(routes);
+    this.#router.registerRoutes(routes);
+    this.#router.connect();
 
     // we're finished loading
     this.ready = true;
-    super.connectedCallback();
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#router.disconnect();
   }
 
   protected override render(): TemplateResult {
     return html`
+      <wcp-root-splash ?hidden="${this.ready}" @transitionend="${this.handleSplashTransitionEnd}">
+        Loading...
+      </wcp-root-splash>
+
       ${when(
         this.ready,
         () => html`
           <wcp-layout>
-            <wcp-title slot="header" title="${ifDefined(getConfig().labels.title)}">
+            <wcp-title slot="header" title="${ifDefined(getConfig()?.labels.title)}">
               <slot name="logo" slot="logo">
                 <img src="${logo}" height="20px" />
               </slot>
@@ -106,18 +132,17 @@ export class Root extends Routable()(ColorSchemable(LitElement)) {
             <wcp-root-navigation
               slot="aside"
               min-search-length="2"
-              current-path="${ifDefined(this.router.currentPath)}"
-              empty-message="${ifDefined(getConfig().labels.emptyNavigation)}"
+              current-path="${ifDefined(this.#router.currentPath)}"
+              empty-message="${ifDefined(getConfig()?.labels.emptyNavigation)}"
               .items="${this.navigationItems}"
             ></wcp-root-navigation>
 
             <wcp-topbar>
-              <wcp-toggle-sidebar></wcp-toggle-sidebar>
-              <wcp-toggle-color-scheme></wcp-toggle-color-scheme>
-              <slot name="preview-controls"></slot>
+              ${map(this.topbarPlugins, (plugin) => staticHtml`<${unsafeStatic(plugin)}></${unsafeStatic(plugin)}>`)}
+              <slot name="topbar-plugins"></slot>
             </wcp-topbar>
 
-            <slot name="preview-frame">${this.router.outlet()}</slot>
+            <slot name="stage">${this.#router.outlet()}</slot>
           </wcp-layout>
         `
       )}
diff --git a/src/components/root/root.routes.ts b/src/components/root/root.routes.ts
index d1a7978c..355e8fae 100644
--- a/src/components/root/root.routes.ts
+++ b/src/components/root/root.routes.ts
@@ -70,7 +70,7 @@ export const prepareRoutes = (): Route[] => [
       // everything okay here, just go on
       return true;
     },
-    render: ({ tagName = '', pluginName = window.wcp.config.initialPreviewTab, pluginData }) => {
+    render: ({ tagName = '', pluginName = window.wcp.config.initialStageTab, pluginData }) => {
       return html`
         <wcp-stage
           active-plugin="${ifDefined(pluginName)}"
@@ -78,14 +78,14 @@ export const prepareRoutes = (): Route[] => [
             Router.navigate('/element', tagName, pluginName)}"
         >
           ${map(
-            window.wcp.config.previewFramePlugins ?? [],
-            (previewFramePlugin) => withStatic(html)`
-            <${unsafeStatic(previewFramePlugin)}
+            window.wcp.config.stagePlugins ?? [],
+            (stagePlugin) => withStatic(html)`
+            <${unsafeStatic(stagePlugin)}
               preview-tag-name="${tagName}"
               .data="${ifDefined(pluginData)}"
               @wcp-stage-plugin:data-change="${({ detail: pluginData }: CustomEvent<string>) =>
                 Router.navigate('/element', tagName, pluginName, pluginData)}"
-            ></${unsafeStatic(previewFramePlugin)}>
+            ></${unsafeStatic(stagePlugin)}>
           `
           )}
         </wcp-stage>
diff --git a/src/config.json b/src/config.json
index 0598024b..27e3c6f1 100644
--- a/src/config.json
+++ b/src/config.json
@@ -2,6 +2,7 @@
   "$schema": "./config.schema.json",
   "excludeElements": ["wcp-root"],
   "initialActiveElement": "wcp-button",
+  "statePersistence": "local",
   "additionalReadmes": [
     {
       "name": "Web Component Preview",
diff --git a/src/index.ts b/src/index.ts
index 367c7019..70d6527b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -25,19 +25,10 @@ export * from './components/forms/input-text/input-text.component.js';
 export * from './components/layout/aside/aside.component.js';
 export * from './components/layout/layout/layout.component.js';
 export * from './components/layout/main/main.component.js';
-export * from './components/plugins/preview-editor-link/preview-editor-link.plugin.js';
-export * from './components/plugins/preview-editor-link/preview-editor-link.utils.js';
-export * from './components/plugins/preview-editor-link/preview-editor-link-hint/preview-editor-link-hint.component.js';
-export * from './components/plugins/preview-simulate-viewports/preview-simulate-viewports.plugin.js';
-export * from './components/plugins/stage-editor/stage-editor.plugin.js';
-export * from './components/plugins/stage-editor/stage-editor.utils.js';
-export * from './components/plugins/stage-editor/stage-editor-controls/stage-editor-controls.component.js';
-export * from './components/plugins/stage-editor/stage-editor-preview/stage-editor-preview.component.js';
-export * from './components/plugins/stage-examples/stage-examples.plugin.js';
-export * from './components/plugins/stage-readme/stage-readme.plugin.js';
 export * from './components/root/root.component.js';
 export * from './components/root/root.routes.js';
 export * from './components/root/root-navigation/root-navigation.component.js';
+export * from './components/root/root-splash/root-splash.component.js';
 export * from './components/ui/button/button.component.js';
 export * from './components/ui/code/code.component.js';
 export * from './components/ui/icon/icon.component.js';
@@ -45,19 +36,30 @@ export * from './components/ui/tabs/tabs.component.js';
 export * from './components/ui/title/title.component.js';
 export * from './mixins/color-schemable.mixin.js';
 export * from './mixins/editable.mixin.js';
-export * from './mixins/routable.mixin.js';
 export * from './parsers/cem/parse.js';
 export * from './parsers/cem/utils.js';
 export * from './parsers/cem/1.0.0/cem-element.js';
 export * from './parsers/cem/1.0.0/cem-field.js';
 export * from './parsers/cem/1.0.0/cem-parser.js';
 export * from './parsers/cem/1.0.0/cem-slot.js';
+export * from './plugins/preview/preview-editor-link/preview-editor-link.plugin.js';
+export * from './plugins/preview/preview-editor-link/preview-editor-link.utils.js';
+export * from './plugins/preview/preview-editor-link/preview-editor-link-hint/preview-editor-link-hint.component.js';
+export * from './plugins/preview/preview-simulate-viewports/preview-simulate-viewports.plugin.js';
+export * from './plugins/stage/stage-editor/stage-editor.plugin.js';
+export * from './plugins/stage/stage-editor/stage-editor.utils.js';
+export * from './plugins/stage/stage-editor/stage-editor-controls/stage-editor-controls.component.js';
+export * from './plugins/stage/stage-editor/stage-editor-preview/stage-editor-preview.component.js';
+export * from './plugins/stage/stage-examples/stage-examples.plugin.js';
+export * from './plugins/stage/stage-readme/stage-readme.plugin.js';
+export * from './plugins/topbar/topbar-preview-editor-link-toggle/topbar-preview-editor-link-toggle.plugin.js';
 export * from './utils/color-scheme.utils.js';
 export * from './utils/compression.utils.js';
 export * from './utils/config.utils.js';
 export * from './utils/debounce.utils.js';
 export * from './utils/dom.utils.js';
 export * from './utils/form.utils.js';
+export * from './utils/log.utils.js';
 export * from './utils/manifest.utils.js';
 export * from './utils/markdown.utils.js';
 export * from './utils/mixin.types.js';
@@ -66,3 +68,4 @@ export * from './utils/parser.types.js';
 export * from './utils/parser.utils.js';
 export * from './utils/plugin.utils.js';
 export * from './utils/router.utils.js';
+export * from './utils/state.utils.js';
diff --git a/src/mixins/routable.mixin.ts b/src/mixins/routable.mixin.ts
deleted file mode 100644
index 3802f3b8..00000000
--- a/src/mixins/routable.mixin.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { LitElement } from 'lit';
-
-import type { Constructor } from '@/utils/mixin.types.js';
-import { type RegisterRoutes, Router } from '@/utils/router.utils.js';
-
-declare class RoutableInterface {
-  router: Router;
-}
-
-// provide a mixin to make a component routable
-export const Routable =
-  (registerRoutes?: RegisterRoutes) =>
-  <T extends Constructor<LitElement>>(superClass: T) => {
-    class RoutableElement extends superClass {
-      /**
-       * @internal - allows access to routing features
-       */
-      router = new Router(this);
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      constructor(...args: any[]) {
-        super(...args);
-
-        // allow setting routes from decorator
-        if (registerRoutes !== undefined) {
-          const routes = registerRoutes(this.router);
-          this.router.registerRoutes(routes);
-        }
-      }
-
-      override connectedCallback() {
-        super.connectedCallback();
-        this.router.connect();
-      }
-
-      override disconnectedCallback() {
-        super.disconnectedCallback();
-        this.router.disconnect();
-      }
-    }
-    return RoutableElement as Constructor<RoutableInterface> & T;
-  };
diff --git a/src/components/plugins/preview-editor-link/README.md b/src/plugins/preview/preview-editor-link/README.md
similarity index 100%
rename from src/components/plugins/preview-editor-link/README.md
rename to src/plugins/preview/preview-editor-link/README.md
diff --git a/src/components/plugins/preview-editor-link/preview-editor-link-hint/README.md b/src/plugins/preview/preview-editor-link/preview-editor-link-hint/README.md
similarity index 100%
rename from src/components/plugins/preview-editor-link/preview-editor-link-hint/README.md
rename to src/plugins/preview/preview-editor-link/preview-editor-link-hint/README.md
diff --git a/src/components/plugins/preview-editor-link/preview-editor-link-hint/preview-editor-link-hint.component.scss b/src/plugins/preview/preview-editor-link/preview-editor-link-hint/preview-editor-link-hint.component.scss
similarity index 100%
rename from src/components/plugins/preview-editor-link/preview-editor-link-hint/preview-editor-link-hint.component.scss
rename to src/plugins/preview/preview-editor-link/preview-editor-link-hint/preview-editor-link-hint.component.scss
diff --git a/src/components/plugins/preview-editor-link/preview-editor-link-hint/preview-editor-link-hint.component.ts b/src/plugins/preview/preview-editor-link/preview-editor-link-hint/preview-editor-link-hint.component.ts
similarity index 100%
rename from src/components/plugins/preview-editor-link/preview-editor-link-hint/preview-editor-link-hint.component.ts
rename to src/plugins/preview/preview-editor-link/preview-editor-link-hint/preview-editor-link-hint.component.ts
diff --git a/src/components/plugins/preview-editor-link/preview-editor-link.plugin.scss b/src/plugins/preview/preview-editor-link/preview-editor-link.plugin.scss
similarity index 100%
rename from src/components/plugins/preview-editor-link/preview-editor-link.plugin.scss
rename to src/plugins/preview/preview-editor-link/preview-editor-link.plugin.scss
diff --git a/src/components/plugins/preview-editor-link/preview-editor-link.plugin.ts b/src/plugins/preview/preview-editor-link/preview-editor-link.plugin.ts
similarity index 79%
rename from src/components/plugins/preview-editor-link/preview-editor-link.plugin.ts
rename to src/plugins/preview/preview-editor-link/preview-editor-link.plugin.ts
index 8fc86b93..347d1920 100644
--- a/src/components/plugins/preview-editor-link/preview-editor-link.plugin.ts
+++ b/src/plugins/preview/preview-editor-link/preview-editor-link.plugin.ts
@@ -7,6 +7,7 @@ import { isDescendantOf } from '@/utils/dom.utils.js';
 import { getManifest } from '@/utils/manifest.utils.js';
 import type { PreviewPlugin } from '@/utils/plugin.utils.js';
 import { Router } from '@/utils/router.utils.js';
+import { read } from '@/utils/state.utils.js';
 
 import { readCurrentElementData } from './preview-editor-link.utils.js';
 
@@ -25,6 +26,9 @@ export class PreviewEditorLink extends LitElement implements PreviewPlugin {
 
   readonly #overlay = document.createElement('div');
 
+  readonly name = 'editor-link';
+  readonly label = 'Show in editor';
+
   readonly container!: HTMLElement;
 
   @property({ type: String, reflect: true, attribute: 'preview-tag-name' })
@@ -33,28 +37,34 @@ export class PreviewEditorLink extends LitElement implements PreviewPlugin {
   @property({ type: Boolean, reflect: true })
   available = true;
 
-  @property({ type: String, reflect: true })
-  readonly name = 'viewer-link';
-
-  @property({ type: String, reflect: true })
-  readonly label = 'Show in viewer';
-
   @property({ type: Boolean, reflect: true })
-  enabled = false;
+  enabled = read('editor-link-hint-visible') ?? false;
 
   #checkAvailability() {
     // check if the previewed element is in a viewer
-    this.available = !isDescendantOf(this, 'wcp-stage-editor');
+    const available = !isDescendantOf(this, 'wcp-stage-editor');
+
+    // do not go on if the availability did not change
+    if (available === this.available) return;
+    this.available = available;
 
     // notify about availability change
     const event = new CustomEvent('wcp-preview-plugin:availability-change', {
-      detail: this.available,
+      detail: available,
       bubbles: true,
       composed: true,
     });
     this.dispatchEvent(event);
   }
 
+  #observeGlobalToggle() {
+    window.addEventListener('wcp-state-changed:editor-link-hint-visible', this.#handleGlobalToggle, false);
+  }
+
+  #unobserveGlobalToggle() {
+    window.removeEventListener('wcp-state-changed:editor-link-hint-visible', this.#handleGlobalToggle, false);
+  }
+
   #attachOverlay() {
     this.#overlay.id = 'overlay';
     this.#overlay.style.position = 'absolute';
@@ -88,15 +98,27 @@ export class PreviewEditorLink extends LitElement implements PreviewPlugin {
     this.container.removeEventListener('scroll', this.#handleContainerScroll, false);
   }
 
-  #handleContainerScroll() {
+  #handleContainerScroll = () => {
     this.#overlay.style.transform = `translateY(-${this.container.scrollTop ?? 0}px)`;
-  }
+  };
 
-  #handleContainerSlotChange() {
-    this.#attachHints();
-  }
+  #handleGlobalToggle = ({ detail: enabled }: CustomEvent<boolean>) => {
+    // plugin must be available
+    this.#checkAvailability();
+    if (!this.available) return;
+
+    // update state and setup hints
+    this.enabled = enabled;
+    this.#setupHints();
+  };
+
+  #handleContainerSlotChange = () => this.#attachHints();
 
   #attachHints() {
+    // plugin must be available
+    this.#checkAvailability();
+    if (!this.available) return;
+
     // gather all slotted elements
     const host = this.container.getRootNode() as HTMLElement;
     const slot = host.querySelector('slot');
@@ -123,7 +145,9 @@ export class PreviewEditorLink extends LitElement implements PreviewPlugin {
   }
 
   #setupHints() {
-    if (this.enabled) {
+    this.#checkAvailability();
+    if (this.enabled && this.available) {
+      this.#detachHints();
       this.#attachOverlay();
       this.#attachHints();
 
@@ -158,6 +182,7 @@ export class PreviewEditorLink extends LitElement implements PreviewPlugin {
 
     this.#setupHints();
     this.#checkAvailability();
+    this.#observeGlobalToggle();
   }
 
   adoptedCallback() {
@@ -165,6 +190,7 @@ export class PreviewEditorLink extends LitElement implements PreviewPlugin {
   }
 
   override disconnectedCallback() {
+    this.#unobserveGlobalToggle();
     this.#teardownHints();
 
     super.disconnectedCallback();
@@ -192,6 +218,10 @@ export class PreviewEditorLink extends LitElement implements PreviewPlugin {
 }
 
 declare global {
+  interface State {
+    'editor-link-hint-visible': boolean;
+  }
+
   interface HTMLElementTagNameMap {
     'wcp-preview-editor-link': PreviewEditorLink;
   }
diff --git a/src/components/plugins/preview-editor-link/preview-editor-link.utils.ts b/src/plugins/preview/preview-editor-link/preview-editor-link.utils.ts
similarity index 96%
rename from src/components/plugins/preview-editor-link/preview-editor-link.utils.ts
rename to src/plugins/preview/preview-editor-link/preview-editor-link.utils.ts
index f63ed5f2..cfe09792 100644
--- a/src/components/plugins/preview-editor-link/preview-editor-link.utils.ts
+++ b/src/plugins/preview/preview-editor-link/preview-editor-link.utils.ts
@@ -1,6 +1,6 @@
 import { getManifest } from '@/utils/manifest.utils.js';
 import { litKey } from '@/utils/parser.utils.js';
-import type { ElementData } from '../stage-editor/stage-editor.utils.js';
+import type { ElementData } from '../../stage/stage-editor/stage-editor.utils.js';
 
 const IGNORED_ATTRIBUTES = ['slot'];
 
diff --git a/src/components/plugins/preview-simulate-viewports/README.md b/src/plugins/preview/preview-simulate-viewports/README.md
similarity index 100%
rename from src/components/plugins/preview-simulate-viewports/README.md
rename to src/plugins/preview/preview-simulate-viewports/README.md
diff --git a/src/components/plugins/preview-simulate-viewports/preview-simulate-viewports.plugin.scss b/src/plugins/preview/preview-simulate-viewports/preview-simulate-viewports.plugin.scss
similarity index 100%
rename from src/components/plugins/preview-simulate-viewports/preview-simulate-viewports.plugin.scss
rename to src/plugins/preview/preview-simulate-viewports/preview-simulate-viewports.plugin.scss
diff --git a/src/components/plugins/preview-simulate-viewports/preview-simulate-viewports.plugin.ts b/src/plugins/preview/preview-simulate-viewports/preview-simulate-viewports.plugin.ts
similarity index 98%
rename from src/components/plugins/preview-simulate-viewports/preview-simulate-viewports.plugin.ts
rename to src/plugins/preview/preview-simulate-viewports/preview-simulate-viewports.plugin.ts
index 20f0d2c2..069ec527 100644
--- a/src/components/plugins/preview-simulate-viewports/preview-simulate-viewports.plugin.ts
+++ b/src/plugins/preview/preview-simulate-viewports/preview-simulate-viewports.plugin.ts
@@ -47,6 +47,9 @@ const SCALE_FACTOR = 1;
 export class PreviewSimulateViewports extends ColorSchemable(LitElement) implements PreviewPlugin {
   static override readonly styles = unsafeCSS(styles);
 
+  readonly name = 'viewport';
+  readonly label = 'Viewport';
+
   readonly container!: HTMLElement;
 
   @property({ type: String, reflect: true, attribute: 'preview-tag-name' })
@@ -55,12 +58,6 @@ export class PreviewSimulateViewports extends ColorSchemable(LitElement) impleme
   @property({ type: Boolean, reflect: true })
   readonly available = true;
 
-  @property({ type: String, reflect: true })
-  readonly name = 'viewport';
-
-  @property({ type: String, reflect: true })
-  readonly label = 'Viewport';
-
   @property({ type: String, reflect: true, attribute: 'simulate-viewport' })
   private simulateViewport?: Viewport;
 
diff --git a/src/components/plugins/stage-editor/README.md b/src/plugins/stage/stage-editor/README.md
similarity index 100%
rename from src/components/plugins/stage-editor/README.md
rename to src/plugins/stage/stage-editor/README.md
diff --git a/src/components/plugins/stage-editor/stage-editor-controls/README.md b/src/plugins/stage/stage-editor/stage-editor-controls/README.md
similarity index 100%
rename from src/components/plugins/stage-editor/stage-editor-controls/README.md
rename to src/plugins/stage/stage-editor/stage-editor-controls/README.md
diff --git a/src/components/plugins/stage-editor/stage-editor-controls/stage-editor-controls.component.scss b/src/plugins/stage/stage-editor/stage-editor-controls/stage-editor-controls.component.scss
similarity index 100%
rename from src/components/plugins/stage-editor/stage-editor-controls/stage-editor-controls.component.scss
rename to src/plugins/stage/stage-editor/stage-editor-controls/stage-editor-controls.component.scss
diff --git a/src/components/plugins/stage-editor/stage-editor-controls/stage-editor-controls.component.ts b/src/plugins/stage/stage-editor/stage-editor-controls/stage-editor-controls.component.ts
similarity index 100%
rename from src/components/plugins/stage-editor/stage-editor-controls/stage-editor-controls.component.ts
rename to src/plugins/stage/stage-editor/stage-editor-controls/stage-editor-controls.component.ts
diff --git a/src/components/plugins/stage-editor/stage-editor-preview/README.md b/src/plugins/stage/stage-editor/stage-editor-preview/README.md
similarity index 100%
rename from src/components/plugins/stage-editor/stage-editor-preview/README.md
rename to src/plugins/stage/stage-editor/stage-editor-preview/README.md
diff --git a/src/components/plugins/stage-editor/stage-editor-preview/stage-editor-preview.component.scss b/src/plugins/stage/stage-editor/stage-editor-preview/stage-editor-preview.component.scss
similarity index 100%
rename from src/components/plugins/stage-editor/stage-editor-preview/stage-editor-preview.component.scss
rename to src/plugins/stage/stage-editor/stage-editor-preview/stage-editor-preview.component.scss
diff --git a/src/components/plugins/stage-editor/stage-editor-preview/stage-editor-preview.component.ts b/src/plugins/stage/stage-editor/stage-editor-preview/stage-editor-preview.component.ts
similarity index 100%
rename from src/components/plugins/stage-editor/stage-editor-preview/stage-editor-preview.component.ts
rename to src/plugins/stage/stage-editor/stage-editor-preview/stage-editor-preview.component.ts
diff --git a/src/components/plugins/stage-editor/stage-editor.plugin.scss b/src/plugins/stage/stage-editor/stage-editor.plugin.scss
similarity index 100%
rename from src/components/plugins/stage-editor/stage-editor.plugin.scss
rename to src/plugins/stage/stage-editor/stage-editor.plugin.scss
diff --git a/src/components/plugins/stage-editor/stage-editor.plugin.ts b/src/plugins/stage/stage-editor/stage-editor.plugin.ts
similarity index 97%
rename from src/components/plugins/stage-editor/stage-editor.plugin.ts
rename to src/plugins/stage/stage-editor/stage-editor.plugin.ts
index 723b727c..4691612d 100644
--- a/src/components/plugins/stage-editor/stage-editor.plugin.ts
+++ b/src/plugins/stage/stage-editor/stage-editor.plugin.ts
@@ -34,6 +34,9 @@ export class StageEditor extends ColorSchemable(LitElement) implements StagePlug
     this.dispatchEvent(event);
   }, UPDATE_DEBOUNCE);
 
+  readonly name = 'editor';
+  readonly label = 'Editor';
+
   @state()
   private _element?: Parsed.Element;
 
@@ -53,12 +56,6 @@ export class StageEditor extends ColorSchemable(LitElement) implements StagePlug
   @property({ type: Boolean, reflect: true })
   readonly available = true;
 
-  @property({ type: String, reflect: true })
-  readonly name = 'editor';
-
-  @property({ type: String, reflect: true })
-  readonly label = 'Editor';
-
   async #prepareElementData(compressed?: string) {
     if (this._element === undefined) return;
 
diff --git a/src/components/plugins/stage-editor/stage-editor.utils.ts b/src/plugins/stage/stage-editor/stage-editor.utils.ts
similarity index 100%
rename from src/components/plugins/stage-editor/stage-editor.utils.ts
rename to src/plugins/stage/stage-editor/stage-editor.utils.ts
diff --git a/src/components/plugins/stage-examples/README.md b/src/plugins/stage/stage-examples/README.md
similarity index 100%
rename from src/components/plugins/stage-examples/README.md
rename to src/plugins/stage/stage-examples/README.md
diff --git a/src/components/plugins/stage-examples/stage-examples.plugin.scss b/src/plugins/stage/stage-examples/stage-examples.plugin.scss
similarity index 100%
rename from src/components/plugins/stage-examples/stage-examples.plugin.scss
rename to src/plugins/stage/stage-examples/stage-examples.plugin.scss
diff --git a/src/components/plugins/stage-examples/stage-examples.plugin.ts b/src/plugins/stage/stage-examples/stage-examples.plugin.ts
similarity index 96%
rename from src/components/plugins/stage-examples/stage-examples.plugin.ts
rename to src/plugins/stage/stage-examples/stage-examples.plugin.ts
index d0b191ac..6684b640 100644
--- a/src/components/plugins/stage-examples/stage-examples.plugin.ts
+++ b/src/plugins/stage/stage-examples/stage-examples.plugin.ts
@@ -24,6 +24,9 @@ export class StageExamples extends ColorSchemable(LitElement) implements StagePl
 
   readonly #manifest = getManifest();
 
+  readonly name = 'examples';
+  readonly label = 'Examples';
+
   @state()
   private _element?: Parsed.Element;
 
@@ -49,12 +52,6 @@ export class StageExamples extends ColorSchemable(LitElement) implements StagePl
     }
   }
 
-  @property({ type: String, reflect: true })
-  readonly name = 'examples';
-
-  @property({ type: String, reflect: true })
-  readonly label = 'Examples';
-
   protected override render(): TemplateResult {
     return html`
       ${map(
diff --git a/src/components/plugins/stage-readme/README.md b/src/plugins/stage/stage-readme/README.md
similarity index 100%
rename from src/components/plugins/stage-readme/README.md
rename to src/plugins/stage/stage-readme/README.md
diff --git a/src/components/plugins/stage-readme/stage-readme.plugin.scss b/src/plugins/stage/stage-readme/stage-readme.plugin.scss
similarity index 100%
rename from src/components/plugins/stage-readme/stage-readme.plugin.scss
rename to src/plugins/stage/stage-readme/stage-readme.plugin.scss
diff --git a/src/components/plugins/stage-readme/stage-readme.plugin.ts b/src/plugins/stage/stage-readme/stage-readme.plugin.ts
similarity index 96%
rename from src/components/plugins/stage-readme/stage-readme.plugin.ts
rename to src/plugins/stage/stage-readme/stage-readme.plugin.ts
index 21f1498d..3f91df85 100644
--- a/src/components/plugins/stage-readme/stage-readme.plugin.ts
+++ b/src/plugins/stage/stage-readme/stage-readme.plugin.ts
@@ -20,6 +20,9 @@ export class StageReadme extends ColorSchemable(LitElement) implements StagePlug
 
   readonly #manifest = getManifest();
 
+  readonly name = 'readme';
+  readonly label = 'Readme';
+
   @state()
   private _element?: Parsed.Element;
 
@@ -45,12 +48,6 @@ export class StageReadme extends ColorSchemable(LitElement) implements StagePlug
     }
   }
 
-  @property({ type: String, reflect: true })
-  readonly name = 'readme';
-
-  @property({ type: String, reflect: true })
-  readonly label = 'Readme';
-
   // without ShadowDOM, we need to manually inject the styles
   protected override render(): TemplateResult {
     return html`
diff --git a/src/plugins/topbar/topbar-preview-editor-link-toggle/topbar-preview-editor-link-toggle.plugin.scss b/src/plugins/topbar/topbar-preview-editor-link-toggle/topbar-preview-editor-link-toggle.plugin.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/plugins/topbar/topbar-preview-editor-link-toggle/topbar-preview-editor-link-toggle.plugin.ts b/src/plugins/topbar/topbar-preview-editor-link-toggle/topbar-preview-editor-link-toggle.plugin.ts
new file mode 100644
index 00000000..26160739
--- /dev/null
+++ b/src/plugins/topbar/topbar-preview-editor-link-toggle/topbar-preview-editor-link-toggle.plugin.ts
@@ -0,0 +1,53 @@
+import { LitElement, type TemplateResult, html, unsafeCSS } from 'lit';
+import { customElement, eventOptions, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import type { TopbarPlugin } from '@/utils/plugin.utils.js';
+import { persist, read } from '@/utils/state.utils.js';
+
+import styles from './topbar-preview-editor-link-toggle.plugin.scss';
+
+/**
+ * Toggles all preview editor link plugins to show or hide the debug hints.
+ *
+ * @element wcp-topbar-preview-editor-link-toggle
+ */
+@customElement('wcp-topbar-preview-editor-link-toggle')
+export class TopbarPreviewEditorLinkToggle extends LitElement implements TopbarPlugin {
+  static override readonly styles = unsafeCSS(styles);
+
+  readonly name = 'editor-link-toggle';
+  readonly label = 'Toggle all editor link hints globally';
+
+  @state()
+  private enabled = read('editor-link-hint-visible') ?? false;
+
+  @property({ type: Boolean, reflect: true })
+  available = true;
+
+  @eventOptions({ passive: true })
+  protected handleToggleClick() {
+    this.enabled = !this.enabled;
+    persist('editor-link-hint-visible', this.enabled);
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <wcp-button
+        kind="icon"
+        class="${classMap({ active: this.enabled })}"
+        ?disabled="${!this.available}"
+        @click="${this.handleToggleClick}"
+      >
+        <wcp-icon name="terminal"></wcp-icon>
+      </wcp-button>
+    `;
+  }
+}
+
+declare global {
+
+  interface HTMLElementTagNameMap {
+    'wcp-topbar-preview-editor-link-toggle': TopbarPreviewEditorLinkToggle;
+  }
+}
diff --git a/src/utils/color-scheme.utils.ts b/src/utils/color-scheme.utils.ts
index fb2ff16b..80ed06cb 100644
--- a/src/utils/color-scheme.utils.ts
+++ b/src/utils/color-scheme.utils.ts
@@ -1,8 +1,9 @@
 import type { ColorSchemableInterface } from '@/mixins/color-schemable.mixin.js';
+import { read } from '@/utils/state.utils.js';
 
 declare global {
-  interface WindowEventMap {
-    'wcp-color-scheme:toggle': CustomEvent<ColorScheme | null>;
+  interface State {
+    ['color-scheme']: ColorScheme;
   }
 }
 
@@ -10,21 +11,19 @@ export type ColorScheme = 'light' | 'dark';
 
 // module stores global state
 const colorSchemables = new Set<ColorSchemableInterface>();
-let colorSchemeState: ColorScheme | undefined = matchMedia('(prefers-color-scheme: dark)').matches
-  ? ('dark' as const)
-  : ('light' as const);
 
 // and makes them accessible
-export const getColorSchemeState = () => colorSchemeState;
+export const getColorSchemeState = () =>
+  read('color-scheme') ?? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
 export const addColorSchemable = (element: ColorSchemableInterface) => colorSchemables.add(element);
 export const removeColorSchemable = (element: ColorSchemableInterface) => colorSchemables.delete(element);
 
 // track changes to color scheme
-function handleColorSchemeChange({ detail }: CustomEvent<ColorScheme | null>) {
+function handleColorSchemeChange({ detail }: CustomEvent<ColorScheme>) {
   // update state in module
-  colorSchemeState = detail ?? undefined;
-  colorSchemables.forEach((colorSchemable) => (colorSchemable.colorScheme = colorSchemeState));
+  const colorScheme = detail ?? undefined;
+  colorSchemables.forEach((colorSchemable) => (colorSchemable.colorScheme = colorScheme));
 }
 
 // bind a single listener to keep track of changes
-window.addEventListener('wcp-color-scheme:toggle', handleColorSchemeChange, false);
+window.addEventListener('wcp-state-changed:color-scheme', handleColorSchemeChange, false);
diff --git a/src/utils/config.utils.ts b/src/utils/config.utils.ts
index 97a91aba..7204059b 100644
--- a/src/utils/config.utils.ts
+++ b/src/utils/config.utils.ts
@@ -17,7 +17,7 @@ export type Config = {
   /**
    * The initial tab to be selected in the preview. Will match the name of the plugin.
    */
-  initialPreviewTab: string;
+  initialStageTab: string;
 
   /**
    * The plugins to be used for the preview.
@@ -29,7 +29,13 @@ export type Config = {
    * The plugins to be used for the preview frame.
    * Defaults to examples, readme and viewer.
    */
-  previewFramePlugins: string[];
+  stagePlugins: string[];
+
+  /**
+   * The plugins to be used for the topbar.
+   * Defaults to the preview editor link hint toggle.
+   */
+  topbarPlugins: string[];
 
   /**
    * Defines readmes to be loaded from external sources to be displayed in the navigation.
@@ -39,6 +45,14 @@ export type Config = {
     url: string;
   }[];
 
+  /**
+   * Sets the persistence of the global state. Defaults to 'session'.
+   * If set to 'none', the state will not be persisted at all and only kept in memory.
+   * If set to 'session', the state will be persisted in the session storage and restored.
+   * If set to 'local', the state will be persisted in the local storage and restored.
+   */
+  statePersistence: 'none' | 'session' | 'local';
+
   /**
    * Labels to be translated or customized
    */
@@ -61,6 +75,18 @@ export type Config = {
      */
     title: string;
   };
+
+  /**
+   * All settings concerning logging
+   */
+  logging: {
+    /**
+     * The severity of the log message; info will include all messages, warn will
+     * include warnings and errors, error will include errors only and none will
+     * disable logging completely.
+     */
+    severity: 'info' | 'warn' | 'error' | 'none';
+  };
 };
 
 declare global {
@@ -78,16 +104,21 @@ export const defaultConfig = {
   excludeElements: [],
   initialActiveElement: undefined,
   initialCodePreviewTab: 'preview',
-  initialPreviewTab: 'viewer',
+  initialStageTab: 'editor',
   previewPlugins: ['wcp-preview-simulate-viewports', 'wcp-preview-editor-link'],
-  previewFramePlugins: ['wcp-stage-examples', 'wcp-stage-readme', 'wcp-stage-editor'],
+  stagePlugins: ['wcp-stage-examples', 'wcp-stage-readme', 'wcp-stage-editor'],
+  topbarPlugins: ['wcp-toggle-sidebar', 'wcp-toggle-color-scheme', 'wcp-topbar-preview-editor-link-toggle'],
   additionalReadmes: [],
+  statePersistence: 'session',
   labels: {
     title: 'Web Component Preview',
     additionalReadmeGroupName: 'Readmes',
     fallbackGroupName: 'Components',
     emptyNavigation: 'No readmes nor elements found.',
   },
+  logging: {
+    severity: 'info',
+  },
 } satisfies Config;
 
 // merge the default config with the given config
@@ -106,7 +137,7 @@ export function mergeConfigWithDefaults(config: Partial<Config>): Config {
 export async function loadConfig(url = 'config.json'): Promise<Config> {
   const response = await fetch(url);
   const config = mergeConfigWithDefaults(await response.json());
-  
+
   if (window.wcp === undefined) {
     window.wcp = {} as Window['wcp'];
   }
@@ -114,10 +145,12 @@ export async function loadConfig(url = 'config.json'): Promise<Config> {
     window.wcp.config = config;
   }
 
-  return getConfig();
+  return getConfig()!;
 }
 
-// convenience function to retrieve the config
-export function getConfig(): Config {
-  return window.wcp.config;
+/**
+ * Convenience function to retrieve the config
+ */
+export function getConfig(): Config | undefined {
+  return window.wcp?.config;
 }
diff --git a/src/utils/log.utils.ts b/src/utils/log.utils.ts
new file mode 100644
index 00000000..a7b3fac1
--- /dev/null
+++ b/src/utils/log.utils.ts
@@ -0,0 +1,21 @@
+import { getConfig } from './config.utils.js';
+
+const LOG_PREFIX = '[wcp]';
+
+export const log = {
+  info(...args: unknown[]) {
+    if (['error', 'warn', 'info'].includes(getConfig()?.logging?.severity ?? 'info')) {
+      console.log(LOG_PREFIX, ...args);
+    }
+  },
+  warn(...args: unknown[]) {
+    if (['error', 'warn'].includes(getConfig()?.logging?.severity ?? 'info')) {
+      console.warn(LOG_PREFIX, ...args);
+    }
+  },
+  error(...args: unknown[]) {
+    if (['error'].includes(getConfig()?.logging?.severity ?? 'info')) {
+      console.error(LOG_PREFIX, ...args);
+    }
+  },
+};
diff --git a/src/utils/manifest.utils.ts b/src/utils/manifest.utils.ts
index 419e429f..d0e1ab83 100644
--- a/src/utils/manifest.utils.ts
+++ b/src/utils/manifest.utils.ts
@@ -25,6 +25,9 @@ export async function loadManifest(manifestUrl: string, excludeElements: string[
   return getManifest();
 }
 
+/**
+ * Convenience function to retrieve the config
+ */
 export function getManifest(): Manifest {
   return window.wcp.manifest;
 }
\ No newline at end of file
diff --git a/src/utils/plugin.utils.ts b/src/utils/plugin.utils.ts
index e5b57466..959ea0f1 100644
--- a/src/utils/plugin.utils.ts
+++ b/src/utils/plugin.utils.ts
@@ -13,11 +13,10 @@ declare global {
  * `wcp-plugin:availability-change` and should carry a
  * boolean flag about its availability in the `detail` property.
  */
-export type Plugin = Element & {
+export type Plugin = HTMLElement & {
   readonly name: string;
   readonly label: string;
   readonly available: boolean;
-  readonly previewTagName: string;
 };
 
 /**
@@ -25,6 +24,7 @@ export type Plugin = Element & {
  */
 export type StagePlugin = Plugin & {
   readonly data?: string;
+  readonly previewTagName: string;
 };
 
 /**
@@ -32,12 +32,32 @@ export type StagePlugin = Plugin & {
  */
 export type PreviewPlugin = Plugin & {
   readonly container: HTMLElement;
+  readonly previewTagName: string;
 };
 
-export function isPlugin(element: Element): element is Plugin {
+/**
+ * Type to be used with topbar plugins.
+ */
+export type TopbarPlugin = Plugin;
+
+/**
+ * Type guard for generic plugins.
+ */
+export function isPlugin(element: HTMLElement): element is Plugin {
   return 'name' in element && 'label' in element && 'available' in element;
 }
 
-export function findAllPlugins(slot: HTMLSlotElement): Plugin[] {
-  return slot.assignedElements().filter(isPlugin);
+/**
+ * Type guard for stage plugins.
+ */
+export function isStagePlugin(element: HTMLElement): element is StagePlugin {
+  return isPlugin(element) && 'previewTagName' in element;
+}
+
+/**
+ * Type guard for preview plugins.
+ * TODO: add container type guard
+ */
+export function isPreviewPlugin(element: HTMLElement): element is PreviewPlugin {
+  return isPlugin(element) && 'previewTagName' in element && 'container' in element;
 }
diff --git a/src/utils/router.utils.ts b/src/utils/router.utils.ts
index 1758624d..e1871c0f 100644
--- a/src/utils/router.utils.ts
+++ b/src/utils/router.utils.ts
@@ -1,4 +1,5 @@
 import type { LitElement, TemplateResult } from 'lit';
+import { log } from '@/utils/log.utils.js';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: Property 'UrlPattern' does not exist
@@ -70,8 +71,7 @@ export class Router {
    */
   static navigate(...slugs: (string | undefined)[]) {
     const path = slugs.filter(Boolean).join('/');
-    // TODO: add some kind of logging
-    // console.log(`Navigate to ${path}`);
+    log.info(`Navigate to ${path}`);
     location.hash = path;
   }
 
@@ -84,6 +84,7 @@ export class Router {
    */
   registerRoutes(routes: Route[]) {
     this.#routes = routes;
+    log.info(`Registered ${routes.length} routes`);
   }
 
   /**
@@ -106,6 +107,7 @@ export class Router {
    * Update the current path without triggering a redirect.
    */
   updateCurrent(path: string) {
+    log.info(`Update to ${path}`);
     const url = new URL(location.href);
     url.hash = path;
     history.replaceState({}, '', url);
@@ -138,8 +140,12 @@ export class Router {
     const { path: nextPath, url: nextUrl } = this.#parseUrl(event.newURL);
     const nextRoute = this.#findRouteForUrl(nextUrl);
 
+    // what's going on?
+    log.info(`Route changed to ${nextPath}`);
+
     // no route found
     if (nextRoute === undefined) {
+      log.error(`No route found for ${nextPath}`);
       throw new Error(`No route found for ${nextPath}`);
     }
 
@@ -180,6 +186,8 @@ export class Router {
     // call the detection initially
     const event = new HashChangeEvent('hashchange', { newURL: location.href });
     this.#findCurrentRoute(event);
+
+    log.info('Connected router');
   }
 
   disconnect() {
diff --git a/src/utils/state.utils.ts b/src/utils/state.utils.ts
new file mode 100644
index 00000000..feaade07
--- /dev/null
+++ b/src/utils/state.utils.ts
@@ -0,0 +1,102 @@
+import { getConfig } from './config.utils.js';
+
+// for session and local storage we'll need to prefix the keys
+const STORAGE_PREFIX = 'wcp-' as const;
+const STATE_EVENT_NAME = 'wcp-state-changed' as const;
+
+// in case of in-memory state, add the type definition here
+declare global {
+  /**
+   * Add fields to the state type by declaring them at the feature.
+   * The declared type will be merged with this global state type.
+   */
+  interface State {
+    _: unknown; // we can not keep it empty, so we add some
+  }
+
+  // the internal state will be serialized
+  interface WCP {
+    __state: Record<string, string>;
+  }
+  interface Window {
+    wcp: WCP;
+  }
+
+  // a helper type creating a map of all state events derived from the merged
+  // state interface(s) with the correct custom event payload type
+  type StateEventMap = {
+    [N in `${typeof STATE_EVENT_NAME}:${keyof State}`]: CustomEvent<
+      State[N extends `${typeof STATE_EVENT_NAME}:${infer K}` ? K : never]
+    >;
+  };
+  // then add the type to the global window event map interface
+  interface WindowEventMap extends StateEventMap {}
+}
+
+/**
+ * Helper function to persist a given key with the given stateful value.
+ */
+export function persist<K extends keyof State>(key: K, value: State[K]) {
+  // in memory we can store arbitrary values, nevertheless we may want to
+  // do more with them in the future, so we should use serializable values
+  const serializedValue = JSON.stringify(value);
+  const keyWithPrefix = `${STORAGE_PREFIX}${key}`;
+  const persistence = getConfig()?.statePersistence ?? 'none';
+
+  let _: never;
+  switch (persistence) {
+    case 'none':
+      // prepare global state object if missing
+      if (!window.wcp) window.wcp = {} as WCP;
+      if (!window.wcp.__state) window.wcp.__state = {};
+
+      window.wcp.__state[keyWithPrefix] = serializedValue;
+      break;
+    case 'session':
+      window.sessionStorage.setItem(keyWithPrefix, serializedValue);
+      break;
+    case 'local':
+      window.localStorage.setItem(keyWithPrefix, serializedValue);
+      break;
+
+    default:
+      // some simple exhaustiveness check
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      _ = persistence;
+      return _;
+  }
+
+  // dispatch an event to notify others about the change
+  window.dispatchEvent(new CustomEvent(`${STATE_EVENT_NAME}:${key}`, { detail: value }));
+}
+
+/**
+ * Read stateful values from the persistence layer.
+ */
+export function read<K extends keyof State>(key: K): State[K] | undefined {
+  let serializedValue: string | undefined;
+  const keyWithPrefix = `${STORAGE_PREFIX}${key}`;
+  const persistence = getConfig()?.statePersistence ?? 'none';
+
+  let _: never;
+  switch (persistence) {
+    case 'none':
+      serializedValue = window?.wcp?.__state?.[keyWithPrefix];
+      break;
+    case 'session':
+      serializedValue = window.sessionStorage.getItem(keyWithPrefix) ?? undefined;
+      break;
+    case 'local':
+      serializedValue = window.localStorage.getItem(keyWithPrefix) ?? undefined;
+      break;
+
+    default:
+      // some simple exhaustiveness check
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      _ = persistence;
+      return _;
+  }
+
+  // either way, the value must be parsed
+  return serializedValue ? JSON.parse(serializedValue) : undefined;
+}