diff --git a/frappe/public/js/workflow_builder/WorkflowBuilder.vue b/frappe/public/js/workflow_builder/WorkflowBuilder.vue
new file mode 100644
index 0000000000..2e36f1063b
--- /dev/null
+++ b/frappe/public/js/workflow_builder/WorkflowBuilder.vue
@@ -0,0 +1,7 @@
+<template>
+    {{ workflow }}
+</template>
+
+<script setup>
+let props = defineProps(["workflow"]);
+</script>
\ No newline at end of file
diff --git a/frappe/public/js/workflow_builder/workflow_builder.bundle.js b/frappe/public/js/workflow_builder/workflow_builder.bundle.js
new file mode 100644
index 0000000000..df5e819271
--- /dev/null
+++ b/frappe/public/js/workflow_builder/workflow_builder.bundle.js
@@ -0,0 +1,33 @@
+import { createApp } from "vue";
+import WorkflowBuilderComponent from "./WorkflowBuilder.vue";
+
+class WorkflowBuilder {
+	constructor({ wrapper, page, workflow }) {
+		this.$wrapper = $(wrapper);
+		this.page = page;
+		this.workflow = workflow;
+
+		this.init();
+	}
+
+	init() {
+		// set page title
+		this.page.set_title(__("Editing {0}", [this.workflow]));
+
+		this.setup_app();
+	}
+
+	setup_app() {
+		// create a vue instance
+		let app = createApp(WorkflowBuilderComponent, { workflow: this.workflow });
+		SetVueGlobals(app);
+		app.use(pinia);
+
+		// mount the app
+		this.$workflow_builder = app.mount(this.$wrapper.get(0));
+	}
+}
+
+frappe.provide("frappe.ui");
+frappe.ui.WorkflowBuilder = WorkflowBuilder;
+export default WorkflowBuilder;
diff --git a/frappe/workflow/page/__init__.py b/frappe/workflow/page/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frappe/workflow/page/workflow_builder/__init__.py b/frappe/workflow/page/workflow_builder/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frappe/workflow/page/workflow_builder/workflow_builder.js b/frappe/workflow/page/workflow_builder/workflow_builder.js
new file mode 100644
index 0000000000..bd8e322f37
--- /dev/null
+++ b/frappe/workflow/page/workflow_builder/workflow_builder.js
@@ -0,0 +1,33 @@
+frappe.pages["workflow-builder"].on_page_load = function (wrapper) {
+	frappe.ui.make_app_page({
+		parent: wrapper,
+		title: __("Workflow Builder"),
+		single_column: true,
+	});
+
+	// hot reload in development
+	if (frappe.boot.developer_mode) {
+		frappe.hot_update = frappe.hot_update || [];
+		frappe.hot_update.push(() => load_workflow_builder(wrapper));
+	}
+};
+
+frappe.pages["workflow-builder"].on_page_show = function (wrapper) {
+	load_workflow_builder(wrapper);
+};
+
+function load_workflow_builder(wrapper) {
+	let route = frappe.get_route();
+	let $parent = $(wrapper).find(".layout-main-section");
+	$parent.empty();
+
+	if (route.length > 1) {
+		frappe.require("workflow_builder.bundle.js").then(() => {
+			frappe.workflow_builder = new frappe.ui.WorkflowBuilder({
+				wrapper: $parent,
+				page: wrapper.page,
+				workflow: route[1],
+			});
+		});
+	}
+}
diff --git a/frappe/workflow/page/workflow_builder/workflow_builder.json b/frappe/workflow/page/workflow_builder/workflow_builder.json
new file mode 100644
index 0000000000..0bda70d9ac
--- /dev/null
+++ b/frappe/workflow/page/workflow_builder/workflow_builder.json
@@ -0,0 +1,23 @@
+{
+ "content": null,
+ "creation": "2023-05-01 13:02:17.223595",
+ "docstatus": 0,
+ "doctype": "Page",
+ "idx": 0,
+ "modified": "2023-05-01 13:02:17.223595",
+ "modified_by": "Administrator",
+ "module": "Workflow",
+ "name": "workflow-builder",
+ "owner": "Administrator",
+ "page_name": "workflow-builder",
+ "roles": [
+  {
+   "role": "System Manager"
+  }
+ ],
+ "script": null,
+ "standard": "Yes",
+ "style": null,
+ "system_page": 0,
+ "title": "Workflow Builder"
+}
\ No newline at end of file