diff --git a/packages/core/expressions/README.md b/packages/core/expressions/README.md
index 8e9ae7bd60..d59d17cb68 100644
--- a/packages/core/expressions/README.md
+++ b/packages/core/expressions/README.md
@@ -18,6 +18,7 @@ Reusable components to support [Kong's expressions language](https://docs.konghq
 - `vue` must be initialized in the host application
 - [`monaco-editor`](https://www.npmjs.com/package/monaco-editor) is required as a dependency in the host application
 - [`vite-plugin-monaco-editor`](https://www.npmjs.com/package/vite-plugin-monaco-editor) is a required Vite plugin to bundle the Monaco Editor and its web workers
+- [`@kong-ui-public/forms`](https://www.npmjs.com/package/@kong-ui-public/forms) is an optional dependency required for the `RouterPlaygroundModal` component
 
 ## Usage
 
@@ -27,6 +28,7 @@ Install required `dependencies` in your host application:
 
 ```sh
 yarn add monaco-editor
+yarn add @kong-ui-public/forms # optional: required for `RouterPlaygroundModal` component
 ```
 
 Install required `devDependencies` in your host application:
@@ -58,9 +60,12 @@ Import the component(s) in your host application as well as the package styles:
 ```ts
 import { asyncInit, ExpressionsEditor } from '@kong-ui-public/expressions'
 import '@kong-ui-public/expressions/dist/style.css'
+import '@kong-ui-public/forms/dist/style.css' // optional: required for `RouterPlaygroundModal` component
+
+app.component('VueFormGenerator', VueFormGenerator) // optional: required for `RouterPlaygroundModal` component
 ```
 
-This package utilizes [vite-plugin-top-level-await](https://github.com/Menci/vite-plugin-top-level-await) to transform code in order to use top-level await on older browsers. To load the WASM correctly, you must use `await` or `Promise.then` to wait the imported `asyncInit` before using any other imported values. 
+This package utilizes [vite-plugin-top-level-await](https://github.com/Menci/vite-plugin-top-level-await) to transform code in order to use top-level await on older browsers. To load the WASM correctly, you must use `await` or `Promise.then` to wait the imported `asyncInit` before using any other imported values.
 
 For example:
 
@@ -77,4 +82,5 @@ You can also make use of Vue's experimental [Suspense](https://vuejs.org/guide/b
 
 ## Individual component documentation
 
-- [`<ExpressionsEditor.vue />`](docs/expressions-editor.md)
+- [`<ExpressionsEditor />`](docs/expressions-editor.md)
+- [`<RouterPlaygroundModal />`](docs/router-playground-modal.md)
diff --git a/packages/core/expressions/docs/expressions-editor.md b/packages/core/expressions/docs/expressions-editor.md
index e026f42828..c4db6b6406 100644
--- a/packages/core/expressions/docs/expressions-editor.md
+++ b/packages/core/expressions/docs/expressions-editor.md
@@ -1,4 +1,4 @@
-# ExpressionsEditor.vue
+# ExpressionsEditor
 
 A Monaco-based editor with autocomplete and syntax highlighting support for the expressions language.
 
diff --git a/packages/core/expressions/docs/router-playground-modal.md b/packages/core/expressions/docs/router-playground-modal.md
new file mode 100644
index 0000000000..24aa13d711
--- /dev/null
+++ b/packages/core/expressions/docs/router-playground-modal.md
@@ -0,0 +1,86 @@
+# RouterPlaygroundModal
+
+The `RouterPlaygroundModal` component is a modal that allows the user to edit a route expression and see the result of the expression evaluation.
+
+- [Requirements](#requirements)
+- [Usage](#usage)
+  - [Install](#install)
+  - [Props](#props)
+  - [Events](#events)
+  - [Usage example](#usage-example)
+- [TypeScript definitions](#typescript-definitions)
+
+## Requirements
+
+[See requirements for the `@kong-ui-public/expressions` package.](../README.md#requirements)
+
+## Usage
+
+### Install
+
+[See instructions for installing the `@kong-ui-public/expressions` package.](../README.md#install)
+
+### Props
+
+#### `isVisible`
+
+- type: `boolean`
+- required: `true`
+
+Controls whether the modal is visible or not.
+
+#### `localstorageKey`
+
+- type: `String`
+- required: `false`
+- default: `kong-manager-router-playground-requests`
+
+The key to use for storing the playground requests in the local storage.
+
+#### `hideEditorActions`
+
+- type: `boolean`
+- required: `false`
+- default: `false`
+
+Controls whether the editor actions should be hidden or not.
+
+#### `initialExpression`
+
+- type: `string`
+- required: `false`
+- default: `''`
+
+The initial expression to be displayed in the editor.
+
+### Events
+
+#### change
+
+A `change` event is emitted when the expression has been updated.
+
+#### commit
+
+A `commit` event is emitted when the expression has been committed.
+
+#### cancel
+
+A `cancel` event is emitted when the modal's cancel button has been clicked.
+
+#### notify
+
+A `notify` event is emitted when a Toast is triggered. The event payload is an object with the following properties:
+- `message`:
+  - type: `string`
+  - The message to display in the Toast.
+- `type`:
+  - type: `'success' | 'error' | 'warning' | 'info'`
+  - The type of Toast to display.
+
+### Usage example
+
+Please refer to the [sandbox](../sandbox/App.vue).
+
+## TypeScript definitions
+
+TypeScript definitions are bundled with the package and can be directly imported into your host application.
diff --git a/packages/core/expressions/package.json b/packages/core/expressions/package.json
index b0b387610c..6a6599c7a3 100644
--- a/packages/core/expressions/package.json
+++ b/packages/core/expressions/package.json
@@ -37,9 +37,11 @@
     "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
   },
   "devDependencies": {
+    "@kong-ui-public/forms": "workspace:^",
     "@kong/atc-router": "1.6.0-rc.1",
     "@kong/design-tokens": "1.15.3",
     "@kong/kongponents": "9.1.7",
+    "@types/uuid": "^9.0.8",
     "monaco-editor": "0.21.3",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-top-level-await": "^1.4.1",
@@ -66,10 +68,14 @@
   "peerDependencies": {
     "@kong/atc-router": "^1.6.0-rc.1",
     "@kong/kongponents": "^9.1.7",
+    "@kong-ui-public/forms": "workspace:^",
     "monaco-editor": "0.21.3",
     "vue": "^3.4.31"
   },
   "dependencies": {
-    "@kong-ui-public/core": "workspace:^"
+    "@kong-ui-public/core": "workspace:^",
+    "@kong-ui-public/i18n": "workspace:^",
+    "@kong/icons": "^1.14.2",
+    "uuid": "^9.0.1"
   }
 }
diff --git a/packages/core/expressions/sandbox/App.vue b/packages/core/expressions/sandbox/App.vue
index 6ded682b41..e2f4b3d871 100644
--- a/packages/core/expressions/sandbox/App.vue
+++ b/packages/core/expressions/sandbox/App.vue
@@ -29,6 +29,25 @@
         @parse-result-update="onParseResultUpdate"
       />
 
+      <a
+        href="#"
+        style="color: #0030cc; font-weight: bold;"
+        @click.prevent="isVisible = true"
+      >Test with Router Playground</a>
+
+      <RouterPlaygroundModal
+        :hide-editor-actions="false"
+        :initial-expression="expression"
+        :is-visible="isVisible"
+        @cancel="isVisible = false"
+        @commit="handleCommit"
+        @notify="console.log"
+      >
+        <template #page-header>
+          <p>A playground where you can test out the Kong router Expressions.</p>
+        </template>
+      </RouterPlaygroundModal>
+
       <div>
         <p>ParseResult:</p>
         <pre>{{ parseResult }}</pre>
@@ -40,7 +59,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import type { SchemaDefinition } from '../src'
-import { ExpressionsEditor, HTTP_SCHEMA_DEFINITION, STREAM_SCHEMA_DEFINITION } from '../src'
+import { ExpressionsEditor, HTTP_SCHEMA_DEFINITION, STREAM_SCHEMA_DEFINITION, RouterPlaygroundModal } from '../src'
 
 type NamedSchemaDefinition = { name: string; definition: SchemaDefinition }
 
@@ -68,21 +87,18 @@ const btoa = (s: string) => window.btoa(s)
 const expression = ref(expressionPresets[0])
 const schemaDefinition = ref<NamedSchemaDefinition>(schemaPresets[0])
 const parseResult = ref('')
+const isVisible = ref(false)
 
 const onParseResultUpdate = (result: any) => {
   parseResult.value = JSON.stringify(result, null, 2)
 }
 
+const handleCommit = (exp: string) => {
+  expression.value = exp
+  isVisible.value = false
+}
+
 watch(schemaDefinition, (newSchemaDefinition) => {
   schemaDefinition.value = newSchemaDefinition
 })
 </script>
-
-<style lang="scss" scoped>
-.presets {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-}
-</style>
diff --git a/packages/core/expressions/sandbox/index.ts b/packages/core/expressions/sandbox/index.ts
index 52668a0a54..70c15aa2a0 100644
--- a/packages/core/expressions/sandbox/index.ts
+++ b/packages/core/expressions/sandbox/index.ts
@@ -1,6 +1,9 @@
+import '@kong/kongponents/dist/style.css'
 import { createApp } from 'vue'
 import App from './App.vue'
+import Kongponents from '@kong/kongponents'
 
 const app = createApp(App)
 
+app.use(Kongponents)
 app.mount('#app')
diff --git a/packages/core/expressions/src/components/MonacoEditor.vue b/packages/core/expressions/src/components/MonacoEditor.vue
new file mode 100644
index 0000000000..89a26f388e
--- /dev/null
+++ b/packages/core/expressions/src/components/MonacoEditor.vue
@@ -0,0 +1,83 @@
+<template>
+  <div ref="editorRoot" />
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount, defineEmits, defineProps } from 'vue'
+import * as monaco from 'monaco-editor'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  theme: {
+    type: String,
+    default: 'vs',
+  },
+  language: {
+    type: String,
+    default: 'html',
+  },
+  options: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string, event: monaco.editor.IModelContentChangedEvent): void
+}>()
+
+const editorRoot = ref<HTMLElement | null>(null)
+let editor: monaco.editor.IStandaloneCodeEditor
+
+watch(() => props.options, (newOptions) => {
+  if (editor) {
+    editor.updateOptions(newOptions)
+  }
+}, { deep: true })
+
+watch(() => props.modelValue, (newValue) => {
+  if (editor && newValue !== editor.getValue()) {
+    editor.setValue(newValue)
+  }
+})
+
+watch(() => props.language, (newVal) => {
+  if (editor) {
+    monaco.editor.setModelLanguage(editor.getModel()!, newVal)
+  }
+})
+
+watch(() => props.theme, (newVal) => {
+  if (editor) {
+    monaco.editor.setTheme(newVal)
+  }
+})
+
+onMounted(() => {
+  const options = Object.assign(
+    {
+      value: props.modelValue,
+      theme: props.theme,
+      language: props.language,
+    },
+    props.options,
+  )
+
+  editor = monaco.editor.create(editorRoot.value as HTMLElement, options)
+
+  editor.onDidChangeModelContent((event) => {
+    const value = editor!.getValue()
+    if (props.modelValue !== value) {
+      emits('update:modelValue', value, event)
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  editor?.dispose()
+})
+
+</script>
diff --git a/packages/core/expressions/src/components/PageHeader.vue b/packages/core/expressions/src/components/PageHeader.vue
new file mode 100644
index 0000000000..598438945c
--- /dev/null
+++ b/packages/core/expressions/src/components/PageHeader.vue
@@ -0,0 +1,77 @@
+<template>
+  <header
+    class="page-header"
+  >
+    <div class="row">
+      <component
+        :is="`h${size}`"
+        :class="{ 'title-no-margin': noMargin }"
+      >
+        <span
+          v-if="!hideTitle"
+          class="title"
+        >{{ title }}</span>
+        <slot name="title-logo" />
+      </component>
+      <nav class="operations">
+        <slot />
+      </nav>
+    </div>
+    <slot name="below-title" />
+  </header>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+defineProps<{
+  title: string,
+  size: number,
+  hideTitle?: boolean,
+  noMargin?: boolean,
+}>()
+
+</script>
+
+<style lang="scss" scoped>
+.page-header h1, h2, h3, h4, h5, h6 {
+  color: $kui-color-text;
+  font-size: $kui-font-size-70;
+  font-weight: $kui-font-weight-bold;
+  .title {
+    word-break: break-all;
+  }
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-left: -$kui-space-60;
+  margin-right: -$kui-space-60;
+  padding: $kui-space-0 $kui-space-60;
+}
+
+.col {
+  line-height: $kui-line-height-70;
+}
+
+h1, h2, h3, h4, h5, h6, nav {
+  margin-bottom: $kui-space-70;
+  margin-top: $kui-space-0;
+}
+
+.title-no-margin {
+  margin: $kui-space-0 !important;
+}
+
+.operations {
+  align-items: center;
+  display: inline-flex;
+  flex-grow: 0;
+  justify-content: flex-end;
+  margin-left: $kui-space-auto;
+  text-align: right;
+  white-space: nowrap;
+}
+</style>
diff --git a/packages/core/expressions/src/components/RequestCard.vue b/packages/core/expressions/src/components/RequestCard.vue
new file mode 100644
index 0000000000..4ef8e37742
--- /dev/null
+++ b/packages/core/expressions/src/components/RequestCard.vue
@@ -0,0 +1,256 @@
+<template>
+  <div :class="['request-card', { active: props.active }]">
+    <CloseIcon
+      class="close-btn"
+      :size="KUI_ICON_SIZE_30"
+      @click="emit('remove')"
+    />
+    <div class="badges">
+      <KBadge
+        appearance="info"
+        class="protocol"
+      >
+        {{ protocol }}
+      </KBadge>
+      <KBadge
+        v-if="['http', 'https'].includes(protocol) && method"
+        :appearance="getMethodBadgeAppearance(method)"
+      >
+        {{ method.toUpperCase() }}
+      </KBadge>
+    </div>
+    <div class="url">
+      {{ url }}
+    </div>
+    <div
+      v-if="sni"
+      class="sni"
+    >
+      <div class="section-title">
+        {{ i18n.t('request.SNI') }}
+      </div>
+      <div class="sni-content">
+        {{ sni }}
+      </div>
+    </div>
+    <div
+      v-if="headers && Object.keys(headers).length > 0"
+      class="headers"
+    >
+      <div class="section-title">
+        {{ i18n.t('request.headers') }}
+      </div>
+      <ul
+        v-for="(values, key) in headers"
+        :key="key"
+        class="header"
+      >
+        <li class="header-key">
+          {{ key }}
+          <ul>
+            <template v-if="Array.isArray(values)">
+              <li
+                v-for="value in values"
+                :key="value"
+                class="header-value"
+              >
+                {{ value }}
+              </li>
+            </template>
+            <li
+              v-else
+              :key="values"
+              class="header-value"
+            >
+              {{ values }}
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import { computed } from 'vue'
+import { CloseIcon } from '@kong/icons'
+import { BadgeMethodAppearances, type BadgeAppearance } from '@kong/kongponents'
+import composables from '../composables'
+
+const props = defineProps<{
+  active?: boolean;
+  protocol: string;
+  host: string;
+  port?: number;
+  path?: string;
+  method?: string;
+  headers?: { [k: string]: string | string[] };
+  sni?: string;
+}>()
+
+const emit = defineEmits<{
+  remove: []
+}>()
+
+const { i18n } = composables.useI18n()
+
+const url = computed(() => {
+  const port = typeof props.port === 'number' && ((props.protocol === 'http' && props.port !== 80) || (props.protocol === 'https' && props.port !== 443)) ? props.port : undefined
+  const hostPort = [props.host, ...port ? [port] : []].join(':')
+  const origin = `${props.protocol}://${hostPort}`
+  const path = props.path ?? '/'
+
+  return `${origin}${path}`
+})
+
+const getMethodBadgeAppearance = (method: string): BadgeAppearance => {
+  const lowerCasedMethod = method.toLowerCase()
+
+  return (Object.values(BadgeMethodAppearances).includes(lowerCasedMethod as any)
+    ? lowerCasedMethod
+    : 'custom') as BadgeAppearance
+}
+</script>
+
+<style lang="scss" scoped>
+.request-card {
+  align-items: flex-start;
+  background-color: $kui-color-background;
+  border-radius: $kui-border-radius-30;
+  display: flex;
+  flex-direction: column;
+  gap: $kui-space-40;
+  justify-content: flex-start;
+  min-width: 0;
+  padding: $kui-space-50;
+  position: relative;
+
+  &::before {
+    border: $kui-border-width-10 solid $kui-color-border-neutral-weaker;
+    border-radius: $kui-border-radius-30;
+    content: ' ';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &.active::before {
+    border: $kui-border-width-20 solid $kui-color-border-primary-weak;
+  }
+
+  .close-btn {
+    cursor: pointer;
+    display: none !important;
+    position: absolute;
+    right: 12px;
+    top: 12px;
+  }
+
+  &:hover {
+    .close-btn {
+      display: block !important;
+    }
+  }
+
+  .badges {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: $kui-space-40;
+    margin-bottom: $kui-space-30;
+  }
+
+  .url {
+    color: $kui-color-text;
+    font-family: $kui-font-family-code;
+    font-size: $kui-font-size-30;
+    word-break: break-all;
+  }
+
+  .headers {
+    .header {
+      font-family: $kui-font-family-code;
+      list-style: none;
+
+      &,
+      ul {
+        margin: 0;
+        padding: 0;
+      }
+
+      li {
+        list-style: none;
+        margin-left: $kui-space-60;
+        padding-left: $kui-space-30;
+        position: relative;
+        word-break: break-all;
+      }
+
+      li::before {
+        background-color: #000;
+        bottom: -12px;
+        content: " ";
+        left: -10px;
+        position: absolute;
+        top: 5px;
+        width: 1px;
+      }
+
+      li:not(:first-child):last-child::before {
+        display: none;
+      }
+
+      li:only-child::before {
+        background-color: #000;
+        bottom: 7px;
+        content: " ";
+        display: list-item;
+        height: 7px;
+        left: -10px;
+        position: absolute;
+        top: 5px;
+        width: 1px;
+      }
+
+      li::after {
+        background-color: #000;
+        content: " ";
+        height: 1px;
+        left: -10px;
+        position: absolute;
+        top: 12px;
+        width: 10px;
+      }
+    }
+
+    .header-key {
+      font-size: $kui-font-size-30;
+      font-weight: bold;
+      margin-left: $kui-space-40;
+      word-break: break-all;
+    }
+
+    .header-value {
+      font-size: $kui-font-size-30;
+      font-weight: normal;
+      margin-left: $kui-space-60;
+      word-break: break-all;
+    }
+  }
+
+  .sni {
+    .sni-content {
+      font-family: $kui-font-family-code;
+      font-size: $kui-font-size-30;
+      word-break: break-all;
+    }
+  }
+
+  .section-title {
+    font-weight: bold;
+  }
+}
+</style>
diff --git a/packages/core/expressions/src/components/RequestImportModal.vue b/packages/core/expressions/src/components/RequestImportModal.vue
new file mode 100644
index 0000000000..7ece82214f
--- /dev/null
+++ b/packages/core/expressions/src/components/RequestImportModal.vue
@@ -0,0 +1,159 @@
+<template>
+  <KModal
+    action-button-text="Import"
+    class="import-requests-modal"
+    text-align="left"
+    :title="i18n.t('requestImport.title')"
+    :visible="visible"
+    @cancel="emit('dismiss', false)"
+    @proceed="handleProceed"
+  >
+    <KAlert
+      appearance="warning"
+      class="import-requests-alert"
+    >
+      <i18n-t
+        keypath="requestImport.warning"
+        tag="p"
+      >
+        <template #boldText>
+          <strong>{{ i18n.t('requestImport.warningBoldText') }}</strong>
+        </template>
+      </i18n-t>
+    </KAlert>
+
+    <MonacoEditor
+      ref="editors"
+      v-model="json"
+      class="json-editor"
+      data-testid="import-requests-editor"
+      language="json"
+      :options="options"
+    />
+
+    <KAlert
+      v-if="errorMessage"
+      appearance="danger"
+      class="import-requests-error"
+      :message="errorMessage"
+    />
+  </KModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { transformCheckRequest } from '../utils'
+import MonacoEditor from './MonacoEditor.vue'
+import type { Request } from '../definitions'
+import type * as Monaco from 'monaco-editor'
+import composables from '../composables'
+
+const { i18n, i18nT } = composables.useI18n()
+
+defineProps<{
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  dismiss: [completed: boolean]
+  import: [requests: Request[]]
+}>()
+
+const json = ref('')
+const errorMessage = ref<string | undefined>(undefined)
+
+const options: Monaco.editor.IEditorOptions = {
+  automaticLayout: true,
+  fixedOverflowWidgets: true,
+  fontSize: 14,
+  lineNumbersMinChars: 3,
+  lineDecorationsWidth: 2,
+  minimap: {
+    enabled: false,
+  },
+  renderValidationDecorations: 'editable',
+  overviewRulerLanes: 0,
+  renderLineHighlightOnlyWhenFocus: true,
+  scrollBeyondLastLine: false,
+}
+
+const loadRequests = (importedRequests: Partial<Request>[]) => {
+  const loadedRequests: Record<string, Request> = {}
+
+  try {
+    const requests: Partial<Request>[] = importedRequests
+
+    for (const [i, request] of requests.entries()) {
+      const err = transformCheckRequest(request)
+      if (err !== undefined) {
+        if (importedRequests === undefined) {
+          // Loading from local storage
+          console.warn('[router-playground] Failed to load request: ', err, '. ', JSON.stringify(request))
+        } else {
+          // Loading from imported requests
+          throw new Error(i18n.t('errors.failedToImport', { i, err }))
+        }
+      } else {
+        loadedRequests[(request as Request).id] = request as Request
+      }
+    }
+
+  } catch (err: any) {
+    if (importedRequests === undefined) {
+      // Loading from local storage
+      console.error(err)
+    } else {
+      // Loading from imported requests
+      throw err
+    }
+  }
+
+  return Object.values(loadedRequests)
+}
+
+const handleProceed = () => {
+  let hasError = false
+  let requests: Request[] = []
+
+  try {
+    requests = JSON.parse(json.value)
+    if (!Array.isArray(requests)) {
+      throw new Error(i18n.t('requestImport.jsonError'))
+    }
+    emit('import', loadRequests(requests))
+  } catch (e: any) {
+    errorMessage.value = e.message
+    hasError = true
+  }
+
+  if (!hasError) {
+    errorMessage.value = undefined
+    emit('dismiss', true)
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.import-requests-modal {
+  .import-requests-alert {
+    margin-bottom: $kui-space-60;
+  }
+
+  .import-requests-error {
+    margin-top: $kui-space-60;
+  }
+
+  .json-editor {
+    border: $kui-border-width-10 solid $kui-color-border;
+    border-radius: $kui-border-radius-20;
+    height: 500px;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .warning {
+    color: #FABE5F;
+  }
+}
+</style>
diff --git a/packages/core/expressions/src/components/RequestModal.vue b/packages/core/expressions/src/components/RequestModal.vue
new file mode 100644
index 0000000000..7112bfaa22
--- /dev/null
+++ b/packages/core/expressions/src/components/RequestModal.vue
@@ -0,0 +1,212 @@
+<template>
+  <KModal
+    action-button-text="Add"
+    text-align="left"
+    :title="i18n.t('requestModal.title')"
+    :visible="props.visible"
+    @cancel="emit('dismiss', false)"
+    @proceed="handleProceed"
+  >
+    <KInput
+      v-model="url"
+      class="url-input"
+      data-testid="url-input"
+      :error="urlHasError"
+      :error-message="urlErrorMessage"
+      :help="i18n.t('requestModal.help', { protocols: Array.from(supportedProtocols.values()).join(i18n.t('comma')) } )"
+      label="URL"
+      placeholder="URL"
+    />
+
+    <VueFormGenerator
+      class="request-form"
+      :model="model"
+      :options="options"
+      :schema="ADD_REQUEST_SCHEMA"
+      @model-updated="handleModelUpdated"
+    />
+
+    <KAlert
+      v-if="errorMessage"
+      appearance="danger"
+      data-testid="request-modal-error"
+      :message="errorMessage"
+    />
+  </KModal>
+</template>
+
+<script setup lang="ts">
+import { HTTP_PROTOCOLS, SUPPORTED_PROTOCOLS, SECURED_PROTOCOLS, type Request } from '../definitions'
+import { reactive, ref, watch } from 'vue'
+import { transformCheckRequest } from '../utils'
+import { VueFormGenerator } from '@kong-ui-public/forms'
+import composables from '../composables'
+import '@kong-ui-public/forms/dist/style.css'
+
+const { i18n } = composables.useI18n()
+
+const options = {
+  'noneSelectedText': i18n.t('requestModal.noneSelectedText'),
+  'helpAsHtml': true,
+}
+
+const ADD_REQUEST_SCHEMA = {
+  fields: [{
+    label: i18n.t('request.Method'),
+    type: 'select',
+    inputType: 'text',
+    required: true,
+    default: 'GET',
+    selectOptions: {
+      hideNoneSelectedText: true,
+    },
+    placeholder: i18n.t('requestModal.methodInputPlaceholder'),
+    values: ['GET', 'POST', 'PATCH', 'PUT', 'DELETE', 'OPTIONS'],
+    id: 'method',
+    model: 'method',
+    order: 0,
+    visible: (model: Partial<Request>) => {
+      const isVisible = model.protocol !== undefined && HTTP_PROTOCOLS.has(model.protocol)
+      if (!isVisible) {
+        model.method = undefined
+      }
+
+      return isVisible
+    },
+  },
+  {
+    label: i18n.t('request.Headers'),
+    type: 'object-advanced',
+    submitWhenNull: true,
+    placeholder: i18n.t('requestModal.headersInputPlaceholder'),
+    buttonLabel: i18n.t('requestModal.headerButtonLabel'),
+    hintText: i18n.t('requestModal.headerHint'),
+    fields: [
+      {
+        schema: {
+          type: 'input',
+          inputType: 'text',
+          valueType: 'array',
+          placeholder: i18n.t('requestModal.headerValueInputPlaceholder'),
+          hint: i18n.t('requestModal.headerValueHint'),
+        },
+      },
+    ],
+    id: 'headers',
+    model: 'headers',
+    order: 0,
+    visible: (model: Partial<Request>) => {
+      const isVisible = model.protocol !== undefined && SUPPORTED_PROTOCOLS.has(model.protocol)
+      if (!isVisible) {
+        model.headers = undefined
+      }
+
+      return isVisible
+    },
+  },
+  {
+    label: i18n.t('request.SNI'),
+    name: 'sni',
+    type: 'input',
+    inputType: 'text',
+    submitWhenNull: true,
+    placeholder: i18n.t('requestModal.sniPlaceholder'),
+    id: 'sni',
+    model: 'sni',
+    order: 0,
+    visible: (model: Partial<Request>) => {
+      const isVisible = model.protocol !== undefined && SECURED_PROTOCOLS.has(model.protocol)
+      if (!isVisible) {
+        model.sni = undefined
+      }
+
+      return isVisible
+    },
+  }],
+}
+
+const supportedProtocols = new Set(['http', 'https', 'grpc', 'grpcs', 'ws', 'wss'])
+
+const props = defineProps<{
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  dismiss: [completed: boolean]
+  addRequest: [request: Request]
+}>()
+
+const url = ref('')
+const errorMessage = ref<string | undefined>(undefined)
+const model = reactive<Partial<Request>>({})
+
+const urlHasError = ref<boolean>(false)
+const urlErrorMessage = ref<string | undefined>(undefined)
+
+
+const handleModelUpdated = (value: any, key: string) => {
+  (model as any)[key] = value
+}
+
+const handleProceed = () => {
+  try {
+    const err = transformCheckRequest(model)
+    if (err !== undefined) {
+      throw new Error(i18n.t('requestModal.invalidRequest', { err }))
+    }
+
+    emit('addRequest', model as Request)
+    emit('dismiss', true)
+
+  } catch (err: unknown) {
+    errorMessage.value = (err as Error).message
+  }
+}
+
+watch(url, (url) => {
+  try {
+    let u = new URL(url)
+    const protocol = u.protocol.replace(/:$/g, '')
+    if (!supportedProtocols.has(protocol)) {
+      throw new Error(i18n.t('requestModal.unsupportedProtocol', { protocols: Array.from(supportedProtocols.values()).join(i18n.t('comma')) }))
+    }
+
+    // Handle URLs with grpc-protocol family specially
+    if (['grpc', 'grpcs'].includes(protocol)) {
+      u = new URL(`http:${u.pathname}`)
+      console.log(u)
+    }
+
+    model.protocol = protocol
+    model.host = u.hostname
+    model.port = u.port ? Number.parseInt(u.port) : ['https', 'grpcs', 'wss'].includes(protocol) ? 443 : 80
+    model.path = u.pathname
+
+    urlHasError.value = false
+    urlErrorMessage.value = undefined
+
+  } catch (e: any) {
+    model.protocol = undefined
+    model.host = undefined
+    model.port = undefined
+    model.path = undefined
+
+    urlErrorMessage.value = e.message
+    urlHasError.value = true
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.url-input {
+  margin-bottom: $kui-space-90;
+  width: 100%;
+}
+
+.request-form {
+  :deep(fieldset) {
+    border: 0;
+    padding: 0;
+  }
+}
+</style>
diff --git a/packages/core/expressions/src/components/RouterPlayground.cy.ts b/packages/core/expressions/src/components/RouterPlayground.cy.ts
new file mode 100644
index 0000000000..46cf4f0699
--- /dev/null
+++ b/packages/core/expressions/src/components/RouterPlayground.cy.ts
@@ -0,0 +1,186 @@
+// fixme(zehao): this test cannot run without vite plugins in ../../vite.config.ts
+// it gives an erroe when importing RouterPlayground
+// it should be fixed after refactoring whole cypress tests configuration method, see the conversation in PR: 1497
+
+// import RouterPlayground from './RouterPlayground.vue'
+
+// describe('<RouterPlayground />', () => {
+//   beforeEach(() => {
+//     cy.viewport(800, 800)
+//   })
+
+//   it('should show router playground', () => {
+//     cy.mount(RouterPlayground)
+
+//     cy.getTestId('expression-header').should('be.visible')
+//     cy.getTestId('expressions-editor').should('be.visible')
+//     cy.getTestId('expressions-inspirations').should('be.visible')
+//     cy.getTestId('requests-header').should('be.visible')
+//     cy.getTestId('btn-commit').should('be.visible')
+//     cy.getTestId('btn-import').should('be.visible')
+//     cy.getTestId('empty-state-requests').should('be.visible')
+//   })
+
+//   it('initial expression', () => {
+//     cy.mount(RouterPlayground, {
+//       props: {
+//         initialExpression: 'http.host == "localhost"',
+//       },
+//     })
+
+//     cy.getTestId('expressions-editor').contains('http.host == "localhost"')
+//     cy.getTestId('expressions-inspirations').should('not.exist')
+//   })
+
+//   it('inspirations', () => {
+//     cy.mount(RouterPlayground)
+
+//     cy.getTestId('btn-inspiration-0').click()
+//     cy.getTestId('expressions-editor').contains('http.host == "localhost"')
+//     cy.getTestId('btn-inspiration-0').should('not.exist')
+//   })
+
+//   it('expression changed', () => {
+//     const onChangeSpy = cy.spy().as('onChangeSpy')
+//     const onCommitSpy = cy.spy().as('onCommitSpy')
+//     cy.mount(RouterPlayground, {
+//       props: {
+//         initialExpression: 'http.host == "localhost"',
+//         onChange: onChangeSpy,
+//         onCommit: onCommitSpy,
+//       },
+//     })
+//     cy.get('.view-lines').type(' && http.method == "GET"')
+//     cy.get('@onChangeSpy').should('have.been.calledWith', 'http.host == "localhost" && http.method == "GET"')
+
+//     cy.getTestId('btn-commit').click()
+//     cy.get('@onCommitSpy').should('have.been.calledWith', 'http.host == "localhost" && http.method == "GET"')
+//   })
+
+//   it('requests placeholder', () => {
+//     cy.mount(RouterPlayground)
+
+//     cy.getTestId('empty-state-requests').should('be.visible')
+//   })
+
+//   function addRequest({
+//     url,
+//     method,
+//     headers,
+//   }: {
+//     url: string
+//     method: string
+//     headers?: Record<string, string>[]
+//   }) {
+//     cy.getTestId('btn-add-request').click()
+//     cy.getTestId('url-input').should('be.visible')
+//     cy.getTestId('url-input').type(url)
+
+//     cy.get('#method').select(method)
+
+//     if (headers?.length) {
+//       headers.forEach((header, index) => {
+//         cy.getTestId('keyname-input').type(header.key)
+//         cy.getTestId('add-key').click()
+//         cy.get(`:nth-child(${index + 3}) > .form-control`).type(header.value)
+//       })
+//     }
+
+//     cy.getTestId('modal-action-button').click()
+//   }
+
+//   it('add/remove requests', () => {
+//     cy.mount(RouterPlayground)
+
+//     addRequest({
+//       url: 'http://localhost:8000',
+//       method: 'GET',
+//       headers: [
+//         { key: 'Foo', value: 'bar' },
+//       ],
+//     })
+
+//     cy.get('.request-card').should('have.length', 1)
+//     cy.get('.request-card').first().contains('http://localhost:8000')
+//     cy.get('.request-card').first().find('.close-btn').click({ force: true })
+//     cy.get('.request-card').should('not.exist')
+//   })
+
+//   it('matching requests', () => {
+//     cy.mount(RouterPlayground)
+//     const requestIds: string[] = []
+
+//     addRequest({
+//       url: 'http://localhost:8000',
+//       method: 'GET',
+//       headers: [
+//         { key: 'Foo', value: 'bar' },
+//       ],
+//     })
+
+//     addRequest({
+//       url: 'https://www.konghq.com',
+//       method: 'GET',
+//     })
+
+//     // eslint-disable-next-line cypress/unsafe-to-chain-command
+//     cy.get('.request-card').each($card => {
+//       requestIds.push($card.data('testid'))
+//     }).then(() => {
+//       cy.get('.view-lines').type('http.host == "localhost"')
+//       cy.getTestId(requestIds[0]).should('have.class', 'active')
+//       cy.getTestId(requestIds[1]).should('not.have.class', 'active')
+//     })
+//   })
+
+//   it('cache requests', () => {
+//     cy.clearAllLocalStorage()
+
+//     cy.mount(RouterPlayground)
+
+//     addRequest({
+//       url: 'http://localhost:8000',
+//       method: 'GET',
+//     })
+
+//     cy.mount(RouterPlayground)
+//     cy.get('.request-card').should('have.length', 1)
+
+//     cy.getTestId('clear-requests-link').click()
+//     cy.getTestId('modal-action-button').click()
+
+//     cy.mount(RouterPlayground)
+//     cy.get('.request-card').should('not.exist')
+//   })
+
+//   const REQUESTS_TEXT = '[{"method":"POST","headers":{},"protocol":"http","host":"localhost","port":8080,"path":"/","id":"42eafd0a-287b-441d-b88f-f6fe4b44da0d"},{"method":"GET","headers":{},"protocol":"https","host":"konghq.com","port":443,"path":"/abc","id":"da8f04a9-c8c5-495d-a26c-f7bc132a3a64"}]'
+
+//   it('import/export requests', () => {
+//     cy.mount(RouterPlayground)
+//     cy.getTestId('btn-import').click()
+//     cy.getTestId('import-requests-editor').should('be.visible')
+//     cy.getTestId('import-requests-editor').find('.view-lines').type(REQUESTS_TEXT, {
+//       parseSpecialCharSequences: false,
+//     })
+//     cy.getTestId('modal-action-button').click()
+//     cy.get('.request-card').should('have.length', 2)
+//     cy.get('.request-card').first().contains('http://localhost:8080/')
+//     cy.get('.request-card:nth-child(2)').contains('https://konghq.com/abc')
+
+//     cy.window().then(() => {
+//       // eslint-disable-next-line cypress/unsafe-to-chain-command
+//       cy.getTestId('btn-export').focus().click()
+//       cy.assertValueCopiedToClipboard(REQUESTS_TEXT)
+//     })
+//   })
+
+// })
+
+// // todo(zehao): add this to global commands
+// // Cypress.Commands.add('assertValueCopiedToClipboard', value => {
+// //   cy.window().then(win => {
+// //     win.navigator.clipboard.readText().then(text => {
+// //       expect(text).to.eq(value)
+// //     })
+// //   })
+// // })
diff --git a/packages/core/expressions/src/components/RouterPlayground.vue b/packages/core/expressions/src/components/RouterPlayground.vue
new file mode 100644
index 0000000000..b31390340c
--- /dev/null
+++ b/packages/core/expressions/src/components/RouterPlayground.vue
@@ -0,0 +1,511 @@
+<template>
+  <div class="router-playground-wrapper">
+    <div class="router-playground">
+      <SupportText>
+        <i18nT
+          keypath="routerPlayground.help"
+          tag="p"
+        >
+          <template #link>
+            <KExternalLink :href="externalLinks.expressionsLanguageDoc">
+              {{ i18n.t('routerPlayground.learnMore') }}
+            </KExternalLink>
+          </template>
+        </i18nT>
+      </SupportText>
+
+      <PageHeader
+        data-testid="expression-header"
+        :size="4"
+        :title="i18n.t('routerPlayground.expressions')"
+      />
+
+      <ExpressionsEditor
+        v-model="expression"
+        data-testid="expressions-editor"
+        :schema="editorSchema"
+      />
+
+      <div
+        v-if="!hideEditorActions"
+        class="editor-actions"
+      >
+        <KButton
+          appearance="primary"
+          data-testid="btn-commit"
+          size="small"
+          @click="handleCommit"
+        >
+          {{ i18n.t('routerPlayground.addToRoute') }}
+        </KButton>
+      </div>
+
+      <div
+        v-if="expression.trim().length === 0"
+        class="expression-inspirations"
+        data-testid="expressions-inspirations"
+      >
+        <div class="title">
+          <RocketIcon size="16px" />
+          <span>{{ i18n.t('routerPlayground.inspiration') }}</span>
+        </div>
+        <div class="buttons">
+          <KButton
+            v-for="(exp, i) in expressionInspirations"
+            :key="btoa(exp)"
+            appearance="secondary"
+            class="expression-inspiration-item"
+            :data-testid="'btn-inspiration-' + i"
+            size="small"
+            @click="expression = exp"
+          >
+            {{ exp }}
+          </KButton>
+        </div>
+      </div>
+
+      <PageHeader
+        class="routes"
+        data-testid="requests-header"
+        :size="4"
+        title="Requests"
+      >
+        <div class="actions">
+          <KTooltip :text="i18n.t('routerPlayground.importTooltip')">
+            <KButton
+              appearance="tertiary"
+              class="import-button"
+              data-testid="btn-import"
+              size="small"
+              @click="currentModal = Modal.IMPORT"
+            >
+              {{ i18n.t('routerPlayground.import') }}
+            </KButton>
+          </KTooltip>
+          <KTooltip
+            v-if="requests.length > 0"
+            :text="i18n.t('routerPlayground.exportTooltip')"
+          >
+            <KButton
+              appearance="tertiary"
+              class="export-button"
+              data-testid="btn-export"
+              size="small"
+              @click="handleExportRequests"
+            >
+              {{ i18n.t('routerPlayground.export') }}
+            </KButton>
+          </KTooltip>
+          <KButton
+            appearance="secondary"
+            data-testid="btn-add-request"
+            size="small"
+            @click="currentModal = Modal.ADD"
+          >
+            {{ i18n.t('routerPlayground.add') }}
+          </KButton>
+        </div>
+      </PageHeader>
+
+      <KEmptyState
+        v-if="requests.length === 0"
+        :action-button-text="i18n.t('routerPlayground.addRequest')"
+        data-testid="empty-state-requests"
+        @click-action="handleAddRequestCTA"
+      >
+        <template #title>
+          {{ i18n.t('routerPlayground.noRequests') }}
+        </template>
+        <template #default>
+          {{ i18n.t('routerPlayground.noRequestsDescription') }}
+        </template>
+      </KEmptyState>
+
+      <div class="route-cards">
+        <RequestCard
+          v-for="route in requests"
+          :key="route.id"
+          :active="routeMatches[route.id]"
+          :data-testid="route.id"
+          :headers="route.headers"
+          :host="route.host"
+          :method="route.method"
+          :path="route.path"
+          :port="route.port"
+          :protocol="route.protocol"
+          :sni="route.sni"
+          @remove="handleRemoveRequest(route.id)"
+        />
+      </div>
+
+      <i18n-t
+        v-if="requests.length > 0"
+        class="route-cards-footer"
+        keypath="routerPlayground.clearRequests"
+        tag="div"
+      >
+        <template #link>
+          <span
+            class="link"
+            data-testid="clear-requests-link"
+            @click="currentModal = Modal.CLEAR"
+          >{{ i18n.t('routerPlayground.click') }}</span>
+        </template>
+      </i18n-t>
+
+      <Teleport to="body">
+        <RequestModal
+          v-if="currentModal === Modal.ADD"
+          :visible="currentModal === Modal.ADD"
+          @add-request="requests.push($event)"
+          @dismiss="onDismissRequestModal"
+        />
+
+        <RequestImportModal
+          v-if="currentModal === Modal.IMPORT"
+          :visible="currentModal === Modal.IMPORT"
+          @dismiss="onDismissImportModal"
+          @import="requests = $event"
+        />
+
+        <KModal
+          v-if="currentModal === Modal.CLEAR"
+          action-button-appearance="danger"
+          action-button-text="Clear"
+          title="Warning"
+          :visible="currentModal === Modal.CLEAR"
+          @cancel="currentModal = undefined"
+          @proceed="handleClearRequests"
+        >
+          <template #default>
+            {{ i18n.t('routerPlayground.clearRequestsPrompt') }}
+          </template>
+        </KModal>
+      </Teleport>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onUnmounted, ref, type Ref, watch } from 'vue'
+import { createSchema, HTTP_SCHEMA_DEFINITION } from '../schema'
+import { v4 as uuidv4 } from 'uuid'
+import * as Atc from '@kong/atc-router'
+import ExpressionsEditor from './ExpressionsEditor.vue'
+import PageHeader from './PageHeader.vue'
+import RequestCard from './RequestCard.vue'
+import RequestImportModal from './RequestImportModal.vue'
+import RequestModal from './RequestModal.vue'
+import type { Request } from '../definitions'
+import { transformCheckRequest } from '../utils'
+import SupportText from './SupportText.vue'
+import composables from '../composables'
+import { RocketIcon } from '@kong/icons'
+import externalLinks from '../external-links'
+
+const { i18n, i18nT } = composables.useI18n()
+
+const DEFAULT_LS_KEY = 'kong-manager-router-playground-requests'
+
+export type Props = {
+  /**
+   * @default 'kong-manager-router-playground-requests'
+   */
+  localstorageKey?: string
+  hideEditorActions?: boolean
+  initialExpression?: string
+}
+
+export type Emits = {
+  change: [expression: string]
+  commit: [expression: string]
+  notify: [{ message: string, type: string }]
+}
+
+enum Modal {
+  ADD = 1,
+  IMPORT = 2,
+  CLEAR = 3,
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// As the router playground currently only support HTTP based protocols, we will pin HTTP schema here for now
+const editorSchema = computed(() => ({ name: 'http', definition: HTTP_SCHEMA_DEFINITION }))
+
+const testSchema = createSchema(HTTP_SCHEMA_DEFINITION)
+
+const testRouter: Ref<Atc.Router | undefined> = ref()
+
+const expression = ref(props.initialExpression as string ?? '')
+
+const localstorageKey = ref(props.localstorageKey ?? DEFAULT_LS_KEY)
+
+const loadRequests = () => {
+  const loadedRequests: Request[] = []
+
+  try {
+    const requests: Partial<Request>[] = JSON.parse(localStorage.getItem(localstorageKey.value) ?? '[]')
+
+    for (const [, request] of requests.entries()) {
+      const err = transformCheckRequest(request)
+      if (err !== undefined) {
+        // Loading from local storage
+        console.warn('[router-playground] Failed to load request: ', err, '. ', JSON.stringify(request))
+      } else {
+        loadedRequests.push(request as Request)
+      }
+    }
+
+  } catch (err: any) {
+    console.error(err)
+  }
+
+  return loadedRequests
+}
+
+const requests = ref<Request[]>(loadRequests())
+
+const expressionInspirations = [
+  'http.host == "localhost"',
+  'net.protocol ~ "^https?$"',
+  'net.protocol ~ "^https?$" && net.dst.port == 80',
+]
+
+const currentModal = ref<Modal | undefined>(undefined)
+
+const routeMatches = computed<{ [id: string]: boolean }>(() => requests.value.reduce((map, route) => {
+  if (testRouter.value === undefined) {
+    map[route.id] = false
+
+    return map
+  }
+
+  const context = new Atc.Context(testSchema)
+
+  context.addValue('net.protocol', { String: route.protocol })
+  context.addValue('net.dst.port', { Int: route.port })
+
+  context.addValue('http.host', { String: route.host })
+  context.addValue('http.path', { String: route.path })
+
+  if (route.method) {
+    context.addValue('http.method', { String: route.method })
+  }
+
+  if (route.headers) {
+    Object.entries(route.headers).forEach(([key, values]) => {
+      context.addValue(`http.headers.${key.toLowerCase().replace(/-/g, '_')}`, { String: values.toString() })
+    })
+  }
+
+  if (route.sni) {
+    context.addValue('tls.sni', { String: route.sni })
+  }
+
+  const match = testRouter.value.execute(context)
+
+  context.free()
+
+  map[route.id] = match
+
+  return map
+}, {} as Record<string, boolean>))
+
+const btoa = (s: string) => window.btoa(s)
+
+const handleCommit = () => {
+  emit('commit', expression.value)
+}
+
+const handleExportRequests = () => {
+  navigator.clipboard.writeText(JSON.stringify(requests.value))
+  emit('notify', { message: i18n.t('routerPlayground.notifyCopy'), type: 'success' })
+}
+
+const handleAddRequestCTA = () => {
+  currentModal.value = Modal.ADD
+}
+
+const handleClearRequests = () => {
+  requests.value = []
+  currentModal.value = undefined
+  emit('notify', { message: i18n.t('routerPlayground.notifyClear'), type: 'success' })
+}
+
+const handleRemoveRequest = (id: string) => {
+  requests.value = requests.value.filter((route) => route.id !== id)
+}
+
+const onDismissImportModal = (completed: boolean) => {
+  if (completed) {
+    emit('notify', { message: i18n.t('routerPlayground.notifyImport'), type: 'success' })
+  }
+
+  currentModal.value = undefined
+}
+
+const onDismissRequestModal = () => {
+  currentModal.value = undefined
+}
+
+watch(expression, (expression) => {
+  emit('change', expression)
+
+  if (testRouter.value !== undefined) {
+    testRouter.value.free()
+    testRouter.value = undefined
+  }
+
+  const router = new Atc.Router(testSchema)
+
+  if (router.addMatcher(0, uuidv4(), expression) === undefined) {
+    testRouter.value = router
+  }
+}, { immediate: true })
+
+watch(requests, (requests) => {
+  if (!localstorageKey.value.length) {
+    localStorage.removeItem(localstorageKey.value)
+  } else {
+    localStorage.setItem(localstorageKey.value, JSON.stringify(requests))
+  }
+}, { deep: true })
+
+onUnmounted(() => {
+  testSchema.free()
+  if (testRouter.value !== undefined) {
+    testRouter.value.free()
+    testRouter.value = undefined
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.router-playground-wrapper {
+  .page-header {
+    color: $kui-color-text;
+    font-size: $kui-font-size-70;
+    font-weight: $kui-font-weight-bold;
+  }
+
+  .editor-actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: $kui-space-60;
+    width: 100%;
+  }
+
+  .router-playground {
+    margin: auto;
+
+    .navigate-back {
+      align-items: center;
+      color: $kui-color-text-primary-strong;
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      font-size: $kui-font-size-40;
+      font-weight: $kui-font-weight-bold;
+      gap: $kui-space-40;
+      justify-content: flex-start;
+      margin-bottom: $kui-space-110;
+      margin-top: 10px;
+
+      .material-icons {
+        font-size: $kui-font-size-30;
+      }
+    }
+
+    .expression-inspirations {
+      margin-top: $kui-space-60;
+
+      .title {
+        align-items: center;
+        color: $kui-color-text-neutral;
+        display: flex;
+        flex-direction: row;
+        font-size: $kui-font-size-30;
+        font-weight: bold;
+        gap: $kui-space-40;
+        justify-content: flex-start;
+        margin-top: 10px;
+
+        .material-icons {
+          font-size: $kui-font-size-30;
+        }
+      }
+
+      .buttons {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: $kui-space-40;
+        margin-top: $kui-space-50;
+
+        button.expression-inspiration-item {
+          border-style: solid;
+          font-family: $kui-font-family-code;
+        }
+      }
+    }
+
+    .expression-editor-caption {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      font-size: $kui-font-size-30;
+      justify-content: flex-start;
+      margin: $kui-space-40 $kui-space-0;
+      opacity: 0.7;
+    }
+
+    .expression-list {
+      tbody tr {
+        font-family: $kui-font-family-code;
+      }
+    }
+
+    .routes {
+      margin-top: $kui-space-90;
+
+      .actions {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: $kui-space-40;
+      }
+    }
+
+    .import-button,
+    .export-button {
+      margin-right: $kui-space-50;
+    }
+
+    .route-cards {
+      display: grid;
+      gap: $kui-space-60;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    .route-cards-footer {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      font-size: $kui-font-size-30;
+      justify-content: center;
+      margin: $kui-space-60 $kui-space-0 $kui-space-40;
+      opacity: 0.7;
+    }
+  }
+
+  .link {
+    cursor: pointer;
+    margin: 0 $kui-space-10;
+    text-decoration: underline;
+  }
+}
+
+</style>
diff --git a/packages/core/expressions/src/components/RouterPlaygroundModal.vue b/packages/core/expressions/src/components/RouterPlaygroundModal.vue
new file mode 100644
index 0000000000..df23c35b05
--- /dev/null
+++ b/packages/core/expressions/src/components/RouterPlaygroundModal.vue
@@ -0,0 +1,72 @@
+<template>
+  <Teleport to="body">
+    <KPrompt
+      :action-button-text="i18n.t('routerPlaygroundModal.actionButton')"
+      class="router-playground-modal"
+      text-align="left"
+      :title="i18n.t('routerPlaygroundModal.title')"
+      :visible="isVisible"
+      @cancel="emit('cancel')"
+      @proceed="emit('commit', expression)"
+    >
+      <template #default>
+        <RouterPlayground
+          v-bind="props"
+          hide-editor-actions
+          hide-title
+          @change="exp => expression = exp"
+          @notify="emit('notify', $event)"
+        />
+      </template>
+    </KPrompt>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type {
+  Props as RouterPlaygroudProps,
+  Emits as RouterPlaygroudEmits,
+} from './RouterPlayground.vue'
+import RouterPlayground from './RouterPlayground.vue'
+import composeables from '../composables'
+
+const { i18n } = composeables.useI18n()
+
+const props = defineProps<{
+  isVisible: boolean
+} & RouterPlaygroudProps>()
+
+const emit = defineEmits<{
+  cancel: []
+} & RouterPlaygroudEmits>()
+
+const expression = ref('')
+</script>
+
+<style lang="scss">
+.router-playground-modal {
+  .k-modal-backdrop {
+    overflow-y: scroll;
+  }
+  .modal-container {
+    max-width: 1280px !important;
+    width: 100% !important;
+  }
+  .k-modal-header {
+    margin-bottom: $kui-space-0 !important;
+  }
+  .k-prompt-header hr {
+    margin-bottom: $kui-space-0;
+    margin-top: $kui-space-50;
+  }
+  .k-prompt-body hr {
+    margin-bottom: $kui-space-0;
+    margin-top: $kui-space-0;
+  }
+  .k-prompt-body-content {
+    max-height: 800px !important;
+    padding: $kui-space-80 $kui-space-0;
+  }
+}
+</style>
diff --git a/packages/core/expressions/src/components/SupportText.vue b/packages/core/expressions/src/components/SupportText.vue
new file mode 100644
index 0000000000..23d17ffe9e
--- /dev/null
+++ b/packages/core/expressions/src/components/SupportText.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="support-text">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.support-text {
+
+  color: $kui-color-text;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding-bottom: $kui-space-90;
+
+  :deep(p) {
+    font-size: $kui-font-size-30;
+    margin-bottom: $kui-space-0;
+  }
+}
+
+</style>
diff --git a/packages/core/expressions/src/composables/index.ts b/packages/core/expressions/src/composables/index.ts
new file mode 100644
index 0000000000..3893dfc828
--- /dev/null
+++ b/packages/core/expressions/src/composables/index.ts
@@ -0,0 +1,6 @@
+import useI18n from './useI18n'
+
+// All composables must be exported as part of the default object for Cypress test stubs
+export default {
+  useI18n,
+}
diff --git a/packages/core/expressions/src/composables/useI18n.ts b/packages/core/expressions/src/composables/useI18n.ts
new file mode 100644
index 0000000000..337ff02756
--- /dev/null
+++ b/packages/core/expressions/src/composables/useI18n.ts
@@ -0,0 +1,11 @@
+import { createI18n, i18nTComponent } from '@kong-ui-public/i18n'
+import english from '../locales/en.json'
+
+export default function useI18n() {
+  const i18n = createI18n<typeof english>('en-us', english)
+
+  return {
+    i18n,
+    i18nT: i18nTComponent<typeof english>(i18n), // Translation component <i18n-t>
+  }
+}
diff --git a/packages/core/expressions/src/definitions.ts b/packages/core/expressions/src/definitions.ts
new file mode 100644
index 0000000000..bf8a9dc4ea
--- /dev/null
+++ b/packages/core/expressions/src/definitions.ts
@@ -0,0 +1,25 @@
+export type Request = {
+  id: string;
+  protocol: string;
+  host: string;
+  port: number;
+  path: string;
+  method?: string;
+  headers?: { [k: string]: string | string[] };
+  sni?: string;
+}
+
+export const DEFAULT_PROTOCOL_PORTS = {
+  http: 80,
+  https: 443,
+  grpc: 80,
+  grpcs: 443,
+  ws: 80,
+  wss: 443,
+}
+
+export const HTTP_PROTOCOLS = new Set(['http', 'https'])
+
+export const SECURED_PROTOCOLS = new Set(['https', 'grpcs', 'wss'])
+
+export const SUPPORTED_PROTOCOLS = new Set(Object.keys(DEFAULT_PROTOCOL_PORTS))
diff --git a/packages/core/expressions/src/external-links.ts b/packages/core/expressions/src/external-links.ts
new file mode 100644
index 0000000000..6aaa75eb65
--- /dev/null
+++ b/packages/core/expressions/src/external-links.ts
@@ -0,0 +1,3 @@
+export default {
+  expressionsLanguageDoc: 'https://docs.konghq.com/gateway/latest/reference/expressions-language/language-references/',
+}
diff --git a/packages/core/expressions/src/index.ts b/packages/core/expressions/src/index.ts
index ec9ebd21b3..b4916869b8 100644
--- a/packages/core/expressions/src/index.ts
+++ b/packages/core/expressions/src/index.ts
@@ -1,8 +1,9 @@
 import ExpressionsEditor from './components/ExpressionsEditor.vue'
+import RouterPlaygroundModal from './components/RouterPlaygroundModal.vue'
 
 export * as Atc from '@kong/atc-router'
 export * from './schema'
-export { ExpressionsEditor }
+export { ExpressionsEditor, RouterPlaygroundModal }
 
 declare const asyncInit: Promise<any>
 export { asyncInit }
diff --git a/packages/core/expressions/src/locales/en.json b/packages/core/expressions/src/locales/en.json
new file mode 100644
index 0000000000..f9c80b9d8d
--- /dev/null
+++ b/packages/core/expressions/src/locales/en.json
@@ -0,0 +1,64 @@
+{
+  "comma": ", ",
+  "requestImport": {
+    "warning": "Warning: All saved requests {boldText} with the imported ones.",
+    "warningBoldText": "will be removed and replaced",
+    "title": "Import requests from JSON",
+    "jsonError": "Expecting a JSON array"
+  },
+  "requestModal": {
+    "title": "Add a request",
+    "help": "Supported protocols: {protocols}",
+    "noneSelectedText": "Nothing Selected...",
+    "methodInputPlaceholder": "Enter a Method",
+    "headersInputPlaceholder": "Enter header name",
+    "headerButtonLabel": "Header Values",
+    "headerHint": "e.g. my-header",
+    "headerValueInputPlaceholder": "Comma separated list of header values",
+    "headerValueHint": "e.g. value1, value2, value 3",
+    "sniPlaceholder": "Enter an SNI",
+    "invalidRequest": "Invalid request: {err}",
+    "unsupportedProtocol": "Unsupported protocol. (Supported protocols: {protocols})"
+  },
+  "request": {
+    "SNI": "SNI",
+    "headers": "headers",
+    "Method": "Method",
+    "Headers": "Headers"
+  },
+  "routerPlayground": {
+    "help": "A playground where you can test out the Kong router Expressions. {link}",
+    "learnMore": "Learn more",
+    "expressions": "Expression",
+    "addToRoute": "Add to Route",
+    "inspiration": "Inspiration for Quickstart",
+    "importTooltip": "Import requests in JSON format",
+    "import": "Import",
+    "exportTooltip": "Export all requests as JSON to clipboard",
+    "export": "Export",
+    "add": "Add",
+    "addRequest": "Add a request",
+    "noRequests": "No requests",
+    "noRequestsDescription": "Add requests to test out route expressions.",
+    "clearRequests": "Requests appearing here are saved locally within the browser. {link} to clear all saved requests",
+    "click": "Click here",
+    "clearRequestsPrompt": "All saved requests will be removed from the browser. This operation is permanent and cannot be undone. Would you like to proceed?",
+    "notifyCopy": "Successfully copied to clipboard",
+    "notifyClear": "Successfully cleared all requests",
+    "notifyImport": "Successfully imported requests from JSON"
+  },
+  "routerPlaygroundModal": {
+    "actionButton": "Add to Route",
+    "title": "Router Playground"
+  },
+  "errors": {
+    "requiredProtocol": "Protocol is required",
+    "unsupportedProtocols": "Protocol is unsupported (Supported protocols: {protocols})",
+    "requiredHost": "Host is required",
+    "requiredPath": "Path is required",
+    "sniNotAvailable": "SNI is not available for \"{protocol}\" protocol",
+    "requiredMethod": "Method is required for \"{protocol}\" protocol",
+    "methodShouldCapitalized": "Method should be all capitalized",
+    "failedToImport": "Failed to import request #{i}: {err}"
+  }
+}
diff --git a/packages/core/expressions/src/schema.ts b/packages/core/expressions/src/schema.ts
index 13681b446c..45cb62e272 100644
--- a/packages/core/expressions/src/schema.ts
+++ b/packages/core/expressions/src/schema.ts
@@ -42,14 +42,17 @@ export const STREAM_SCHEMA_DEFINITION: SchemaDefinition = {
   IpAddr: ['net.src.ip', 'net.dst.ip'],
 }
 
+export const HTTP_BASED_PROTOCOLS = ['http', 'https', 'grpc', 'grpcs', 'ws', 'wss']
+export const STREAM_BASED_PROTOCOLS = ['tcp', 'udp', 'tls', 'tls_passthrough']
+
 export const PROTOCOL_TO_SCHEMA = (() => {
   const s: Record<string, Schema> = {}
 
-  for (const protocol of ['http', 'https', 'grpc', 'grpcs', 'ws', 'wss']) {
+  for (const protocol of HTTP_BASED_PROTOCOLS) {
     s[protocol] = { name: protocol, definition: HTTP_SCHEMA_DEFINITION }
   }
 
-  for (const protocol of ['tcp', 'udp', 'tls', 'tls_passthrough']) {
+  for (const protocol of STREAM_BASED_PROTOCOLS) {
     s[protocol] = { name: protocol, definition: STREAM_SCHEMA_DEFINITION }
   }
 
diff --git a/packages/core/expressions/src/utils.ts b/packages/core/expressions/src/utils.ts
new file mode 100644
index 0000000000..cd5e771052
--- /dev/null
+++ b/packages/core/expressions/src/utils.ts
@@ -0,0 +1,62 @@
+import { v4 as uuidv4 } from 'uuid'
+import {
+  DEFAULT_PROTOCOL_PORTS, HTTP_PROTOCOLS, SECURED_PROTOCOLS, SUPPORTED_PROTOCOLS, type Request,
+} from './definitions'
+import composables from './composables'
+
+export const validateRequest = (request: Request) => {
+  if (!SUPPORTED_PROTOCOLS.has(request.protocol)) throw new Error(`Unsupported protocol: ${request.protocol}. (Supported protocols: ${Array.from(SUPPORTED_PROTOCOLS.values()).join(', ')})`)
+}
+
+/**
+ * Transforms and checks if the request is valid
+ * @param request
+ * @returns
+ */
+export const transformCheckRequest = (request: Partial<Request>): string | undefined => {
+  const { i18n } = composables.useI18n()
+
+  if (request.id === undefined) {
+    request.id = uuidv4()
+  }
+
+  if (!request.protocol) {
+    return i18n.t('errors.requiredProtocol')
+  }
+
+  if (!SUPPORTED_PROTOCOLS.has(request.protocol)) {
+    return i18n.t('errors.unsupportedProtocols', {
+      protocols: Array.from(SUPPORTED_PROTOCOLS).join(i18n.t('comma')),
+    })
+  }
+
+  if (!request.port) {
+    request.port = (DEFAULT_PROTOCOL_PORTS as any)[request.protocol]
+  }
+
+  if (!request.host) {
+    return i18n.t('errors.requiredHost')
+  }
+
+  if (!request.path) {
+    return i18n.t('errors.requiredPath')
+  }
+
+  if (!SECURED_PROTOCOLS.has(request.protocol) && request.sni) {
+    return i18n.t('errors.sniNotAvailable', { protocol: request.protocol })
+  }
+
+  if (HTTP_PROTOCOLS.has(request.protocol)) {
+    if (Array.isArray(request.method)) {
+      request.method = request.method[0]
+    }
+
+    if (!request.method) {
+      return i18n.t('errors.requiredMethod', { protocol: request.protocol })
+    }
+
+    if (!/^[A-Z]+$/g.test(request.method)) {
+      return i18n.t('errors.methodShouldCapitalized')
+    }
+  }
+}
diff --git a/packages/core/expressions/vite.config.ts b/packages/core/expressions/vite.config.ts
index ec1423e694..62ed455b16 100644
--- a/packages/core/expressions/vite.config.ts
+++ b/packages/core/expressions/vite.config.ts
@@ -21,7 +21,7 @@ const config = mergeConfig(sharedViteConfig, defineConfig({
       fileName: (format) => `${sanitizedPackageName}.${format}.js`,
     },
     rollupOptions: {
-      external: ['monaco-editor'],
+      external: ['monaco-editor', '@kong-ui-public/forms', '@kong-ui-public/forms/dist/style.css'],
     },
   },
   plugins: [
@@ -29,11 +29,11 @@ const config = mergeConfig(sharedViteConfig, defineConfig({
     topLevelAwait({
       promiseExportName: 'asyncInit',
     }),
-    // We don't need this plugin to bundle the library. Only for sandbox previews.
-    // See: https://github.com/vdesjs/vite-plugin-monaco-editor/issues/21
-    ...process.env.USE_SANDBOX
+    // This plugin is only used in the sandbox & testing environment
+    // It generates extra files in dist folder which are not need in library build
+    ...(process.env.USE_SANDBOX
       ? [((monacoEditorPlugin as any).default as typeof monacoEditorPlugin)({})]
-      : [],
+      : []),
   ],
 }))
 
diff --git a/packages/entities/entities-routes/docs/route-form.md b/packages/entities/entities-routes/docs/route-form.md
index f5b92e3093..99472de710 100644
--- a/packages/entities/entities-routes/docs/route-form.md
+++ b/packages/entities/entities-routes/docs/route-form.md
@@ -109,7 +109,7 @@ Show/hide Route name field. If `true`, `name` field is stripped from payload obj
 - required: `false`
 - default: `false`
 
-Show/hide Service Select field. Should be used in case of manual adding `service_id` in payload. 
+Show/hide Service Select field. Should be used in case of manually adding `service_id` in payload.
 
 #### `showTagsFiledUnderAdvanced`
 
@@ -154,6 +154,13 @@ Show tags field under _Advanced Fields_ collapse or in it's default place (befor
     - default: `undefined`
     - Text to show in the tooltip of the Expressions config tab.
 
+#### `showExpressionsModalEntry`
+
+- type: `Boolean`
+- required: `false`
+- default: `false`
+
+Show/hide the Expressions modal entry button.
 
 ### Slots
 
@@ -202,6 +209,16 @@ A `@update` event is emitted when the form is saved. The event payload is the Ro
 
 A `@model-updated` event is emitted when any form value was changed. The event payload is the Route payload object.
 
+#### notify
+
+A `@notify` event is emitted when a Toast is called. The event payload is an object with the following properties:
+- `message`:
+  - type: `string`
+  - The message to display in the Toast.
+- `type`:
+  - type: `'success' | 'error' | 'warning' | 'info'`
+  - The type of Toast to display.
+
 ### Usage example
 
 Please refer to the [sandbox](../sandbox/pages/RouteListPage.vue). The form is accessible by clicking the `+ New Route` button or `Edit` action of an existing Route.
diff --git a/packages/entities/entities-routes/package.json b/packages/entities/entities-routes/package.json
index d2701c9753..d4cec5843c 100644
--- a/packages/entities/entities-routes/package.json
+++ b/packages/entities/entities-routes/package.json
@@ -67,7 +67,7 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "700KB"
+    "errorLimit": "800KB"
   },
   "dependencies": {
     "@kong-ui-public/entities-shared": "workspace:^",
diff --git a/packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue b/packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue
index 11766c81a3..3de2c2e16f 100644
--- a/packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue
+++ b/packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue
@@ -26,6 +26,7 @@
     :config="konnectConfig"
     :route-flavors="routeFlavors"
     :route-id="routeId"
+    show-expressions-modal-entry
     @error="onError"
     @update="onUpdate"
   >
@@ -55,6 +56,7 @@
     :config="kongManagerConfig"
     :route-flavors="routeFlavors"
     :route-id="routeId"
+    show-expressions-modal-entry
     @error="onError"
     @update="onUpdate"
   >
diff --git a/packages/entities/entities-routes/src/components/RouteForm.cy.ts b/packages/entities/entities-routes/src/components/RouteForm.cy.ts
index 68c643936d..4244db4938 100644
--- a/packages/entities/entities-routes/src/components/RouteForm.cy.ts
+++ b/packages/entities/entities-routes/src/components/RouteForm.cy.ts
@@ -3,6 +3,7 @@ import RouteForm from './RouteForm.vue'
 import { route, routeExpressions, services } from '../../fixtures/mockData'
 import { EntityBaseForm } from '@kong-ui-public/entities-shared'
 import type { RouteHandler } from 'cypress/types/net-stubbing'
+import { HTTP_BASED_PROTOCOLS, STREAM_BASED_PROTOCOLS } from '@kong-ui-public/expressions'
 
 const cancelRoute = { name: 'route-list' }
 
@@ -831,6 +832,83 @@ describe('<RouteForm />', { viewportHeight: 700, viewportWidth: 700 }, () => {
       cy.getTestId('select-item-ws').should('not.exist')
       cy.getTestId('select-item-wss').should('not.exist')
     })
+
+    describe('RoutePlayground', () => {
+      beforeEach(() => {
+        cy.on('uncaught:exception', err => !err.message.includes('ResizeObserver loop completed with undelivered notifications.'))
+      })
+
+      it('route playground entry should hide if select stream-based protocols', () => {
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKM,
+            routeFlavors: TRADITIONAL_EXPRESSIONS,
+            showExpressionsModalEntry: true,
+          },
+        })
+
+        cy.get('#expressions-tab').click()
+
+        STREAM_BASED_PROTOCOLS.forEach((protocol) => {
+          cy.getTestId('route-form-protocols').click({ force: true })
+          cy.get(`[data-testid='select-item-${protocol}']`).click()
+          cy.getTestId('open-router-playground').should('have.class', 'disabled')
+          cy.getTestId('open-router-playground').click()
+          cy.get('.router-playground-wrapper').should('not.exist')
+        })
+      })
+
+      it('route playground entry should show if select http-based protocols', () => {
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKM,
+            routeFlavors: TRADITIONAL_EXPRESSIONS,
+            showExpressionsModalEntry: true,
+          },
+        })
+
+        cy.get('#expressions-tab').click()
+
+        HTTP_BASED_PROTOCOLS.forEach((protocol) => {
+          cy.getTestId('route-form-protocols').click({ force: true })
+          cy.get(`[data-testid='select-item-${protocol}']`).click()
+          cy.getTestId('open-router-playground').should('not.have.class', 'disabled')
+        })
+      })
+
+      it('route playground should have initial expression value', () => {
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKM,
+            routeFlavors: TRADITIONAL_EXPRESSIONS,
+            showExpressionsModalEntry: true,
+          },
+        })
+
+        cy.get('#expressions-tab').click()
+        cy.get('.monaco-editor').first().as('monacoEditor').click()
+        cy.get('@monacoEditor').type('http.path == "/kong"')
+        cy.getTestId('open-router-playground').click()
+        cy.get('.router-playground > [data-testid="expressions-editor"]').contains('http.path == "/kong"')
+      })
+
+      it('should expression updated when save in route playground', () => {
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKM,
+            routeFlavors: TRADITIONAL_EXPRESSIONS,
+            showExpressionsModalEntry: true,
+          },
+        })
+        cy.get('#expressions-tab').click()
+        cy.get('.monaco-editor').first().as('monacoEditor').click()
+        cy.get('@monacoEditor').type('http.path == "/kong"')
+        cy.getTestId('open-router-playground').click()
+        cy.get('.router-playground > [data-testid="expressions-editor"]').type(' && http.method == "GET"')
+        cy.getTestId('modal-action-button').click()
+        cy.get('@monacoEditor').contains('http.path == "/kong" && http.method == "GET"')
+      })
+    })
   })
 
   describe('Konnect', { viewportHeight: 700, viewportWidth: 700 }, () => {
@@ -1609,6 +1687,83 @@ describe('<RouteForm />', { viewportHeight: 700, viewportWidth: 700 }, () => {
 
         cy.get('@onUpdateSpy').should('have.been.calledOnce')
       })
+
+      describe('RoutePlayground', () => {
+        beforeEach(() => {
+          cy.on('uncaught:exception', err => !err.message.includes('ResizeObserver loop completed with undelivered notifications.'))
+        })
+
+        it('route playground entry should hide if select stream-based protocols', () => {
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKonnect,
+              routeFlavors: TRADITIONAL_EXPRESSIONS,
+              showExpressionsModalEntry: true,
+            },
+          })
+
+          cy.get('#expressions-tab').click()
+
+          STREAM_BASED_PROTOCOLS.forEach((protocol) => {
+            cy.getTestId('route-form-protocols').click({ force: true })
+            cy.get(`[data-testid='select-item-${protocol}']`).click()
+            cy.getTestId('open-router-playground').should('have.class', 'disabled')
+            cy.getTestId('open-router-playground').click()
+            cy.get('.router-playground-wrapper').should('not.exist')
+          })
+        })
+
+        it('route playground entry should show if select http-based protocols', () => {
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKonnect,
+              routeFlavors: TRADITIONAL_EXPRESSIONS,
+              showExpressionsModalEntry: true,
+            },
+          })
+
+          cy.get('#expressions-tab').click()
+
+          HTTP_BASED_PROTOCOLS.forEach((protocol) => {
+            cy.getTestId('route-form-protocols').click({ force: true })
+            cy.get(`[data-testid='select-item-${protocol}']`).click()
+            cy.getTestId('open-router-playground').should('not.have.class', 'disabled')
+          })
+        })
+
+        it('route playground should have initial expression value', () => {
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKonnect,
+              routeFlavors: TRADITIONAL_EXPRESSIONS,
+              showExpressionsModalEntry: true,
+            },
+          })
+
+          cy.get('#expressions-tab').click()
+          cy.get('.monaco-editor').first().as('monacoEditor').click()
+          cy.get('@monacoEditor').type('http.path == "/kong"')
+          cy.getTestId('open-router-playground').click()
+          cy.get('.router-playground > [data-testid="expressions-editor"]').contains('http.path == "/kong"')
+        })
+
+        it('should expression updated when save in route playground', () => {
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKonnect,
+              routeFlavors: TRADITIONAL_EXPRESSIONS,
+              showExpressionsModalEntry: true,
+            },
+          })
+          cy.get('#expressions-tab').click()
+          cy.get('.monaco-editor').first().as('monacoEditor').click()
+          cy.get('@monacoEditor').type('http.path == "/kong"')
+          cy.getTestId('open-router-playground').click()
+          cy.get('.router-playground > [data-testid="expressions-editor"]').type(' && http.method == "GET"')
+          cy.getTestId('modal-action-button').click()
+          cy.get('@monacoEditor').contains('http.path == "/kong" && http.method == "GET"')
+        })
+      })
     } // for RouteFlavors[]
   })
 })
