diff --git a/src/app.tsx b/src/app.tsx
index a2fce87..f5714e3 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -11,42 +11,6 @@ import Editor from "./components/editor.tsx";
 
 document.documentElement.classList.add("no-transitions");
 
-document.body.replaceChildren(
-	<noscript>Please enable JavaScript to view this site.</noscript>,
-
-	<template id="export-dialog">
-		<dialog className="export">
-			<form method="dialog">
-				<div>
-					<button className="close icon:x" value="cancel" title="Close"></button>
-					<h2>Export</h2>
-				</div>
-
-				<ul>
-					<li>
-						<button value="download" className="icon:download">Download PAMM file</button>
-					</li>
-					<li>
-						<button value="print" className="icon:file-earmark-pdf">Print or save as PDF</button>
-					</li>
-					<li>
-						<button value="export-html" className="icon:code">Export as HTML</button>
-					</li>
-				</ul>
-			</form>
-		</dialog>
-	</template>,
-
-	<c-header></c-header>,
-
-	<main>
-		<c-files></c-files>
-	</main>,
-
-	<div id="dummy"></div>
-);
-
-document.body.replaceChildren = () => { };
 
 export const $ = <K extends string>(selector: K, root: HTMLElement | Document | DocumentFragment = document) => (
 	root.querySelector(selector)
@@ -60,13 +24,13 @@ export const fileSystemAccessSupported = Boolean(window.showSaveFilePicker && wi
 
 export const isApple = navigator.userAgentData?.platform ? ["macOS", "iOS"].includes(navigator.userAgentData.platform) : /^(Mac|iP)/.test(navigator.platform);
 
-export const encodeFile = (/** @type {{ text: string, data?: Record<string, any> }} */ { text, data = {} }) => {
+export const encodeFile = ({ text, data = {} }: { text: string, data?: Record<string, any>; }) => {
 	return `version 1\n-----\n${text}\n-----\n${JSON.stringify(data, null, "\t")}`;
 };
 
 export const parseHTML = Range.prototype.createContextualFragment.bind(new Range());
 
-export const decodeFile = (/** @type {{ fileContent: string }} */ { fileContent }) => {
+export const decodeFile = ({ fileContent }: { fileContent: string; }) => {
 	const { data: dataString, text } = fileContent.match(/^version 1\n-----\n(?<text>.*)\n-----\n(?<data>{(?:(?!\n-----\n).)*})$/s)?.groups ?? {};
 	const data = (() => {
 		try {
@@ -78,22 +42,22 @@ export const decodeFile = (/** @type {{ fileContent: string }} */ { fileContent
 	return { text, data };
 };
 
-const executeOnTransitionEnd = async (/** @type {Element} */ element, /** @type {Function} */ callback) => {
+const executeOnTransitionEnd = async (element: Element, callback: Function) => {
 	await Promise.allSettled(
 		element.getAnimations().filter((animation) => animation instanceof CSSTransition).map(({ finished }) => finished)
 	);
 	callback();
 };
 
-export const removeAfterTransition = (/** @type {HTMLElement} */ element) => {
+export const removeAfterTransition = (element: HTMLElement) => {
 	executeOnTransitionEnd(element, () => element.remove());
 };
 
-export const _expose = (/** @type {Record<string, any>} */ object) => {
-	for (const [key, value] of Object.entries(object)) /** @type {any} */ (self)[key] = value;
+export const _expose = (object: Record<string, any>) => {
+	for (const [key, value] of Object.entries(object)) (self as any)[key] = value;
 };
 
-export const removeRealChildren = (/** @type {HTMLElement} */ element) => {
+export const removeRealChildren = (element: HTMLElement) => {
 	for (const child of [...element.childNodes].filter(({ nodeName }) => nodeName !== "TEMPLATE")) {
 		child.remove();
 	}
@@ -233,11 +197,11 @@ export const database = await new class {
 		return constructorPromise as Awaited<typeof constructorPromise>;
 	};
 
-	async #opration(/** @type {{ callback: (store: IDBObjectStore) => IDBRequest, transactionMode: IDBTransactionMode, store: string }} */ {
+	async #opration({
 		callback,
 		transactionMode,
 		store: storeName,
-	}) {
+	}: { callback: (store: IDBObjectStore) => IDBRequest, transactionMode: IDBTransactionMode, store: string; }) {
 		const transaction = this.#database.transaction(storeName, transactionMode);
 		const store = transaction.objectStore(storeName);
 		const request = callback(store);
@@ -245,14 +209,14 @@ export const database = await new class {
 		await new Promise((resolve) => request.addEventListener("success", resolve, { once: true }));
 		return request.result;
 	};
-	async get(/** @type {{ store: string, key: string }} */ { store, key }) {
+	async get({ store, key }: { store: string, key: string; }) {
 		return await this.#opration({
 			callback: (store) => store.get(key),
 			transactionMode: "readonly",
 			store,
 		});
 	};
-	add = /** @template {Record<string, any>} T */ async (/** @type {{ store: string, data: T }} */ { store, data }) => {
+	add = async <T extends Record<string, any>>({ store, data }: { store: string, data: T; }) => {
 		await this.#opration({
 			callback: (store) => store.add(data),
 			transactionMode: "readwrite",
@@ -260,7 +224,7 @@ export const database = await new class {
 		});
 		return data;
 	};
-	put = /** @template {Record<string, any>} T */ async (/** @type {{ store: string, data: T }} */ { store, data }) => {
+	put = async <T extends Record<string, any>>({ store, data }: { store: string, data: T; }) => {
 		await this.#opration({
 			callback: (store) => store.put(data),
 			transactionMode: "readwrite",
@@ -268,14 +232,14 @@ export const database = await new class {
 		});
 		return data;
 	};
-	async delete(/** @type {{ store: string, key: string }} */ { store, key }) {
+	async delete({ store, key }: { store: string, key: string; }) {
 		await this.#opration({
 			callback: (store) => store.delete(key),
 			transactionMode: "readwrite",
 			store,
 		});
 	};
-	async getAll(/** @type {{ store: string }} */ { store }) {
+	async getAll({ store }: { store: string; }) {
 		return await this.#opration({
 			callback: (store) => store.getAll(),
 			transactionMode: "readwrite",
@@ -291,7 +255,7 @@ export const database = await new class {
 }
 
 {
-	let /** @type {string} */ engine;
+	let engine: string;
 	if (navigator.userAgentData?.brands?.find(({ brand }) => brand === "Chromium")) engine = "blink";
 	else if (navigator.userAgent.match(/\bFirefox\//)) engine = "gecko";
 	else if (navigator.userAgent.match(/\bChrome\//)) engine = "blink";
@@ -302,7 +266,7 @@ export const database = await new class {
 
 export const storage = new class {
 	#pathname = new URL(document.baseURI).pathname;
-	get(/** @type {string} */ key) {
+	get(key: string) {
 		try {
 			return JSON.parse(localStorage.getItem(`${this.#pathname}:${key}`));
 		} catch (error) {
@@ -310,107 +274,94 @@ export const storage = new class {
 			return null;
 		}
 	};
-	set(/** @type {string} */ key, /** @type {any} */ value) {
+	set(key: string, value: any) {
 		localStorage.setItem(`${this.#pathname}:${key}`, JSON.stringify(value));
 	};
-	remove(/** @type {string} */ key) {
+	remove(key: string) {
 		localStorage.removeItem(`${this.#pathname}:${key}`);
 	};
 };
 
-// console.log(document.documentElement.outerHTML);
-
-// const messageboxesTemplate = $("template#messageboxes").content;
-const messageboxesTemplate = (
-	<template id="messageboxes">
+export const alert = async ({ message, userGestureCallback }: { message: string, userGestureCallback?: Function; }) => {
+	const alertDialog =
 		<dialog className="messagebox alert">
 			<form method="dialog">
-				<p className="message"></p>
+				<p className="message">{message}</p>
 				<div className="buttons">
 					<button className="ok">OK</button>
 				</div>
 			</form>
-		</dialog>
+		</dialog> as any as HTMLDialogElement;
+	document.body.append(alertDialog);
+	alertDialog.showModal();
+	const { promise, resolve } = Promise.withResolvers<void>();
+	alertDialog.addEventListener("click", ({ target }) => {
+		if (target === alertDialog) alertDialog.close();
+	});
+	alertDialog.addEventListener("close", async () => {
+		await userGestureCallback?.();
+		resolve();
+	});
+	await promise;
+	removeAfterTransition(alertDialog);
+};
 
+export const confirm = async ({ message, userGestureCallback }: { message: string, userGestureCallback?: Function; }) => {
+	const confirmDialog =
 		<dialog className="messagebox confirm">
 			<form method="dialog">
-				<p className="message"></p>
-				<div className="buttons">
-					<button value="ok" className="ok">OK</button>
-					<button value="cancel" className="cancel">Cancel</button>
-				</div>
-			</form>
-		</dialog>
-
-		<dialog className="messagebox prompt">
-			<form method="dialog">
-				<p className="message"></p>
-				<input type="text" className="input" name="input" spellcheck={false} autocomplete="off" />
+				<p className="message">{message}</p>
 				<div className="buttons">
 					<button value="ok" className="ok">OK</button>
 					<button value="cancel" className="cancel">Cancel</button>
 				</div>
 			</form>
-		</dialog>
-	</template> as any as HTMLTemplateElement
-).content;
-
-export const alert = async (/** @type {{ message: string, userGestureCallback?: Function }} */ { message, userGestureCallback }) => {
-	const dialog = $("dialog.alert", messageboxesTemplate).cloneNode(true);
-	$(".message", dialog).textContent = message;
-	document.body.append(dialog);
-	dialog.showModal();
-	const { promise, resolve } = Promise.withResolvers();
-	dialog.addEventListener("click", ({ target }) => {
-		if (target === dialog) dialog.close();
+		</dialog> as any as HTMLDialogElement;
+	document.body.append(confirmDialog);
+	confirmDialog.showModal();
+	const { promise, resolve } = Promise.withResolvers<void>();
+	confirmDialog.addEventListener("click", ({ target }) => {
+		if (target === confirmDialog) confirmDialog.close("cancel");
 	});
-	dialog.addEventListener("close", async () => {
+	confirmDialog.addEventListener("close", async () => {
 		await userGestureCallback?.();
 		resolve();
 	});
 	await promise;
-	removeAfterTransition(dialog);
-};
-
-export const confirm = async (/** @type {{ message: string, userGestureCallback?: Function }} */ { message, userGestureCallback }) => {
-	const dialog = $("dialog.confirm", messageboxesTemplate).cloneNode(true);
-	$(".message", dialog).textContent = message;
-	document.body.append(dialog);
-	dialog.showModal();
-	const { promise, resolve } = Promise.withResolvers();
-	dialog.addEventListener("click", ({ target }) => {
-		if (target === dialog) dialog.close("cancel");
-	});
-	dialog.addEventListener("close", async () => {
-		await userGestureCallback?.();
-		resolve(undefined);
-	});
-	await promise;
-	removeAfterTransition(dialog);
-	return { accepted: dialog.returnValue === "ok" };
+	removeAfterTransition(confirmDialog);
+	return { accepted: confirmDialog.returnValue === "ok" };
 };
 
 _expose({ alert });
 
-export const prompt = async (/** @type {{ message: string, defaultValue?: string }} */ { message, defaultValue = "" }) => {
-	const dialog = $("dialog.prompt", messageboxesTemplate).cloneNode(true);
-	$(".message", dialog).textContent = message;
-	$("input.input", dialog).value = defaultValue;
-	document.body.append(dialog);
-	dialog.showModal();
+export const prompt = async ({ message, defaultValue = "" }: { message: string, defaultValue?: string; }) => {
+	let form: HTMLFormElement;
+	const proptDialog =
+		<dialog className="messagebox prompt">
+			<form method="dialog" bind:this={form}>
+				<p className="message">{message}</p>
+				<input type="text" defaultValue={defaultValue} className="input" name="input" spellcheck={false} autocomplete="off" />
+				<div className="buttons">
+					<button value="ok" className="ok">OK</button>
+					<button value="cancel" className="cancel">Cancel</button>
+				</div>
+			</form>
+		</dialog> as any as HTMLDialogElement;
+	document.body.append(proptDialog);
+	proptDialog.showModal();
 	const { promise, resolve } = Promise.withResolvers();
-	dialog.addEventListener("click", ({ target }) => {
-		if (target === dialog) dialog.close("cancel");
+	proptDialog.addEventListener("click", ({ target }) => {
+		if (target === proptDialog) proptDialog.close("cancel");
 	});
-	dialog.addEventListener("close", resolve);
+	proptDialog.addEventListener("close", resolve);
 	await promise;
-	const accepted = dialog.returnValue === "ok";
-	const value = accepted ? /** @type {string} */ (new FormData($("form", dialog)).get("input")) : undefined;
-	removeAfterTransition(dialog);
+	const accepted = proptDialog.returnValue === "ok";
+	const value = accepted ? new FormData(form).get("input") as string : undefined;
+	removeAfterTransition(proptDialog);
 	return { accepted, value };
 };
 
-export const setTitle = (/** @type {string} */ title) => {
+export const setTitle = (title: string) => {
 	const titleArray = [title, appMeta.shortName];
 	if (window.matchMedia("(display-mode: standalone), (display-mode: window-controls-overlay)").matches) titleArray.reverse();
 	document.title = titleArray.join(" - ");
@@ -419,7 +370,10 @@ export const setTitle = (/** @type {string} */ title) => {
 const useTransitions = Boolean(document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches);
 // const useTransitions = false;
 
-export const transition = async (/** @type {() => Promise<any>} */ callback, /** @type {{ name: string, resolveWhenFinished?: boolean }} */ { name, resolveWhenFinished = false }) => {
+export const transition = async (
+	callback: () => Promise<any>,
+	{ name, resolveWhenFinished = false }: { name: string, resolveWhenFinished?: boolean; }
+) => {
 	if (!useTransitions || document.documentElement.classList.contains("no-transitions")) {
 		await callback();
 		return;
@@ -478,66 +432,66 @@ export const appMeta = {
 	mimeType: "text/pretty-awesome-math-markup",
 };
 
-{
-	const customElements = {
-		editor: Editor,
-		header: Header,
-		files: Files,
-	};
-
-	await Promise.all(Object.entries(customElements).map(async ([name, element]) => {
-		// const html = await (await window.fetch(path)).text();
-		// const content = parseHTML(html);
-
-		// const styleElement = content.querySelector("style");
-		// const css = `c-${name} { ${styleElement.textContent} }`;
-
-		// styleElement.textContent = css + (
-		// 	`\n/*# sourceMappingURL=data:application/json,${window.encodeURIComponent(JSON.stringify({
-		// 		version: 3,
-		// 		mappings: "",
-		// 		sources: [`./html/${name}.c.html`],
-		// 	}))} */`
-		// );
-		// styleElement.dataset.customElement = `c-${name}`;
-		// document.head.append(styleElement);
-
-		window.customElements.define(`c-${name}`, class extends HTMLElement {
-			// #content = content;
-			constructor() {
-				super();
-				queueMicrotask(() => {
-					// this.append(this.#content.cloneNode(true));
-					this.append(element());
-				});
-				// this.append(element());
-			};
-			connectedCallback() {
-			};
-		});
-	}));
-}
+// {
+// const customElements = {
+// 	editor: Editor,
+// 	header: Header,
+// 	files: Files,
+// };
+
+// await Promise.all(Object.entries(customElements).map(async ([name, element]) => {
+// 	// const html = await (await window.fetch(path)).text();
+// 	// const content = parseHTML(html);
+
+// 	// const styleElement = content.querySelector("style");
+// 	// const css = `c-${name} { ${styleElement.textContent} }`;
+
+// 	// styleElement.textContent = css + (
+// 	// 	`\n/*# sourceMappingURL=data:application/json,${window.encodeURIComponent(JSON.stringify({
+// 	// 		version: 3,
+// 	// 		mappings: "",
+// 	// 		sources: [`./html/${name}.c.html`],
+// 	// 	}))} */`
+// 	// );
+// 	// styleElement.dataset.customElement = `c-${name}`;
+// 	// document.head.append(styleElement);
+
+// 	window.customElements.define(`c-${name}`, class extends HTMLElement {
+// 		// #content = content;
+// 		constructor() {
+// 			super();
+// 			queueMicrotask(() => {
+// 				// this.append(this.#content.cloneNode(true));
+// 				this.append(element());
+// 			});
+// 			// this.append(element());
+// 		};
+// 		connectedCallback() {
+// 		};
+// 	});
+// 	}));
+// }
 
 export const elements = {
-	get header() { return $("c-header header"); },
-	get myFilesLink() { return $("c-header a[data-action=my-files]"); },
-	get saveButton() { return $("c-header button[data-action=save]"); },
-	get exportButton() { return $("c-header button[data-action=export]"); },
-	get recentlyOpenedDialog() { return $("c-files dialog.recently-opened"); },
-	get recentlyOpenedButton() { return $("c-header button[data-action=recently-opened]"); },
-	get openButton() { return $("c-header button[data-action=open]"); },
-	get uploadButton() { return $("c-header button[data-action=upload]"); },
-	get newFolderButton() { return $("c-files button[data-action=new-folder]"); },
-	get newBrowserFileButton() { return $("c-files button[data-action=new-browser-file]"); },
-	get newDiskFileButton() { return $("c-files button[data-action=new-disk-file]"); },
-	get foldersUL() { return $("c-files ul.folders"); },
-	get filesUL() { return $("c-files ul.files"); },
-	get breadcrumbUL() { return $("c-files nav.breadcrumb ul"); },
-	get fileNameInput() { return $("c-header input[name=file-name]"); },
-	get toggleThemeButton() { return ($("c-header button[data-action=toggle-theme]")); },
-	get toggleLayoutButton() { return ($("c-header button[data-action=toggle-editor-layout]")); },
-	files: $("c-files"),
-	editor: <c-editor />,
+	header: <Header /> as any as HTMLElement,
+	get myFilesLink() { return $("a[data-action=my-files]", elements.header); },
+	get saveButton() { return $("button[data-action=save]", elements.header); },
+	get exportButton() { return $("button[data-action=export]", elements.header); },
+	get recentlyOpenedDialog() { return $("dialog.recently-opened", this.files); },
+	get recentlyOpenedButton() { return $("button[data-action=recently-opened]", elements.header); },
+	get openButton() { return $("button[data-action=open]", elements.header); },
+	get uploadButton() { return $("button[data-action=upload]", elements.header); },
+	get newFolderButton() { return $("button[data-action=new-folder]", this.files); },
+	get newBrowserFileButton() { return $("button[data-action=new-browser-file]", this.files); },
+	get newDiskFileButton() { return $("button[data-action=new-disk-file]", this.files); },
+	get foldersUL() { return $("ul.folders", this.files); },
+	get filesUL() { return $("ul.files", this.files); },
+	get breadcrumbUL() { return $("nav.breadcrumb ul", this.files); },
+	get fileNameInput() { return $("input[name=file-name]", elements.header); },
+	get toggleThemeButton() { return $("button[data-action=toggle-theme]", elements.header); },
+	get toggleLayoutButton() { return $("button[data-action=toggle-editor-layout]", elements.header); },
+	files: <Files /> as any as HTMLElement,
+	editor: <Editor /> as any as HTMLElement,
 	get textInput() { return $(".text-input .textarea", this.editor); },
 	get htmlOutput() { return $("section.html-output", this.editor); },
 	get headersAndFooters() { return $("#headers-and-footers"); },
@@ -546,6 +500,18 @@ export const elements = {
 	appTitleMeta: document.querySelector("meta[name=app-title]"),
 };
 
+document.body.replaceChildren(
+	<noscript>Please enable JavaScript to view this site.</noscript>,
+
+	elements.header,
+
+	<main>
+		{elements.files}
+	</main>,
+
+	<div id="dummy"></div>
+);
+
 if (navigator.windowControlsOverlay) {
 	// document.documentElement.classList.add("no-wco-animation");
 	const mediaMatch = window.matchMedia("(display-mode: window-controls-overlay)");
@@ -555,7 +521,7 @@ if (navigator.windowControlsOverlay) {
 }
 
 setTimeout(() => {
-	let /** @type {BeforeInstallPromptEvent} */ beforeInstallPromptEvent;
+	let beforeInstallPromptEvent: BeforeInstallPromptEvent;
 	const button = $("button[data-action=install]");
 	window.addEventListener("beforeinstallprompt", (event) => {
 		beforeInstallPromptEvent = event;
diff --git a/src/components/editor.tsx b/src/components/editor.tsx
index f263e04..c8ab783 100644
--- a/src/components/editor.tsx
+++ b/src/components/editor.tsx
@@ -36,6 +36,7 @@ export default () => {
 			@layer elements {
 				& {
 					block-size: 100%;
+					--split-proportion: 0.5;
 					display: flex;
 					box-sizing: border-box;
 					/* background-color: var(--gray-1); */
diff --git a/src/components/files.tsx b/src/components/files.tsx
index 9c8786a..8f5a002 100644
--- a/src/components/files.tsx
+++ b/src/components/files.tsx
@@ -14,7 +14,7 @@ export default () => {
 		</nav>
 
 		<div className="main-area">
-			<h2 on:click={() => alert} className="icon:folder">Folders</h2>
+			<h2 className="icon:folder">Folders</h2>
 
 			<ul className="items folders">
 				<template>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index d91a64c..f86e2b9 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -2,7 +2,7 @@
 import { css } from "winzig";
 
 export default () => {
-	return <div>
+	return <div className="header">
 		<header>
 			<img src="./assets/icon.svg" className="logo" alt="icon of PAMM" width={1} height={1} />
 			<h1 className="title">PAMM</h1>
diff --git a/src/css/main.css b/src/css/main.css
index d242250..fcb97c0 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -34,7 +34,7 @@
 			background: none;
 		}
 
-		c-header, dialog {
+		.header, dialog {
 			display: none;
 		}
 	}
@@ -44,20 +44,6 @@
 	}
 }
 
-c-editor {
-	display: block;
-	block-size: 100%;
-	--split-proportion: 0.5;
-}
-
-c-header {
-	display: block;
-}
-
-c-files {
-	display: block;
-}
-
 @layer main {
 	@media not print {
 		:root:not(.light-theme) {
@@ -428,7 +414,7 @@ c-files {
 		}
 
 		&[data-transition="toggling-layout"] {
-			& c-header {
+			& .header {
 				view-transition-name: header;
 			}
 
diff --git a/src/files.tsx b/src/files.tsx
index 12d28c8..12ae7e0 100644
--- a/src/files.tsx
+++ b/src/files.tsx
@@ -20,21 +20,21 @@ import {
 } from "./app.tsx";
 import { startRendering } from "./input-handler.tsx";
 import parseDocument from "./parse/document/parseDocument.ts";
-import renderDocument from "./render/document/renderDocument.ts";
+import renderDocument from "./render/document/renderDocument.tsx";
 
 // await new Promise(setTimeout);
 
-const /** @type {any} */ trace = (/** @type {any[]} */ ...args) => console.trace(...args);
+const trace: any = (...args: any[]) => console.trace(...args);
 
 let currentFolder = {
 	id: "home",
 	name: "home",
-	parentFolder: /** @type {{ id: string }} */ (null),
-	folders: [],
-	files: [],
+	parentFolder: null as { id: string; },
+	folders: [] as any[],
+	files: [] as any[],
 };
 
-let /** @type {{ storageType: FileStorageType, id: string, name: string, content: string, fileHandle?: FileSystemFileHandle }} */ currentFile;
+let currentFile: { storageType: FileStorageType, id: string, name: string, content: string, fileHandle?: FileSystemFileHandle; };
 
 const fileTypesOption = [{
 	accept: { [appMeta.mimeType]: [appMeta.fileExtension] },
@@ -44,18 +44,18 @@ const fileTypesOption = [{
 const fileSystemAccessAPINotSupportedMessage = "Your browser does not support interacting with local files (File System Access API). "
 	+ "Please use a Chromium-based browser like Google Chrome or Microsoft Edge.";
 
-const addToRecentlyOpened = async (/** @type {{ id: string, storageType: FileStorageType }} */ { id, storageType }) => {
+const addToRecentlyOpened = async ({ id, storageType }: { id: string, storageType: FileStorageType; }) => {
 	const recentlyOpenedFils = (await database.get({ store: "key-value", key: "recently-opened" })).value;
 	await database.put({
 		store: "key-value",
 		data: {
 			key: "recently-opened",
-			value: [{ id, storageType }, ...recentlyOpenedFils.filter(({ id: fileId }) => fileId !== id)],
+			value: [{ id, storageType }, ...recentlyOpenedFils.filter(({ id: fileId }: { id: string; }) => fileId !== id)],
 		},
 	});
-}
+};
 
-const renderFile = async (/** @type {{ storageType: FileStorageType, id?: string, fileHandle?: FileSystemFileHandle }} */ { storageType, id, fileHandle }) => {
+const renderFile = async ({ storageType, id, fileHandle }: { storageType: FileStorageType, id?: string, fileHandle?: FileSystemFileHandle; }) => {
 	await toggleView({ filesView: false });
 
 	// console.log("rendering file", fileHandle, id);
@@ -105,7 +105,7 @@ const renderFile = async (/** @type {{ storageType: FileStorageType, id?: string
 			const { data, text } = decodeFile({ fileContent });
 			elements.textInput.textContent = text;
 			if (window.FileSystemObserver) {
-				const observer = new FileSystemObserver(async (records) => {
+				const observer = new FileSystemObserver(async () => {
 					let fileContent = await (await fileHandle.getFile()).text();
 					const { data, text } = decodeFile({ fileContent });
 					elements.textInput.textContent = text;
@@ -155,8 +155,8 @@ const toggleView = (() => {
 	// const files = document.querySelector("c-files");
 	// const editor = document.createElement("c-editor");
 
-	return async (/** @type {{ filesView?: boolean }?} */ { filesView: newFilesView = !filesView } = {}) => {
-		await new Promise(setTimeout);
+	return async ({ filesView: newFilesView = !filesView }: { filesView?: boolean; } = {}) => {
+		// await new Promise(setTimeout);
 		if (newFilesView !== filesView) {
 			filesView = newFilesView;
 			await transition(async () => {
@@ -179,13 +179,13 @@ const toggleView = (() => {
 			}, { name: "toggling-view" });
 		}
 		return { filesView };
-	}
+	};
 })();
 
 
-const itemClickHandler = (/** @type {{ type: ItemType, storageType?: FileStorageType, fileHandle?: FileSystemFileHandle, id: string, changeURL?: boolean }} */ {
+const itemClickHandler = ({
 	type, storageType, fileHandle, id, changeURL = false
-}) => async (/** @type {MouseEvent?} */ event) => {
+}: { type: ItemType, storageType?: FileStorageType, fileHandle?: FileSystemFileHandle, id: string, changeURL?: boolean; }) => async (event?: MouseEvent) => {
 	if (event?.ctrlKey || event?.metaKey || event?.shiftKey) return;
 	event?.preventDefault();
 
@@ -209,7 +209,7 @@ const itemClickHandler = (/** @type {{ type: ItemType, storageType?: FileStorage
 };
 
 
-const displayFolder = async (/** @type {{ id: string }} */ { id }) => {
+const displayFolder = async ({ id }: { id: string; }) => {
 
 	currentFile = null;
 
@@ -219,12 +219,12 @@ const displayFolder = async (/** @type {{ id: string }} */ { id }) => {
 	else setTitle(`${folderName} 📂`);
 
 	[folders, files] = await Promise.all([[folders, "folders"], [files, "files"]].map(
-		async ([items, store]) => await Promise.all(items.map(async ({ id }) => await database.get({ store, key: id })))
+		async ([items, store]) => await Promise.all(items.map(async ({ id }: { id: string; }) => await database.get({ store, key: id })))
 	));
 
 	if (currentFile) return;
 
-	const onDragStart = (/** @type {{ type: ItemType, id: string }} */ { type, id }) => async (/** @type {DragEvent} */ event) => {
+	const onDragStart = ({ type, id }: { type: ItemType, id: string; }) => async (event: DragEvent) => {
 		event.dataTransfer.effectAllowed = "move";
 		event.dataTransfer.setData("text/plain", JSON.stringify({ type, id }));
 		// event.dataTransfer.setDragImage(event.target, 0, 0);
@@ -233,16 +233,16 @@ const displayFolder = async (/** @type {{ id: string }} */ { id }) => {
 		// }, 1000);
 	};
 
-	const onDrop = (/** @type {{ folder: any }} */ { folder }) => async (/** @type {DragEvent} */ event) => {
+	const onDrop = ({ folder }: { folder: any; }) => async (event: DragEvent) => {
 		event.preventDefault();
 		event.stopPropagation();
-		const data = (() => {
+		const data: { type: ItemType; id: string; } = (() => {
 			try {
 				return JSON.parse(event.dataTransfer.getData("text/plain") ?? null);
 			} catch { }
 		})();
 		if (!data) return;
-		const /** @type {string} */ droppedItemStore = {
+		const droppedItemStore: string = {
 			folder: "folders",
 			file: "files",
 		}[data.type];
@@ -252,7 +252,7 @@ const displayFolder = async (/** @type {{ id: string }} */ { id }) => {
 		await database.put({ store: "folders", data: folder });
 
 		const droppedItemParentfolder = await database.get({ store: "folders", key: droppedItem.parentFolder.id });
-		droppedItemParentfolder[droppedItemStore] = droppedItemParentfolder[droppedItemStore].filter(({ id }) => id !== droppedItem.id);
+		droppedItemParentfolder[droppedItemStore] = droppedItemParentfolder[droppedItemStore].filter(({ id }: { id: string; }) => id !== droppedItem.id);
 		await database.put({ store: "folders", data: droppedItemParentfolder });
 
 		droppedItem.parentFolder = { id: folder.id };
@@ -261,17 +261,17 @@ const displayFolder = async (/** @type {{ id: string }} */ { id }) => {
 		await displayFolder({ id: currentFolder.id });
 	};
 
-	for (const [items, UL, type, store] of /** @type {const} */ ([
+	for (const [items, UL, type, store] of [
 		[folders, elements.foldersUL, "folder", "folders"],
 		[files, elements.filesUL, "file", "files"],
-	])) {
+	] as const) {
 
 		for (const item of [...UL.children].filter(({ classList }) => classList.contains("item"))) item.remove();
 
 		const template = $(":scope > template", UL);
 
 		for (const item of items) {
-			const clone = /** @type {HTMLElement} */ (template.content.cloneNode(true).firstElementChild);
+			const clone = template.content.cloneNode(true).firstElementChild as HTMLTemplateElement;
 			$(".name", clone).textContent = item.name;
 			$("a", clone).href = $("a[data-action=permalink]", clone).href = `?${type}=${item.id}`;
 			$("a", clone).addEventListener("click", itemClickHandler({ type, id: item.id, storageType: "indexeddb" }));
@@ -303,11 +303,11 @@ const displayFolder = async (/** @type {{ id: string }} */ { id }) => {
 				clone.remove();
 				switch (type) {
 					case ("folder"): {
-						const recursiveDelete = async (/** @type {{ id: string }} */ { id: folderId }) => {
+						const recursiveDelete = async ({ id: folderId }: { id: string; }) => {
 							const { folders, files } = await database.get({ store: "folders", key: folderId });
 							await Promise.all([
-								folders.map(async ({ id }) => await recursiveDelete({ id })),
-								files.map(async ({ id }) => await database.delete({ store: "files", key: id })),
+								folders.map(async ({ id }: { id: string; }) => await recursiveDelete({ id })),
+								files.map(async ({ id }: { id: string; }) => await database.delete({ store: "files", key: id })),
 								database.delete({ store: "folders", key: folderId }),
 							]);
 						};
@@ -345,7 +345,7 @@ const displayFolder = async (/** @type {{ id: string }} */ { id }) => {
 		let folder = currentFolder;
 
 		do {
-			const clone = /** @type {HTMLElement} */ (template.content.cloneNode(true).firstElementChild);
+			const clone = (template.content.cloneNode(true).firstElementChild) as HTMLElement;
 			$(".name", clone).textContent = folder.name;
 			$("a", clone).setAttribute("href", `?folder=${folder.id}`);
 			const folderId = folder.id;
@@ -370,7 +370,7 @@ const displayFolder = async (/** @type {{ id: string }} */ { id }) => {
 		history.replaceState({ folderId: searchParams.get("folder") }, "", "./");
 	} else if (searchParams.get("file")) {
 		const fileId = searchParams.get("file");
-		let /** @type {FileStorageType} */ storageType;
+		let storageType: FileStorageType;
 		if (fileId.startsWith("b-")) storageType = "indexeddb";
 		else if (fileId.startsWith("f-")) storageType = "file-system";
 		else throw new Error("invalid file id");
@@ -388,7 +388,30 @@ elements.myFilesLink.addEventListener("click", async (event) => {
 	}
 });
 
-export let /** @type {(event: KeyboardEvent) => void} */ keyDown;
+export let keyDown: (event: KeyboardEvent) => void;
+
+const exportDialog = (
+	<dialog className="export">
+		<form method="dialog">
+			<div>
+				<button className="close icon:x" value="cancel" title="Close"></button>
+				<h2>Export</h2>
+			</div>
+
+			<ul>
+				<li>
+					<button value="download" className="icon:download">Download PAMM file</button>
+				</li>
+				<li>
+					<button value="print" className="icon:file-earmark-pdf">Print or save as PDF</button>
+				</li>
+				<li>
+					<button value="export-html" className="icon:code">Export as HTML</button>
+				</li>
+			</ul>
+		</form>
+	</dialog>
+) as any as HTMLDialogElement;
 
 const fileUtils = new class {
 	async saveFile() {
@@ -414,10 +437,10 @@ const fileUtils = new class {
 		}
 		document.documentElement.classList.remove("file-dirty");
 	};
-	downloadFile(/** @type {{ name?: string, content?: string }?} */ {
+	downloadFile({
 		name = currentFile.name + appMeta.fileExtension,
 		content = elements.textInput.textContent.normalize(),
-	} = {}) {
+	}: { name?: string, content?: string; } = {}) {
 		const anchor = document.createElement("a");
 		const fileContent = encodeFile({ text: content });
 		anchor.href = URL.createObjectURL(new Blob([fileContent], { type: appMeta.mimeType }));
@@ -453,7 +476,7 @@ const fileUtils = new class {
 		const name = file.name.replace(/\.[^.]+$/, "");
 		await this.newBrowserFile({ name, content: text });
 	};
-	async newFolder(/** @type {{ name: string }} */ { name }) {
+	async newFolder({ name }: { name: string; }) {
 		if (!name) return;
 		const { id } = await database.add({
 			store: "folders",
@@ -470,7 +493,7 @@ const fileUtils = new class {
 		history.pushState({ folderId: id }, "", "./");
 		await displayFolder({ id });
 	};
-	async newBrowserFile(/** @type {{ name: string, content?: string }} */ { name, content = "" }) {
+	async newBrowserFile({ name, content = "" }: { name: string, content?: string; }) {
 		if (!name) return;
 		const { id } = currentFile = {
 			storageType: "indexeddb",
@@ -509,12 +532,12 @@ const fileUtils = new class {
 			});
 		}
 	};
-	async showExportDialog(/** @type {{ name?: string, content?: string, renderFileArguments?: any }?} */ {
+	async showExportDialog({
 		name,
 		content,
 		renderFileArguments,
-	} = {}) {
-		const dialog = /** @type {HTMLDialogElement} */ ($("template#export-dialog").content.firstElementChild.cloneNode(true));
+	}: { name?: string, content?: string, renderFileArguments?: any; } = {}) {
+		const dialog = exportDialog;
 		document.body.append(dialog);
 		dialog.showModal();
 		dialog.addEventListener("click", ({ target }) => {
@@ -542,7 +565,7 @@ const fileUtils = new class {
 				}
 				case ("export-html"): {
 					const tempDiv = document.createElement("div");
-					const tree = parseDocument(content ?? elements.textInput.textContent.normalize())
+					const tree = parseDocument(content ?? elements.textInput.textContent.normalize());
 					for (const item of tree) {
 						tempDiv.append(renderDocument([item]));
 						tempDiv.append(document.createTextNode("\n"));
@@ -584,7 +607,7 @@ const fileUtils = new class {
 	// elements.downloadButton.addEventListener("click", () => fileUtils.downloadFile());
 	elements.saveButton.addEventListener("click", async () => await fileUtils.saveFile());
 	// elements.printButton.addEventListener("click", async () => await fileUtils.printFile());
-	elements.exportButton.addEventListener("click", async () => await fileUtils.showExportDialog())
+	elements.exportButton.addEventListener("click", async () => await fileUtils.showExportDialog());
 
 	elements.openButton.addEventListener("click", async () => await fileUtils.openFile());
 	elements.uploadButton.addEventListener("click", async () => await fileUtils.uploadFile());
@@ -592,7 +615,7 @@ const fileUtils = new class {
 	elements.recentlyOpenedButton.addEventListener("click", async () => {
 		const dialog = elements.recentlyOpenedDialog;
 		// const closeDialog = () => dialog.close();
-		const recentlyOpenedFiles = await Promise.all((await database.get({ store: "key-value", key: "recently-opened" })).value.map(async ({ id, storageType }) => {
+		const recentlyOpenedFiles = await Promise.all((await database.get({ store: "key-value", key: "recently-opened" })).value.map(async ({ id, storageType }: { id: string; storageType: FileStorageType; }) => {
 			const store = {
 				"indexeddb": "files",
 				"file-system": "file-handles",
@@ -611,7 +634,7 @@ const fileUtils = new class {
 			$("[data-storagetype]", clone).dataset.storagetype = storageType;
 			$(".name", clone).textContent = name + ((storageType === "file-system") ? appMeta.fileExtension : "");
 			$("a.link", clone).href = $("a.permalink", clone).href = `?file=${id}`;
-			for (const [selectorString, changeURL] of /** @type {const} */ ([["a.link", false], ["a.permalink", true]])) {
+			for (const [selectorString, changeURL] of ([["a.link", false], ["a.permalink", true]]) as const) {
 				if (storageType === "indexeddb") {
 					$(selectorString, clone).addEventListener("click", (event) => {
 						dialog.close();
@@ -651,7 +674,7 @@ const fileUtils = new class {
 		await fileUtils.newDiskFile();
 	});
 
-	keyDown = (/** @type {KeyboardEvent} */ event) => {
+	keyDown = (event: KeyboardEvent) => {
 		if (event.ctrlKey === !isApple && event.metaKey === isApple && !event.shiftKey && !event.altKey) {
 			if (event.key === "s") {
 				event.preventDefault();
@@ -705,7 +728,7 @@ window.addEventListener("beforeunload", (event) => {
 
 {
 	// printing:
-	let /** @type {string} */ previousTitle;
+	let previousTitle: string;
 	window.addEventListener("beforeprint", () => {
 		previousTitle = document.title;
 		if (!currentFile) return;
@@ -742,7 +765,7 @@ window.addEventListener("beforeunload", (event) => {
 
 {
 	const handleHistoryStateFile = async () => {
-		await new Promise(setTimeout);
+		await new Promise(resolve => setTimeout(resolve));
 		const { storageType, fileId: id } = history.state;
 		switch (storageType) {
 			case ("indexeddb"): {
diff --git a/src/index.tsx b/src/index.tsx
index 47b34e4..6fa415c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,6 +5,7 @@ winzigConfig: ({
 	output: "../",
 	appfiles: "appfiles",
 	css: "./css/main.css",
+	noCSSScopeRules: true,
 }) satisfies WinzigConfig;
 
 import "./main.tsx";
diff --git a/src/input-handler.tsx b/src/input-handler.tsx
index 6e4c18b..87b8d07 100644
--- a/src/input-handler.tsx
+++ b/src/input-handler.tsx
@@ -1,7 +1,7 @@
 
 import { elements, $$, storage, transition } from "./app.tsx";
 import parseDocument from "./parse/document/parseDocument.ts";
-import renderDocument from "./render/document/renderDocument.ts";
+import renderDocument from "./render/document/renderDocument.tsx";
 import { keyDown } from "./files.tsx";
 
 CSS.highlights?.set("heading", new Highlight());
@@ -9,13 +9,11 @@ CSS.highlights?.set("code", new Highlight());
 CSS.highlights?.set("math", new Highlight());
 const selection = document.getSelection();
 
-await new Promise(setTimeout);
-
 // export const { startRendering } = (() => {
 export const startRendering = (() => {
-	let previousSectionsArray = [];
+	let previousSectionsArray: any[] = [];
 
-	const handleInput = function (/** @type {Partial<InputEvent>} */ { data }: any = ({})) {
+	const handleInput = function ({ }: Partial<InputEvent> = {}) {
 		// console.log('handle')
 		const { textContent } = elements.textInput;
 
@@ -33,7 +31,7 @@ export const startRendering = (() => {
 		// 	}
 		// }
 
-		const /** @type {any[]} */ sectionsArray = [];
+		const sectionsArray: any[] = [];
 
 		let sectionBracesDepth = 0;
 		let currentSectionArray = [];
@@ -44,8 +42,8 @@ export const startRendering = (() => {
 		let currentCharIndex = 0;
 		CSS.highlights?.get("code").clear();
 		CSS.highlights?.get("math").clear();
-		let /** @type {Range} */ currentCodeRange;
-		let /** @type {Range} */ currentMathRange;
+		let currentCodeRange: Range;
+		let currentMathRange: Range;
 		for (let index = 0; index < initialStringSections.length; index++) {
 			const stringSection = initialStringSections[index];
 			for (const character of stringSection) {
@@ -154,7 +152,7 @@ export const startRendering = (() => {
 	elements.textInput.addEventListener("beforeinput", (event) => {
 		if (!event.inputType.startsWith("format")) {
 			const [{ startContainer: container, startOffset, endOffset }] = event.getTargetRanges();
-			const replaceText = (/** @type {string} */ text) => {
+			const replaceText = (text: string) => {
 				container.replaceData(startOffset, endOffset - startOffset, text);
 				selection.collapse(container, startOffset + text.length);
 				const { top } = selection.getRangeAt(0).getBoundingClientRect();
@@ -164,17 +162,17 @@ export const startRendering = (() => {
 			if (event.inputType === "insertParagraph") {
 				event.preventDefault();
 				replaceText("\n");
-				handleInput()
+				handleInput();
 			} else if (event.dataTransfer) {
 				event.preventDefault();
 				const insertedText = event.dataTransfer.getData("text/plain").replaceAll("\r", "");
 				replaceText(insertedText);
-				handleInput()
+				handleInput();
 			} else return;
 		}
 
 		event.preventDefault();
-		handleInput()
+		handleInput();
 	});
 
 	for (const element of [elements.textInput, elements.htmlOutput]) {
@@ -195,20 +193,18 @@ export const startRendering = (() => {
 		});
 	}
 
-	return {
-		startRendering() {
-			previousSectionsArray = [];
+	return () => {
+		previousSectionsArray = [];
 
-			for (const element of $$(":scope > .section", elements.htmlOutput)) {
-				element.remove();
-			}
+		for (const element of $$(":scope > .section", elements.htmlOutput)) {
+			element.remove();
+		}
 
-			handleInput.call(elements.textInput);
+		handleInput.call(elements.textInput);
 
-			document.documentElement.classList.remove("file-dirty");
-		},
+		document.documentElement.classList.remove("file-dirty");
 	};
-})().startRendering;
+})();
 
 {
 	let onlyShiftPressed = false;
diff --git a/src/main.tsx b/src/main.tsx
index 5be7e2d..5183219 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -14,10 +14,11 @@ import { elements, $$, storage, transition } from "./app.tsx";
 {
 	// horizontal / vertical layout
 	const button = elements.toggleLayoutButton;
-	let /** @type {EditorLayout} */ currentLayout = storage.get("editor-layout") ?? "aside";
+	let currentLayout: EditorLayout = storage.get("editor-layout") ?? "aside";
 	// console.error("current layout:", currentLayout);
 	document.documentElement.dataset.editorLayout = currentLayout;
 	button.addEventListener("click", async () => {
+		console.log(button, "clicked");
 		currentLayout = currentLayout === "aside" ? "stacked" : "aside";
 		await transition(async () => {
 			document.documentElement.dataset.editorLayout = currentLayout;
@@ -29,16 +30,16 @@ import { elements, $$, storage, transition } from "./app.tsx";
 	const dragger = editor.querySelector(".dragger");
 
 	let dragging = false;
-	let /** @type {number} */ relativeDraggerCoordinate;
-	let /** @type {number} */ draggerSize;
-	let /** @type {number} */ containerCoordinate;
-	let /** @type {number} */ containerSize;
+	let relativeDraggerCoordinate: number;
+	let draggerSize: number;
+	let containerCoordinate: number;
+	let containerSize: number;
 
 	dragger.addEventListener("pointerdown", ({ clientX, clientY }) => {
 		editor.classList.add("dragging");
 		dragging = true;
 		const stacked = currentLayout === "stacked";
-		let /** @type {number} */ draggerCoordinate;
+		let draggerCoordinate: number;
 		({ [stacked ? "y" : "x"]: draggerCoordinate, [stacked ? "height" : "width"]: draggerSize } = dragger.getBoundingClientRect());
 		relativeDraggerCoordinate = (stacked ? clientY : clientX) - draggerCoordinate;
 		({ [stacked ? "y" : "x"]: containerCoordinate, [stacked ? "height" : "width"]: containerSize } = editor.getBoundingClientRect());
diff --git a/src/parse/document/parseDocument.ts b/src/parse/document/parseDocument.ts
index decad0c..6b35ab4 100644
--- a/src/parse/document/parseDocument.ts
+++ b/src/parse/document/parseDocument.ts
@@ -1,16 +1,16 @@
 
 import parseMath from "../math/parseMath.ts";
 
-export default (/** @type {string} */ inputString) => {
+export default (inputString: string) => {
 	let currentString = "\n";
-	let stack = [{
+	let stack: any[] = [{
 		type: "base",
-		content: [],
+		content: [] as any[],
 	}];
 	let bracesDepth = 0;
 	let currentType = "text";
 	let backslashEscaped = false;
-	let currentTextFormatting = {
+	let currentTextFormatting: any = {
 		bold: false,
 		italic: false,
 		underline: false,
diff --git a/src/parse/math/arrayToTree.ts b/src/parse/math/arrayToTree.ts
index f8e1d9d..633b17e 100644
--- a/src/parse/math/arrayToTree.ts
+++ b/src/parse/math/arrayToTree.ts
@@ -17,10 +17,10 @@ const operatorsWithItemAfter = [
 	operators.squareRoot,
 ];
 
-const matchAnyBrackets = (/** @type {any[]} */ mathArray) => {
+const matchAnyBrackets = (mathArray: any[]) => {
 	const stack = [{
 		type: "base",
-		contents: [[]],
+		contents: [[] as any[]],
 	}];
 
 	for (const item of mathArray) {
@@ -30,7 +30,7 @@ const matchAnyBrackets = (/** @type {any[]} */ mathArray) => {
 				contents: [[]],
 			});
 		} else if (item.category === categories.anyClosingBracket) {
-			let /** @type {string} */ previousGroupType;
+			let previousGroupType: string;
 			while (stack.length >= 2 && previousGroupType !== item.anyBracketType) {
 				previousGroupType = stack.at(-1).type;
 				stack.at(-2).contents.at(-1).push(stack.pop());
@@ -52,11 +52,11 @@ const matchAnyBrackets = (/** @type {any[]} */ mathArray) => {
 	return stack[0].contents;
 };
 
-export default (/** @type {any[]} */ mathArray) => {
+export default (mathArray: any[]) => {
 
 	const groupedTree = matchAnyBrackets(mathArray);
 
-	const recursiveTree = (/** @type {any[]} */ tree) => {
+	const recursiveTree = (tree: any[]): any[] => {
 		const newTree = [];
 
 		for (const expression of tree) {
diff --git a/src/parse/math/categorizeArray.ts b/src/parse/math/categorizeArray.ts
index 2365e88..e3bc433 100644
--- a/src/parse/math/categorizeArray.ts
+++ b/src/parse/math/categorizeArray.ts
@@ -122,7 +122,7 @@ export const keywordList = [
 	...specialCharacterList.map((specialCharacter) => ({ ...specialCharacter, type: keywordTypes.specialCharacter })),
 ];
 
-const categorizeSymbols = (/** @type {string} */ symbolString) => {
+const categorizeSymbols = (symbolString: string) => {
 	const array = [];
 	let currentString = "";
 	symbolString += " ";
@@ -144,21 +144,21 @@ const categorizeSymbols = (/** @type {string} */ symbolString) => {
 	return array;
 };
 
-export default (/** @type {string} */ mathString) => {
+export default (mathString: string) => {
 	mathString += " ";
-	const /** @type {any[]} */ array = [];
+	const array: any[] = [];
 	let currentString = "";
-	let /** @type {keyof characterCategories} */ previousCharacterCategory;
+	let previousCharacterCategory: keyof typeof characterCategories;
 
 	for (const character of mathString) {
-		let characterCategory = /** @type {keyof characterCategories} */ ((() => {
+		let characterCategory = ((() => {
 			if (character.match(regularExpressions.number)) return characterCategories.number;
 			if (character.match(regularExpressions.letter)) return characterCategories.letters;
 			if (character.match(regularExpressions.anyOpeningBracket)) return characterCategories.anyOpeningBracket;
 			if (character.match(regularExpressions.anyClosingBracket)) return characterCategories.anyClosingBracket;
 			if (character.match(regularExpressions.whitespace)) return characterCategories.whitespace;
 			return characterCategories.symbols;
-		})());
+		})()) as keyof typeof characterCategories;
 
 		if (characterCategory !== previousCharacterCategory && previousCharacterCategory) {
 			if (previousCharacterCategory === characterCategories.anyOpeningBracket) {
@@ -263,8 +263,7 @@ export default (/** @type {string} */ mathString) => {
 			} else if (previousCharacterCategory === characterCategories.letters) {
 
 				const { keyword, type: keywordType, ...keywordProperties } = keywordList.find(({ keyword }) => currentString === keyword) ?? {};
-				// @ts-ignore
-				const /** @type {string} */ string = keywordType === keywordTypes.specialCharacter ? keywordProperties.character : currentString;
+				const string: string = keywordType === keywordTypes.specialCharacter ? (keywordProperties as any).character : currentString;
 
 				if (keywordType !== keywordTypes.normal) {
 					const whitespaceBefore = array.at(-1)?.category === categories.whitespace;
diff --git a/src/parse/math/parseMath.ts b/src/parse/math/parseMath.ts
index 756356b..d851536 100644
--- a/src/parse/math/parseMath.ts
+++ b/src/parse/math/parseMath.ts
@@ -3,18 +3,18 @@ import arrayToTree from "./arrayToTree.ts";
 import categorizeArray, { characterCategories } from "./categorizeArray.ts";
 import { categories, operators, allBrackets } from "../../constants.ts";
 
-export default (/** @type {string} */ mathString) => {
+export default (mathString: string) => {
 
 	let mathArray = categorizeArray(mathString);
 
 	{
-		const matchGroup = (/** @type {{ index: number, direction: "forwards" | "backwards", removeRedundantParentheses?: boolean, disallowedOperators?: string[], canBehaveLikeFunction?: boolean }} */ {
+		const matchGroup = ({
 			index: startIndex,
 			direction: directionString,
 			removeRedundantParentheses = true,
 			disallowedOperators = [],
 			canBehaveLikeFunction = false,
-		}) => {
+		}: { index: number, direction: "forwards" | "backwards", removeRedundantParentheses?: boolean, disallowedOperators?: string[], canBehaveLikeFunction?: boolean; }) => {
 			let parenthesesDepth = 0;
 			const direction = (directionString === "forwards") ? 1 : -1;
 
@@ -118,7 +118,7 @@ export default (/** @type {string} */ mathString) => {
 		};
 
 		{
-			let /** @type {number} */ index;
+			let index: number;
 
 			while (index = mathArray.findIndex(
 				({ category, groupsNotMatched }) => category === categories.operator && groupsNotMatched
diff --git a/src/render/document/renderDocument.ts b/src/render/document/renderDocument.tsx
similarity index 69%
rename from src/render/document/renderDocument.ts
rename to src/render/document/renderDocument.tsx
index bc0d0c5..0018947 100644
--- a/src/render/document/renderDocument.ts
+++ b/src/render/document/renderDocument.tsx
@@ -1,51 +1,50 @@
 
-import { createMathElement } from "../createMathElement.ts";
-import renderMath from "../math/renderMath.ts";
+import renderMath from "../math/renderMath.tsx";
 
-export default (/** @type {any[]} */ documentTree) => {
+export default (documentTree: any[]) => {
 
-	const recursiveRender = (/** @type {any[]} */ tree) => {
+	const recursiveRender = (tree: any[]) => {
 		const fragment = new DocumentFragment();
 
 		for (const item of tree) {
 			switch (item.type) {
 				case ("text"): {
-					fragment.append(document.createTextNode(item.string));
+					fragment.append(new Text(item.string));
 					break;
 				} case ("math"): {
-					const mathElement = createMathElement("math");
+					const mathElement = <math></math>;
 					if (item.displayBlock) mathElement.setAttribute("display", "block");
 					if (item.displayBlock !== item.displayStyle) mathElement.setAttribute("displaystyle", item.displayStyle);
 					mathElement.append(renderMath(item.content));
 					fragment.append(mathElement);
 					break;
 				} case ("newLine"): {
-					const lineBreakElement = document.createElement("br");
+					const lineBreakElement = <br></br>;
 					fragment.append(lineBreakElement);
 					break;
 				} case ("paragraph"): {
-					const paragraphElement = document.createElement("p");
+					const paragraphElement = <p></p>;
 					if (item.bottomMargin) paragraphElement.classList.add("bottom-margin");
 					paragraphElement.append(recursiveRender(item.content))
 					fragment.append(paragraphElement);
 					break;
 				} case ("bold"): {
-					const boldElement = document.createElement("strong");
+					const boldElement = <strong></strong>;
 					boldElement.append(recursiveRender(item.content))
 					fragment.append(boldElement);
 					break;
 				} case ("italic"): {
-					const italicElement = document.createElement("em");
+					const italicElement = <em></em>;
 					italicElement.append(recursiveRender(item.content))
 					fragment.append(italicElement);
 					break;
 				} case ("underline"): {
-					const underlineElement = document.createElement("u");
+					const underlineElement = <u></u>;
 					underlineElement.append(recursiveRender(item.content))
 					fragment.append(underlineElement);
 					break;
 				} case ("code"): {
-					const codeElement = document.createElement("code");
+					const codeElement = <code></code>;
 					codeElement.append(recursiveRender(item.content))
 					fragment.append(codeElement);
 					break;
diff --git a/src/render/math/renderMath.ts b/src/render/math/renderMath.tsx
similarity index 77%
rename from src/render/math/renderMath.ts
rename to src/render/math/renderMath.tsx
index fca8ea0..a253fec 100644
--- a/src/render/math/renderMath.ts
+++ b/src/render/math/renderMath.tsx
@@ -1,10 +1,9 @@
 
 import { categories, operators, allBracketsSyntaxes, keywords, operatorList } from "../../constants.ts";
-import { createMathElement } from "../createMathElement.ts";
 
-export default (/** @type {any[]} */ mathTree) => {
+export default (mathTree: any[]) => {
 
-	const recursiveRender = (/** @type {any[]} */ tree, { outerElement = false } = {}) => {
+	const recursiveRender = (tree: any[], { outerElement = false } = {}) => {
 
 		const fragment = new DocumentFragment();
 
@@ -19,7 +18,7 @@ export default (/** @type {any[]} */ mathTree) => {
 						const numerator = recursiveRender(item.numerator);
 						const denominator = recursiveRender(item.denominator);
 
-						const element = createMathElement("mfrac");
+						const element = <mfrac></mfrac>;
 						element.append(numerator);
 						element.append(denominator);
 						expressionFragment.append(element);
@@ -31,7 +30,7 @@ export default (/** @type {any[]} */ mathTree) => {
 							const index = recursiveRender(item.base[0][0].index);
 							const exponent = recursiveRender(item.exponent);
 
-							const element = createMathElement("msubsup");
+							const element = <msubsup></msubsup>;
 							element.append(base);
 							element.append(index);
 							element.append(exponent);
@@ -40,7 +39,7 @@ export default (/** @type {any[]} */ mathTree) => {
 							const base = recursiveRender(item.base);
 							const exponent = recursiveRender(item.exponent);
 
-							const element = createMathElement("msup");
+							const element = <msup></msup>;
 							element.append(base);
 							element.append(exponent);
 							expressionFragment.append(element);
@@ -49,10 +48,10 @@ export default (/** @type {any[]} */ mathTree) => {
 					} else if (item.operator === operators.factorial) {
 
 						const expression = recursiveRender(item.expression);
-						const exclamationMark = createMathElement("mo");
+						const exclamationMark = <mo></mo>;
 						exclamationMark.textContent = "!";
 
-						const mathRow = createMathElement("mrow");
+						const mathRow = <mrow></mrow>;
 						mathRow.append(expression);
 						mathRow.append(exclamationMark);
 						expressionFragment.append(mathRow);
@@ -62,7 +61,7 @@ export default (/** @type {any[]} */ mathTree) => {
 						const base = recursiveRender(item.base);
 						const index = recursiveRender(item.index);
 
-						const element = createMathElement("msub");
+						const element = <msub></msub>;
 						element.append(base);
 						element.append(index);
 						expressionFragment.append(element);
@@ -72,7 +71,7 @@ export default (/** @type {any[]} */ mathTree) => {
 						const degree = recursiveRender(item.degree);
 						const radicand = recursiveRender(item.radicand);
 
-						const element = createMathElement("mroot");
+						const element = <mroot></mroot>;
 						element.append(radicand);
 						element.append(degree);
 						expressionFragment.append(element);
@@ -81,132 +80,132 @@ export default (/** @type {any[]} */ mathTree) => {
 
 						const radicand = recursiveRender(item.radicand);
 
-						const element = createMathElement("msqrt");
+						const element = <msqrt></msqrt>;
 						element.append(radicand);
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.plus) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.plusMinus) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.minus) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.times) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.divide) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.colon) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.invisibleTimes) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.innerHTML = "&InvisibleTimes;";
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.equals) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.lessThan) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.greaterThan) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.lessThanOrEqual) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.greaterThanOrEqual) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.doubleLeftArrow) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.doubleRightArrow) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.doubleLeftRightArrow) {
 
-						const element = createMathElement("mo");
+						const element = <mo></mo>;
 						element.textContent = operatorList.find(({ name }) => name === item.operator).character;
 						expressionFragment.append(element);
 
 					} else if (item.operator === operators.sum) {
 
-						const underOverElement = createMathElement("munderover");
+						const underOverElement = <munderover></munderover>;
 						const bottomElement = recursiveRender(item.startExpression);
 						const topElement = recursiveRender(item.endExpression);
-						const sigmaElement = createMathElement("mo");
+						const sigmaElement = <mo></mo>;
 						sigmaElement.textContent = operatorList.find(({ name }) => name === item.operator).character;
 
 						underOverElement.append(sigmaElement, bottomElement, topElement);
 
-						const container = createMathElement("mrow");
+						const container = <mrow></mrow>;
 						container.append(underOverElement, recursiveRender(item.expression));
 						expressionFragment.append(container);
 
 					} else if (item.operator === operators.integral) {
 
-						const underOverElement = createMathElement("msubsup");
+						const underOverElement = <msubsup></msubsup>;
 						const lowerLimitElement = recursiveRender(item.lowerLimit);
 						const upperLimitElement = recursiveRender(item.upperLimit);
-						const integralElement = createMathElement("mo");
+						const integralElement = <mo></mo>;
 						integralElement.textContent = operatorList.find(({ name }) => name === item.operator).character;
 
 						underOverElement.append(integralElement, lowerLimitElement, upperLimitElement);
 
-						const differentialElement = createMathElement("mrow");
-						const dElement = createMathElement("mo");
+						const differentialElement = <mrow></mrow>;
+						const dElement = <mo></mo>;
 						dElement.textContent = "d";
 						dElement.setAttribute("rspace", "0");
 						differentialElement.append(dElement);
 						differentialElement.append(recursiveRender(item.integrationVariable));
 
-						const container = createMathElement("mrow");
+						const container = <mrow></mrow>;
 						container.append(underOverElement, recursiveRender(item.integrand), differentialElement);
 						expressionFragment.append(container);
 
@@ -215,7 +214,7 @@ export default (/** @type {any[]} */ mathTree) => {
 				} else if (item.category === categories.keyword) {
 
 					if (item.keywordName === keywords.pi) {
-						const element = createMathElement("mi");
+						const element = <mi></mi>;
 						element.innerHTML = "&pi;";
 
 						expressionFragment.append(element);
@@ -223,45 +222,45 @@ export default (/** @type {any[]} */ mathTree) => {
 
 				} else if (item.category === categories.variable) {
 
-					const element = createMathElement("mi");
+					const element = <mi></mi>;
 					element.textContent = item.variable;
 
 					expressionFragment.append(element);
 
 				} else if (item.category === categories.number) {
 
-					const element = createMathElement("mn");
+					const element = <mn></mn>;
 					element.textContent = item.number;
 
 					expressionFragment.append(element);
 
 				} else if (item.category === categories.anyBracket) {
 
-					const openingBracket = createMathElement("mo");
+					const openingBracket = <mo></mo>;
 					openingBracket.textContent = allBracketsSyntaxes.find(({ name, type }) => type === categories.anyOpeningBracket && name == item.anyBracketType).syntax;
 
-					const closingBracket = createMathElement("mo");
+					const closingBracket = <mo></mo>;
 					closingBracket.textContent = allBracketsSyntaxes.find(({ name, type }) => type === categories.anyClosingBracket && name == item.anyBracketType).syntax;
 
-					const container = createMathElement("mrow");
+					const container = <mrow></mrow>;
 					container.append(openingBracket, recursiveRender(item.content), closingBracket);
 					expressionFragment.append(container);
 
 				} else if (item.category === categories.function) {
 
-					const mathRow = createMathElement("mrow");
+					const mathRow = <mrow></mrow>;
 
-					const functionNameElement = createMathElement("mi");
+					const functionNameElement = <mi></mi>;
 					functionNameElement.textContent = item.functionName;
 					mathRow.append(functionNameElement);
 
-					const openingBracket = createMathElement("mo");
+					const openingBracket = <mo></mo>;
 					openingBracket.textContent = "(";
 					mathRow.append(openingBracket);
 
 					mathRow.append(recursiveRender(item.parameters));
 
-					const closingBracket = createMathElement("mo");
+					const closingBracket = <mo></mo>;
 					closingBracket.textContent = ")";
 					mathRow.append(closingBracket);
 
@@ -271,13 +270,13 @@ export default (/** @type {any[]} */ mathTree) => {
 			}
 
 			if (expressionIndex >= 1) {
-				const commaElement = createMathElement("mo");
+				const commaElement = <mo></mo>;
 				commaElement.textContent = ",";
 				fragment.append(commaElement);
 			}
 
 			if (expression.length !== 1 && tree.length === 1 && !outerElement) {
-				const mathRow = createMathElement("mrow");
+				const mathRow = <mrow></mrow>;
 				mathRow.append(expressionFragment);
 				fragment.append(mathRow);
 			} else {
@@ -286,7 +285,7 @@ export default (/** @type {any[]} */ mathTree) => {
 		}
 
 		if (tree.length !== 1 && !outerElement) {
-			const mathRow = createMathElement("mrow");
+			const mathRow = <mrow></mrow>;
 			mathRow.append(fragment);
 			return mathRow;
 		} else {
diff --git a/tsconfig.json b/tsconfig.json
index 0c70578..43428b0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,8 +2,6 @@
 	"extends": "winzig-types/tsconfig/tsconfig.base.json",
 	"compilerOptions": {
 		"types": ["winzig-types", "better-typescript"],
-		"noImplicitAny": false,
-		"noUnusedParameters": false,
 	},
 	"exclude": ["./appfiles/"],
 }
\ No newline at end of file