From 3be96d877346f1150a4c412ae7a686ec37b4eabf Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 10 Mar 2023 18:41:27 +0100
Subject: [PATCH] feat(frontend-apps): add variable picker for static string
 input on apps

---
 backend/windmill-api/src/apps.rs              | 20 +++++++
 .../src/lib/components/ResourcePicker.svelte  |  1 +
 .../apps/components/buttons/AppButton.svelte  |  4 +-
 .../apps/components/buttons/AppForm.svelte    |  4 +-
 .../components/buttons/AppFormButton.svelte   |  4 +-
 .../components/display/AppBarChart.svelte     |  4 +-
 .../display/AppDisplayComponent.svelte        |  4 +-
 .../apps/components/display/AppHtml.svelte    |  4 +-
 .../apps/components/display/AppIcon.svelte    |  4 +-
 .../apps/components/display/AppImage.svelte   |  4 +-
 .../apps/components/display/AppMap.svelte     |  4 +-
 .../apps/components/display/AppPdf.svelte     |  4 +-
 .../components/display/AppPieChart.svelte     |  4 +-
 .../components/display/AppScatterChart.svelte |  4 +-
 .../apps/components/display/AppText.svelte    |  4 +-
 .../components/display/AppTimeseries.svelte   |  4 +-
 .../display/table/AppAggridTable.svelte       |  4 +-
 .../components/display/table/AppTable.svelte  |  4 +-
 .../apps/components/helpers/InputValue.svelte |  4 +-
 .../helpers/NonRunnableComponent.svelte       |  4 +-
 .../components/helpers/RefreshButton.svelte   |  4 +-
 .../components/helpers/ResizeWrapper.svelte   |  4 +-
 .../helpers/RunnableComponent.svelte          |  4 +-
 .../components/helpers/RunnableWrapper.svelte |  4 +-
 .../apps/components/inputs/AppCheckbox.svelte |  4 +-
 .../components/inputs/AppDateInput.svelte     |  4 +-
 .../components/inputs/AppFileInput.svelte     |  4 +-
 .../components/inputs/AppMultiSelect.svelte   |  4 +-
 .../components/inputs/AppNumberInput.svelte   |  4 +-
 .../components/inputs/AppRangeInput.svelte    |  4 +-
 .../apps/components/inputs/AppSelect.svelte   |  4 +-
 .../components/inputs/AppSliderInputs.svelte  |  4 +-
 .../components/inputs/AppTextInput.svelte     |  4 +-
 .../inputs/currency/AppCurrencyInput.svelte   |  4 +-
 .../components/layout/AppContainer.svelte     |  4 +-
 .../apps/components/layout/AppDivider.svelte  |  4 +-
 .../apps/components/layout/AppDrawer.svelte   |  4 +-
 .../components/layout/AppSplitpanes.svelte    |  7 ++-
 .../apps/components/layout/AppTabs.svelte     |  8 ++-
 .../components/apps/editor/AppEditor.svelte   | 59 +++++++++++++++++--
 .../apps/editor/AppEditorHeader.svelte        | 11 ++--
 .../components/apps/editor/AppInputs.svelte   |  4 +-
 .../components/apps/editor/AppPreview.svelte  |  8 +--
 .../apps/editor/ComponentHeader.svelte        |  4 +-
 .../components/apps/editor/GridEditor.svelte  |  7 ++-
 .../components/apps/editor/GridPanel.svelte   |  4 +-
 .../apps/editor/RecomputeAllComponents.svelte | 30 +++++-----
 .../apps/editor/SettingsPanel.svelte          |  4 +-
 .../apps/editor/SubGridEditor.svelte          | 16 ++---
 .../apps/editor/component/Component.svelte    |  4 +-
 .../component/ComponentNavigation.svelte      |  8 ++-
 .../apps/editor/component/default-codes.ts    | 12 ++--
 .../componentsPanel/ComponentList.svelte      |  7 ++-
 .../editor/componentsPanel/CssSettings.svelte |  4 +-
 .../contextPanel/ComponentOutputViewer.svelte |  4 +-
 .../editor/contextPanel/ContextPanel.svelte   |  4 +-
 .../EmptyInlineScript.svelte                  |  4 +-
 .../InlineScriptEditor.svelte                 |  4 +-
 .../InlineScriptsPanel.svelte                 |  4 +-
 .../InlineScriptsPanelList.svelte             |  4 +-
 .../ComponentInputTypeEditor.svelte           |  4 +-
 .../settingsPanel/ComponentPanel.svelte       |  9 +--
 .../apps/editor/settingsPanel/GridPane.svelte |  4 +-
 .../apps/editor/settingsPanel/GridTab.svelte  |  4 +-
 .../settingsPanel/InputsSpecEditor.svelte     |  1 +
 .../settingsPanel/InputsSpecsEditor.svelte    |  4 +-
 .../settingsPanel/MoveToOtherGrid.svelte      |  5 +-
 .../editor/settingsPanel/Recompute.svelte     |  4 +-
 .../settingsPanel/SelectedRunnable.svelte     |  4 +-
 .../editor/settingsPanel/TableActions.svelte  |  4 +-
 .../inputEditor/ConnectedInputEditor.svelte   |  4 +-
 .../inputEditor/EvalInputEditor.svelte        |  4 +-
 .../inputEditor/StaticInputEditor.svelte      | 36 ++++++++---
 .../mainInput/RunnableSelector.svelte         |  4 +-
 frontend/src/lib/components/apps/types.ts     |  7 ++-
 75 files changed, 291 insertions(+), 189 deletions(-)

diff --git a/backend/windmill-api/src/apps.rs b/backend/windmill-api/src/apps.rs
index afe569cba6..9c4cb54f9e 100644
--- a/backend/windmill-api/src/apps.rs
+++ b/backend/windmill-api/src/apps.rs
@@ -733,6 +733,9 @@ fn build_args(
     path: String,
     args: &Map<String, Value>,
 ) -> Result<Map<String, Value>> {
+    // disallow var and res access in args coming from the user for security reasons
+    args.into_iter()
+        .try_for_each(|x| disallow_var_res_access(x.1))?;
     let static_args = policy
         .triggerables
         .get(&path)
@@ -753,3 +756,20 @@ fn build_args(
     }
     Ok(args)
 }
+
+fn disallow_var_res_access(args: &serde_json::Value) -> Result<()> {
+    match args {
+        Value::Object(v) => v.into_iter().try_for_each(|x| disallow_var_res_access(x.1)),
+        Value::Array(arr) => arr.into_iter().try_for_each(|v| disallow_var_res_access(v)),
+        Value::String(s) => {
+            if s.starts_with("$var:") || s.starts_with("$res:") {
+                Err(Error::BadRequest(format!(
+                    "For security reasons, variable or resource access is not allowed as dynamic argument"
+                )))
+            } else {
+                Ok(())
+            }
+        }
+        _ => Ok(()),
+    }
+}
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index 2e12def37b..67ec0185e3 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -58,6 +58,7 @@
 	on:refresh={async (e) => {
 		await loadResources(resourceType)
 		value = e.detail
+		valueSelect = { value: e.detail, label: e.detail }
 	}}
 	newPageOAuth
 	bind:this={appConnect}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index da67a9a738..4256e86729 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -3,7 +3,7 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import type RunnableComponent from '../helpers/RunnableComponent.svelte'