diff --git a/packages/entities/entities-routes/src/components/RouteForm.vue b/packages/entities/entities-routes/src/components/RouteForm.vue
index ab9a09ca2d..e6358925c4 100644
--- a/packages/entities/entities-routes/src/components/RouteForm.vue
+++ b/packages/entities/entities-routes/src/components/RouteForm.vue
@@ -359,6 +359,8 @@
                 <RouteFormExpressionsEditorLoader
                   v-model="state.fields.expression"
                   :protocol="exprEditorProtocol"
+                  :show-expressions-modal-entry="showExpressionsModalEntry"
+                  @notify="emit('notify', $event)"
                 >
                   <template #after-editor="editor">
                     <slot
@@ -569,6 +571,12 @@ const props = defineProps({
     required: false,
     default: () => undefined,
   },
+  /** Whether to show the expressions modal entry */
+  showExpressionsModalEntry: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 const emit = defineEmits<{
@@ -576,6 +584,7 @@ const emit = defineEmits<{
   (e: 'error', error: AxiosError): void,
   (e: 'loading', isLoading: boolean): void,
   (e: 'model-updated', val: BaseRoutePayload): void,
+  (e: 'notify', options: { message: string, type: string }): void,
 }>()
 
 const currentConfigHash = ref<string>(
diff --git a/packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue b/packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue
index 17568d6605..4c0b4eafe3 100644
--- a/packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue
+++ b/packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue
@@ -4,21 +4,84 @@
     v-model="expression"
     :schema="schema"
   />
+
+  <KTooltip
+    placement="bottom-start"
+    :text="tooltipText"
+  >
+    <div
+      v-if="showExpressionsModalEntry"
+      :class="{ disabled: !isHttpBasedProtocol, 'route-form-open-in-playground': true }"
+      data-testid="open-router-playground"
+      @click="handleOpenPlayground"
+    >
+      <slot />
+    </div>
+  </KTooltip>
+
+  <RouterPlaygroundModal
+    v-if="showExpressionsModalEntry && isHttpBasedProtocol"
+    :initial-expression="expression"
+    :is-visible="isPlaygroundVisible"
+    @cancel="isPlaygroundVisible = false"
+    @commit="handleCommit"
+    @notify="handleNotify"
+  />
 </template>
 
 <script setup lang="ts">
 /**
  * This component assumes that @kong-ui-public/expressions has been initialized.
  */
-import { ExpressionsEditor, PROTOCOL_TO_SCHEMA, type Schema } from '@kong-ui-public/expressions'
-import { computed } from 'vue'
+import { ExpressionsEditor, PROTOCOL_TO_SCHEMA, type Schema, RouterPlaygroundModal, HTTP_BASED_PROTOCOLS } from '@kong-ui-public/expressions'
+import { computed, ref } from 'vue'
 
 import '@kong-ui-public/expressions/dist/style.css'
 
-const props = defineProps<{ protocol?: string }>()
+const props = defineProps<{
+  protocol?: string
+  showExpressionsModalEntry?: boolean
+  hintText: string
+}>()
 const expression = defineModel<string>({ required: true })
+const emit = defineEmits<{
+  (e: 'notify', options: { message: string, type: string }): void
+}>()
+const isPlaygroundVisible = ref(false)
 
 const schema = computed<Schema | undefined>(() => {
   return PROTOCOL_TO_SCHEMA[props.protocol as keyof typeof PROTOCOL_TO_SCHEMA]
 })
+
+/**
+ * todo: currently, only HTTP-based protocols are supported.
+ * it should be removed when we support stream-based protocols in <RequestModal /> component.
+ * see: KM-349
+ */
+const isHttpBasedProtocol = computed(() => {
+  return HTTP_BASED_PROTOCOLS.includes(props.protocol ?? '')
+})
+
+const tooltipText = computed(() => {
+  return isHttpBasedProtocol.value ? undefined : `${props.hintText}${HTTP_BASED_PROTOCOLS}`
+})
+
+const handleCommit = (expr: string) => {
+  expression.value = expr
+  isPlaygroundVisible.value = false
+}
+
+const handleNotify = (options: {
+  message: string;
+  type: string;
+}) => {
+  emit('notify', options)
+}
+
+const handleOpenPlayground = () => {
+  if (!isHttpBasedProtocol.value) {
+    return
+  }
+  isPlaygroundVisible.value = true
+}
 </script>
diff --git a/packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue b/packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue
index 46128e64ec..76a0b0a25f 100644
--- a/packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue
+++ b/packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue
@@ -12,8 +12,14 @@
   <RouteFormExpressionsEditor
     v-else
     v-model="expression"
+    :hint-text="t('form.expression_playground.supported_protocols_hint')"
     :protocol="props.protocol"
-  />
+    :show-expressions-modal-entry="showExpressionsModalEntry"
+    @notify="emit('notify', $event)"
+  >
+    <RocketIcon :size="KUI_ICON_SIZE_30" />
+    <span>{{ t('form.expression_playground.test_link') }}</span>
+  </RouteFormExpressionsEditor>
   <slot
     :expression="{ value: expression, update: setExpression }"
     name="after-editor"
@@ -28,10 +34,12 @@
  * editor until they are used.
  */
 import { defineAsyncComponent, h, onMounted, ref, type Component } from 'vue'
-import useI18n from '../composables/useI18n'
+import composables from '../composables'
 import { ExpressionsEditorState } from '../types'
+import { RocketIcon } from '@kong/icons'
+import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 
-const { i18n: { t } } = useI18n()
+const { i18n: { t } } = composables.useI18n()
 
 const loadingComponent: Component = {
   render: () => h('div', t('form.expressions_editor.loading')),
@@ -49,7 +57,13 @@ const RouteFormExpressionsEditor = defineAsyncComponent({
   errorComponent,
 })
 
-const props = defineProps<{ protocol?: string }>()
+const props = defineProps<{
+  protocol?: string
+  showExpressionsModalEntry?: boolean
+}>()
+const emit = defineEmits<{
+  (e: 'notify', options: { message: string, type: string }): void
+}>()
 const state = ref<ExpressionsEditorState>(ExpressionsEditorState.LOADING)
 
 const expression = defineModel<string>({ required: true })
@@ -69,3 +83,23 @@ onMounted(async () => {
   }
 })
 </script>
+
+<style lang="scss">
+.route-form-open-in-playground {
+  align-items: center;
+  color: $kui-color-text-primary-strong;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-size: $kui-font-size-30;
+  font-weight: bold;
+  gap: $kui-space-40;
+  justify-content: flex-start;
+  margin-top: $kui-space-50;
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+</style>
diff --git a/packages/entities/entities-routes/src/locales/en.json b/packages/entities/entities-routes/src/locales/en.json
index 60e73075ab..4736b26696 100644
--- a/packages/entities/entities-routes/src/locales/en.json
+++ b/packages/entities/entities-routes/src/locales/en.json
@@ -248,6 +248,10 @@
     "expressions_editor": {
       "loading": "Loading the Expressions editor…",
       "error": "Error occurred while loading the Expressions editor. Please view the console for more details."
+    },
+    "expression_playground": {
+      "test_link": "Test with Router Playground",
+      "supported_protocols_hint": "Currently only supports the following protocols: {protocols}"
     }
   }
 }
diff --git a/packages/entities/entities-routes/vite.config.ts b/packages/entities/entities-routes/vite.config.ts
index 9219a541fe..251850395f 100644
--- a/packages/entities/entities-routes/vite.config.ts
+++ b/packages/entities/entities-routes/vite.config.ts
@@ -20,22 +20,28 @@ const config = mergeConfig(sharedViteConfig, defineConfig({
     rollupOptions: {
       external: [
         '@kong-ui-public/expressions', // This is optional if we do not use Expressions features
+        '@kong-ui-public/expressions/dist/style.css', // This is optional if we do not use Expressions features
         'monaco-editor', // This is optional if we do not use Expressions features
       ],
     },
   },
-  server: {
-    proxy: {
-      // Add the API proxies to inject the Authorization header
-      ...getApiProxies(),
-    },
-  },
-  ...process.env.USE_SANDBOX && {
-    plugins: [
-      // See: https://github.com/vdesjs/vite-plugin-monaco-editor/issues/21
-      ((monacoEditorPlugin as any).default as typeof monacoEditorPlugin)({}),
-    ],
-  },
+  ...(process.env.USE_SANDBOX
+    ? {
+      server: {
+        proxy: {
+          // Add the API proxies to inject the Authorization header
+          ...getApiProxies(),
+        },
+      },
+    }
+    : {}),
+  plugins: [
+    // This plugin is only used in the sandbox & testing environment
+    // It generates extra files in dist folder whitch are not need in library build
+    ...(process.env.USE_SANDBOX
+      ? [((monacoEditorPlugin as any).default as typeof monacoEditorPlugin)({})]
+      : []),
+  ],
 }))
 
 // If we are trying to preview a build of the local `package/entities-routes/sandbox` directory,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c3f2ea00a..f1a55bc7a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -545,7 +545,19 @@ importers:
       '@kong-ui-public/core':
         specifier: workspace:^
         version: link:../core
+      '@kong-ui-public/i18n':
+        specifier: workspace:^
+        version: link:../i18n
+      '@kong/icons':
+        specifier: ^1.14.2
+        version: 1.15.1(vue@3.4.31(typescript@5.3.3))
+      uuid:
+        specifier: ^9.0.1
+        version: 9.0.1
     devDependencies:
+      '@kong-ui-public/forms':
+        specifier: workspace:^
+        version: link:../forms
       '@kong/atc-router':
         specifier: 1.6.0-rc.1
         version: 1.6.0-rc.1
@@ -555,6 +567,9 @@ importers:
       '@kong/kongponents':
         specifier: 9.1.7
         version: 9.1.7(axios@1.6.8)(vue-router@4.4.0(vue@3.4.31(typescript@5.3.3)))(vue@3.4.31(typescript@5.3.3))
+      '@types/uuid':
+        specifier: ^9.0.8
+        version: 9.0.8
       monaco-editor:
         specifier: 0.21.3
         version: 0.21.3
@@ -1739,7 +1754,6 @@ packages:
 
   '@evilmartians/lefthook@1.7.1':
     resolution: {integrity: sha512-Wp8DaTMHZM1tUV4Mow6nG+6zq+giruD5054zHmFIDLXlPQxqYxnZMqJg0aYxe16vYwqFmH6NIClEMRdtGucO0Q==}
-    cpu: [x64, arm64, ia32]
     os: [darwin, linux, win32]
     hasBin: true