diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 32a1d459..4f34374a 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -51,6 +51,7 @@ declare module 'vue' {
     FormDialog: typeof import('./src/components/FormDialog.vue')['default']
     Grid: typeof import('./src/components/Grid.vue')['default']
     Header: typeof import('./src/components/AppLayout/Header.vue')['default']
+    HTML: typeof import('./src/components/AppLayout/HTML.vue')['default']
     IconButton: typeof import('./src/components/IconButton.vue')['default']
     ImageView: typeof import('./src/components/AppLayout/ImageView.vue')['default']
     InlineInput: typeof import('./src/components/InlineInput.vue')['default']
diff --git a/frontend/package.json b/frontend/package.json
index e89d33c1..0da91d75 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,7 +18,6 @@
 		"@codemirror/lang-html": "^6.4.9",
 		"@codemirror/lang-javascript": "^6.2.4",
 		"@codemirror/lang-json": "^6.0.1",
-		"@codemirror/lang-python": "^6.2.1",
 		"@replit/codemirror-indentation-markers": "^6.5.3",
 		"@vitejs/plugin-vue": "^5.2.0",
 		"@vueuse/components": "^10.11.1",
diff --git a/frontend/src/components/AppLayout/HTML.vue b/frontend/src/components/AppLayout/HTML.vue
new file mode 100644
index 00000000..d8e01b22
--- /dev/null
+++ b/frontend/src/components/AppLayout/HTML.vue
@@ -0,0 +1,26 @@
+<template>
+	<div class="!relative" ref="component" v-html="_html"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import type { HTMLProps } from "@/types/studio_components/HTML"
+import { isEditor } from "@/utils/helpers"
+
+const component = ref<HTMLElement | null>(null)
+const props = defineProps<HTMLProps>()
+
+const _html = computed(() => {
+	if (isEditor()) {
+		return `
+			<div class="absolute top-0 bottom-0 right-0 left-0"></div>
+			${props.html}
+		`
+	}
+	return props.html
+})
+
+defineExpose({
+	component,
+})
+</script>
diff --git a/frontend/src/components/Code.vue b/frontend/src/components/Code.vue
index f6288f45..27b15d33 100644
--- a/frontend/src/components/Code.vue
+++ b/frontend/src/components/Code.vue
@@ -1,8 +1,17 @@
 <template>
-	<div class="flex h-full w-full flex-col gap-1.5">
+	<div class="relative flex h-full w-full flex-col gap-1.5">
 		<InputLabel v-if="label" :class="[required ? `after:text-red-600 after:content-['_*']` : '']">
 			{{ label }}
 		</InputLabel>
+		<div v-if="actionButton" class="absolute bottom-1.5 right-1.5 z-10 flex gap-1">
+			<Button
+				@click="actionButton?.handler"
+				variant="outline"
+				:icon="actionButton.icon"
+				:title="actionButton.label"
+				:disabled="readonly"
+			></Button>
+		</div>
 		<codemirror
 			v-model="code"
 			:extensions="extensions"
@@ -11,17 +20,20 @@
 			:indent-with-tab="true"
 			:style="{ height: height, maxHeight: maxHeight }"
 			:disabled="readonly"
-			@ready="setEditorValue"
-			@blur="emitEditorValue"
+			@ready="onEditorReady"
+			@blur="syncToParent"
 		/>
 
-		<Button v-if="showSaveButton" @click="emit('save', code)" class="mt-3 w-full text-base">Save</Button>
+		<Button v-if="showSaveButton" variant="solid" @click="emit('save', code)" class="mt-3 w-full text-base">
+			Save
+		</Button>
 		<ErrorMessage class="text-xs leading-4" v-if="errorMessage" :message="errorMessage" />
 	</div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed, watch } from "vue"