@@ -26,7 +26,7 @@
 
 	export const staticOutputs: string[] = ['loading', 'result']
 
-	const { runnableComponents, worldStore, app } = getContext<AppEditorContext>('AppEditorContext')
+	const { runnableComponents, worldStore, app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let labelValue: string
 	let color: ButtonType.Color
diff --git a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
index 78944e7790..7cf3ca59a4 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
@@ -5,7 +5,7 @@
 	import { Icon } from 'svelte-awesome'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -24,7 +24,7 @@
 	export const staticOutputs: string[] = ['loading', 'result']
 
 	const { app, runnableComponents, worldStore, stateId } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')
 
 	let labelValue: string = 'Default label'
 	let color: ButtonType.Color
diff --git a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
index 8b54393951..3e03bbe555 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
@@ -5,7 +5,7 @@
 	import { Icon } from 'svelte-awesome'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import type RunnableComponent from '../helpers/RunnableComponent.svelte'
@@ -26,7 +26,7 @@
 
 	export const staticOutputs: string[] = ['loading', 'result']
 
-	const { app, runnableComponents, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, runnableComponents, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let labelValue: string = 'Default label'
 	let color: ButtonType.Color
diff --git a/frontend/src/lib/components/apps/components/display/AppBarChart.svelte b/frontend/src/lib/components/apps/components/display/AppBarChart.svelte
index 3dc5aa6140..7cccf90641 100644
--- a/frontend/src/lib/components/apps/components/display/AppBarChart.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppBarChart.svelte
@@ -17,7 +17,7 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import { concatCustomCss } from '../../utils'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -27,7 +27,7 @@
 	export let render: boolean
 
 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
 	ChartJS.register(
 		Title,
diff --git a/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte b/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
index 99c2a0f832..eb970d233c 100644
--- a/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
@@ -5,7 +5,7 @@
 	import type { AppInput } from '../../inputType'
 	import {
 		IS_APP_PUBLIC_CONTEXT_KEY,
-		type AppEditorContext,
+		type AppViewerContext,
 		type ComponentCustomCSS
 	} from '../../types'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
@@ -17,7 +17,7 @@
 	export let render: boolean
 
 	const requireHtmlApproval = getContext<boolean | undefined>(IS_APP_PUBLIC_CONTEXT_KEY)
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 	let result: any = undefined
 
 	export const staticOutputs: string[] = ['result', 'loading']
diff --git a/frontend/src/lib/components/apps/components/display/AppHtml.svelte b/frontend/src/lib/components/apps/components/display/AppHtml.svelte
index 8ce2ef735c..a8e5c45eb0 100644
--- a/frontend/src/lib/components/apps/components/display/AppHtml.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppHtml.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 
@@ -12,7 +12,7 @@
 	export let render: boolean
 
 	export const staticOutputs: string[] = ['result', 'loading']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let result: string | undefined = undefined
 	let h: number | undefined = undefined
diff --git a/frontend/src/lib/components/apps/components/display/AppIcon.svelte b/frontend/src/lib/components/apps/components/display/AppIcon.svelte
index b92b414706..0e3efaa407 100644
--- a/frontend/src/lib/components/apps/components/display/AppIcon.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppIcon.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import { AlignWrapper, InputValue } from '../helpers'
 	import { loadIcon } from '../icon'
@@ -14,7 +14,7 @@
 	export let customCss: ComponentCustomCSS<'container' | 'icon'> | undefined = undefined
 	export let render: boolean
 
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let icon: string | undefined = undefined
 	let size: number
diff --git a/frontend/src/lib/components/apps/components/display/AppImage.svelte b/frontend/src/lib/components/apps/components/display/AppImage.svelte
index c0615ff47e..4d3de363aa 100644
--- a/frontend/src/lib/components/apps/components/display/AppImage.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppImage.svelte
@@ -3,7 +3,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { staticValues } from '../../editor/componentsPanel/componentStaticValues'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
 
@@ -15,7 +15,7 @@
 	export let customCss: ComponentCustomCSS<'image'> | undefined = undefined
 	export let render: boolean
 
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 	const fit: Record<FitOption, string> = {
 		cover: 'object-cover',
 		contain: 'object-contain',
diff --git a/frontend/src/lib/components/apps/components/display/AppMap.svelte b/frontend/src/lib/components/apps/components/display/AppMap.svelte
index 7ec26d2e6e..30433289a8 100644
--- a/frontend/src/lib/components/apps/components/display/AppMap.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMap.svelte
@@ -2,7 +2,7 @@
 	import { getContext, onMount } from 'svelte'
 	import { concatCustomCss } from '../../utils'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { InputValue } from '../helpers'
 	import { twMerge } from 'tailwind-merge'
 	import { Map, View, Feature } from 'ol'
@@ -35,7 +35,7 @@
 	export let render: boolean
 
 	const { app, worldStore, selectedComponent, connectingInput, focusedGrid, mode } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')
 
 	$: outputs = $worldStore?.outputsById[id] as {
 		mapRegion: Output<{
diff --git a/frontend/src/lib/components/apps/components/display/AppPdf.svelte b/frontend/src/lib/components/apps/components/display/AppPdf.svelte
index 880c380e0e..910cede81b 100644
--- a/frontend/src/lib/components/apps/components/display/AppPdf.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppPdf.svelte
@@ -4,7 +4,7 @@
 	import { getDocument, type PDFDocumentProxy, type PDFPageProxy } from 'pdfjs-dist'
 	import 'pdfjs-dist/build/pdf.worker.entry'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
 	import { throttle } from '../../../../utils'
@@ -19,7 +19,7 @@
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 	export let render: boolean
 
-	const { app, mode, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, mode, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
 	let source: string | ArrayBuffer | undefined = undefined
 	let wrapper: HTMLDivElement | undefined = undefined
diff --git a/frontend/src/lib/components/apps/components/display/AppPieChart.svelte b/frontend/src/lib/components/apps/components/display/AppPieChart.svelte
index 0fdf91318c..408ecb926f 100644
--- a/frontend/src/lib/components/apps/components/display/AppPieChart.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppPieChart.svelte
@@ -14,7 +14,7 @@
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 	import type { AppInput } from '../../inputType'
 	import InputValue from '../helpers/InputValue.svelte'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import { getContext } from 'svelte'
 
@@ -26,7 +26,7 @@
 	export let render: boolean
 
 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
 	ChartJS.register(
 		Title,
diff --git a/frontend/src/lib/components/apps/components/display/AppScatterChart.svelte b/frontend/src/lib/components/apps/components/display/AppScatterChart.svelte
index 912c993fbd..40b2533175 100644
--- a/frontend/src/lib/components/apps/components/display/AppScatterChart.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppScatterChart.svelte
@@ -19,7 +19,7 @@
 	import type { ChartOptions, ChartData } from 'chart.js'
 	import { concatCustomCss } from '../../utils'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -32,7 +32,7 @@
 	let pannable = false
 
 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
 	ChartJS.register(
 		Title,
diff --git a/frontend/src/lib/components/apps/components/display/AppText.svelte b/frontend/src/lib/components/apps/components/display/AppText.svelte
index 161896bed0..5964e2f231 100644
--- a/frontend/src/lib/components/apps/components/display/AppText.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppText.svelte
@@ -8,7 +8,7 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 	import { twMerge } from 'tailwind-merge'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { getContext } from 'svelte'
 	import ResizeWrapper from '../helpers/ResizeWrapper.svelte'
 
@@ -23,7 +23,7 @@
 
 	export const staticOutputs: string[] = ['result', 'loading']
 
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let result: string | undefined = undefined
 	let style: 'Title' | 'Subtitle' | 'Body' | 'Caption' | 'Label' | undefined = undefined
diff --git a/frontend/src/lib/components/apps/components/display/AppTimeseries.svelte b/frontend/src/lib/components/apps/components/display/AppTimeseries.svelte
index e53379d206..10db2dcb9d 100644
--- a/frontend/src/lib/components/apps/components/display/AppTimeseries.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppTimeseries.svelte
@@ -20,7 +20,7 @@
 	import { Scatter } from 'svelte-chartjs'
 	import InputValue from '../helpers/InputValue.svelte'
 	import type { ChartOptions, ChartData } from 'chart.js'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { getContext } from 'svelte'
 	import { concatCustomCss } from '../../utils'
 
@@ -32,7 +32,7 @@
 	export let render: boolean
 
 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let logarithmicScale = false
 	let zoomable = false
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
index 9f03ee6e78..5311556b4d 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -5,7 +5,7 @@
 
 	import { getContext, onMount } from 'svelte'
 	import type { Output } from '../../../rx'
-	import type { AppEditorContext } from '../../../types'
+	import type { AppViewerContext } from '../../../types'
 	import InputValue from '../../helpers/InputValue.svelte'
 	import type { AppInput } from '../../../inputType'
 	import RunnableWrapper from '../../helpers/RunnableWrapper.svelte'
@@ -23,7 +23,7 @@
 
 	let result: Record<string, any>[] | undefined = undefined
 
-	const { worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
 	let selectedRowIndex = -1
 
diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
index 370ec59160..c3ba845a1e 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte'
 	import type { Output } from '../../../rx'
-	import type { AppEditorContext, BaseAppComponent, ComponentCustomCSS } from '../../../types'
+	import type { AppViewerContext, BaseAppComponent, ComponentCustomCSS } from '../../../types'
 	import InputValue from '../../helpers/InputValue.svelte'
 	import type { AppInput } from '../../../inputType'
 	import RunnableWrapper from '../../helpers/RunnableWrapper.svelte'
@@ -61,7 +61,7 @@
 		app,
 		worldStore,
 		staticOutputs: staticOutputsStore
-	} = getContext<AppEditorContext>('AppEditorContext')
+	} = getContext<AppViewerContext>('AppViewerContext')
 
 	let selectedRowIndex = -1
 
diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index f256ad0702..f2effd3066 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -3,7 +3,7 @@
 	import { deepEqual } from 'fast-equals'
 	import { getContext } from 'svelte'
 	import type { AppInput, EvalAppInput, UploadAppInput } from '../../inputType'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { accessPropertyByPath } from '../../utils'
 
 	type T = string | number | boolean | Record<string | number, any> | undefined
@@ -23,7 +23,7 @@
 		}
 	}
 
-	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	$: state = $worldStore?.state
 
diff --git a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
index 9d5263dad8..003c59efd2 100644
--- a/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/NonRunnableComponent.svelte
@@ -4,7 +4,7 @@
 	import { fade } from 'svelte/transition'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import InputValue from './InputValue.svelte'
 
 	export let componentInput: AppInput
@@ -13,7 +13,7 @@
 	export let render: boolean
 
 	// Sync the result to the output
-	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	$: outputs = $worldStore?.outputsById[id] as {
 		loading: Output<boolean>
diff --git a/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte b/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
index aaa4ec0611..cef375d9a0 100644
--- a/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte
@@ -3,11 +3,11 @@
 	import { faRefresh } from '@fortawesome/free-solid-svg-icons'
 	import { RefreshCcw, RefreshCw } from 'lucide-svelte'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 
 	export let componentId: string
 
-	const { runnableComponents, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { runnableComponents, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	async function refresh() {
 		window.dispatchEvent(new Event('pointerup'))
diff --git a/frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte
index 97faadac64..dbe37796c6 100644
--- a/frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/ResizeWrapper.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import { findGridItem } from '../../editor/appUtils'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 
 	export let id: string
 	export let shouldWrap: boolean = false
-	const { app, breakpoint } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, breakpoint } = getContext<AppViewerContext>('AppViewerContext')
 
 	$: gridItem = findGridItem($app, id)
 
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index c054290381..549fb038e8 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -12,7 +12,7 @@
 	import { fade } from 'svelte/transition'
 	import type { AppInputs, Runnable } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import InputValue from './InputValue.svelte'
 	import RefreshButton from './RefreshButton.svelte'
 
@@ -43,7 +43,7 @@
 		errorByComponent,
 		mode,
 		stateId
-	} = getContext<AppEditorContext>('AppEditorContext')
+	} = getContext<AppViewerContext>('AppViewerContext')
 
 	onMount(() => {
 		if (autoRefresh) {
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
index a148f1d444..e542791deb 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { isScriptByNameDefined, isScriptByPathDefined } from '../../utils'
 	import NonRunnableComponent from './NonRunnableComponent.svelte'
 	import RunnableComponent from './RunnableComponent.svelte'
@@ -22,7 +22,7 @@
 	export let gotoNewTab: boolean | undefined = undefined
 	export let render: boolean
 
-	const { staticExporter, noBackend } = getContext<AppEditorContext>('AppEditorContext')
+	const { staticExporter, noBackend } = getContext<AppViewerContext>('AppViewerContext')
 
 	$: if (initializing && result) {
 		initializing = false
diff --git a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
index 99b14027d3..c6e6f52134 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
@@ -3,7 +3,7 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -15,7 +15,7 @@
 	export let customCss: ComponentCustomCSS<'text'> | undefined = undefined
 	export let render: boolean
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	export const staticOutputs: string[] = ['result']
 
diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
index c9fc15ac24..f95ae49a7f 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
@@ -3,7 +3,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -16,7 +16,7 @@
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 	export let render: boolean
 
-	const { app, worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 	let labelValue: string = 'Title'
 	let minValue: string = ''
 	let maxValue: string = ''
diff --git a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
index 8f9815005c..44a794bf1b 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
@@ -4,7 +4,7 @@
 	import { FileInput } from '../../../common'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
 
@@ -14,7 +14,7 @@
 	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 	export let render: boolean
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let acceptedFileTypes: string[] | undefined = undefined
 	let allowMultiple: boolean | undefined = undefined
diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
index ff82dfa699..31bd95bb6c 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte
@@ -3,7 +3,7 @@
 	import Select from 'svelte-select'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -18,7 +18,7 @@
 	export let render: boolean
 
 	const { app, worldStore, connectingInput, selectedComponent } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')
 	let items: { label: string; value: string }[]
 	let placeholder: string = 'Select an item'
 
diff --git a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
index 644ec7cc5a..28779699e5 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
@@ -3,7 +3,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -15,7 +15,7 @@
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 	export let render: boolean
 
-	const { app, worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
 	let defaultValue: number | undefined = undefined
 	let placeholder: string | undefined = undefined
diff --git a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
index d274150472..1ac8a42bdd 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
@@ -3,7 +3,7 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import { concatCustomCss } from '../../utils'
@@ -17,7 +17,7 @@
 		undefined
 	export let render: boolean
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 	let min = 0
 	let max = 42
 	let step = 1
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
index d7628caa89..86e8e2ba22 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -3,7 +3,7 @@
 	import Select from 'svelte-select'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -18,7 +18,7 @@
 	export let render: boolean
 
 	const { app, worldStore, connectingInput, selectedComponent } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')
 	let items: { label: string; value: any; created?: boolean }[]
 	let placeholder: string = 'Select an item'
 
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
index 886969dbf0..cbf45dd20d 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
@@ -3,7 +3,7 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -17,7 +17,7 @@
 		undefined
 	export let render: boolean
 
-	const { app, worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 	let min = 0
 	let max = 42
 	let step = 1
diff --git a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
index 24edd64b52..4d867a2857 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
@@ -3,7 +3,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -18,7 +18,7 @@
 		'textinputcomponent'
 	export let render: boolean
 
-	const { app, worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
 	let placeholder: string | undefined = undefined
 	let defaultValue: string | undefined = undefined
diff --git a/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte b/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
index 20d45d8013..ff2951ff2c 100644
--- a/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
@@ -3,7 +3,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../../inputType'
 	import type { Output } from '../../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../../types'
 	import { concatCustomCss } from '../../../utils'
 	import AlignWrapper from '../../helpers/AlignWrapper.svelte'
 	import InputValue from '../../helpers/InputValue.svelte'
@@ -16,7 +16,7 @@
 	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 	export let render: boolean
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let defaultValue: number | undefined = undefined
 
diff --git a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
index 53f2aa6473..5022f12c31 100644
--- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS, GridItem } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS, GridItem } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
 
@@ -15,7 +15,7 @@
 	let noPadding: boolean | undefined = undefined
 
 	export const staticOutputs: string[] = []
-	const { app, focusedGrid, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, focusedGrid, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
 	function onFocus() {
 		$focusedGrid = {
diff --git a/frontend/src/lib/components/apps/components/layout/AppDivider.svelte b/frontend/src/lib/components/apps/components/layout/AppDivider.svelte
index b54fe85c3e..26aecb3f7e 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDivider.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDivider.svelte
@@ -3,7 +3,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../inputType'
 	import type {
-		AppEditorContext,
+		AppViewerContext,
 		ComponentCustomCSS,
 		HorizontalAlignment,
 		VerticalAlignment
@@ -20,7 +20,7 @@
 	export let position: 'horizontal' | 'vertical'
 	export let render: boolean
 
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 	let size = 2
 	let color = '#00000060'
 
diff --git a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
index 764da0460e..7c24b66fa6 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import InputValue from '../helpers/InputValue.svelte'
 	import Portal from 'svelte-portal'
 	import { concatCustomCss } from '../../utils'
@@ -18,7 +18,7 @@
 	export let noWFull = false
 	export let render: boolean
 
-	const { app, focusedGrid, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, focusedGrid, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
 	let gridContent: string[] | undefined = undefined
 	let noPadding: boolean | undefined = undefined
diff --git a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
index 9fbcec4d5f..cb3d6e1eb6 100644
--- a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppEditorContext, AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
@@ -16,8 +16,9 @@
 	export let panes: number[]
 	export let render: boolean
 
-	const { app, focusedGrid, selectedComponent, componentControl } =
-		getContext<AppEditorContext>('AppEditorContext')
+	const { app, focusedGrid, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
+
+	const { componentControl } = getContext<AppEditorContext>('AppEditorContext')
 
 	let noPadding: boolean | undefined = undefined
 
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index aac1c06e1c..e3ca52d390 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -4,7 +4,7 @@
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppEditorContext, AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
 
@@ -18,8 +18,10 @@
 	export let render: boolean
 
 	export const staticOutputs: string[] = ['selectedTabIndex']
-	const { app, worldStore, focusedGrid, selectedComponent, componentControl } =
-		getContext<AppEditorContext>('AppEditorContext')
+	const { app, worldStore, focusedGrid, selectedComponent } =
+		getContext<AppViewerContext>('AppViewerContext')
+
+	const { componentControl } = getContext<AppEditorContext>('AppEditorContext')
 
 	let selected: string = tabs[0]
 	let noPadding: boolean | undefined = undefined
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index e99cd33f45..0bf0e68936 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -4,11 +4,12 @@
 	import { twMerge } from 'tailwind-merge'
 
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import { writable } from 'svelte/store'
+	import { writable, type Writable } from 'svelte/store'
 	import { buildWorld, type World } from '../rx'
 	import type {
 		App,
 		AppEditorContext,
+		AppViewerContext,
 		ConnectingInput,
 		EditorBreakpoint,
 		EditorMode,
@@ -32,11 +33,13 @@
 
 	import SettingsPanel from './SettingsPanel.svelte'
 	import { fly } from 'svelte/transition'
-	import type { Policy } from '$lib/gen'
+	import { VariableService, type Policy } from '$lib/gen'
 	import { page } from '$app/stores'
 	import CssSettings from './componentsPanel/CssSettings.svelte'
 	import { initHistory } from '$lib/history'
 	import ComponentNavigation from './component/ComponentNavigation.svelte'
+	import ItemPicker from '$lib/components/ItemPicker.svelte'
+	import VariableEditor from '$lib/components/VariableEditor.svelte'
 
 	export let app: App
 	export let path: string
@@ -62,8 +65,9 @@
 	const runnableComponents = writable<Record<string, () => Promise<void>>>({})
 	const errorByComponent = writable<Record<string, { error: string; componentId: string }>>({})
 	const focusedGrid = writable<FocusedGrid | undefined>(undefined)
+	const pickVariableCallback: Writable<((path: string) => void) | undefined> = writable(undefined)
 
-	setContext<AppEditorContext>('AppEditorContext', {
+	setContext<AppViewerContext>('AppViewerContext', {
 		worldStore,
 		staticOutputs,
 		app: appStore,
@@ -84,9 +88,13 @@
 		openDebugRun: writable(undefined),
 		focusedGrid,
 		stateId: writable(0),
-		parentWidth: writable(0),
+		parentWidth: writable(0)
+	})
+
+	setContext<AppEditorContext>('AppEditorContext', {
 		history,
-		componentControl: writable({})
+		componentControl: writable({}),
+		pickVariableCallback
 	})
 
 	let timeout: NodeJS.Timeout | undefined = undefined
@@ -132,6 +140,14 @@
 	} else {
 		selectedTab = 'insert'
 	}
+
+	let itemPicker: ItemPicker | undefined = undefined
+
+	$: if ($pickVariableCallback) {
+		itemPicker?.openDrawer()
+	}
+
+	let variableEditor: VariableEditor | undefined = undefined
 </script>
 
 <svelte:window on:hashchange={hashchange} />
@@ -284,3 +300,36 @@
 {:else}
 	App editor not available to operators
 {/if}
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, _) => {
+		$pickVariableCallback?.(path)
+	}}
+	itemName="Variable"
+	extraField="path"
+	loadItems={async () =>
+		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+			name: x.path,
+			...x
+		}))}
+>
+	<div
+		slot="submission"
+		class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+	>
+		<Button
+			variant="border"
+			color="blue"
+			size="sm"
+			startIcon={{ icon: faPlus }}
+			on:click={() => {
+				variableEditor?.initNew?.()
+			}}
+		>
+			New variable
+		</Button>
+	</div>
+</ItemPicker>
+
+<VariableEditor bind:this={variableEditor} />
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 04500d811e..754b2ad88d 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -27,7 +27,7 @@
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { AppService, Job, Policy } from '$lib/gen'
 	import { redo, undo } from '$lib/history'
-	import { userStore, workspaceStore } from '$lib/stores'
+	import { workspaceStore } from '$lib/stores'
 	import {
 		faBug,
 		faClipboard,
@@ -61,7 +61,7 @@
 		StaticAppInput,
 		UserAppInput
 	} from '../inputType'
-	import type { AppEditorContext } from '../types'
+	import type { AppEditorContext, AppViewerContext } from '../types'
 	import { allItems, toStatic } from '../utils'
 	import AppExportButton from './AppExportButton.svelte'
 	import AppInputs from './AppInputs.svelte'
@@ -90,9 +90,10 @@
 		errorByComponent,
 		openDebugRun,
 		focusedGrid,
-		selectedComponent,
-		history
-	} = getContext<AppEditorContext>('AppEditorContext')
+		selectedComponent
+	} = getContext<AppViewerContext>('AppViewerContext')
+
+	const { history } = getContext<AppEditorContext>('AppEditorContext')
 
 	const loading = {
 		publish: false,
diff --git a/frontend/src/lib/components/apps/editor/AppInputs.svelte b/frontend/src/lib/components/apps/editor/AppInputs.svelte
index 6fed2e3b78..15c5afeef8 100644
--- a/frontend/src/lib/components/apps/editor/AppInputs.svelte
+++ b/frontend/src/lib/components/apps/editor/AppInputs.svelte
@@ -2,11 +2,11 @@
 	import { Alert } from '$lib/components/common'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '../types'
+	import type { AppViewerContext } from '../types'
 	import AppComponentInput from './AppComponentInput.svelte'
 	import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte'
 
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let resourceOnly: boolean = true
 </script>
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
index dbd360beee..8d926d51be 100644
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -4,7 +4,7 @@
 	import { buildWorld, type World } from '../rx'
 	import type {
 		App,
-		AppEditorContext,
+		AppViewerContext,
 		ConnectingInput,
 		EditorBreakpoint,
 		EditorMode
@@ -40,7 +40,7 @@
 
 	const runnableComponents = writable<Record<string, () => Promise<void>>>({})
 
-	setContext<AppEditorContext>('AppEditorContext', {
+	setContext<AppViewerContext>('AppViewerContext', {
 		worldStore,
 		staticOutputs,
 		app: appStore,
@@ -61,9 +61,7 @@
 		openDebugRun: writable(undefined),
 		focusedGrid: writable(undefined),
 		stateId: writable(0),
-		parentWidth: writable(0),
-		history: writable<any>(undefined),
-		componentControl: writable({})
+		parentWidth: writable(0)
 	})
 
 	let mounted = false
diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index 509610ab0f..4a13c27ed8 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
-	import type { AppEditorContext } from '../types'
+	import type { AppViewerContext } from '../types'
 	import { Anchor, Bug, Expand, Move } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import Popover from '$lib/components/Popover.svelte'
@@ -15,7 +15,7 @@
 
 	const dispatch = createEventDispatcher()
 
-	const { errorByComponent, openDebugRun } = getContext<AppEditorContext>('AppEditorContext')
+	const { errorByComponent, openDebugRun } = getContext<AppViewerContext>('AppViewerContext')
 
 	$: error = Object.values($errorByComponent).find((e) => e.componentId === component.id)
 
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index cccf30d62c..e0041c44cb 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext, afterUpdate } from 'svelte'
-	import type { App, AppEditorContext, GridItem } from '../types'
+	import type { App, AppEditorContext, AppViewerContext, GridItem } from '../types'
 	import Grid from '@windmill-labs/svelte-grid'
 	import { classNames } from '$lib/utils'
 	import { columnConfiguration, disableDrag, enableDrag, isFixed, toggleFixed } from '../gridUtils'
@@ -26,9 +26,10 @@
 		summary,
 		focusedGrid,
 		parentWidth,
-		history,
 		breakpoint
-	} = getContext<AppEditorContext>('AppEditorContext')
+	} = getContext<AppViewerContext>('AppViewerContext')
+
+	const { history } = getContext<AppEditorContext>('AppEditorContext')
 
 	// The drag is disabled when the user is connecting an input
 	// or when the user is previewing the app
diff --git a/frontend/src/lib/components/apps/editor/GridPanel.svelte b/frontend/src/lib/components/apps/editor/GridPanel.svelte
index 09a23b5ad2..752c6bf5e1 100644
--- a/frontend/src/lib/components/apps/editor/GridPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/GridPanel.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import type { AppEditorContext, GridItem } from '../types'
+	import type { AppViewerContext, GridItem } from '../types'
 	import ComponentPanel from './settingsPanel/ComponentPanel.svelte'
 
-	const { selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 	export let gridItems: GridItem[]
 	export let parent: string | undefined
 </script>
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
index 8483406854..b87c49e738 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
@@ -3,9 +3,9 @@
 	import { ChevronDown, RefreshCw } from 'lucide-svelte'
 	import { getContext, onMount } from 'svelte'
 	import Button from '../../common/button/Button.svelte'
-	import type { AppEditorContext } from '../types'
+	import type { AppViewerContext } from '../types'
 
-	const { runnableComponents } = getContext<AppEditorContext>('AppEditorContext')
+	const { runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 	let loading: boolean = false
 	let timeout: NodeJS.Timer | undefined = undefined
 	let interval: number | undefined = undefined
@@ -14,14 +14,14 @@
 	$: componentNumber = Object.keys($runnableComponents).length
 
 	function onClick(stopAfterClear = true) {
-		if(timeout) {
+		if (timeout) {
 			clearInterval(timeout)
 			timeout = undefined
 			shouldRefresh = false
-			if(stopAfterClear) return;
+			if (stopAfterClear) return
 		}
 		refresh()
-		if(interval) {
+		if (interval) {
 			shouldRefresh = true
 			timeout = setInterval(refresh, interval)
 		}
@@ -44,12 +44,12 @@
 	}
 
 	function visChange() {
-		if(document.visibilityState === 'hidden') {
-			if(timeout) {
+		if (document.visibilityState === 'hidden') {
+			if (timeout) {
 				clearInterval(timeout)
 				timeout = undefined
 			}
-		} else if(shouldRefresh) {
+		} else if (shouldRefresh) {
 			timeout = setInterval(refresh, interval)
 		}
 	}
@@ -58,7 +58,7 @@
 		document.addEventListener('visibilitychange', visChange)
 		return () => {
 			document.removeEventListener('visibilitychange', visChange)
-			if(timeout) clearInterval(timeout)
+			if (timeout) clearInterval(timeout)
 		}
 	})
 </script>
@@ -66,17 +66,19 @@
 <div class="flex items-center">
 	<Button
 		on:click={() => onClick()}
-		color="{timeout ? 'blue' : 'light'}"
-		variant="{timeout ? 'contained' : 'border'}"
+		color={timeout ? 'blue' : 'light'}
+		variant={timeout ? 'contained' : 'border'}
 		size="xs"
 		btnClasses="!rounded-r-none {timeout ? '!border !border-blue-500' : ''}"
-		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval ? `every ${interval / 1000} seconds` : 'once'}"
+		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
+			? `every ${interval / 1000} seconds`
+			: 'once'}"
 	>
 		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
 	</Button>
 	<Dropdown
 		btnClasses="!rounded-l-none !border-l-0 min-w-[4rem] !px-2"
-		color="{timeout ? 'blue' : 'light'}"
+		color={timeout ? 'blue' : 'light'}
 		variant="border"
 		dropdownItems={[
 			{
@@ -86,7 +88,7 @@
 			...[1, 2, 3, 4, 5, 6].map((i) => ({
 				displayName: `Every ${i * 5} seconds`,
 				action: () => setInter(i * 5000)
-			})),
+			}))
 		]}
 	>
 		<span class="grow text center">{interval ? `${interval / 1000}s` : 'once'}</span>
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 6c17ef905c..0222cb9735 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '../types'
+	import type { AppViewerContext } from '../types'
 	import GridPanel from './GridPanel.svelte'
 	import PanelSection from './settingsPanel/common/PanelSection.svelte'
 	import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte'
 
-	const { selectedComponent, app, stateId } = getContext<AppEditorContext>('AppEditorContext')
+	const { selectedComponent, app, stateId } = getContext<AppViewerContext>('AppViewerContext')
 </script>
 
 {#if $app.grid}
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index c5e305683e..d4cfe0f5c2 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -4,7 +4,7 @@
 	import Grid from '@windmill-labs/svelte-grid'
 	import { twMerge } from 'tailwind-merge'
 	import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils'
-	import type { AppEditorContext, GridItem } from '../types'
+	import type { AppEditorContext, AppViewerContext, GridItem } from '../types'
 	import Component from './component/Component.svelte'
 	import { expandGriditem, findGridItem } from './appUtils'
 	import { push } from '$lib/history'
@@ -22,16 +22,10 @@
 
 	const dispatch = createEventDispatcher()
 
-	const {
-		app,
-		connectingInput,
-		selectedComponent,
-		focusedGrid,
-		mode,
-		parentWidth,
-		breakpoint,
-		history
-	} = getContext<AppEditorContext>('AppEditorContext')
+	const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint } =
+		getContext<AppViewerContext>('AppViewerContext')
+
+	const { history } = getContext<AppEditorContext>('AppEditorContext')
 
 	$: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight
 
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index dd6188bb75..375814ac31 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -3,7 +3,7 @@
 	import { fade } from 'svelte/transition'
 	import { Loader2 } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import ComponentHeader from '../ComponentHeader.svelte'
 	import type { AppComponent } from './components'
 	import {
@@ -49,7 +49,7 @@
 	export let render: boolean
 
 	const { staticOutputs, mode, connectingInput, app, errorByComponent } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')
 	let hover = false
 	let initializing: boolean | undefined = undefined
 	let componentContainerHeight: number = 0
diff --git a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
index 564b9115ba..641e2cc7d0 100644
--- a/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
+++ b/frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import type { AppEditorContext, EditorBreakpoint, GridItem } from '../../types'
+	import type { AppEditorContext, AppViewerContext, EditorBreakpoint, GridItem } from '../../types'
 	import { findGridItemParentId } from '../appUtils'
 
-	const { app, selectedComponent, breakpoint, componentControl, focusedGrid } =
-		getContext<AppEditorContext>('AppEditorContext')
+	const { app, selectedComponent, breakpoint, focusedGrid } =
+		getContext<AppViewerContext>('AppViewerContext')
+
+	const { componentControl } = getContext<AppEditorContext>('AppEditorContext')
 
 	function getSortedGridItemsOfChildren(): GridItem[] {
 		if (!$focusedGrid) {
diff --git a/frontend/src/lib/components/apps/editor/component/default-codes.ts b/frontend/src/lib/components/apps/editor/component/default-codes.ts
index e9ee2f82a1..fbd1ad66f4 100644
--- a/frontend/src/lib/components/apps/editor/component/default-codes.ts
+++ b/frontend/src/lib/components/apps/editor/component/default-codes.ts
@@ -72,14 +72,14 @@ return {
 	},
 	displaycomponent: {
 		deno: `export async function main() {
-return {
-	"foo": 42
-}
+	return {
+		"foo": 42
+	}
 }`,
 		python3: `def main():
-return {
-	"foo": 42
-}`
+	return {
+		"foo": 42
+	}`
 	},
 	htmlcomponent: {
 		deno: `export async function main() {
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
index 438f7a1826..83f017173e 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { AppEditorContext } from '../../types'
+	import type { AppEditorContext, AppViewerContext } from '../../types'
 	import { getContext } from 'svelte'
 	import { fade, slide } from 'svelte/transition'
 	import { dirtyStore } from '$lib/components/common/confirmationModal/dirtyStore'
@@ -10,8 +10,9 @@
 	import { push } from '$lib/history'
 	import { flip } from 'svelte/animate'
 
-	const { app, selectedComponent, focusedGrid, history } =
-		getContext<AppEditorContext>('AppEditorContext')
+	const { app, selectedComponent, focusedGrid } = getContext<AppViewerContext>('AppViewerContext')
+
+	const { history } = getContext<AppEditorContext>('AppEditorContext')
 
 	function addComponent(appComponentType: AppComponent['type']): void {
 		push(history, $app)
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
index 598d2c1411..18c1ddba6a 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte
@@ -4,7 +4,7 @@
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import { emptyString } from '$lib/utils'
 	import { Tab, TabContent, Tabs } from '../../../common'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import ListItem from './ListItem.svelte'
 	import { isOpenStore } from './store'
 	import CssProperty from './CssProperty.svelte'
@@ -24,7 +24,7 @@
 		ids: string[]
 	}
 
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let rawCode = ''
 	let viewJsonSchema = false
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
index fe31d3802b..fbbd21e5cc 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutputViewer.svelte
@@ -2,12 +2,12 @@
 	import ObjectViewer from '$lib/components/propertyPicker/ObjectViewer.svelte'
 	import { getContext } from 'svelte'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 
 	export let outputs: string[] = []
 	export let componentId: string
 
-	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let object = {}
 
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index 918063f381..954e7f80e1 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -4,14 +4,14 @@
 	import { getContext } from 'svelte'
 	import { flip } from 'svelte/animate'
 	import { fade } from 'svelte/transition'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { findGridItem } from '../appUtils'
 	import { components } from '../component'
 	import PanelSection from '../settingsPanel/common/PanelSection.svelte'
 	import ComponentOutputViewer from './ComponentOutputViewer.svelte'
 
 	const { connectingInput, staticOutputs, worldStore, selectedComponent, app } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')
 
 	function connectInput(componentId: string, path: string) {
 		if ($connectingInput) {
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
index c985c7385a..aa20ac6902 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
@@ -11,7 +11,7 @@
 	import { Building, Globe2 } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import { fly } from 'svelte/transition'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { defaultCode } from '../component'
 	import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte'
 	import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte'
@@ -23,7 +23,7 @@
 	let filter: string = ''
 	let picker: Drawer
 
-	const { appPath, app } = getContext<AppEditorContext>('AppEditorContext')
+	const { appPath, app } = getContext<AppViewerContext>('AppViewerContext')
 	const dispatch = createEventDispatcher()
 
 	async function inferInlineScriptSchema(
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index ec3d563000..db3e1f2b6c 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -2,7 +2,7 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import type { Preview } from '$lib/gen'
 	import { createEventDispatcher, getContext, onMount } from 'svelte'
-	import type { AppEditorContext, InlineScript } from '../../types'
+	import type { AppViewerContext, InlineScript } from '../../types'
 	import { CornerDownLeft, Maximize2, Plus, Trash2, X } from 'lucide-svelte'
 	import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte'
 	import { inferArgs } from '$lib/infer'
@@ -26,7 +26,7 @@
 	export let fields: Record<string, AppInput> = {}
 	export let syncFields: boolean = false
 
-	const { runnableComponents, stateId } = getContext<AppEditorContext>('AppEditorContext')
+	const { runnableComponents, stateId } = getContext<AppViewerContext>('AppViewerContext')
 
 	let editor: Editor
 	let validCode = true
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index 1b57c1fe90..ad59754805 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import SplitPanesWrapper from '$lib/components/splitPanes/SplitPanesWrapper.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import InlineScriptsPanelList from './InlineScriptsPanelList.svelte'
@@ -9,7 +9,7 @@
 	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
 
 	const { app, staticOutputs, runnableComponents } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')
 
 	let selectedScriptComponentId: string | undefined = undefined
 
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
index 8b57a012ab..3369064c54 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte
@@ -3,7 +3,7 @@
 	import { Plus } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 	import Tooltip from '../../../Tooltip.svelte'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { getAllScriptNames } from '../../utils'
 	import PanelSection from '../settingsPanel/common/PanelSection.svelte'
 	import { getAppScripts } from './utils'
@@ -11,7 +11,7 @@
 	const PREFIX = 'script-selector-' as const
 
 	export let selectedScriptComponentId: string | undefined = undefined
-	const { app, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
 	function selectScript(id: string) {
 		selectedScriptComponentId = id
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
index a69ba38602..f0fb44114f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
@@ -3,12 +3,12 @@
 	import { faArrowRight, faCode, faPen } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 
 	export let componentInput: AppInput
 	export let disableStatic: boolean = false
 
-	const { onchange } = getContext<AppEditorContext>('AppEditorContext')
+	const { onchange } = getContext<AppViewerContext>('AppViewerContext')
 
 	$: if (componentInput.fieldType == 'template' && componentInput.type == 'static') {
 		//@ts-ignore
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index e3fee02803..9b1bb408d1 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -2,7 +2,7 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { faChevronDown, faChevronUp, faCopy, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '../../types'
+	import type { AppEditorContext, AppViewerContext } from '../../types'
 	import PanelSection from './common/PanelSection.svelte'
 	import InputsSpecsEditor from './InputsSpecsEditor.svelte'
 	import TableActions from './TableActions.svelte'
@@ -42,9 +42,10 @@
 		selectedComponent,
 		worldStore,
 		focusedGrid,
-		stateId,
-		history
-	} = getContext<AppEditorContext>('AppEditorContext')
+		stateId
+	} = getContext<AppViewerContext>('AppViewerContext')
+
+	const { history } = getContext<AppEditorContext>('AppEditorContext')
 
 	function duplicateElement(id: string) {
 		push(history, $app)
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
index 52f619c469..79b306eba1 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridPane.svelte
@@ -2,7 +2,7 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { deleteGridItem } from '../appUtils'
 	import type { AppComponent } from '../component'
 	import PanelSection from './common/PanelSection.svelte'
@@ -11,7 +11,7 @@
 	export let component: AppComponent
 
 	const { app, staticOutputs, runnableComponents } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')
 
 	function addTab() {
 		const numberOfPanes = panes.length
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index b644f3e998..3f69f184bb 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -2,7 +2,7 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { deleteGridItem } from '../appUtils'
 	import type { AppComponent } from '../component'
 	import PanelSection from './common/PanelSection.svelte'
@@ -11,7 +11,7 @@
 	export let component: AppComponent
 
 	const { app, staticOutputs, runnableComponents, focusedGrid } =
-		getContext<AppEditorContext>('AppEditorContext')
+		getContext<AppViewerContext>('AppViewerContext')
 
 	function addTab() {
 		const numberOfTabs = tabs.length
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
index dceb0962fc..874afe9e37 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import VariableEditor from '$lib/components/VariableEditor.svelte'
 	import type {
 		ConnectedAppInput,
 		EvalAppInput,
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
index 94837c3748..fcafb6aa7f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
@@ -5,7 +5,7 @@
 	import { fieldTypeToTsType } from '../../utils'
 	import InputsSpecEditor from './InputsSpecEditor.svelte'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext, BaseAppComponent } from '../../types'
+	import type { AppViewerContext, BaseAppComponent } from '../../types'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import Popover from '$lib/components/Popover.svelte'
 
@@ -16,7 +16,7 @@
 	export let rowColumns = false
 	export let resourceOnly = false
 
-	const { connectingInput } = getContext<AppEditorContext>('AppEditorContext')
+	const { connectingInput } = getContext<AppViewerContext>('AppViewerContext')
 </script>
 
 {#if inputSpecs}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte
index 298da5962d..7aec63cfaa 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte
@@ -4,7 +4,7 @@
 	import { push } from '$lib/history'
 	import { faCopy } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
-	import type { App, AppEditorContext } from '../../types'
+	import type { App, AppEditorContext, AppViewerContext } from '../../types'
 	import {
 		createNewGridItem,
 		deleteGridItem,
@@ -19,7 +19,8 @@
 
 	let selectedOption: string
 
-	const { app, history } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
+	const { history } = getContext<AppEditorContext>('AppEditorContext')
 
 	function listAllSubGrids(app: App) {
 		return app.subgrids ? Object.keys(app.subgrids) : []
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte
index 90f05cdbde..d474caefee 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import PanelSection from './common/PanelSection.svelte'
 
 	export let recomputeIds: string[] | undefined = undefined
 	export let ownId: string
 
-	const { runnableComponents } = getContext<AppEditorContext>('AppEditorContext')
+	const { runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 
 	function onChange(
 		event: Event & {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
index c2236a8d6a..33aff7d11f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
@@ -4,11 +4,11 @@
 	import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import type { ResultAppInput } from '../../inputType'
-	import type { AppEditorContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { clearResultAppInput } from '../../utils'
 	import InlineScriptEditorDrawer from '../inlineScriptsPanel/InlineScriptEditorDrawer.svelte'
 
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
 	export let appInput: ResultAppInput
 	let inlineScriptEditorDrawer: InlineScriptEditorDrawer
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
index 2d81641add..1d39328453 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
@@ -6,7 +6,7 @@
 	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import { Icon } from 'svelte-awesome'
-	import type { AppEditorContext, BaseAppComponent } from '../../types'
+	import type { AppViewerContext, BaseAppComponent } from '../../types'
 	import type { ButtonComponent } from '../component'
 	import PanelSection from './common/PanelSection.svelte'
 	import TableActionLabel from './TableActionLabel.svelte'
@@ -14,7 +14,7 @@
 	export let components: (BaseAppComponent & ButtonComponent)[]
 	export let id: string
 
-	const { selectedComponent, staticOutputs } = getContext<AppEditorContext>('AppEditorContext')
+	const { selectedComponent, staticOutputs } = getContext<AppViewerContext>('AppViewerContext')
 
 	function addComponent() {
 		const actionId = getNextId(components.map((x) => x.id.split('_')[1]))
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
index d871e3cc51..2b6809660a 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { AppEditorContext } from '../../../types'
+	import type { AppViewerContext } from '../../../types'
 	import { Badge, Button } from '$lib/components/common'
 	import { faArrowRight, faClose } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
@@ -7,7 +7,7 @@
 
 	export let componentInput: ConnectedAppInput
 
-	const { connectingInput } = getContext<AppEditorContext>('AppEditorContext')
+	const { connectingInput } = getContext<AppViewerContext>('AppViewerContext')
 
 	function applyConnection() {
 		if (
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
index d44122f4d6..ef18dfd038 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
@@ -2,7 +2,7 @@
 	import type { EvalAppInput } from '../../../inputType'
 
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '$lib/components/apps/types'
+	import type { AppViewerContext } from '$lib/components/apps/types'
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import { buildExtraLib } from '$lib/components/apps/utils'
 
@@ -10,7 +10,7 @@
 	export let id: string
 	export let hasRows: boolean = false
 
-	const { onchange, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { onchange, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	$: componentInput && onchange?.()
 
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
index c12d392c36..79371146f2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte
@@ -6,28 +6,31 @@
 	import ResourcePicker from '$lib/components/ResourcePicker.svelte'
 	import JsonEditor from './JsonEditor.svelte'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '$lib/components/apps/types'
+	import type { AppEditorContext, AppViewerContext } from '$lib/components/apps/types'
 	import IconSelectInput from './IconSelectInput.svelte'
 	import ColorInput from './ColorInput.svelte'
+	import { Icon } from 'svelte-awesome'
+	import { faDollarSign } from '@fortawesome/free-solid-svg-icons'
 
 	export let componentInput: StaticAppInput | undefined
 
-	const { onchange } = getContext<AppEditorContext>('AppEditorContext')
+	const { onchange } = getContext<AppViewerContext>('AppViewerContext')
+	const { pickVariableCallback } = getContext<AppEditorContext>('AppEditorContext')
 
 	$: componentInput && onchange?.()
 </script>
 
 {#if componentInput?.type === 'static'}
 	{#if componentInput.fieldType === 'number'}
-		<input type="number" bind:value={componentInput.value} />
+		<input on:keydown|stopPropagation type="number" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'textarea'}
-		<textarea bind:value={componentInput.value} />
+		<textarea on:keydown|stopPropagation bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'date'}
-		<input type="date" bind:value={componentInput.value} />
+		<input on:keydown|stopPropagation type="date" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
 	{:else if componentInput.fieldType === 'select'}
-		<select bind:value={componentInput.value}>
+		<select on:keydown|stopPropagation on:keydown|stopPropagation bind:value={componentInput.value}>
 			{#each staticValues[componentInput.optionValuesKey] || [] as option}
 				<option value={option}>
 					{option}
@@ -64,6 +67,25 @@
 	{:else if componentInput.fieldType === 'array'}
 		<ArrayStaticInputEditor bind:componentInput on:deleteArrayItem />
 	{:else}
-		<input type="text" placeholder="Static value" bind:value={componentInput.value} />
+		<div class="flex gap-1">
+			<input
+				on:keydown|stopPropagation
+				type="text"
+				placeholder="Static value"
+				bind:value={componentInput.value}
+			/>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<div
+				class="min-w-min min-h-[34px] items-center leading-4 px-3 text-gray-600 cursor-pointer border border-gray-700 rounded center-center"
+				on:click={() => {
+					$pickVariableCallback = (variable) => {
+						if (componentInput) {
+							componentInput.value = `$var:${variable}`
+						}
+					}
+				}}
+				><Icon data={faDollarSign} />
+			</div>
+		</div>
 	{/if}
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
index 850370cae5..969134fc33 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
@@ -7,7 +7,7 @@
 	import type { ResultAppInput } from '$lib/components/apps/inputType'
 	import WorkspaceScriptList from './WorkspaceScriptList.svelte'
 	import WorkspaceFlowList from './WorkspaceFlowList.svelte'
-	import type { AppEditorContext, GridItem, InlineScript } from '$lib/components/apps/types'
+	import type { AppViewerContext, GridItem, InlineScript } from '$lib/components/apps/types'
 	import { getContext } from 'svelte'
 	import type { Schema } from '$lib/common'
 	import { getAllScriptNames, loadSchema, schemaToInputsSpec } from '$lib/components/apps/utils'
@@ -22,7 +22,7 @@
 	let filter: string = ''
 	let picker: Drawer
 
-	const { app, workspace } = getContext<AppEditorContext>('AppEditorContext')
+	const { app, workspace } = getContext<AppViewerContext>('AppViewerContext')
 
 	async function loadSchemaFromTriggerable(
 		path: string,
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 4f93ef5f38..17d9396a59 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -3,6 +3,7 @@ import type { Preview } from '$lib/gen'
 import type { History } from '$lib/history'
 import type { FilledItem } from '@windmill-labs/svelte-grid'
 import type { Writable } from 'svelte/store'
+import type VariableEditor from '../VariableEditor.svelte'
 import type { AppComponent } from './editor/component/components'
 import type {
 	AppInput,
@@ -111,7 +112,7 @@ export type ConnectingInput = {
 	hoveredComponent: string | undefined
 }
 
-export type AppEditorContext = {
+export type AppViewerContext = {
 	worldStore: Writable<World | undefined>
 	staticOutputs: Writable<Record<string, string[]>>
 	app: Writable<App>
@@ -133,8 +134,12 @@ export type AppEditorContext = {
 	focusedGrid: Writable<FocusedGrid | undefined>
 	stateId: Writable<number>
 	parentWidth: Writable<number>
+}
+
+export type AppEditorContext = {
 	history: History<App>
 	componentControl: Writable<Record<string, { left?: () => boolean; right?: () => boolean }>>
+	pickVariableCallback: Writable<((path: string) => void) | undefined>
 }
 
 export type FocusedGrid = { parentComponentId: string; subGridIndex: number }