diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts
index 341ed9f7ff..cb29ced563 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts
@@ -1,15 +1,16 @@
 import { UMB_SCRIPT_ENTITY_TYPE } from '../entity.js';
 import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
-import type { ManifestWorkspace, ManifestWorkspaceActions } from '@umbraco-cms/backoffice/extension-registry';
+import type { ManifestWorkspaces, ManifestWorkspaceActions } from '@umbraco-cms/backoffice/extension-registry';
 
 export const UMB_SCRIPT_WORKSPACE_ALIAS = 'Umb.Workspace.Script';
 export const UMB_SAVE_SCRIPT_WORKSPACE_ACTION_ALIAS = 'Umb.WorkspaceAction.Script.Save';
 
-const workspace: ManifestWorkspace = {
+const workspace: ManifestWorkspaces = {
 	type: 'workspace',
+	kind: 'routable',
 	alias: UMB_SCRIPT_WORKSPACE_ALIAS,
 	name: 'Script Workspace',
-	js: () => import('./script-workspace.element.js'),
+	api: () => import('./script-workspace.context.js'),
 	meta: {
 		entityType: UMB_SCRIPT_ENTITY_TYPE,
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace.context.ts
index a1b4c84438..d7c0fd7ea3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace.context.ts
@@ -2,15 +2,26 @@ import { UmbScriptDetailRepository } from '../repository/index.js';
 import type { UmbScriptDetailModel } from '../types.js';
 import { UMB_SCRIPT_ENTITY_TYPE } from '../entity.js';
 import { UMB_SCRIPT_WORKSPACE_ALIAS } from './manifests.js';
+import { UmbScriptWorkspaceEditorElement } from './script-workspace-editor.element.js';
 import { UmbBooleanState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
-import { UmbEditableWorkspaceContextBase } from '@umbraco-cms/backoffice/workspace';
+import {
+	UmbEditableWorkspaceContextBase,
+	type UmbRoutableWorkspaceContext,
+	type UmbSaveableWorkspaceContextInterface,
+	UmbWorkspaceIsNewRedirectController,
+	UmbWorkspaceRouteManager,
+} from '@umbraco-cms/backoffice/workspace';
 import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
 import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
 import { UmbReloadTreeItemChildrenRequestEntityActionEvent } from '@umbraco-cms/backoffice/tree';
 import { UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/event';
+import type { IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router';
 
-export class UmbScriptWorkspaceContext extends UmbEditableWorkspaceContextBase<UmbScriptDetailModel> {
+export class UmbScriptWorkspaceContext
+	extends UmbEditableWorkspaceContextBase<UmbScriptDetailModel>
+	implements UmbSaveableWorkspaceContextInterface, UmbRoutableWorkspaceContext
+{
 	public readonly repository = new UmbScriptDetailRepository(this);
 
 	#parent?: { entityType: string; unique: string | null };
@@ -24,9 +35,37 @@ export class UmbScriptWorkspaceContext extends UmbEditableWorkspaceContextBase<U
 	#isCodeEditorReady = new UmbBooleanState(false);
 	readonly isCodeEditorReady = this.#isCodeEditorReady.asObservable();
 
+	readonly routes = new UmbWorkspaceRouteManager(this);
+
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_SCRIPT_WORKSPACE_ALIAS);
 		this.#loadCodeEditor();
+
+		this.routes.setRoutes([
+			{
+				path: 'create/parent/:entityType/:parentUnique',
+				component: UmbScriptWorkspaceEditorElement,
+				setup: async (component: PageComponent, info: IRoutingInfo) => {
+					const parentEntityType = info.match.params.entityType;
+					const parentUnique = info.match.params.parentUnique === 'null' ? null : info.match.params.parentUnique;
+					this.create({ entityType: parentEntityType, unique: parentUnique });
+
+					new UmbWorkspaceIsNewRedirectController(
+						this,
+						this,
+						this.getHostElement().shadowRoot!.querySelector('umb-router-slot')!,
+					);
+				},
+			},
+			{
+				path: 'edit/:unique',
+				component: UmbScriptWorkspaceEditorElement,
+				setup: (component: PageComponent, info: IRoutingInfo) => {
+					const unique = info.match.params.unique;
+					this.load(unique);
+				},
+			},
+		]);
 	}
 
 	protected resetState(): void {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace.element.ts
deleted file mode 100644
index eaa970bb38..0000000000
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/script-workspace.element.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { UmbScriptWorkspaceContext } from './script-workspace.context.js';
-import { UmbScriptWorkspaceEditorElement } from './script-workspace-editor.element.js';
-import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbRoute, IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router';
-import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace';
-
-@customElement('umb-script-workspace')
-export class UmbScriptWorkspaceElement extends UmbLitElement {
-	#workspaceContext = new UmbScriptWorkspaceContext(this);
-	#createElement = () => new UmbScriptWorkspaceEditorElement();
-
-	@state()
-	_routes: UmbRoute[] = [
-		{
-			path: 'create/parent/:entityType/:parentUnique',
-			component: this.#createElement,
-			setup: async (component: PageComponent, info: IRoutingInfo) => {
-				const parentEntityType = info.match.params.entityType;
-				const parentUnique = info.match.params.parentUnique === 'null' ? null : info.match.params.parentUnique;
-				this.#workspaceContext.create({ entityType: parentEntityType, unique: parentUnique });
-
-				new UmbWorkspaceIsNewRedirectController(
-					this,
-					this.#workspaceContext,
-					this.shadowRoot!.querySelector('umb-router-slot')!,
-				);
-			},
-		},
-		{
-			path: 'edit/:unique',
-			component: this.#createElement,
-			setup: (component: PageComponent, info: IRoutingInfo) => {
-				const unique = info.match.params.unique;
-				this.#workspaceContext.load(unique);
-			},
-		},
-	];
-
-	render() {
-		return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
-	}
-}
-
-export default UmbScriptWorkspaceElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-script-workspace': UmbScriptWorkspaceElement;
-	}
-}