+import { ref, computed, watch } from "vue"
+import { Button } from "frappe-ui"
 import { Codemirror } from "vue-codemirror"
 import {
 	autocompletion,
@@ -29,7 +41,8 @@ import {
 	type CompletionContext,
 	type Completion,
 } from "@codemirror/autocomplete"
-import { LanguageSupport, indentService } from "@codemirror/language"
+import { Compartment, Extension } from "@codemirror/state"
+import { indentService, LRLanguage } from "@codemirror/language"
 import { EditorView, keymap } from "@codemirror/view"
 import { indentMore, indentLess } from "@codemirror/commands"
 import { indentationMarkers } from "@replit/codemirror-indentation-markers"
@@ -43,7 +56,7 @@ import InputLabel from "@/components/InputLabel.vue"
 
 const props = withDefaults(
 	defineProps<{
-		language?: "json" | "javascript" | "html" | "css" | "python"
+		language?: "json" | "javascript" | "html" | "css"
 		modelValue?: string | object | Array<string | object> | null
 		height?: string
 		maxHeight?: string
@@ -56,6 +69,11 @@ const props = withDefaults(
 		readonly?: boolean
 		borderless?: boolean
 		emitOnChange?: boolean
+		actionButton?: {
+			icon: string
+			label: string
+			handler: () => void
+		}
 	}>(),
 	{
 		language: "javascript",
@@ -69,10 +87,13 @@ const props = withDefaults(
 	},
 )
 const emit = defineEmits(["update:modelValue", "save"])
-const { jsonReplacer, jsToJson, jsonToJs, parseObjectString } = useSerializer()
+const { jsonReplacer, jsonToJs, parseObjectString } = useSerializer()
 
 const code = ref<string>("")
-const setEditorValue = () => {
+const editorView = ref<EditorView | null>(null)
+
+// -- Syncing --
+const syncToEditor = () => {
 	let value = props.modelValue ?? ""
 	try {
 		if (props.language === "json" || typeof value === "object") {
@@ -86,19 +107,8 @@ const setEditorValue = () => {
 	}
 }
 
-const isValidObjectString = (text: string) => {
-	const objString = text.trim()
-	if (
-		(objString.startsWith("{") && objString.endsWith("}")) ||
-		(objString.startsWith("[") && objString.endsWith("]"))
-	) {
-		return true
-	}
-	return false
-}
-
 const errorMessage = ref("")
-const emitEditorValue = () => {
+const syncToParent = () => {
 	try {
 		errorMessage.value = ""
 		let value = code.value || ""
@@ -120,100 +130,82 @@ const emitEditorValue = () => {
 	}
 }
 
-const languageExtension = ref<LanguageSupport>()
-const autocompleteExtension = ref()
-const customCompletionsExtension = ref()
-
-async function setLanguageExtension() {
-	const importMap = {
-		json: () => import("@codemirror/lang-json"),
-		javascript: () => import("@codemirror/lang-javascript"),
-		html: () => import("@codemirror/lang-html"),
-		css: () => import("@codemirror/lang-css"),
-		python: () => import("@codemirror/lang-python"),
-	}
-
-	const languageImport = importMap[props.language]
-	if (!languageImport) return
-
-	const module = await languageImport()
-	languageExtension.value = (module as any)[props.language]()
-	const languageData = (module as any)[`${props.language}Language`]
-
-	if (props.completions) {
-		autocompleteExtension.value = languageData.data.of({
+// -- Language Extension --
+let languageConf = new Compartment()
+const loadLanguage = async (type: string): Promise<Extension> => {
+	const getJSCompletions = (language: LRLanguage) => {
+		if (!props.completions) return []
+		return language.data.of({
 			autocomplete: props.completions,
 		})
 	}
 
-	if (props.language === "javascript") {
-		const { scopeCompletionSource } = module as any
-		const windowCompletionSource = scopeCompletionSource(window)
-		customCompletionsExtension.value = languageData.data.of({
-			autocomplete: (context: CompletionContext) => {
-				const result = windowCompletionSource(context)
-				if (result && result.options) {
-					result.options = result.options.filter((option: Completion) => !isPrivateKey(option.label))
-				}
-				return result
-			},
-		})
+	switch (type) {
+		case "javascript": {
+			const { javascript, javascriptLanguage, scopeCompletionSource } = await import(
+				"@codemirror/lang-javascript"
+			)
+			const windowCompletionSource = scopeCompletionSource(window)
+			return [
+				javascript(),
+				getJSCompletions(javascriptLanguage),
+				javascriptLanguage.data.of({
+					autocomplete: async (context: CompletionContext) => {
+						const result = await windowCompletionSource(context)
+						if (result && result.options) {
+							result.options = result.options.filter((option: Completion) => !isPrivateKey(option.label))
+						}
+						return result
+					},
+				}),
+			]
+		}
+		case "html": {
+			const { html, htmlLanguage } = await import("@codemirror/lang-html")
+			return [html(), getJSCompletions(htmlLanguage)]
+		}
+		case "css": {
+			const { css } = await import("@codemirror/lang-css")
+			return css()
+		}
+		case "json": {
+			const { json } = await import("@codemirror/lang-json")
+			return json()
+		}
+		default:
+			return []
 	}
 }
 
-onMounted(async () => {
-	await setLanguageExtension()
-})
-
-watch(
-	() => props.language,
-	async () => {
-		await setLanguageExtension()
-	},
-	{ immediate: true },
-)
+async function updateLanguage() {
+	const languageExtension = await loadLanguage(props.language)
+	editorView.value?.dispatch({ effects: languageConf.reconfigure(languageExtension) })
+}
 
-watch(() => props.modelValue, setEditorValue)
+// -- Editor Events --
+const onEditorReady = (view: { view: EditorView }) => {
+	editorView.value = view.view
+	syncToEditor()
+	updateLanguage()
+}
 
-// Emit on change if emitOnChange prop is true
+watch(() => props.modelValue, syncToEditor)
+watch(() => props.language, updateLanguage)
 watch(code, () => {
 	if (props.emitOnChange && !props.readonly) {
-		emitEditorValue()
-	}
-})
-
-const customIndent = indentService.of((context: any, pos: number) => {
-	/* helper to indent correctly inside objects because codemirror fails to do it for a bare object literal */
-	let node = context.state.tree.resolveInner(pos, -1)
-	const parentBlock = node.parent
-	const getIndent = () => context.lineIndent(node.from, -1) + context.unit
-
-	if (node.name === "{") {
-		if (
-			// Top-level ambiguous Block Statement
-			parentBlock?.name === "Block" ||
-			// Object Literal immediately inside an array or argument list
-			(parentBlock?.name === "ObjectExpression" &&
-				["ArrayExpression", "ArgList"].includes(parentBlock.parent?.name))
-		) {
-			// Treat it as a bare object literal at the top level
-			return getIndent()
-		}
-	} else if (node.name === "[") {
-		// indent inside an array
-		if (parentBlock?.name === "ArrayExpression") {
-			return getIndent()
-		}
+		syncToParent()
 	}
-	// Fall back to the default indentation logic
-	return null
 })
 
+// -- Extensions --
 const extensions = computed(() => {
 	const baseExtensions = [
+		languageConf.of([]),
 		closeBrackets(),
 		indentationMarkers(),
+		getAutocompletionOptions(),
 		props.showLineNumbers ? EditorView.lineWrapping : [],
+		isObjectLiteral.value ? customIndent : [],
 		tomorrow,
 		EditorView.theme({
 			"&": {
@@ -241,13 +233,7 @@ const extensions = computed(() => {
 				event.stopPropagation()
 			},
 		}),
-		keymap.of([
-			{
-				key: "Tab",
-				run: indentMore,
-				shift: indentLess,
-			},
-		]),
+		keymap.of([{ key: "Tab", run: indentMore, shift: indentLess }]),
 	]
 	if (!props.readonly) {
 		baseExtensions.push(
@@ -256,7 +242,7 @@ const extensions = computed(() => {
 					key: "Ctrl-s",
 					mac: "Cmd-s",
 					run: () => {
-						emit("save", emitEditorValue())
+						emit("save", syncToParent())
 						return true
 					},
 					stopPropagation: true,
@@ -264,35 +250,64 @@ const extensions = computed(() => {
 			]),
 		)
 	}
-	if (languageExtension.value) {
-		baseExtensions.push(languageExtension.value)
-	}
-	if (autocompleteExtension.value) {
-		baseExtensions.push(autocompleteExtension.value)
-	}
-	if (customCompletionsExtension.value) {
-		baseExtensions.push(customCompletionsExtension.value)
-	}
-	if (isObjectLiteral.value) {
-		baseExtensions.push(customIndent)
-	}
-	const autocompletionOptions = {
+	return baseExtensions
+})
+
+const getAutocompletionOptions = () => {
+	return autocompletion({
 		activateOnTyping: true,
 		maxRenderedOptions: 10,
 		closeOnBlur: false,
 		icons: false,
 		optionClass: () => "flex h-7 !px-2 items-center rounded !text-gray-600",
+	})
+}
+
+const customIndent = indentService.of((context: any, pos: number) => {
+	/* helper to indent correctly inside objects because codemirror fails to do it for a bare object literal */
+	let node = context.state.tree.resolveInner(pos, -1)
+	const parentBlock = node.parent
+	const getIndent = () => context.lineIndent(node.from, -1) + context.unit
+
+	if (node.name === "{") {
+		if (
+			// Top-level ambiguous Block Statement
+			parentBlock?.name === "Block" ||
+			// Object Literal immediately inside an array or argument list
+			(parentBlock?.name === "ObjectExpression" &&
+				["ArrayExpression", "ArgList"].includes(parentBlock.parent?.name))
+		) {
+			// Treat it as a bare object literal at the top level
+			return getIndent()
+		}
+	} else if (node.name === "[") {
+		// indent inside an array
+		if (parentBlock?.name === "ArrayExpression") {
+			return getIndent()
+		}
 	}
-	baseExtensions.push(autocompletion(autocompletionOptions))
-	return baseExtensions
+	// Fall back to the default indentation logic
+	return null
 })
 
+// -- Helpers --
 const isObjectLiteral = computed(
 	() => props.language === "javascript" && typeof props.modelValue === "object",
 )
 
+const isValidObjectString = (text: string) => {
+	const objString = text.trim()
+	if (
+		(objString.startsWith("{") && objString.endsWith("}")) ||
+		(objString.startsWith("[") && objString.endsWith("]"))
+	) {
+		return true
+	}
+	return false
+}
+
 defineExpose({
 	errorMessage,
-	emitEditorValue,
+	emitEditorValue: syncToParent,
 })
 </script>
diff --git a/frontend/src/components/ComponentEditor.vue b/frontend/src/components/ComponentEditor.vue
index b5f9ef02..556cdf75 100644
--- a/frontend/src/components/ComponentEditor.vue
+++ b/frontend/src/components/ComponentEditor.vue
@@ -71,7 +71,7 @@
 	>
 		<template #body-content>
 			<Code
-				:modelValue="block.getSlotContent(store.selectedSlot?.slotName) || ''"
+				:modelValue="block.getSlotContent(canvasStore.activeCanvas?.selectedSlot?.slotName) || ''"
 				language="html"
 				height="60vh"
 				:showSaveButton="true"
@@ -134,7 +134,13 @@ const showMarginPaddingHandlers = computed(() => {
 })
 
 const showResizer = computed(() => {
-	return !props.block.isRoot() && isBlockSelected.value && !canvasStore.isDragging
+	return (
+		!props.block.isRoot() &&
+		isBlockSelected.value &&
+		!canvasStore.isDragging &&
+		!props.block.getParentBlock()?.isGrid() &&
+		!(props.block.isHTML() && !props.block.isSVG() && !props.block.isIframe())
+	)
 })
 
 const isBlockSelected = computed(() => {
diff --git a/frontend/src/components/ComponentLayers.vue b/frontend/src/components/ComponentLayers.vue
index 0a39fb33..ea8b57d2 100644
--- a/frontend/src/components/ComponentLayers.vue
+++ b/frontend/src/components/ComponentLayers.vue
@@ -56,12 +56,22 @@
 							</span>
 
 							<!-- toggle visibility -->
-							<FeatherIcon
-								v-if="!element.isRoot()"
-								:name="element.isVisible() ? 'eye' : 'eye-off'"
-								class="ml-auto mr-2 hidden h-3 w-3 group-hover:block"
-								@click.stop="element.toggleVisibility()"
-							/>
+							<div class="ml-auto flex items-center gap-2">
+								<div
+									v-if="element.hasVisibilityCondition()"
+									title="Toggle visibility condition"
+									class="hidden cursor-pointer group-hover:block"
+									@click.stop="element.toggleVisibilityCondition()"
+								>
+									<FeatherIcon :name="element.visibilityCondition ? 'zap' : 'zap-off'" class="h-3 w-3" />
+								</div>
+								<FeatherIcon
+									v-if="!element.isRoot()"
+									:name="element.isVisible() ? 'eye' : 'eye-off'"
+									class="mr-2 hidden h-3 w-3 cursor-pointer group-hover:block"
+									@click.stop="element.toggleVisibility()"
+								/>
+							</div>
 							<span v-if="element.isRoot()" class="ml-auto mr-2 text-sm capitalize text-gray-500">
 								{{ canvasStore.activeCanvas?.activeBreakpoint }}
 							</span>
diff --git a/frontend/src/components/ComponentProperties.vue b/frontend/src/components/ComponentProperties.vue
index 2f653148..97592076 100644
--- a/frontend/src/components/ComponentProperties.vue
+++ b/frontend/src/components/ComponentProperties.vue
@@ -54,12 +54,23 @@
 
 			<!-- Visibility Condition -->
 			<SectionContainer title="Visibility Condition">
+				<template #actions>
+					<Button
+						v-if="block?.hasVisibilityCondition()"
+						title="Toggle visibility condition"
+						variant="ghost"
+						@click.stop="block?.toggleVisibilityCondition()"
+					>
+						<FeatherIcon :name="block.visibilityCondition ? 'zap' : 'zap-off'" class="h-3 w-3" />
+					</Button>
+				</template>
 				<Code
 					language="javascript"
 					height="60px"
 					:showLineNumbers="false"
 					:completions="(context: CompletionContext) => getCompletions(context, block?.getCompletions())"
-					:modelValue="block?.visibilityCondition"
+					:modelValue="block?.visibilityCondition || block?.__lastVisibilityCondition"
+					:readonly="!!block.__lastVisibilityCondition"
 					@update:modelValue="blockController.setKeyValue('visibilityCondition', $event)"
 				/>
 			</SectionContainer>
@@ -93,6 +104,7 @@ import Code from "@/components/Code.vue"
 import blockController from "@/utils/blockController"
 import { useStudioCompletions } from "@/utils/useStudioCompletions"
 import type { CompletionContext } from "@codemirror/autocomplete"
+import { Switch } from "@/json_types"
 
 const props = defineProps<{
 	block?: Block
diff --git a/frontend/src/components/ComponentStyles.vue b/frontend/src/components/ComponentStyles.vue
index b4028ed3..18a97b3e 100644
--- a/frontend/src/components/ComponentStyles.vue
+++ b/frontend/src/components/ComponentStyles.vue
@@ -426,6 +426,20 @@ const styleSectionProperties = [
 			return blockController.getStyle("borderColor")
 		},
 	},
+	{
+		component: ColorInput,
+		getProps: () => {
+			return {
+				label: "Text Color",
+				value: blockController.getStyle("color"),
+			}
+		},
+		events: {
+			change: (val: StyleValue) => blockController.setStyle("color", val),
+		},
+		allowDynamicValue: true,
+		searchKeyWords: "Text, Color, TextColor, Text Color",
+	},
 	{
 		component: InlineInput,
 		getProps: () => {
@@ -500,6 +514,27 @@ const styleSectionProperties = [
 			return blockController.getStyle("borderRadius")
 		},
 	},
+	{
+		component: InlineInput,
+		getProps: () => {
+			return {
+				label: "Z-Index",
+				modelValue: blockController.getStyle("zIndex"),
+			}
+		},
+		searchKeyWords: "Z, Index, ZIndex, Z Index",
+		events: {
+			"update:modelValue": (val: StyleValue) => blockController.setStyle("zIndex", val),
+		},
+		condition: () =>
+			!blockController.multipleBlocksSelected() &&
+			!blockController.isRoot() &&
+			blockController.getStyle("position") !== "static",
+		allowDynamicValue: true,
+		getValue: () => {
+			return blockController.getStyle("zIndex")
+		},
+	},
 	{
 		component: InlineInput,
 		getProps: () => {
@@ -535,27 +570,6 @@ const styleSectionProperties = [
 			"update:modelValue": (val: StyleValue) => blockController.setStyle("boxShadow", val),
 		},
 	},
-	{
-		component: InlineInput,
-		getProps: () => {
-			return {
-				label: "Z-Index",
-				modelValue: blockController.getStyle("zIndex"),
-			}
-		},
-		searchKeyWords: "Z, Index, ZIndex, Z Index",
-		events: {
-			"update:modelValue": (val: StyleValue) => blockController.setStyle("zIndex", val),
-		},
-		condition: () =>
-			!blockController.multipleBlocksSelected() &&
-			!blockController.isRoot() &&
-			blockController.getStyle("position") !== "static",
-		allowDynamicValue: true,
-		getValue: () => {
-			return blockController.getStyle("zIndex")
-		},
-	},
 ]
 
 const rawStyleSectionProperties = [
diff --git a/frontend/src/components/PropsEditor.vue b/frontend/src/components/PropsEditor.vue
index c6d74f5a..0de4b017 100644
--- a/frontend/src/components/PropsEditor.vue
+++ b/frontend/src/components/PropsEditor.vue
@@ -9,7 +9,7 @@
 				v-if="propName === 'modelValue'"
 				:block="block"
 				@update:modelValue="(value) => bindVariable(propName, value)"
-				:class="{ 'mt-1 self-start': config.inputType === 'code' }"
+				:class="{ 'mt-1 self-start': isCodeField(config.inputType) }"
 				:formatValuesAsTemplate="false"
 			>
 				<template #target="{ togglePopover }">
@@ -34,12 +34,32 @@
 			<DynamicValueSelector
 				v-else-if="!isTestingComponent"
 				:block="block"
-				:class="{ 'mt-1 self-start': config.inputType === 'code' }"
+				:class="{ 'mt-1 self-start': isCodeField(config.inputType) }"
 				@update:modelValue="(value) => props.block?.setProp(propName, value)"
 			/>
 
 			<Code
-				v-if="config.inputType === 'code'"
+				v-if="config.inputType === 'html'"
+				:label="propName"
+				language="html"
+				:modelValue="config.modelValue"
+				@update:modelValue="(newValue) => props.block?.setProp(propName, newValue)"
+				:required="config.required"
+				:completions="(context: CompletionContext) => getCompletions(context, block?.getCompletions())"
+				:showLineNumbers="false"
+				height="250px"
+				class="overflow-hidden"
+				:actionButton="{
+					icon: 'maximize-2',
+					label: 'Expand',
+					handler: () => {
+						if (!props.block) return
+						canvasStore.editHTML(props.block)
+					},
+				}"
+			/>
+			<Code
+				v-else-if="config.inputType === 'code'"
 				:label="propName"
 				language="javascript"
 				:modelValue="config.modelValue"
@@ -88,6 +108,7 @@ import type { CompletionContext } from "@codemirror/autocomplete"
 import useComponentStore from "@/stores/componentStore"
 import { getComponentProps } from "@/utils/components"
 import { isDynamicValue } from "@/utils/code"
+import useCanvasStore from "@/stores/canvasStore"
 import useComponentEditorStore from "@/stores/componentEditorStore"
 import type { ComponentProps } from "@/types"
 import { ComponentInput } from "@/types/Studio/StudioComponent"
@@ -99,6 +120,7 @@ const props = defineProps<{
 }>()
 
 const getCompletions = useStudioCompletions()
+const canvasStore = useCanvasStore()
 
 const componentInstance = computed(() => {
 	if (!props.block?.componentName || props.block.isStudioComponent) return {}
@@ -175,6 +197,10 @@ function getStudioComponentProps(componentInputs: ComponentInput[]): ComponentPr
 	return _props
 }
 
+const isCodeField = (inputType: string) => {
+	return ["code", "html"].includes(inputType)
+}
+
 // variable binding
 const boundValue = computed({
 	get() {
diff --git a/frontend/src/components/StudioComponent.vue b/frontend/src/components/StudioComponent.vue
index 0984904f..20462be8 100644
--- a/frontend/src/components/StudioComponent.vue
+++ b/frontend/src/components/StudioComponent.vue
@@ -113,6 +113,7 @@ import { isDynamicValue } from "@/utils/code"
 
 import type { CanvasProps } from "@/types/StudioCanvas"
 import type { RepeaterContext } from "@/types"
+import type HTML from "@/components/AppLayout/HTML.vue"
 import useCodeStore from "@/stores/codeStore"
 
 const props = withDefaults(
@@ -134,7 +135,7 @@ const canvasStore = useCanvasStore()
 const codeStore = useCodeStore()
 
 const isComponentReady = ref(false)
-const editor = ref<InstanceType<typeof ComponentEditor> | null>(null)
+const editor = ref<InstanceType<typeof ComponentEditor> | InstanceType<typeof HTML> | null>(null)
 
 const classes = computed(() => {
 	return [attrs.class, "__studio_component__", "outline-none", "select-none", ...props.block.getClasses()]
diff --git a/frontend/src/data/components.ts b/frontend/src/data/components.ts
index 7082bdee..77b6b89f 100644
--- a/frontend/src/data/components.ts
+++ b/frontend/src/data/components.ts
@@ -36,6 +36,7 @@ import LucideALargeSmall from "~icons/lucide/a-large-small"
 import LucideEdit from "~icons/lucide/edit"
 import LucideMessageSquare from "~icons/lucide/message-square"
 import LucideListTree from "~icons/lucide/list-tree"
+import LucideCode from "~icons/lucide/code"
 import LucideRepeat from "~icons/lucide/repeat"
 import LucideFrame from "~icons/lucide/frame"
 import LucideSidebar from "~icons/lucide/sidebar"
@@ -765,6 +766,15 @@ export const COMPONENTS: FrappeUIComponents = {
 		title: "Repeater",
 		icon: LucideRepeat,
 	},
+	HTML: {
+		name: "HTML",
+		title: "HTML",
+		icon: LucideCode,
+		initialState: {
+			html: "<p>Your HTML content here</p>",
+		},
+		useOverridenPropTypes: true,
+	},
 	Header: {
 		name: "Header",
 		title: "Header",
diff --git a/frontend/src/globals.ts b/frontend/src/globals.ts
index f672e34c..8efff350 100644
--- a/frontend/src/globals.ts
+++ b/frontend/src/globals.ts
@@ -57,6 +57,7 @@ import Header from "@/components/AppLayout/Header.vue"
 import Sidebar from "@/components/AppLayout/Sidebar.vue"
 import SplitView from "@/components/AppLayout/SplitView.vue"
 import Repeater from "@/components/AppLayout/Repeater.vue"
+import HTML from "@/components/AppLayout/HTML.vue"
 import CardList from "@/components/AppLayout/CardList.vue"
 import AvatarCard from "@/components/AppLayout/AvatarCard.vue"
 import Audio from "@/components/AppLayout/Audio.vue"
@@ -125,6 +126,7 @@ export function registerGlobalComponents(app: App) {
 	app.component("Sidebar", Sidebar)
 	app.component("SplitView", SplitView)
 	app.component("Repeater", Repeater)
+	app.component("HTML", HTML)
 	app.component("CardList", CardList)
 	app.component("AvatarCard", AvatarCard)
 	app.component("Audio", Audio)
diff --git a/frontend/src/json_types/index.ts b/frontend/src/json_types/index.ts
index 9c603c84..60164ebf 100644
--- a/frontend/src/json_types/index.ts
+++ b/frontend/src/json_types/index.ts
@@ -45,6 +45,7 @@ export { default as Audio } from "./studio/Audio.json"
 export { default as AvatarCard } from "./studio/AvatarCard.json"
 export { default as BottomTabs } from "./studio/BottomTabs.json"
 export { default as CardList } from "./studio/CardList.json"
+export { default as HTML } from "./studio/HTML.json"
 export { default as Header } from "./studio/Header.json"
 export { default as ImageView } from "./studio/ImageView.json"
 export { default as MarkdownEditor } from "./studio/MarkdownEditor.json"
diff --git a/frontend/src/json_types/studio/HTML.json b/frontend/src/json_types/studio/HTML.json
new file mode 100644
index 00000000..1ff61b7a
--- /dev/null
+++ b/frontend/src/json_types/studio/HTML.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$ref": "#/definitions/HTMLProps",
+  "definitions": {
+    "HTMLProps": {
+      "type": "object",
+      "properties": {
+        "html": {
+          "type": "string"
+        }
+      },
+      "required": [
+        "html"
+      ],
+      "additionalProperties": false
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/StudioPage.vue b/frontend/src/pages/StudioPage.vue
index 0db5189a..3d4900a6 100644
--- a/frontend/src/pages/StudioPage.vue
+++ b/frontend/src/pages/StudioPage.vue
@@ -74,6 +74,36 @@
 				class="no-scrollbar dark:bg-zinc-900 absolute bottom-0 right-0 top-[var(--toolbar-height)] z-20 overflow-auto border-l-[1px] bg-white shadow-lg dark:border-gray-800"
 			/>
 		</div>
+
+		<Dialog
+			v-model="canvasStore.showHTMLDialog"
+			class="overscroll-none"
+			:options="{
+				title: 'HTML',
+				size: '7xl',
+			}"
+		>
+			<template #body-content>
+				<Code
+					:modelValue="canvasStore.editableBlock?.getHTML()"
+					language="html"
+					label="Edit HTML"
+					:showLineNumbers="true"
+					:showSaveButton="true"
+					:completions="
+						(context: CompletionContext) =>
+							getCompletions(context, canvasStore.editableBlock?.getCompletions())
+					"
+					@save="
+						(val: string) => {
+							canvasStore.editableBlock?.setHTML(val)
+							canvasStore.closeHTMLDialog()
+						}
+					"
+					required
+				/>
+			</template>
+		</Dialog>
 	</div>
 </template>
 
@@ -81,13 +111,15 @@
 import { onActivated, watchEffect, watch, ref, onDeactivated, toRef, nextTick } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useDebounceFn } from "@vueuse/core"
-import { usePageMeta } from "frappe-ui"
+import { usePageMeta, Dialog } from "frappe-ui"
+import type { CompletionContext } from "@codemirror/autocomplete"
 
 import ComponentContextMenu from "@/components/ComponentContextMenu.vue"
 import StudioToolbar from "@/components/StudioToolbar.vue"
 import StudioLeftPanel from "@/components/StudioLeftPanel.vue"
 import StudioRightPanel from "@/components/StudioRightPanel.vue"
 import StudioCanvas from "@/components/StudioCanvas.vue"
+import Code from "@/components/Code.vue"
 
 import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
@@ -95,12 +127,14 @@ import { studioPages } from "@/data/studioPages"
 import type { StudioPage } from "@/types/Studio/StudioPage"
 import { useStudioEvents } from "@/utils/useStudioEvents"
 import { useSerializer } from "@/utils/useSerializer"
+import { useStudioCompletions } from "@/utils/useStudioCompletions"
 
 const route = useRoute()
 const router = useRouter()
 const store = useStudioStore()
 const canvasStore = useCanvasStore()
 
+const getCompletions = useStudioCompletions()
 const componentContextMenu = toRef(store, "componentContextMenu")
 useStudioEvents()
 
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index 5e63a4eb..f820b6bd 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -1,10 +1,11 @@
 import { defineStore } from "pinia"
-import { ref, reactive, computed } from "vue"
+import { ref, reactive, computed, nextTick } from "vue"
 import type Block from "@/utils/block"
 import { useSerializer } from "@/utils/useSerializer"
 
 import type StudioCanvas from "@/components/StudioCanvas.vue"
 import type { EditingMode, BlockOptions } from "@/types"
+import block from "@/utils/block"
 
 const useCanvasStore = defineStore("canvasStore", () => {
 	const activeCanvas = ref<InstanceType<typeof StudioCanvas> | null>(null)
@@ -15,6 +16,22 @@ const useCanvasStore = defineStore("canvasStore", () => {
 		y: 0,
 	})
 
+	// dialogs
+	const showHTMLDialog = ref(false)
+	const editableBlock = ref<Block | null>(null)
+
+	function editHTML(block: Block) {
+		editableBlock.value = block
+		nextTick(() => {
+			showHTMLDialog.value = true
+		})
+	}
+
+	function closeHTMLDialog() {
+		showHTMLDialog.value = false
+		editableBlock.value = null
+	}
+
 	// drag & drop
 	const isDragging = ref(false)
 	const dropTarget = reactive({
@@ -146,6 +163,11 @@ const useCanvasStore = defineStore("canvasStore", () => {
 		// layout
 		activeCanvas,
 		guides,
+		// dialogs
+		showHTMLDialog,
+		editableBlock,
+		editHTML,
+		closeHTMLDialog,
 		// drag & drop
 		dropTarget,
 		isDragging,
diff --git a/frontend/src/stores/studioStore.ts b/frontend/src/stores/studioStore.ts
index c5ce48d3..e4dd8b3f 100644
--- a/frontend/src/stores/studioStore.ts
+++ b/frontend/src/stores/studioStore.ts
@@ -154,6 +154,7 @@ const useStudioStore = defineStore("store", () => {
 		const page = await fetchPage(pageName)
 		activePage.value = page
 		await setPageData(page)
+		await codeStore.setPageWatchers(page)
 
 		const blocks = jsonToJs(page.draft_blocks || page.blocks || "[]")
 		if (blocks.length === 0) {
diff --git a/frontend/src/types/studio_components/HTML.ts b/frontend/src/types/studio_components/HTML.ts
new file mode 100644
index 00000000..02684637
--- /dev/null
+++ b/frontend/src/types/studio_components/HTML.ts
@@ -0,0 +1,3 @@
+export interface HTMLProps {
+	html: string
+}
\ No newline at end of file
diff --git a/frontend/src/utils/block.ts b/frontend/src/utils/block.ts
index 76f5010d..004e0e04 100644
--- a/frontend/src/utils/block.ts
+++ b/frontend/src/utils/block.ts
@@ -30,6 +30,7 @@ class Block implements BlockOptions {
 	mobileStyles: BlockStyleMap
 	tabletStyles: BlockStyleMap
 	visibilityCondition?: string
+	__lastVisibilityCondition?: string | undefined
 	originalElement?: string
 	classes?: string[]
 	parentSlotName?: string
@@ -372,10 +373,46 @@ class Block implements BlockOptions {
 		}
 	}
 
+	toggleVisibilityCondition() {
+		if (this.visibilityCondition) {
+			this.__lastVisibilityCondition = this.visibilityCondition
+			this.visibilityCondition = undefined
+		} else if (this.__lastVisibilityCondition) {
+			this.visibilityCondition = this.__lastVisibilityCondition
+			this.__lastVisibilityCondition = undefined
+		}
+	}
+
+	hasVisibilityCondition() {
+		return this.visibilityCondition || this.__lastVisibilityCondition
+	}
+
 	isVisible() {
 		return this.getStyle("display") !== "none"
 	}
 
+	isHTML() {
+		return this.componentName === "HTML"
+	}
+
+	getHTML() {
+		return this.isHTML() ? this.getProp("html") : null
+	}
+
+	setHTML(html: string) {
+		if (this.isHTML()) {
+			this.setProp("html", html)
+		}
+	}
+
+	isSVG() {
+		return this.isHTML() && this.getProp("html")?.trim().startsWith("<svg")
+	}
+
+	isIframe() {
+		return this.isHTML() && this.getProp("html")?.trim().startsWith("<iframe")
+	}
+
 	isFlex() {
 		return this.getStyle("display") === "flex"
 	}
@@ -552,6 +589,10 @@ class Block implements BlockOptions {
 	}
 
 	// component props
+	getProp(propName: string) {
+		return this.componentProps[propName]
+	}
+
 	setProp(propName: string, value: any) {
 		this.componentProps[propName] = value
 	}
diff --git a/frontend/src/utils/blockController.ts b/frontend/src/utils/blockController.ts
index bd8ccf40..8ba54b4e 100644
--- a/frontend/src/utils/blockController.ts
+++ b/frontend/src/utils/blockController.ts
@@ -138,6 +138,9 @@ const blockController = {
 			block.setAttributes(attributes)
 		})
 	},
+	isHTML: () => {
+		return blockController.isAnyBlockSelected() && blockController.getFirstSelectedBlock().isHTML();
+	},
 }
 
 export default blockController
\ No newline at end of file
diff --git a/frontend/src/utils/components.ts b/frontend/src/utils/components.ts
index c2e28f0f..533b6eb3 100644
--- a/frontend/src/utils/components.ts
+++ b/frontend/src/utils/components.ts
@@ -76,7 +76,7 @@ function getComponentProps(componentName: string, component: ConcreteComponent |
 			const config: ComponentProp = {
 				type: propType,
 				default: prop.default,
-				inputType: getPropInputType(propType),
+				inputType: getPropInputType(propType, propName),
 				required: isRequired,
 				condition: prop.condition,
 			}
@@ -105,7 +105,10 @@ function getPropType(propType: VuePropType | VuePropType[]) {
 	return propType?.name
 }
 
-function getPropInputType(propType: string) {
+function getPropInputType(propType: string, propName: string) {
+	if (propName.toLowerCase() === "html") {
+		return "html"
+	}
 	switch (propType) {
 		case "string":
 			return "text"
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 7009ecaa..e28dc537 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -44,6 +44,7 @@ export const STUDIO_COMPONENTS = [
 	"Container",
 	"FitContainer",
 	"Repeater",
+	"HTML",
 	"Header",
 	"Sidebar",
 	"SplitView",
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index e8c39a9d..0259e829 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -2,11 +2,14 @@ import { Ref } from "vue"
 import { createDocumentResource, createResource, confirmDialog } from "frappe-ui"
 import { toast } from "vue-sonner"
 
-import { FUNCTION_STRING_REGEX } from "@/utils/constants"
 import type { ObjectLiteral, StyleValue, SelectOption, HashString, RGBString } from "@/types"
 import type { Variable } from "@/types/Studio/StudioPageVariable"
 import type { StudioApp } from "@/types/Studio/StudioApp"
 
+function isEditor() {
+	return window.location.pathname.startsWith("/studio/")
+}
+
 function deepCloneObject(obj: any, skipKeys: string[] | null = null): any {
 	if (!obj || typeof obj !== "object") {
 		return obj
@@ -440,6 +443,7 @@ function scrub(txt: string | null | undefined) {
 }
 
 export {
+	isEditor,
 	deepCloneObject,
 	getBlockInfo,
 	getComponentRoot,
diff --git a/frontend/src/utils/useStudioEvents.ts b/frontend/src/utils/useStudioEvents.ts
index 0fa0baec..128f140d 100644
--- a/frontend/src/utils/useStudioEvents.ts
+++ b/frontend/src/utils/useStudioEvents.ts
@@ -2,14 +2,11 @@ import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
 import { useEventListener } from "@vueuse/core"
 import blockController from "@/utils/blockController"
-import {
-	isCtrlOrCmd,
-	isTargetEditable,
-	setClipboardData,
-} from "@/utils/helpers"
+import { isCtrlOrCmd, isTargetEditable, setClipboardData, numberToPx, isHTML } from "@/utils/helpers"
 import { useSerializer } from "@/utils/useSerializer"
 import Block from "@/utils/block"
 import type { BlockOptions } from "@/types"
+import { toast } from "vue-sonner"
 
 const store = useStudioStore()
 const canvasStore = useCanvasStore()
@@ -66,6 +63,11 @@ export function useStudioEvents() {
 		if (!text) {
 			return
 		}
+
+		if (isHTML(text)) {
+			e.preventDefault()
+			pasteHTML(text)
+		}
 	})
 
 	useEventListener(document, "contextmenu", async (e) => {
@@ -165,3 +167,51 @@ const copySelectedBlocksToClipboard = (e: ClipboardEvent) => {
 		setClipboardData(dataToCopy, e, "studio-copied-blocks")
 	}
 }
+
+const pasteHTML = (text: string) => {
+	if (blockController.isHTML()) {
+		const selectedBlocks = blockController.getSelectedBlocks()
+		selectedBlocks[0].setProp("html", text)
+	} else {
+		let block = null as unknown as Block | BlockOptions
+		const { getComponentBlock } = useSerializer()
+		block = getComponentBlock("HTML")
+
+		if (text.startsWith("<svg")) {
+			if (text.includes("<image")) {
+				toast.warning("Warning", {
+					description: "SVG with inlined image in it is not supported.",
+				})
+				return
+			}
+			const dom = new DOMParser().parseFromString(text, "text/html")
+			const svg = dom.body.querySelector("svg") as SVGElement
+			const width = svg.getAttribute("width") || "100"
+			const height = svg.getAttribute("height") || "100"
+			if (width && block.baseStyles) {
+				block.baseStyles.width = numberToPx(parseInt(width))
+				svg.removeAttribute("width")
+			}
+			if (height && block.baseStyles) {
+				block.baseStyles.height = numberToPx(parseInt(height))
+				svg.removeAttribute("height")
+			}
+			text = svg.outerHTML
+		}
+
+		block.setProp("html", text)
+
+		const selectedBlocks = blockController.getSelectedBlocks()
+		let parentBlock = selectedBlocks.length ? selectedBlocks[0] : null
+
+		while (parentBlock && !parentBlock.canHaveChildren()) {
+			parentBlock = parentBlock.getParentBlock()
+		}
+
+		if (parentBlock) {
+			parentBlock.addChild(block)
+		} else {
+			canvasStore.pushBlocks([block])
+		}
+	}
+}
diff --git a/yarn.lock b/yarn.lock
index 25b323b1..97a9f955 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -72,7 +72,7 @@
     "@types/tough-cookie" "^4.0.5"
     tough-cookie "^4.1.4"
 
-"@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.3.2":
+"@codemirror/autocomplete@^6.0.0":
   version "6.18.6"
   resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz#de26e864a1ec8192a1b241eb86addbb612964ddb"
   integrity sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==
@@ -139,18 +139,7 @@
     "@codemirror/language" "^6.0.0"
     "@lezer/json" "^1.0.0"
 
-"@codemirror/lang-python@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/lang-python/-/lang-python-6.2.1.tgz#37c9930716110156865a95c548aa0eef5552863a"
-  integrity sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==
-  dependencies:
-    "@codemirror/autocomplete" "^6.3.2"
-    "@codemirror/language" "^6.8.0"
-    "@codemirror/state" "^6.0.0"
-    "@lezer/common" "^1.2.1"
-    "@lezer/python" "^1.1.4"
-
-"@codemirror/language@6.x", "@codemirror/language@^6.0.0", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.8.0", "@codemirror/language@^6.9.2":
+"@codemirror/language@6.x", "@codemirror/language@^6.0.0", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0", "@codemirror/language@^6.9.2":
   version "6.11.1"
   resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.11.1.tgz#7e91a79cd05e278d5782ff9b4cafe8b83a699688"
   integrity sha512-5kS1U7emOGV84vxC+ruBty5sUgcD0te6dyupyRVG2zaSjhTDM73LhVKUtVwiqSe6QwmEoA4SCiU8AKPFyumAWQ==
@@ -730,7 +719,7 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@lezer/common@^1.0.0", "@lezer/common@^1.0.2", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0", "@lezer/common@^1.2.1":
+"@lezer/common@^1.0.0", "@lezer/common@^1.0.2", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.3.tgz#138fcddab157d83da557554851017c6c1e5667fd"
   integrity sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==
@@ -785,15 +774,6 @@
   dependencies:
     "@lezer/common" "^1.0.0"
 
-"@lezer/python@^1.1.4":
-  version "1.1.18"
-  resolved "https://registry.yarnpkg.com/@lezer/python/-/python-1.1.18.tgz#fa02fbf492741c82dc2dc98a0a042bd0d4d7f1d3"
-  integrity sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==
-  dependencies:
-    "@lezer/common" "^1.2.0"
-    "@lezer/highlight" "^1.0.0"
-    "@lezer/lr" "^1.0.0"
-
 "@marijn/find-cluster-break@^1.0.0":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz#775374306116d51c0c500b8c4face0f9a04752d8"