diff --git a/auto-update.ts b/auto-update.ts
index 6061aa09f..0cb93dec6 100644
--- a/auto-update.ts
+++ b/auto-update.ts
@@ -2,7 +2,7 @@ import { ESCAPE_SEQUENCES } from "datex-core-legacy/utils/logger.ts";
 import { Path } from "./src/utils/path.ts";
 
 export async function handleAutoUpdate(baseLibPath: Path, name: string) {
-	const { renderMarkdown } = await import('https://deno.land/x/charmd/mod.ts');
+	const { renderMarkdown } = await import("https://deno.land/x/charmd@v0.0.2/mod.ts");
 
 	baseLibPath = baseLibPath.asDir()
 	// console.log("Finding updates for " + name + " (" + baseLibPath + ")")
diff --git a/docs/manual/01 Getting Started.md b/docs/manual/01 Getting Started.md
index 8424b1ef3..132e5edc4 100644
--- a/docs/manual/01 Getting Started.md	
+++ b/docs/manual/01 Getting Started.md	
@@ -1,18 +1,25 @@
 # Getting Started with UIX
 
-UIX is an open-source full-stack framework for developing reactive web apps with *restorable and shared state*.
-UIX apps run on a [Deno](https://docs.deno.com/runtime/manual) backend and use state-of-the-art web technologies.
+## What is UIX?
 
-The [DATEX JavaScript Library](https://docs.unyt.org/manual/datex/introduction) acts as the backbone of UIX, providing useful functionality such as *reactivity and cross-device data exchange*.
-In contrast to frameworks like React, UIX provides *direct wiring* to the DOM for reactivity and does not need a virtual DOM.
+UIX is a state-of-the-art TypeScript framework for developing full-stack web applications.
+With UIX, you can write frontend and backend code in a single [Deno](https://docs.deno.com/runtime/manual) project.
+UIX abstracts away the complexity of communicating between servers and clients - there
+is no need to think about APIs, serialization, or data storage.
 
-**Our core principles**
- * Full compatibility with web standards
- * Full compatibility with [DATEX](https://github.com/unyt-org/datex-specification) and unyt.org Supranet principles
- * Both backend and frontend code is written as ES6 TypeScript modules
- * No JavaScript bundlers
+The [DATEX JavaScript Library](https://docs.unyt.org/manual/datex/introduction) acts as the backbone of UIX, providing useful functionality such as *reactivity, restorable state and cross-device data exchange*.
+
+UIX works out of the box with TypeScript and JSX and does not require any additional tooling or build steps.
+
+UIX encourages the use of standard web APIs wherever possible, and provides a simple
+and intuitive abstraction layer for more advanced features.
+
+> [!NOTE]
+> The [UIX Guide](./17%20Guide.md) gives a comprehensive overview for developers who are new to UIX.
+
+
+## Main Features
 
-**Main features**
  * [Cross-network reactivity](02%20Cross-Realm%20Imports.md#Reactivity)
  * [Server side rendering with partial hydration](07%20Rendering%20Methods.md)
  * [Hybrid backend/frontend routing](05%20Entrypoints%20and%20Routing.md)
@@ -30,13 +37,10 @@ This is why UIX ships with integrated features such as:
  * [Automated deployment](./13%20Deployment.md)
  * [Testing library](https://github.com/unyt-org/unyt-tests/)
 
-### CLI Installation
+## Installation
 
 To install UIX, you first need to install [Deno](https://docs.deno.com/runtime/manual/getting_started/installation).
 
-> [!WARNING]
-> UIX is only supported for Deno versions > 1.40.0
-
 <!-- #### Linux / MacOS
 
 ```bash
@@ -56,17 +60,20 @@ $ brew install uix
 Now, you can install UIX with `deno install`:
 
 ```bash
-$ deno install --import-map https://cdn.unyt.org/uix/importmap.json -Aq -n uix https://cdn.unyt.org/uix/run.ts
+deno install --import-map https://cdn.unyt.org/uix/importmap.json -Aq -n uix https://cdn.unyt.org/uix/run.ts
 ```
 
+> [!WARNING]
+> UIX is only supported for Deno versions > 1.40.0
+
 ## Creating a new UIX project
 
 You can create a new UIX project by running
 ```bash
-$ uix --init
+uix --init
 ```
 
-This creates a new base project (https://github.com/unyt-org/uix-base-project.git) in the current directory
+This creates a new [base project](https://github.com/unyt-org/uix-base-project.git) in the current directory
 and starts the app locally.
 
 > [!NOTE]
@@ -79,7 +86,7 @@ To run your UIX app, make sure the [app.dx](./08%20Configuration.md#the-app-dx-f
 Execute the `uix` command in the root directory of your application (where the `app.dx` is located) to initialize and run the project.
 
 ```bash
-$ uix
+uix
 ```
 
 You can pass the following args to the UIX command line utility:
@@ -107,7 +114,7 @@ You can pass the following args to the UIX command line utility:
 
 To run your UIX project without installing the UIX CLI, you can alternatively run the following command in the project root directory:
 ```bash
-$ deno run -A --import-map https://cdn.unyt.org/importmap.json https://cdn.unyt.org/uix/run.ts
+deno run -A --import-map https://cdn.unyt.org/importmap.json https://cdn.unyt.org/uix/run.ts
 ```
 
 ## Architecture of a UIX Project
@@ -147,7 +154,7 @@ interface UIX {
     cacheDir: Path;                // URL pointing to the local UIX cache directory
     context: "backend"|"frontend"; // current context in which the process is running
     language: string;              // language ("de" | "en" | ...)
-    version: string;               // UIX version ("beta" | "1.0.0" | ...)
+    version: string;               // UIX version ("beta" | "0.2.0" | ...)
 }
 ```
 
diff --git a/docs/manual/02 Cross-Realm Imports.md b/docs/manual/02 Cross-Realm Imports.md
index f1da63245..17ffa6498 100644
--- a/docs/manual/02 Cross-Realm Imports.md	
+++ b/docs/manual/02 Cross-Realm Imports.md	
@@ -1,7 +1,7 @@
 # Cross-Realm Imports
 
-Modules in the `frontend` directory of a UIX app can import values from `backend` modules, as if they are running on the same device and within the same process. 
-This is accomplished with DATEX exchange between the frontend and backend endpoints.
+Modules in the `frontend` directory of a UIX app can import exported values from `backend` modules, as if they are running on the same device and within the same process. 
+Under the hood, this is achieved with DATEX messaging between the frontend and backend endpoints.
 
 **Cross-Realm Import Example**:
 
@@ -39,7 +39,7 @@ console.log(await getData()); // [1,2,3]
 
 Modules from the common directory can be imported from both the backend and frontend.
 
-This is useful for definining components that can be rendered by the backend or frontend, or for utility functions or libraries that are used on the backend and frontend.
+This is useful for definining components that can be rendered by the backend or frontend, or for utility functions and libraries that are used on the backend and frontend.
 
 > [!NOTE]
 > Common modules allow the usage of the *same source code* for the backend and frontend, but they do not share a state between the backend and frontend endpoints: Every module is initialized individually on each endpoint.
diff --git a/docs/manual/03 JSX.md b/docs/manual/03 JSX.md
index ecbee4a52..69f6864e8 100644
--- a/docs/manual/03 JSX.md	
+++ b/docs/manual/03 JSX.md	
@@ -1,6 +1,6 @@
 # JSX
 
-UIX supports JSX syntax for creating HTML and SVG elements.
+UIX supports [JSX](https://facebook.github.io/jsx/) syntax for creating HTML and SVG elements.
 
 ## Creating native DOM elements
 
@@ -331,9 +331,9 @@ const comp = <MyComponent style="color:green" text="text content"/>
 ```
 
 
-## Using the `HTML` utility function instead of JSX
+## Using `HTML` template strings instead of JSX
 
-As an alternative to JSX, you can also use the `HTML` function which provides exactly the same functionality as JSX with JavaScript template strings.
+As an alternative to JSX, you can also use the `HTML` template string function which provides exactly the same functionality as JSX:
 
 JSX:
 ```tsx
@@ -347,7 +347,7 @@ const div =
 HTML:
 ```tsx
 const count: Datex.Pointer<number> = $$(0);
-const div = HTML`
+const div = HTML `
     <div>
         <p>Count: ${count}</p>
     </div>` as HTMLDivElement
@@ -385,4 +385,4 @@ const anchor = <a href="/link">Link</a> as HTMLAnchorElement
 ```
 ```tsx
 const anchor = HTML `<a href="/link">Link</a>` as HTMLAnchorElement
-```
\ No newline at end of file
+```
diff --git a/docs/manual/08 Configuration.md b/docs/manual/08 Configuration.md
index 179681b7f..d5258f678 100644
--- a/docs/manual/08 Configuration.md	
+++ b/docs/manual/08 Configuration.md	
@@ -80,7 +80,7 @@ UIX apps can be run in different **stages**. The names of the stages are not pre
 
 To run a UIX app in a specific stage, use the `--stage` options:
 ```bash
-$ uix --stage production
+uix --stage production
 ```
 
 Per default, running a UIX app in a different stage does not have any noticable effect.
diff --git a/docs/manual/11 Style and Themes.md b/docs/manual/11 Style and Themes.md
index d82df7aca..ae861b3ac 100644
--- a/docs/manual/11 Style and Themes.md	
+++ b/docs/manual/11 Style and Themes.md	
@@ -161,10 +161,25 @@ but you can override the current mode:
 UIX.Theme.setMode('dark');
 ```
 
-### Observing mode changes
+### Observing theme and mode changes
 
-Changes between dark and light mode can be handled with `UIX.Theme.onModeChange`:
+For some use cases, it might be useful to change content or styling depending on the current theme or mode.
+
+The `theme` and `mode` properties of `UIX.Theme` are bound to reactive pointers and can be used in combination
+with `effect` and `always` to react to changes:
 
 ```ts
-UIX.Theme.onModeChange(mode => console.log("mode changed to", mode);)
+effect(() => console.log(`Mode changed to ${UIX.Theme.mode}`));
 ```
+
+```tsx
+<div>{
+    always(() =>
+      UIX.Theme.mode == "dark" ?
+        "Dark mode" :
+        "Light mode"
+    )
+}</div>
+```
+
+Alternatively, you can directly access the underlying pointers with `UIX.Theme.$.theme` / `UIX.Theme.$.mode`.
diff --git a/docs/manual/17 Guide.md b/docs/manual/17 Guide.md
index 454120046..01f37b0ce 100644
--- a/docs/manual/17 Guide.md	
+++ b/docs/manual/17 Guide.md	
@@ -3,11 +3,10 @@
 This guide conveys some important concepts and paradigms for developing applications with UIX/DATEX.
 We recommend that you read this guide before starting to develop a UIX application to fully grasp the concepts and possibilities of the framework. 
 
-
 ## Storage
 
-In UIX, you normally don't need to think a lot about how and where to store data.
-UIX provides an abstraction layer that essentially treats in-memory data and persistent data the same way.
+In UIX, you don't need to think a lot about how and where to store data.
+UIX provides an abstraction layer that essentially treats persistent data the same way as in-memory data.
 
 The most important point to take away is that you don't need to think about a database architecture or serialization strategy
 when building a UIX app - with eternal pointers, this is all been taken care of by UIX.
@@ -25,7 +24,7 @@ interface UserData {
 export const users = new Set<UserData>()
 ```
 
-Now make the module containing the `users` Set eternal by using an `eternal.ts` file extension:
+Now make the module containing the `users` Set eternal by using the `eternal.ts` file extension:
 ```tsx
 // file: data.eternal.ts
 // The code stays the same:
@@ -36,9 +35,9 @@ interface UserData {
 export const users = new Set<UserData>()
 ```
 
-The exported `users` Set is now stored persistently and the current state is still available after a restart of the application.
+The exported `users` set is now stored persistently and the current state is still available after an application restart.
 
-This works out of the box without any special functions or data types. For larger amounts of data, you can optimize this
+This works out of the box without any special functions or data types. For larger data sets, you can optimize this
 by using a special storage collection instead of a native `Set`:
 ```tsx
 // data.eternal.ts
@@ -49,25 +48,85 @@ interface UserData {
 export const users = new StorageSet<UserData>()
 ```
 
-A `StorageSet` provides the same methods and properties as a normal `Set`, but it works asynchronously and saves a lot of memory by lazily loading
-data into memory when required.
+A `StorageSet` has the same methods and properties as a normal `Set`, but it works asynchronously and saves a lot of memory by lazily loading
+data from storage into memory when required.
 
 ### Storage locations
 
+Under the hood, UIX can use multiple strategies for storing eternal data, such as in a key-value store, an SQL database, or local storage in the browser.
 
+On the backend, eternal data is stored in a simple key-value database per default.
+As an alternative, you can use an SQL database, which is more suitable for larger data sets where you need to query data.
+Switching to SQL storage *does not require any changes in your application code* - it just changes the underlying storage mechanism.
 
+On the frontend, eternal data is stored in the browser's local storage and IndexedDB.
 
 ## Networking
 
-UIX also creates an intuitive abstraction around the network layer and DATEX communication.
+UIX creates an intuitive abstraction around the network layer and [DATEX](https://docs.unyt.org/manual/datex/introduction) communication.
 You don't need to think about how to send data from the backend to the frontend or between browser clients.
 Instead, you can just call a JavaScript function - no need for API architectures and REST. In UIX, your exported classes and functions *are* the API.
 
+You want to get the age of a user from the backend?
+Just call a function that returns the age of a user:
+
+```tsx
+// backend/age.ts
+const users = new Map<string, {age: number}>();
+
+export function getAgeOfUser(userName: string) {
+    return users.get(userName)?.age
+}
+```
+
+And in the frontend, you can call this function as if it was a local function:
+
+```tsx
+// frontend/age.ts
+import { getAgeOfUser } from "backend/age.ts"
+console.log(await getAgeOfUser("1234"))
+```
+
+Although you can retrieve individual object properties this way, the preferred
+way in UIX is to just share the whole user object and read the required properties directly
+on the frontend:
+
+```tsx
+// backend/age.ts
+const users = new Map<string, {age: number}>();
+
+export function getUser(userName: string) {
+    return users.get(userName)
+}
+```
+
+```tsx
+// frontend/age.ts
+import { getUser from "backend/age.ts"
+
+const userA = await getUser("1234");
+console.log(userA.age); // get age
+userA.age = 42 // set age (automatically synced across the network)
+```
+
 
 ## Reactivity
 
+In UIX, reactive values are called pointers.
+Pointers can contain any kind of JavaScript value, including strings, numbers, objects, arrays, and functions.
+DOM elements can also be bound to pointers, making them reactive.
+
+When creating a DOM element with JSX, it is automatically bound to a pointer.
+
+```tsx
+const counter = $$(0); // create a reactive pointer with initial value 0
+const counterDisplay = <div>{counter}</div>; // bind the pointer to a DOM element
+document.body.appendChild(counterDisplay); // append the element to the DOM
+counter.val++; // increment the pointer value - updates the DOM element
+```
+
 Reactivity in UIX works cross-network per default.
-You can share reactive values (pointers) with other endpoints.
+You can share and synchronize pointers with other endpoints.
 
 ## Forms
 
diff --git a/src/app/frontend-manager.ts b/src/app/frontend-manager.ts
index cf5f5eab7..d1efe2b60 100644
--- a/src/app/frontend-manager.ts
+++ b/src/app/frontend-manager.ts
@@ -859,7 +859,10 @@ if (!window.location.origin.endsWith(".unyt.app")) {
 
 		// convert content to valid HTML string
 		if (content instanceof Element || content instanceof DocumentFragment) {
-			const requiredPointers = new Set<Node>()
+			const requiredPointers = new Set<Node>();
+
+			context = context instanceof Function ? context() : context;
+
 			const html = getOuterHTML(
 				content as Element, 
 				{
@@ -868,6 +871,7 @@ if (!window.location.origin.endsWith(".unyt.app")) {
 					injectStandaloneComponents:render_method!=RenderMethod.STATIC, 
 					allowIgnoreDatexFunctions:(render_method==RenderMethod.HYBRID||render_method==RenderMethod.PREVIEW), 
 					lang,
+					editMode: !!context?.getSessionFlag("editMode"),
 					requiredPointers
 				}
 			);
diff --git a/src/html/editable-template.ts b/src/html/editable-template.ts
new file mode 100644
index 000000000..c36aef8f9
--- /dev/null
+++ b/src/html/editable-template.ts
@@ -0,0 +1,91 @@
+import { getCallerFile, getCallerInfo } from "datex-core-legacy/utils/caller_metadata.ts";
+import { createTemplateGenerator, jsxInputGenerator } from "./template.ts";
+import { Class } from "datex-core-legacy/utils/global_types.ts";
+import { cache_path } from "datex-core-legacy/runtime/cache_path.ts";
+import { UIX } from "../../uix.ts";
+import { getOuterHTML } from "./render.ts";
+import { Path } from "datex-core-legacy/utils/path.ts";
+import { app } from "../app/app.ts";
+
+export function editableTemplate<
+	Options extends Record<string, unknown> = Record<string, never>
+>(
+	propsInfo: {[key in keyof Options]: string},
+	initialContent?: jsxInputGenerator<JSX.Element|Promise<JSX.Element>, Options, never, false, false>
+): jsxInputGenerator<JSX.Element, Options, never>&((cl: Class, context: ClassDecoratorContext)=>any) {
+	const info = getCallerInfo()?.[0];
+	if (!info) throw new Error("Cannot get caller info");
+
+	const module = info.file + "_" + info.row;
+
+	// store initial template
+	if (!hasStoredTemplate(module)) {
+		const generator = initialContent ? createTemplateGenerator(initialContent, module) : null;
+		const template = generator ? generateTemplateFromGenerator(generator, propsInfo) : "";
+		updateTemplate(module, template);
+	}
+	
+	return (...args) => getTemplateFunction(module, propsInfo)(...args);
+}
+
+type PropsDefinition = Record<string, string>;
+
+const cachedTemplateGenerators = new Map<string, [Function, PropsDefinition]>();
+
+function generateTemplateFromGenerator(generator: jsxInputGenerator<JSX.Element, any, never, false, false>, propsDefinition: PropsDefinition) {
+	const placeholderProps = Object.fromEntries(Object.entries(propsDefinition).map(([key]) => [key, `{{${key}}}`]));
+	const rendered = (generator as any)(placeholderProps, placeholderProps);
+	const [_, html] = getOuterHTML(rendered, {
+		plainHTML: true,
+	});
+	return html;
+}
+
+function hasStoredTemplate(modulePath: string) {
+	const templatePath = getTemplatePath(modulePath)
+	return templatePath.fs_exists;
+}
+
+function getStoredTemplate(modulePath: string) {
+	const templatePath = getTemplatePath(modulePath)
+	if (templatePath.fs_exists) {
+		return Deno.readTextFileSync(templatePath.normal_pathname);
+	}
+	else return null
+}
+
+export function updateTemplate(modulePath: string, content: string) {
+	const templatePath = getTemplatePath(modulePath);
+	Deno.writeTextFileSync(templatePath.normal_pathname, content);
+	if (cachedTemplateGenerators.has(modulePath)) updateTemplateFunction(modulePath, cachedTemplateGenerators.get(modulePath)![1]);
+}
+
+function getTemplateFunction(modulePath: string, propsInfo: PropsDefinition) {
+	if (!cachedTemplateGenerators.has(modulePath)) {
+		updateTemplateFunction(modulePath, propsInfo);
+	}
+	return cachedTemplateGenerators.get(modulePath)![0];
+}
+
+function updateTemplateFunction(modulePath: string, propsInfo: PropsDefinition) {
+	const template = getStoredTemplate(modulePath);
+	if (!template) throw new Error("Template not found");
+	const propsDestructoringCode = `const {${
+		Object.keys(propsInfo).join(", ")
+	}} = props`;
+	const generator = new Function('props', `${propsDestructoringCode}; const _genEl = HTML\`<uix-editable>${template.replace(/\{\{([^}]*)\}\}/g, '\${$1}')}</uix-editable>\`; _genEl.setAttribute("data-edit-location", "${modulePath}"); _genEl.setAttribute("data-edit-props", '${JSON.stringify(propsInfo)}'); return _genEl;`);
+
+	cachedTemplateGenerators.set(modulePath, [generator, propsInfo]);
+}
+
+
+function getTemplatePath(modulePath: string|URL) {
+	const modulePathObj = new Path(modulePath)
+	const modulePathName = modulePathObj.isWeb() ? modulePathObj.toString() : modulePathObj.getAsRelativeFrom(app.base_url)
+	const normalizedPath = modulePathName.replace(/[^a-zA-Z0-9]/g, "_").replace(/^_*/, "");
+	const templateDir = UIX.cacheDir.getChildPath("templates").asDir();
+
+	if (!templateDir.fs_exists) Deno.mkdirSync(templateDir.normal_pathname, {recursive: true});
+
+	return templateDir.getChildPath(normalizedPath);
+}
\ No newline at end of file
diff --git a/src/html/render.ts b/src/html/render.ts
index bc337315c..fd802cde1 100644
--- a/src/html/render.ts
+++ b/src/html/render.ts
@@ -34,6 +34,8 @@ type _renderOptions = {
 	lang?:string, 
 	allowIgnoreDatexFunctions?: boolean,
 	requiredPointers?: Set<any>,
+	plainHTML?: boolean, // if true, only plain html is returned, attributes like uix-ptr are not rendered
+	editMode?: boolean, // if true, editable content is enabled for editable elements
 	forceParentLive?: boolean // set by child nodes to indicate parent should be marked as hydratable
 }
 
@@ -88,7 +90,7 @@ function loadInitScript(component:(Element|ShadowRoot) & {getStandaloneInit?:()=
 }
 
 export function getInnerHTML(el:Element|ShadowRoot, opts?:_renderOptions, collectedStylesheets?:string[], standaloneContext = false) {
-	if (!opts?.includeShadowRoots) return el.innerHTML;
+	if (!opts?.includeShadowRoots && !opts?.plainHTML) return el.innerHTML;
 
 	let html = "";
 
@@ -214,6 +216,10 @@ function _getOuterHTML(el:Node, opts?:_renderOptions, collectedStylesheets?:stri
 
 	for (let i = 0; i < el.attributes.length; i++) {
 		const attrib = el.attributes[i];
+
+		if (opts?.plainHTML && attrib.name == "uix-ptr") continue;
+		if (!opts?.editMode && (attrib.name == "data-edit-location" || attrib.name == "data-edit-props")) continue;
+
 		let val:string;
 
 		const transformMap = opts?.lang && (el as any)[DOMUtils.ATTR_DX_VALUES]?.get(attrib.name)?.transformMap;
@@ -224,6 +230,12 @@ function _getOuterHTML(el:Node, opts?:_renderOptions, collectedStylesheets?:stri
 			val = attrib.value;
 		}
 
+		// is a module identifier -> resolve - only for specific attributes:
+		// * src
+		if (attrib.name == "src" && val.match(/^[a-zA-Z0-9_]/)) {
+			val = import.meta.resolve(val);
+		}
+
 		// relative web path (@...)
 		if (val.startsWith("file://")) val = convertToWebPath(val);
 		// blob -> data url
@@ -243,14 +255,22 @@ function _getOuterHTML(el:Node, opts?:_renderOptions, collectedStylesheets?:stri
 		else if (el.checked !== false) attrs.push(`value="${domUtils.escapeHtml(el.checked?.toString()??"")}"`)
 	}
 
-	// hydratable
-	if (forceLive || isLiveNode(el)) {
-		if (opts?.requiredPointers) opts.requiredPointers.add(el);
-		attrs.push("uix-dry");
+	if (!opts?.plainHTML) {
+		// hydratable
+		if (forceLive || isLiveNode(el)) {
+			if (opts?.requiredPointers) opts.requiredPointers.add(el);
+			attrs.push("uix-dry");
+		}
+		
+		// just static
+		else attrs.push("uix-static");
+	}
+
+	// enable edit mode (TODO:)
+	if (opts?.editMode && el.hasAttribute("data-edit-location")) {
+		attrs.push("contenteditable");
 	}
-	
-	// just static
-	else attrs.push("uix-static");
+
 
 	// inject event listeners
 	if (dataPtr && opts?._injectedJsData && ((<DOMUtils.elWithUIXAttributes>el)[DOMUtils.EVENT_LISTENERS] || (<DOMUtils.elWithUIXAttributes>el)[DOMUtils.ATTR_BINDINGS])) {
@@ -365,8 +385,8 @@ function _getOuterHTML(el:Node, opts?:_renderOptions, collectedStylesheets?:stri
 		opts?.forms?.pop()
 	}
 
-	if (selfClosingTags.has(tag)) return `<${tag} ${attrs.join(" ")}/>`;
-	else return `<${tag} ${attrs.join(" ")}>${inner}</${tag}>`
+	if (selfClosingTags.has(tag)) return `<${tag}${attrs.length ? ' ' + attrs.join(" ") : ''}/>`;
+	else return `<${tag}${attrs.length ? ' ' + attrs.join(" ") : ''}>${inner}</${tag}>`
 	// const outer = el.cloneNode().outerHTML;
 	// const start = outer.replace(/<\/[A-Za-z0-9-_ ]+>$/, '');
 	// const end = outer.match(/<\/[A-Za-z0-9-_ ]+>$/)?.[0] ?? ""; // might not have an end tag
@@ -495,6 +515,8 @@ export function getOuterHTML(el:Element|DocumentFragment, opts?:{
 	injectStandaloneComponents?: boolean, 
 	allowIgnoreDatexFunctions?: boolean, 
 	lang?:string, 
+	plainHTML?: boolean,
+	editMode?: boolean
 	requiredPointers?: Set<any>
 }): [header_script:string, html_content:string] {
 
diff --git a/src/html/template-strings.ts b/src/html/template-strings.ts
index dda3587b5..9d33179f0 100644
--- a/src/html/template-strings.ts
+++ b/src/html/template-strings.ts
@@ -1,4 +1,4 @@
-import { getHTMLGenerator } from "../uix-dom/html-template-strings/html_template_strings.ts";
+import { getHTMLGenerator } from "../uix-dom/html-template-strings/html-template-strings.ts";
 import { domContext, domUtils } from "../app/dom-context.ts";
 import { jsx } from "../jsx-runtime/jsx.ts";
 
diff --git a/src/html/template.ts b/src/html/template.ts
index e604c1405..53c3a5ff5 100644
--- a/src/html/template.ts
+++ b/src/html/template.ts
@@ -165,8 +165,16 @@ export function template():jsxInputGenerator<JSX.Element, Record<string, never>,
 
 
 export function template(templateOrGenerator?:JSX.Element|jsxInputGenerator<JSX.Element|Promise<JSX.Element>, any, any, any>) {
-	let generator:any;
 	const module = getCallerFile();
+	return createTemplateGenerator(templateOrGenerator, module);
+}
+
+export function createTemplateGenerator(templateOrGenerator?:JSX.Element|jsxInputGenerator<JSX.Element|Promise<JSX.Element>, any, any, any>, module?: string):jsxInputGenerator<JSX.Element, Record<string, never>, never>&((cl: Class, context: ClassDecoratorContext)=>any) {
+
+	let generator: Function;
+
+	module ??= getCallerFile();
+
 	if (typeof templateOrGenerator == "function") generator = function(propsOrClass:any, context?:any) {
 		// decorator
 		if (Component.isPrototypeOf(propsOrClass)) {
diff --git a/src/plugins/git-deploy.ts b/src/plugins/git-deploy.ts
index ece767495..7f1ec43dd 100644
--- a/src/plugins/git-deploy.ts
+++ b/src/plugins/git-deploy.ts
@@ -5,7 +5,6 @@ import { json2yaml } from "https://deno.land/x/json2yaml@v1.0.1/mod.ts";
 import { Datex } from "datex-core-legacy/mod.ts";
 import { isCIRunner } from "../utils/check-ci.ts";
 import { normalizedAppOptions } from "../app/options.ts";
-import { app } from "../app/app.ts";
 import { Path } from "datex-core-legacy/utils/path.ts";
 import { getInferredRunPaths } from "../app/options.ts";
 
diff --git a/src/routing/context.ts b/src/routing/context.ts
index 8ab2474c4..ad9dd417c 100644
--- a/src/routing/context.ts
+++ b/src/routing/context.ts
@@ -44,6 +44,8 @@ export class Context
 	> 
 {
 
+	static #sessionFlags = new WeakMap<Endpoint, Map<string, any>>()
+
 	request: Request
 	requestData: RequestData = {
 		address: null
@@ -137,6 +139,49 @@ export class Context
 		if (endpoint == BROADCAST) throw new Error("Cannot get private data for UIX context, no session found");
 	}
 
+	/**
+	 * Enables edit mode for the current session.
+	 * Allows the user to edit editableTemplate content directly on the website.
+	 */
+	enableEditMode() {
+		this.setSessionFlag("editMode");
+	}
+	/**
+	 * Disables edit mode for the current session.
+	 */
+	disableEditMode() {
+		this.removeSessionFlag("editMode");
+	}
+
+	/**
+	 * Returns the value of a session flag if it is set.
+	 * @param key session flag key
+	 */
+	getSessionFlag(key: string) {
+		if (!this.endpoint) throw new Error("Cannot set session flag without endpoint");
+		return Context.#sessionFlags.get(this.endpoint)?.get(key);
+	}
+
+	/**
+	 * Sets a session flag for the current session.
+	 * Important: Don't set the flag to false, use removeSessionFlag instead.
+	 * @param key session flag key
+	 * @param value optional session flag value, defaults: true
+	 */
+	setSessionFlag(key: string, value: any = true) {
+		if (!this.endpoint) throw new Error("Cannot set session flag without endpoint");
+		if (!Context.#sessionFlags.has(this.endpoint)) Context.#sessionFlags.set(this.endpoint, new Map());
+		Context.#sessionFlags.get(this.endpoint)!.set(key, value);
+	}
+
+	/**
+	 * Removes a session flag for the current session.
+	 * @param key session flag key
+	 */
+	removeSessionFlag(key: string) {
+		if (!this.endpoint) throw new Error("Cannot delete session flag without endpoint");
+		Context.#sessionFlags.get(this.endpoint)?.delete(key);
+	}
 
 	[Symbol.dispose]() {
 		console.log("disposing context", this.#disposeCallbacks);
diff --git a/src/runners/run-local.ts b/src/runners/run-local.ts
index 6353abd43..7f76a174f 100644
--- a/src/runners/run-local.ts
+++ b/src/runners/run-local.ts
@@ -130,7 +130,8 @@ export async function runLocal(params: runParams, root_path: URL, options: norma
 				args.splice(args.indexOf("--clear"), 1);
 				isClearingState = true;
 			}
-			else {
+			// only set clear indicator when running in deployed environment
+			else if (Deno.env.has("UIX_HOST_ENDPOINT")) {
 				Deno.mkdirSync(cache_path, {recursive: true});
 				Deno.writeTextFileSync(clearIndicatorPath.normal_pathname, "");
 			}
diff --git a/src/server/server.ts b/src/server/server.ts
index 9b169dc1d..cbe78c59c 100644
--- a/src/server/server.ts
+++ b/src/server/server.ts
@@ -14,8 +14,8 @@
 
 // ---
 import { Datex } from "datex-core-legacy";
-import { getCallerDir, getCallerInfo } from "datex-core-legacy/utils/caller_metadata.ts";
-import { Cookie, setCookie, getCookies } from "../lib/cookie/cookie.ts";
+import { getCallerDir } from "datex-core-legacy/utils/caller_metadata.ts";
+import { Cookie, setCookie } from "../lib/cookie/cookie.ts";
 
 import { Path } from "datex-core-legacy/utils/path.ts";
 import { Transpiler } from "./transpiler.ts";
@@ -443,6 +443,7 @@ export class Server {
             const datexEndpointNew = getCookie("datex-endpoint-new", requestEvent.request.headers, port);
 
             const uixSessionCookie = getCookie("uix-session", requestEvent.request.headers, port);
+
             
             // has datex-endpoint
             if (datexEndpointCookie) {
diff --git a/src/style/base.css b/src/style/base.css
index b92aaeab9..8b258a780 100644
--- a/src/style/base.css
+++ b/src/style/base.css
@@ -10,6 +10,28 @@ light-root, uix-fragment, uix-placeholder, frontend-slot {
     display: contents;
 }
 
+uix-editable {
+    display: inline-block;
+}
+
+uix-editable[contenteditable]:focus {
+    outline: 3px dashed var(--text);
+    outline-offset: 24px;
+    position: relative;
+
+    &::after {
+        content: attr(data-placeholder);
+        width: 100vw;
+        height: 1000vh;
+        position: absolute;
+        left: calc(100% + 27px);
+        top: -500vh;
+        backdrop-filter: grayscale(100%);
+        /* background-color: red; */
+        z-index: 100000;
+    }
+}
+
 frontend-slot > * {
     all: inherit;
     display: revert;
diff --git a/src/uix-dom b/src/uix-dom
index ad6b6af5d..1b331c60c 160000
--- a/src/uix-dom
+++ b/src/uix-dom
@@ -1 +1 @@
-Subproject commit ad6b6af5d5afcfbdb7a3926be0ab94e3aa831838
+Subproject commit 1b331c60c4841666fc7e8d22f27bdf61a0691c1f
diff --git a/src/utils/css-scoping.ts b/src/utils/css-scoping.ts
index 9741a3e0a..91c1de2a6 100644
--- a/src/utils/css-scoping.ts
+++ b/src/utils/css-scoping.ts
@@ -1,3 +1,24 @@
+// TODO:
+// /**
+//  * Wrap a CSS document with a custom scope selector
+//  * @param css css document
+//  * @param scope scope selector
+//  * @returns 
+//  */
+// export function addCSSScopeSelector(css: string, scope: string) {
+// 	// TODO: not working with @keyframes
+// 	return `${scope} {\n${
+// 		'    ' + 
+// 		css
+// 			.replaceAll(':host', '&')
+// 			.replaceAll('\n', '\n    ')
+// 	}\n}`;
+// }
+
+// export function addCSSScope(css: string) {
+// 	return addCSSScopeSelector(css, "@scope")
+// }
+
 /**
  * Add a scope selector everywhere in a CSS document
  * @param css css document
diff --git a/uix.ts b/uix.ts
index 23b996abb..474b0d072 100644
--- a/uix.ts
+++ b/uix.ts
@@ -41,15 +41,25 @@ export const UIX = {
 		})
 		
 		// redefine UIX.Theme.theme/mode getters to enable smart transforms / effects
+
+		const themeSetter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(themeManager), "theme")!.set!.bind(themeManager);
+		const modeSetter = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(themeManager), "mode")!.set!.bind(themeManager);
+
 		Object.defineProperty(themeManager, "theme", {
 			get() {
 				return theme.val;
+			},
+			set(val: string) {
+				themeSetter(val);
 			}
 		}) 
 
 		Object.defineProperty(themeManager, "mode", {
 			get() {
 				return mode.val;
+			},
+			set(val: "dark"|"light") {
+				modeSetter(val);
 			}
 		})