diff --git a/package-lock.json b/package-lock.json
index da5ec238..764a8f68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "obsidian-modal-form",
-    "version": "1.40.4",
+    "version": "1.46.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "obsidian-modal-form",
-            "version": "1.40.4",
+            "version": "1.46.0",
             "license": "MIT",
             "dependencies": {
                 "fp-ts": "^2.16.1",
@@ -2662,12 +2662,12 @@
             }
         },
         "node_modules/braces": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-            "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+            "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
             "dev": true,
             "dependencies": {
-                "fill-range": "^7.0.1"
+                "fill-range": "^7.1.1"
             },
             "engines": {
                 "node": ">=8"
@@ -3641,9 +3641,9 @@
             }
         },
         "node_modules/fill-range": {
-            "version": "7.0.1",
-            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-            "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+            "version": "7.1.1",
+            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+            "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
             "dev": true,
             "dependencies": {
                 "to-regex-range": "^5.0.1"
diff --git a/src/FormModal.svelte b/src/FormModal.svelte
new file mode 100644
index 00000000..2baf57f7
--- /dev/null
+++ b/src/FormModal.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { App } from "obsidian";
+    import { FormDefinition } from "src/core/formDefinition";
+    import { makeFormEngine } from "src/store/formStore";
+    import InputField from "src/views/components/Form/InputField.svelte";
+    import ObsidianInputWrapper from "src/views/components/Form/ObsidianInputWrapper.svelte";
+    import DocumentBlock from "./views/components/Form/DocumentBlock.svelte";
+    import InputDataview from "./views/components/Form/InputDataview.svelte";
+    import InputFolder from "./views/components/Form/InputFolder.svelte";
+    import InputNote from "./views/components/Form/InputNote.svelte";
+    import InputTag from "./views/components/Form/InputTag.svelte";
+    import InputTextArea from "./views/components/Form/InputTextArea.svelte";
+    import MultiSelectField from "./views/components/Form/MultiSelectField.svelte";
+    import ObsidianSelect from "./views/components/Form/ObsidianSelect.svelte";
+    import ObsidianToggle from "./views/components/Form/ObsidianToggle.svelte";
+    import InputSlider from "./views/components/Form/inputSlider.svelte";
+    export let app: App;
+    export let reportFormErrors: (errors: string[]) => void;
+    export let formEngine: ReturnType<typeof makeFormEngine>;
+    export let fields: FormDefinition["fields"];
+    $: errors = formEngine.errors;
+    $: $errors.length && reportFormErrors($errors);
+</script>
+
+{#each fields as definition}
+    {@const { value, errors } = formEngine.addField(definition)}
+    {#if definition.input.type === "select"}
+        <ObsidianSelect input={definition.input} field={definition} {value} {errors} />
+    {:else if definition.input.type === "toggle"}
+        <ObsidianToggle field={definition} {value} />
+    {:else if definition.input.type === "folder"}
+        <InputFolder field={definition} {value} {app} />
+    {:else if definition.input.type === "dataview"}
+        <InputDataview field={definition} input={definition.input} {value} {errors} {app} />
+    {:else if definition.input.type === "note"}
+        <InputNote field={definition} input={definition.input} {value} {errors} {app} />
+    {:else if definition.input.type === "textarea"}
+        <InputTextArea field={definition} {value} {errors} />
+    {:else if definition.input.type === "document_block"}
+        <!-- I need to put this separated to be able to target the correct slot, it does not work inside #if -->
+        <ObsidianInputWrapper
+            label={definition.label || definition.name}
+            description={definition.description}
+        >
+            <DocumentBlock field={definition.input} form={formEngine} slot="info" />
+        </ObsidianInputWrapper>
+    {:else}
+        <ObsidianInputWrapper
+            {errors}
+            label={definition.label || definition.name}
+            description={definition.description}
+            required={definition.isRequired}
+        >
+            {#if definition.input.type === "multiselect"}
+                <MultiSelectField input={definition.input} {value} {errors} {app} />
+            {:else if definition.input.type === "slider"}
+                <InputSlider input={definition.input} {value} />
+            {:else if definition.input.type === "tag"}
+                <InputTag input={definition.input} {value} {errors} {app} />
+            {:else}
+                <InputField {value} inputType={definition.input.type} />
+            {/if}
+        </ObsidianInputWrapper>
+    {/if}
+{/each}
diff --git a/src/FormModal.ts b/src/FormModal.ts
index 5ee2b1ed..43cbc593 100644
--- a/src/FormModal.ts
+++ b/src/FormModal.ts
@@ -1,35 +1,24 @@
-import { E, absurd, parseFunctionBody, pipe, throttle } from "@std";
-import * as R from "fp-ts/Record";
-import * as TE from "fp-ts/TaskEither";
-import { App, Modal, Platform, Setting, sanitizeHTMLToDom } from "obsidian";
+import { throttle } from "@std";
+import { App, Modal, Setting } from "obsidian";
 import { SvelteComponent } from "svelte";
-import { Writable } from "svelte/store";
+import FormModalComponent from "./FormModal.svelte";
 import FormResult, { type ModalFormData } from "./core/FormResult";
 import { formDataFromFormDefaults } from "./core/formDataFromFormDefaults";
 import type { FormDefinition, FormOptions } from "./core/formDefinition";
-import { FieldValue, FormEngine, makeFormEngine } from "./store/formStore";
-import { FileSuggest } from "./suggesters/suggestFile";
-import { FolderSuggest } from "./suggesters/suggestFolder";
-import { DataviewSuggest } from "./suggesters/suggestFromDataview";
-import { log_error, log_notice } from "./utils/Log";
-import { get_tfiles_from_folder } from "./utils/files";
-import MultiSelect from "./views/components/MultiSelect.svelte";
-import { MultiSelectModel, MultiSelectTags } from "./views/components/MultiSelectModel";
+import { FormEngine, makeFormEngine } from "./store/formStore";
+import { log_notice } from "./utils/Log";
 
 export type SubmitFn = (formResult: FormResult) => void;
 
 const notify = throttle(
-    (msg: string) => log_notice("⚠️  The form has errors ⚠️", msg, "notice-warning"),
+    (msg: string[]) => log_notice("⚠️  The form has errors ⚠️", msg.join("\n"), "notice-warning"),
     2000,
 );
-const notifyError = (title: string) =>
-    throttle((msg: string) => log_notice(`🚨 ${title} 🚨`, msg, "notice-error"), 2000);
-
 export class FormModal extends Modal {
     svelteComponents: SvelteComponent[] = [];
     initialFormValues: ModalFormData;
     subscriptions: (() => void)[] = [];
-    formEngine: FormEngine<FieldValue>;
+    formEngine: FormEngine;
     constructor(
         app: App,
         private modalDefinition: FormDefinition,
@@ -62,236 +51,17 @@ export class FormModal extends Modal {
         if (this.modalDefinition.customClassname)
             contentEl.addClass(this.modalDefinition.customClassname);
         contentEl.createEl("h1", { text: this.modalDefinition.title });
-        this.modalDefinition.fields.forEach((definition) => {
-            const name = definition.label || definition.name;
-            const required = definition.isRequired ?? false;
-            const fieldBase = new Setting(contentEl)
-                .setName(`${name} ${required ? "*" : ""}`.trim())
-                .setDesc(definition.description);
-            // This intermediary constants are necessary so typescript can narrow down the proper types.
-            // without them, you will have to use the whole access path (definition.input.folder),
-            // and it is no specific enough when you use it in a switch statement.
-            const fieldInput = definition.input;
-            const type = fieldInput.type;
-            const initialValue = this.initialFormValues[definition.name];
-            const fieldStore = this.formEngine.addField(definition);
-            const subToErrors = (input: HTMLInputElement | HTMLTextAreaElement) => {
-                this.subscriptions.push(
-                    fieldStore.errors.subscribe((errs) => {
-                        errs.length > 0 ? console.log("errors", errs) : void 0;
-                        errs.forEach(notify);
-                        input.setCustomValidity(errs.join("\n"));
-                    }),
-                );
-            };
-            switch (type) {
-                case "textarea": {
-                    fieldBase.setClass("modal-form-textarea");
-                    return fieldBase.addTextArea((textEl) => {
-                        textEl.onChange(fieldStore.value.set);
-                        subToErrors(textEl.inputEl);
-                        if (typeof initialValue === "string") {
-                            textEl.setValue(initialValue);
-                        }
-                        textEl.inputEl.rows = 6;
-                        if (Platform.isIosApp) textEl.inputEl.style.width = "100%";
-                        else if (Platform.isDesktopApp) {
-                            textEl.inputEl.rows = 10;
-                        }
-                    });
-                }
-                case "email":
-                case "tel":
-                case "date":
-                case "time":
-                case "text":
-                    return fieldBase.addText((text) => {
-                        text.inputEl.type = type;
-                        subToErrors(text.inputEl);
-                        text.onChange(fieldStore.value.set);
-                        initialValue !== undefined && text.setValue(String(initialValue));
-                    });
-                case "number":
-                    return fieldBase.addText((text) => {
-                        text.inputEl.type = "number";
-                        text.inputEl.step = "any";
-                        subToErrors(text.inputEl);
-                        text.onChange((val) => {
-                            if (val !== "") {
-                                fieldStore.value.set(Number(val) + "");
-                            }
-                        });
-                        initialValue !== undefined && text.setValue(String(initialValue));
-                    });
-                case "datetime":
-                    return fieldBase.addText((text) => {
-                        text.inputEl.type = "datetime-local";
-                        initialValue !== undefined && text.setValue(String(initialValue));
-                        subToErrors(text.inputEl);
-                        text.onChange(fieldStore.value.set);
-                    });
-                case "toggle":
-                    return fieldBase.addToggle((toggle) => {
-                        toggle.setValue(!!initialValue);
-                        return toggle.onChange(fieldStore.value.set);
-                    });
-                case "note":
-                    return fieldBase.addText((element) => {
-                        new FileSuggest(
-                            this.app,
-                            element.inputEl,
-                            {
-                                renderSuggestion(file) {
-                                    return file.basename;
-                                },
-                                selectSuggestion(file) {
-                                    return file.basename;
-                                },
-                            },
-                            fieldInput.folder,
-                        );
-                        subToErrors(element.inputEl);
-                        element.onChange(fieldStore.value.set);
-                    });
-                case "folder":
-                    return fieldBase.addText((element) => {
-                        new FolderSuggest(element.inputEl, this.app);
-                        subToErrors(element.inputEl);
-                        element.onChange(fieldStore.value.set);
-                    });
-                case "slider":
-                    return fieldBase.addSlider((slider) => {
-                        slider.setLimits(fieldInput.min, fieldInput.max, 1);
-                        slider.setDynamicTooltip();
-                        if (typeof initialValue === "number") {
-                            slider.setValue(initialValue);
-                        } else {
-                            slider.setValue(fieldInput.min);
-                        }
-                        slider.onChange(fieldStore.value.set);
-                    });
-                case "multiselect": {
-                    fieldStore.value.set(initialValue ?? []);
-                    this.svelteComponents.push(
-                        new MultiSelect({
-                            target: fieldBase.controlEl,
-                            props: {
-                                model: MultiSelectModel(
-                                    fieldInput,
-                                    this.app,
-                                    fieldStore.value as Writable<string[]>,
-                                ),
-                                values: fieldStore.value as Writable<string[]>,
-                                errors: fieldStore.errors,
-                                setting: fieldBase,
-                            },
-                        }),
-                    );
-                    return;
-                }
-                case "tag": {
-                    fieldStore.value.set(initialValue ?? []);
-                    this.svelteComponents.push(
-                        new MultiSelect({
-                            target: fieldBase.controlEl,
-                            props: {
-                                values: fieldStore.value as Writable<string[]>,
-                                setting: fieldBase,
-                                errors: fieldStore.errors,
-                                model: Promise.resolve(
-                                    MultiSelectTags(
-                                        fieldInput,
-                                        this.app,
-                                        fieldStore.value as Writable<string[]>,
-                                    ),
-                                ),
-                            },
-                        }),
-                    );
-                    return;
-                }
-                case "dataview": {
-                    const query = fieldInput.query;
-                    return fieldBase.addText((element) => {
-                        new DataviewSuggest(element.inputEl, query, this.app);
-                        element.onChange(fieldStore.value.set);
-                        subToErrors(element.inputEl);
-                    });
-                }
-                case "select": {
-                    const source = fieldInput.source;
-                    switch (source) {
-                        case "fixed":
-                            return fieldBase.addDropdown((element) => {
-                                fieldInput.options.forEach((option) => {
-                                    element.addOption(option.value, option.label);
-                                });
-                                initialValue !== undefined && element.setValue(String(initialValue));
-                                fieldStore.value.set(element.getValue());
-                                element.onChange(fieldStore.value.set);
-                            });
-
-                        case "notes":
-                            return fieldBase.addDropdown((element) => {
-                                const files = get_tfiles_from_folder(fieldInput.folder, this.app);
-                                pipe(
-                                    files,
-                                    E.map((files) =>
-                                        files.reduce((acc: Record<string, string>, option) => {
-                                            acc[option.basename] = option.basename;
-                                            return acc;
-                                        }, {}),
-                                    ),
-                                    E.mapLeft((err) => {
-                                        log_error(err);
-                                        return err;
-                                    }),
-                                    E.map((options) => {
-                                        element.addOptions(options);
-                                    }),
-                                );
-                                fieldStore.value.set(element.getValue());
-                                element.onChange(fieldStore.value.set);
-                            });
-                        default:
-                            absurd(source);
-                    }
-                    break;
-                }
-                case "document_block": {
-                    const functionBody = fieldInput.body;
-                    const functionParsed = parseFunctionBody<[Record<string, FieldValue>], string>(
-                        functionBody,
-                        "form",
-                    );
-                    const domNode = fieldBase.infoEl.createDiv();
-                    const sub = this.formEngine.subscribe((form) => {
-                        pipe(
-                            functionParsed,
-                            TE.fromEither,
-                            TE.chainW((fn) =>
-                                pipe(
-                                    form.fields,
-                                    R.filterMap((field) => field.value),
-                                    fn,
-                                ),
-                            ),
-                            TE.match(
-                                (error) => {
-                                    console.error(error);
-                                    notifyError("Error in document block")(String(error));
-                                },
-                                (newText) => domNode.setText(sanitizeHTMLToDom(newText)),
-                            ),
-                        )();
-                    });
-                    return this.subscriptions.push(sub);
-                }
-
-                default:
-                    return absurd(type);
-            }
-        });
+        this.svelteComponents.push(
+            new FormModalComponent({
+                target: contentEl,
+                props: {
+                    formEngine: this.formEngine,
+                    fields: this.modalDefinition.fields,
+                    app: this.app,
+                    reportFormErrors: notify,
+                },
+            }),
+        );
 
         const buttons = new Setting(contentEl).addButton((btn) =>
             btn.setButtonText("Cancel").onClick(this.formEngine.triggerCancel),
diff --git a/src/core/InputDefinitionSchema.ts b/src/core/InputDefinitionSchema.ts
index e9714464..841e26ad 100644
--- a/src/core/InputDefinitionSchema.ts
+++ b/src/core/InputDefinitionSchema.ts
@@ -1,20 +1,22 @@
-import { trySchemas, ParsingFn, parseC } from "@std";
-import { AllFieldTypes, AllSources } from "./formDefinition";
+import { ParsingFn, parseC, trySchemas } from "@std";
+import { absurd } from "fp-ts/function";
 import {
-    object,
-    number,
-    literal,
-    array,
-    string,
-    union,
-    optional,
-    minLength,
-    toTrimmed,
     BaseSchema,
-    enumType,
     Output,
+    array,
     boolean,
+    enumType,
+    is,
+    literal,
+    minLength,
+    number,
+    object,
+    optional,
+    string,
+    toTrimmed,
+    union,
 } from "valibot";
+import { AllFieldTypes, AllSources } from "./formDefinition";
 
 /**
  * Here are the definition for the input types.
@@ -41,6 +43,10 @@ const InputBasicTypeSchema = enumType([
     "email",
     "tel",
 ]);
+
+export const isBasicInputType = (type: string) => is(InputBasicTypeSchema, type);
+export type BasicInputType = Output<typeof InputBasicTypeSchema>;
+
 //=========== Schema definitions
 export const SelectFromNotesSchema = object({
     type: literal("select"),
@@ -162,7 +168,37 @@ export type inputSlider = Output<typeof InputSliderSchema>;
 export type inputNoteFromFolder = Output<typeof InputNoteFromFolderSchema>;
 export type inputDataviewSource = Output<typeof InputDataviewSourceSchema>;
 export type inputSelectFixed = Output<typeof InputSelectFixedSchema>;
+export type Select = selectFromNotes | inputSelectFixed;
 export type basicInput = Output<typeof InputBasicSchema>;
 export type multiselect = Output<typeof MultiselectSchema>;
 export type inputTag = Output<typeof InputTagSchema>;
 export type inputType = Output<typeof InputTypeSchema>;
+
+export type DocumentBlock = Output<typeof DocumentBlock>;
+
+export function requiresListOfStrings(input: inputType): boolean {
+    const type = input.type;
+    switch (type) {
+        case "multiselect":
+        case "tag":
+            return true;
+        case "select":
+        case "dataview":
+        case "note":
+        case "folder":
+        case "slider":
+        case "document_block":
+        case "number":
+        case "text":
+        case "date":
+        case "time":
+        case "datetime":
+        case "textarea":
+        case "toggle":
+        case "email":
+        case "tel":
+            return false;
+        default:
+            return absurd(type);
+    }
+}
diff --git a/src/core/index.ts b/src/core/index.ts
new file mode 100644
index 00000000..18bae0a7
--- /dev/null
+++ b/src/core/index.ts
@@ -0,0 +1 @@
+export * as input from "./InputDefinitionSchema";
diff --git a/src/store/formStore.ts b/src/store/formStore.ts
index a573d6ea..a44c790d 100644
--- a/src/store/formStore.ts
+++ b/src/store/formStore.ts
@@ -1,13 +1,16 @@
+import * as R from "fp-ts/Record";
 // This is the store that represents a runtime form. It is a writable store that contains the current state of the form
 // and the errors that are present in the form. It is used by the Form component to render the form and to update the
 
-import { NonEmptyArray, pipe } from "@std";
+import { NonEmptyArray, flow, pipe } from "@std";
 import * as A from "fp-ts/Array";
 import * as E from "fp-ts/Either";
 import * as O from "fp-ts/Option";
 import { Option } from "fp-ts/Option";
 import { fromEntries, toEntries } from "fp-ts/Record";
 import { absurd } from "fp-ts/function";
+import { input } from "src/core";
+import { FieldDefinition } from "src/core/formDefinition";
 import { Readable, Writable, derived, get, writable } from "svelte/store";
 
 type Rule = { tag: "required"; message: string }; //| { tag: 'minLength', length: number, message: string } | { tag: 'maxLength', length: number, message: string } | { tag: 'pattern', pattern: RegExp, message: string };
@@ -37,7 +40,7 @@ type FormStore<T extends FieldValue> = {
 
 // TODO: instead of making the whole engine generic, make just the addField method generic extending the type of the field value
 // Then, the whole formEngine can be typed as FormEngine<FieldValue>
-export interface FormEngine<T extends FieldValue> {
+export interface FormEngine {
     /**
      * Adds a field to the form engine.
      * It returns an object with a writable store that represents the value of the field,
@@ -45,14 +48,14 @@ export interface FormEngine<T extends FieldValue> {
      * Use them to bind the field to the form and be notified of errors.
      * @param field a field definition to start tracking
      */
-    addField: (field: { name: string; label?: string; isRequired?: boolean }) => {
-        value: Writable<T>;
+    addField(field: { name: string; label?: string; isRequired?: boolean }): {
+        value: Writable<FieldValue>;
         errors: Readable<string[]>;
     };
     /**
      * Subscribes to the form store. This method is required to conform to the svelte store interface.
      */
-    subscribe: Readable<FormStore<T>>["subscribe"];
+    subscribe: Readable<FormStore<FieldValue>>["subscribe"];
     /**
      * Readable store that represents the validity of the form.
      * If any of the fields in the form have errors, this will be false.
@@ -69,6 +72,7 @@ export interface FormEngine<T extends FieldValue> {
      * or even persist the form state to allow the user to resume later.
      */
     triggerCancel: () => void;
+    errors: Readable<string[]>;
 }
 function nonEmptyValue(s: FieldValue): Option<FieldValue> {
     switch (typeof s) {
@@ -144,15 +148,15 @@ type makeFormEngineArgs<T> = {
     defaultValues?: Record<string, T>;
 };
 
-export function makeFormEngine<T extends FieldValue>({
+export function makeFormEngine({
     onSubmit,
     onCancel,
     defaultValues = {},
-}: makeFormEngineArgs<T>): FormEngine<T> {
-    const formStore: Writable<FormStore<T>> = writable({ fields: {}, status: "draft" });
-    // Creates helper functions to modify the store immutably
-    function setFormField(name: string) {
-        // Set the initial value of the field
+}: makeFormEngineArgs<FieldValue>): FormEngine {
+    const formStore: Writable<FormStore<FieldValue>> = writable({ fields: {}, status: "draft" });
+    /** Creates helper functions to modify the store immutably*/
+    function setFormField({ name, input }: FieldDefinition) {
+        /** Set the initial value of the field*/
         function initField(errors = [], rules?: Rule) {
             formStore.update((form) => {
                 return {
@@ -164,7 +168,7 @@ export function makeFormEngine<T extends FieldValue>({
                 };
             });
         }
-        function setValue(value: T) {
+        function setValue<T extends FieldValue>(value: T) {
             formStore.update((form) => {
                 const field = form.fields[name];
                 if (!field) {
@@ -183,7 +187,7 @@ export function makeFormEngine<T extends FieldValue>({
         return { initField, setValue };
     }
 
-    function setErrors(failedFields: Field<T>[]) {
+    function setErrors<T extends FieldValue>(failedFields: Field<T>[]) {
         formStore.update((form) => {
             return pipe(
                 failedFields,
@@ -197,9 +201,19 @@ export function makeFormEngine<T extends FieldValue>({
         });
     }
 
+    const errors = derived(formStore, ({ fields }) =>
+        pipe(
+            fields,
+            R.toEntries,
+            A.filterMap(([_, f]) => (f.errors.length > 0 ? O.some(f.errors) : O.none)),
+            A.flatten,
+        ),
+    );
+
     // TODO: dependent fields, handle more than just strings
     return {
         subscribe: formStore.subscribe,
+        errors,
         isValid: derived(formStore, ({ fields }) =>
             pipe(
                 fields,
@@ -222,11 +236,11 @@ export function makeFormEngine<T extends FieldValue>({
             formStore.update((form) => ({ ...form, status: "cancelled" }));
             onCancel?.();
         },
-        addField: (field) => {
-            const { initField: setField, setValue } = setFormField(field.name);
+        addField(field: FieldDefinition) {
+            const { initField: setField, setValue } = setFormField(field);
             setField([], field.isRequired ? requiredRule(field.label || field.name) : undefined);
             const fieldStore = derived(formStore, ({ fields }) => fields[field.name]);
-            const fieldValueStore: Writable<T> = {
+            const fieldValueStore: Writable<FieldValue> = {
                 subscribe(cb) {
                     return fieldStore.subscribe((x) =>
                         pipe(
@@ -250,7 +264,9 @@ export function makeFormEngine<T extends FieldValue>({
                         const newValue = pipe(
                             // fuck prettier
                             current.value,
-                            O.map(updater),
+                            input.requiresListOfStrings(field.input)
+                                ? O.match(() => O.of(updater([])), flow(updater, O.of))
+                                : O.map(updater),
                         );
                         return {
                             ...form,
diff --git a/src/views/FormBuilder.svelte b/src/views/FormBuilder.svelte
index 7bbe638f..51ea7a84 100644
--- a/src/views/FormBuilder.svelte
+++ b/src/views/FormBuilder.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
+    import { A, pipe } from "@std";
+    import { App, setIcon } from "obsidian";
     import {
-        type EditableFormDefinition,
-        type FormDefinition,
+        InputTypeReadable,
         isValidFormDefinition,
         validateFields,
-        InputTypeReadable,
+        type EditableFormDefinition,
+        type FormDefinition,
     } from "src/core/formDefinition";
-    import { App, setIcon } from "obsidian";
-    import InputBuilderDataview from "./components/inputBuilderDataview.svelte";
-    import InputBuilderSelect from "./components/InputBuilderSelect.svelte";
-    import InputFolder from "./components/InputFolder.svelte";
+    import { ParsedTemplate, parsedTemplateToString } from "src/core/template/templateParser";
     import { log_error } from "src/utils/Log";
     import { ModalFormError } from "src/utils/ModalFormError";
     import FormRow from "./components/FormRow.svelte";
-    import Toggle from "./components/Toggle.svelte";
-    import TemplateEditor from "./components/TemplateEditor.svelte";
-    import { A, pipe } from "@std";
-    import Tabs from "./components/Tabs.svelte";
-    import { ParsedTemplate, parsedTemplateToString } from "src/core/template/templateParser";
     import InputBuilderDocumentBlock from "./components/InputBuilderDocumentBlock.svelte";
+    import InputFolder from "./components/InputBuilderFolder.svelte";
+    import InputBuilderSelect from "./components/InputBuilderSelect.svelte";
+    import Tabs from "./components/Tabs.svelte";
+    import TemplateEditor from "./components/TemplateEditor.svelte";
+    import Toggle from "./components/Toggle.svelte";
+    import InputBuilderDataview from "./components/inputBuilderDataview.svelte";
 
     export let definition: EditableFormDefinition = {
         title: "",
diff --git a/src/views/components/Form/DocumentBlock.svelte b/src/views/components/Form/DocumentBlock.svelte
new file mode 100644
index 00000000..919f09e4
--- /dev/null
+++ b/src/views/components/Form/DocumentBlock.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { parseFunctionBody, pipe } from "@std";
+    import * as R from "fp-ts/Record";
+    import * as TE from "fp-ts/TaskEither";
+    import { sanitizeHTMLToDom } from "obsidian";
+    import { input } from "src/core";
+    import { FieldValue, FormEngine } from "src/store/formStore";
+    import { notifyError } from "src/utils/Log";
+    import { Subscriber } from "svelte/store";
+    type GetSubscription<T> = T extends Subscriber<infer U> ? U : never;
+
+    export let form: FormEngine;
+    export let field: input.DocumentBlock;
+    $: functionParsed = parseFunctionBody<[Record<string, FieldValue>], string>(field.body, "form");
+    /* I probably... probably should better export the real type the FormEngine has rather than this mess of types... but I wanted to keep that private to the file...
+    You can argue that I am exposing it with all tis dark magic, but at least this way it is kept in sync if the type changes?
+    */
+    function generateContent(
+        parent: HTMLElement,
+        form: GetSubscription<Parameters<FormEngine["subscribe"]>[0]>,
+    ) {
+        pipe(
+            functionParsed,
+            TE.fromEither,
+            TE.chainW((fn) =>
+                pipe(
+                    form.fields,
+                    R.filterMap((field) => field.value),
+                    fn,
+                ),
+            ),
+            TE.match(
+                (error) => {
+                    console.error(error);
+                    notifyError("Error in document block")(String(error));
+                },
+                (newText) => parent.setText(sanitizeHTMLToDom(newText)),
+            ),
+        )();
+        return {
+            update(newForm: GetSubscription<Parameters<FormEngine["subscribe"]>[0]>) {
+                generateContent(parent, newForm);
+            },
+        };
+    }
+</script>
+
+<div class="document-block" use:generateContent={$form}></div>
diff --git a/src/views/components/Form/InputDataview.svelte b/src/views/components/Form/InputDataview.svelte
new file mode 100644
index 00000000..35fdfe71
--- /dev/null
+++ b/src/views/components/Form/InputDataview.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { App } from "obsidian";
+    import { input as I } from "src/core";
+    import { FieldDefinition } from "src/core/formDefinition";
+    import { FieldValue } from "src/store/formStore";
+    import { DataviewSuggest } from "src/suggesters/suggestFromDataview";
+    import { Readable, Writable } from "svelte/store";
+    import ObsidianInputWrapper from "./ObsidianInputWrapper.svelte";
+    export let field: FieldDefinition;
+    export let input: I.inputDataviewSource;
+    export let value: Writable<FieldValue>;
+    export let app: App;
+    export let errors: Readable<string[]>;
+    function dataviewSuggest(el: HTMLInputElement) {
+        new DataviewSuggest(el, input.query, app);
+    }
+</script>
+
+<ObsidianInputWrapper {errors} label={field.label || field.name} description={field.description}>
+    <input type="text" bind:value={$value} use:dataviewSuggest />
+</ObsidianInputWrapper>
diff --git a/src/views/components/Form/InputField.svelte b/src/views/components/Form/InputField.svelte
new file mode 100644
index 00000000..6d5835d8
--- /dev/null
+++ b/src/views/components/Form/InputField.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    /** This component is only meant for the most basic input types. If any of those types starts to require more fancy setup it should be moved to it's own separated input*/
+    import { type FieldValue } from "src/store/formStore";
+    import { Writable } from "svelte/store";
+    export let value: Writable<FieldValue>;
+    export let inputType: "number" | "text" | "date" | "time" | "datetime" | "email" | "tel";
+</script>
+
+{#if inputType === "number"}
+    <input type="number" bind:value={$value} />
+{:else if inputType === "text"}
+    <input type="text" bind:value={$value} />
+{:else if inputType === "email"}
+    <input type="email" bind:value={$value} />
+{:else if inputType === "tel"}
+    <input type="tel" bind:value={$value} />
+{:else if inputType === "date"}
+    <input type="date" bind:value={$value} />
+{:else if inputType === "time"}
+    <input type="time" bind:value={$value} />
+{:else if inputType === "datetime"}
+    <input type="datetime-local" bind:value={$value} />
+{/if}
+
+<style>
+    textarea {
+        width: 100%;
+        flex: 1;
+        padding: 0.5rem;
+    }
+</style>
diff --git a/src/views/components/Form/InputFolder.svelte b/src/views/components/Form/InputFolder.svelte
new file mode 100644
index 00000000..42735179
--- /dev/null
+++ b/src/views/components/Form/InputFolder.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { App, SearchComponent, Setting } from "obsidian";
+    import { FieldDefinition } from "src/core/formDefinition";
+    import { FieldValue } from "src/store/formStore";
+    import { FolderSuggest } from "src/suggesters/suggestFolder";
+    import { Writable } from "svelte/store";
+    import { useSetting } from "./useObsidianSetting";
+    export let field: FieldDefinition;
+    export let value: Writable<FieldValue>;
+    export let app: App;
+    let search_: SearchComponent | undefined;
+    function customizer(setting: Setting) {
+        setting.addSearch((component) => {
+            new FolderSuggest(component.inputEl, app);
+            search_ = component;
+            component.onChange((v) => {
+                $value = v;
+            });
+        });
+    }
+    $: if (search_) {
+        search_.setValue($value as string);
+    }
+</script>
+
+<div
+    use:useSetting={{
+        name: field.label || field.name,
+        description: field.description || "",
+        customizer,
+    }}
+>
+    <span style="display: none;">dummy to prevent the setting from being the first child</span>
+</div>
diff --git a/src/views/components/Form/InputNote.svelte b/src/views/components/Form/InputNote.svelte
new file mode 100644
index 00000000..6a4bb42d
--- /dev/null
+++ b/src/views/components/Form/InputNote.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { App } from "obsidian";
+    import { input as I } from "src/core";
+    import { FieldDefinition } from "src/core/formDefinition";
+    import { FieldValue } from "src/store/formStore";
+    import { FileSuggest } from "src/suggesters/suggestFile";
+    import { Readable, Writable } from "svelte/store";
+    import ObsidianInputWrapper from "./ObsidianInputWrapper.svelte";
+    export let field: FieldDefinition;
+    export let input: I.inputNoteFromFolder;
+    export let value: Writable<FieldValue>;
+    export let app: App;
+    export let errors: Readable<string[]>;
+    function noteSuggest(el: HTMLInputElement) {
+        new FileSuggest(
+            app,
+            el,
+            {
+                renderSuggestion(file) {
+                    return file.basename;
+                },
+                selectSuggestion(file) {
+                    return file.basename;
+                },
+            },
+            input.folder,
+        );
+    }
+</script>
+
+<ObsidianInputWrapper {errors} label={field.label || field.name} description={field.description}>
+    <input type="text" bind:value={$value} use:noteSuggest />
+</ObsidianInputWrapper>
diff --git a/src/views/components/Form/InputTag.svelte b/src/views/components/Form/InputTag.svelte
new file mode 100644
index 00000000..046d50d6
--- /dev/null
+++ b/src/views/components/Form/InputTag.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { App } from "obsidian";
+    import { input as I } from "src/core";
+    import { FieldValue } from "src/store/formStore";
+    import { Readable, Writable } from "svelte/store";
+    import MultiSelect from "../MultiSelect.svelte";
+    import { MultiSelectTags } from "../MultiSelectModel";
+    export let input: I.inputTag;
+    export let app: App;
+    export let errors: Readable<string[]>;
+    export let value: Writable<FieldValue>;
+    $: model = MultiSelectTags(input, app, value as Writable<string[]>);
+    $: values = value as Writable<string[]>;
+</script>
+
+<MultiSelect {values} {errors} model={Promise.resolve(model)} />
diff --git a/src/views/components/Form/InputTextArea.svelte b/src/views/components/Form/InputTextArea.svelte
new file mode 100644
index 00000000..dafe88e9
--- /dev/null
+++ b/src/views/components/Form/InputTextArea.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { Platform } from "obsidian";
+    import { FieldDefinition } from "src/core/formDefinition";
+    import { FieldValue } from "src/store/formStore";
+    import { Readable, Writable } from "svelte/store";
+    import ObsidianInputWrapper from "./ObsidianInputWrapper.svelte";
+    export let field: FieldDefinition;
+    export let value: Writable<FieldValue>;
+    export let errors: Readable<string[]>;
+    function customizeTextArea(el: HTMLTextAreaElement) {
+        if (Platform.isIosApp) el.style.width = "100%";
+        else if (Platform.isDesktopApp) {
+            el.rows = 10;
+        }
+    }
+</script>
+
+<ObsidianInputWrapper
+    {errors}
+    label={field.label || field.name}
+    description={field.description}
+    className="modal-form-textarea"
+>
+    <textarea bind:value={$value} use:customizeTextArea />
+</ObsidianInputWrapper>
diff --git a/src/views/components/Form/MultiSelectField.svelte b/src/views/components/Form/MultiSelectField.svelte
new file mode 100644
index 00000000..e620d30e
--- /dev/null
+++ b/src/views/components/Form/MultiSelectField.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { App } from "obsidian";
+    import { multiselect } from "src/core/InputDefinitionSchema";
+    import { FieldValue } from "src/store/formStore";
+    import { Readable, Writable } from "svelte/store";
+    import MultiSelect from "../MultiSelect.svelte";
+    import { MultiSelectModel } from "../MultiSelectModel";
+    export let input: multiselect;
+    export let app: App;
+    export let errors: Readable<string[]>;
+    export let value: Writable<FieldValue>;
+    $: model = MultiSelectModel(input, app, value as Writable<string[]>);
+    $: values = value as Writable<string[]>;
+</script>
+
+<MultiSelect {values} {errors} {model} />
diff --git a/src/views/components/Form/ObsidianDropdown.svelte b/src/views/components/Form/ObsidianDropdown.svelte
new file mode 100644
index 00000000..a27a9124
--- /dev/null
+++ b/src/views/components/Form/ObsidianDropdown.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { Setting } from "obsidian";
+    import { inputSelectFixed } from "src/core/InputDefinitionSchema";
+    import { FieldDefinition } from "src/core/formDefinition";
+    import { FieldValue } from "src/store/formStore";
+    import { Writable } from "svelte/store";
+    export let field: FieldDefinition;
+    export let input: inputSelectFixed;
+    export let value: Writable<FieldValue>;
+    let setting: Setting;
+    function addDropdown(element: HTMLElement) {
+        setting = new Setting(element)
+            .addDropdown((dropdown) => {
+                input.options.forEach((option) => {
+                    dropdown.addOption(option.value, option.label);
+                });
+                dropdown.onChange((v) => {
+                    $value = v;
+                });
+            })
+            .setName(field.name)
+            .setDesc(field.description);
+    }
+</script>
+
+<div use:addDropdown></div>
diff --git a/src/views/components/Form/ObsidianInputWrapper.svelte b/src/views/components/Form/ObsidianInputWrapper.svelte
new file mode 100644
index 00000000..fc474f27
--- /dev/null
+++ b/src/views/components/Form/ObsidianInputWrapper.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { readable } from "svelte/store";
+    export let errors = readable([] as string[]);
+    export let label = "";
+    export let description = "";
+    export let required = false;
+    export let className = "";
+</script>
+
+<!-- Trying to emulate native Obsidian settings -->
+<div class="setting-item {className}">
+    <div class="setting-item-info">
+        <div class="setting-item-name">
+            {label}
+            {#if required}
+                <span class="required">*</span>
+            {/if}
+        </div>
+        <div class="setting-item-description">{description}</div>
+        {#each $errors as error}
+            <div class="setting-item-description error">{error}</div>
+        {/each}
+        <slot name="info" />
+    </div>
+    <div class="setting-item-control" class:error={$errors.length > 0}>
+        <slot />
+    </div>
+</div>
+
+<style>
+    .required {
+        color: var(--color-red);
+    }
+    .setting-item {
+        align-items: baseline;
+    }
+    .error {
+        color: var(--text-error);
+    }
+    /** This will correctly produce a css rule scoped to this file, because the global part is prefixed with a scoped class*/
+    .error :global(input) {
+        border-color: var(--text-error);
+    }
+</style>
diff --git a/src/views/components/Form/ObsidianSelect.svelte b/src/views/components/Form/ObsidianSelect.svelte
new file mode 100644
index 00000000..55b5e3bc
--- /dev/null
+++ b/src/views/components/Form/ObsidianSelect.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { E, pipe } from "@std";
+    import { input as I } from "src/core";
+    import { FieldDefinition } from "src/core/formDefinition";
+    import { FieldValue } from "src/store/formStore";
+    import { log_error } from "src/utils/Log";
+    import { get_tfiles_from_folder } from "src/utils/files";
+    import { Readable, Writable } from "svelte/store";
+    import ObsidianInput from "./ObsidianInputWrapper.svelte";
+    export let field: FieldDefinition;
+    export let input: I.Select;
+    export let value: Writable<FieldValue>;
+    export let errors: Readable<string[]>;
+    function getNoteOptions(folder: string): Record<string, string> {
+        const files = get_tfiles_from_folder(folder, app);
+        return pipe(
+            files,
+            E.map((files) =>
+                files.reduce((acc: Record<string, string>, option) => {
+                    acc[option.basename] = option.basename;
+                    return acc;
+                }, {}),
+            ),
+            E.mapLeft((err) => {
+                log_error(err);
+                return err;
+            }),
+            E.getOrElse(() => ({})),
+        );
+    }
+</script>
+
+<ObsidianInput {errors} label={field.label || field.name} description={field.description}>
+    {#if input.source === "fixed"}
+        <select bind:value={$value} class="dropdown">
+            {#each input.options as option}
+                <option value={option.value}>{option.label}</option>
+            {/each}
+        </select>
+    {:else}
+        {@const options = getNoteOptions(input.folder)}
+        <select bind:value={$value} class="dropdown">
+            {#each Object.entries(options) as [value, label]}
+                <option {value}>{label}</option>
+            {/each}
+        </select>
+    {/if}
+</ObsidianInput>
diff --git a/src/views/components/Form/ObsidianToggle.svelte b/src/views/components/Form/ObsidianToggle.svelte
new file mode 100644
index 00000000..9030bda0
--- /dev/null
+++ b/src/views/components/Form/ObsidianToggle.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { Setting, ToggleComponent } from "obsidian";
+    import { FieldDefinition } from "src/core/formDefinition";
+    import { FieldValue } from "src/store/formStore";
+    import { Writable } from "svelte/store";
+    import { useSetting } from "./useObsidianSetting";
+    export let field: FieldDefinition;
+    export let value: Writable<FieldValue>;
+    let toggle_: ToggleComponent | undefined;
+    function customizer(setting: Setting) {
+        setting.addToggle((toggle) => {
+            toggle.onChange((v) => {
+                $value = v;
+            });
+            toggle_ = toggle;
+        });
+    }
+    $: if (toggle_) {
+        toggle_.setValue($value as boolean);
+    }
+</script>
+
+<div
+    use:useSetting={{
+        name: field.label || field.name,
+        description: field.description || "",
+        customizer,
+    }}
+>
+    <span style="display: none;">dummy to prevent the setting from being the first child</span>
+</div>
diff --git a/src/views/components/Form/inputSlider.svelte b/src/views/components/Form/inputSlider.svelte
new file mode 100644
index 00000000..17cc7b18
--- /dev/null
+++ b/src/views/components/Form/inputSlider.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { input as I } from "src/core";
+    import { FieldValue } from "src/store/formStore";
+    import { Writable } from "svelte/store";
+
+    export let value: Writable<FieldValue>;
+    export let input: I.inputSlider;
+</script>
+
+<div class="wrapper">
+    <span>
+        {$value === undefined ? input.min : $value}
+    </span>
+    <input type="range" bind:value={$value} class="slider" min={input.min} max={input.max} />
+</div>
+
+<style>
+    .wrapper {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 1rem;
+    }
+</style>
diff --git a/src/views/components/Form/useObsidianSetting.ts b/src/views/components/Form/useObsidianSetting.ts
new file mode 100644
index 00000000..79491a57
--- /dev/null
+++ b/src/views/components/Form/useObsidianSetting.ts
@@ -0,0 +1,15 @@
+import { Setting } from "obsidian";
+
+export function useSetting(
+    element: HTMLElement,
+    field: {
+        name: string;
+        description: string;
+        customizer?: (setting: Setting) => void;
+    },
+) {
+    new Setting(element)
+        .setName(field.name)
+        .setDesc(field.description)
+        .then(field.customizer || (() => {}));
+}
diff --git a/src/views/components/InputFolder.svelte b/src/views/components/InputBuilderFolder.svelte
similarity index 100%
rename from src/views/components/InputFolder.svelte
rename to src/views/components/InputBuilderFolder.svelte
diff --git a/src/views/components/InputBuilderSelect.svelte b/src/views/components/InputBuilderSelect.svelte
index 0830d4e8..7ba37b87 100644
--- a/src/views/components/InputBuilderSelect.svelte
+++ b/src/views/components/InputBuilderSelect.svelte
@@ -6,11 +6,11 @@
     type option = { label: string; value: string } | string;
 
     import { App, setIcon } from "obsidian";
-    import FormRow from "./FormRow.svelte";
-    import InputFolder from "./InputFolder.svelte";
+    import { canAllowUnknownValues } from "src/core/InputDefinitionSchema";
     import { AllSources } from "src/core/formDefinition";
+    import FormRow from "./FormRow.svelte";
+    import InputFolder from "./InputBuilderFolder.svelte";
     import InputBuilderDataview from "./inputBuilderDataview.svelte";
-    import { canAllowUnknownValues } from "src/core/InputDefinitionSchema";
 
     export let index: number;
     export let source: AllSources = "fixed";
diff --git a/src/views/components/MultiSelect.svelte b/src/views/components/MultiSelect.svelte
index d66ab691..db2b9b7a 100644
--- a/src/views/components/MultiSelect.svelte
+++ b/src/views/components/MultiSelect.svelte
@@ -7,9 +7,9 @@
     export let errors: Readable<string[]>;
     export let values: Writable<string[]>;
     // We take the setting to make it consistent with the other input components
-    export let setting: Setting;
+    export let setting: Setting | undefined = undefined;
 
-    setting.settingEl.setCssStyles({
+    setting?.settingEl.setCssStyles({
         alignItems: "baseline",
     });
 </script>
@@ -28,35 +28,37 @@
             <span class="invalid">{error}</span>
         {/each}
         <div class="badges">
-            {#each $values as value}
-                <div class="badge">
-                    <span>{value}</span>
-                    <button on:click={() => removeValue(value)}>
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            class="svg-icon lucide-x"
-                            ><line x1="18" y1="6" x2="6" y2="18" /><line
-                                x1="6"
-                                y1="6"
-                                x2="18"
-                                y2="18"
-                            /></svg
-                        ></button
-                    >
-                </div>
-            {:else}
-                <div class="badge hidden">
-                    <span>Nothing selected</span>
-                </div>
-            {/each}
+            {#if $values !== undefined}
+                {#each $values as value}
+                    <div class="badge">
+                        <span>{value}</span>
+                        <button on:click={() => removeValue(value)}>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                class="svg-icon lucide-x"
+                                ><line x1="18" y1="6" x2="6" y2="18" /><line
+                                    x1="6"
+                                    y1="6"
+                                    x2="18"
+                                    y2="18"
+                                /></svg
+                            ></button
+                        >
+                    </div>
+                {:else}
+                    <div class="badge hidden">
+                        <span>Nothing selected</span>
+                    </div>
+                {/each}
+            {/if}
         </div>
     {:catch error}
         Failure obtaining the options to display
diff --git a/src/views/components/MultiSelectModel.ts b/src/views/components/MultiSelectModel.ts
index bdb72b38..b0288475 100644
--- a/src/views/components/MultiSelectModel.ts
+++ b/src/views/components/MultiSelectModel.ts
@@ -81,7 +81,7 @@ export async function MultiSelectModel(
 export function MultiSelectTags(
     fieldInput: inputTag,
     app: App,
-    values: Writable<string[]>,
+    values: Writable<string[] | undefined>,
 ): MultiSelectModel {
     const remainingOptions = new Set(
         Object.keys(app.metadataCache.getTags()).map(
@@ -95,7 +95,10 @@ export function MultiSelectTags(
                 remainingOptions,
                 (selected) => {
                     remainingOptions.delete(selected);
-                    values.update((x) => [...x, selected]);
+                    values.update((x) => {
+                        console.log(x);
+                        return x == undefined ? [selected] : [...x, selected];
+                    });
                 },
                 app,
                 true,
@@ -105,7 +108,7 @@ export function MultiSelectTags(
             remainingOptions.add(value);
             values.update((x) =>
                 pipe(
-                    x,
+                    x || [],
                     A.filter((x) => x !== value),
                 ),
             );
diff --git a/src/views/components/ObsidianInput.svelte b/src/views/components/ObsidianInput.svelte
deleted file mode 100644
index 09855722..00000000
--- a/src/views/components/ObsidianInput.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-    import { readable } from "svelte/store";
-    export let errors = readable([] as string[]);
-    export let label = "";
-    export let description = "";
-</script>
-
-<!-- Trying to emulate native Obsidian settings -->
-<div class="setting-item">
-    <div class="setting-item-info">
-        <div class="setting-item-name">{label}</div>
-        <div class="setting-item-description">{description}</div>
-    </div>
-    <div class="setting-item-control">
-        <slot />
-    </div>
-    {#each $errors as error}
-        <p>{error}</p>
-    {/each}
-</div>
diff --git a/src/views/components/TemplateBuilder.ts b/src/views/components/TemplateBuilder.ts
index d971edfe..8a8a418f 100644
--- a/src/views/components/TemplateBuilder.ts
+++ b/src/views/components/TemplateBuilder.ts
@@ -53,7 +53,6 @@ function compileOpenForm(
     const omitOptions =
         fieldsToOmit.length > 0 ? `, ${JSON.stringify({ omit: fieldsToOmit }, null, 8)}` : "";
     const args = `"${formName}"${omitOptions}`;
-    console.log({ args });
     if (usesGlobal) {
         return [`const ${resultName} = await MF.openForm(${args});`];
     }