diff --git a/package.json b/package.json
index 96d08a638..5c071f54b 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,12 @@
   "author": "Michael Brenan",
   "license": "MIT",
   "devDependencies": {
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.1",
     "@codemirror/language": "https://github.com/lishid/cm-language",
+    "@codemirror/search": "^6.5.10",
     "@codemirror/state": "^6.0.1",
-    "@codemirror/view": "^6.0.1",
+    "@codemirror/view": "^6.36.7",
     "@microsoft/api-extractor": "^7.52.7",
     "@types/jest": "^27.0.1",
     "@types/luxon": "^2.3.2",
@@ -45,17 +48,19 @@
     "typescript": "^5.4.2"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.3",
     "@datastructures-js/queue": "^4.2.3",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@replit/codemirror-vim": "^6.3.0",
     "emoji-regex": "^10.2.1",
     "flatqueue": "^2.0.3",
     "localforage": "1.10.0",
     "luxon": "^2.4.0",
     "parsimmon": "^1.18.0",
-    "preact": "^10.17.1",
-    "react-select": "^5.8.0",
+    "preact": "^10.26.6",
+    "react-select": "^5.10.1",
     "sorted-btree": "^1.8.1",
     "sucrase": "3.35.0",
     "yaml": "^2.3.3"
diff --git a/src/api/local-api.tsx b/src/api/local-api.tsx
index 0b40d4317..90d4b59fb 100644
--- a/src/api/local-api.tsx
+++ b/src/api/local-api.tsx
@@ -9,15 +9,15 @@ import { IndexQuery } from "index/types/index-query";
 import { Indexable } from "index/types/indexable";
 import { MarkdownPage } from "index/types/markdown";
 import { App } from "obsidian";
-import { useFileMetadata, useFullQuery, useIndexUpdates, useInterning, useQuery } from "ui/hooks";
+import { useAsync, useFileMetadata, useFullQuery, useIndexUpdates, useInterning, useQuery } from "ui/hooks";
 import * as luxon from "luxon";
 import * as preact from "preact";
 import * as hooks from "preact/hooks";
 import { Result } from "./result";
 import { Group, Stack } from "./ui/layout";
 import { Embed, LineSpanEmbed } from "api/ui/embed";
-import { CURRENT_FILE_CONTEXT, ErrorMessage, Lit, Markdown, ObsidianLink } from "ui/markdown";
-import { CSSProperties } from "preact/compat";
+import { APP_CONTEXT, COMPONENT_CONTEXT, CURRENT_FILE_CONTEXT, DATACORE_CONTEXT, ErrorMessage, Lit, Markdown, ObsidianLink, SETTINGS_CONTEXT } from "ui/markdown";
+import { CSSProperties, Suspense } from "preact/compat";
 import { Literal, Literals } from "expression/literal";
 import { Button, Checkbox, Icon, Slider, Switch, Textbox, VanillaSelect } from "./ui/basics";
 import { TableView } from "./ui/views/table";
@@ -28,6 +28,7 @@ import { ScriptCache } from "./script-cache";
 import { Expression } from "expression/expression";
 import { Card } from "./ui/views/cards";
 import { ListView } from "./ui/views/list";
+import { ControlledEditable } from "ui/fields/editable";
 
 /**
  * Local API provided to specific codeblocks when they are executing.
@@ -184,6 +185,25 @@ export class DatacoreLocalApi {
     /** Execute a textual or typed index query, returning results plus performance metadata. */
     public tryFullQuery(query: string | IndexQuery): Result<SearchResult<Indexable>, string> {
         return this.api.tryFullQuery(query);
+		}
+    //////////////
+    // Contexts //
+    //////////////
+
+    // export the necessary contexts to enable rendering
+    // datacore components outside the datacore plugin
+    // itself
+    get SETTINGS_CONTEXT(): typeof SETTINGS_CONTEXT {
+        return SETTINGS_CONTEXT;
+    }
+    get COMPONENT_CONTEXT(): typeof COMPONENT_CONTEXT {
+        return COMPONENT_CONTEXT;
+    }
+    get DATACORE_CONTEXT(): typeof DATACORE_CONTEXT {
+        return DATACORE_CONTEXT;
+    }
+    get APP_CONTEXT(): typeof APP_CONTEXT {
+        return APP_CONTEXT;
     }
 
     /////////////
@@ -214,6 +234,7 @@ export class DatacoreLocalApi {
      * React's reference-equality-based caching.
      */
     public useInterning = useInterning;
+    public useAsync = useAsync;
 
     /** Memoize the input automatically and process it using a DataArray; returns a vanilla array back. */
     public useArray<T, U>(
@@ -267,6 +288,8 @@ export class DatacoreLocalApi {
     /** Horizontal flexbox container; good for putting items together in a row. */
     public Group = Group;
 
+   public Suspense = Suspense; 
+
     /** Renders a literal value in a pretty way that respects settings. */
     public Literal = (({ value, sourcePath, inline }: { value: Literal; sourcePath?: string; inline?: boolean }) => {
         const implicitSourcePath = hooks.useContext(CURRENT_FILE_CONTEXT);
@@ -395,6 +418,7 @@ export class DatacoreLocalApi {
     // Interative elements //
     /////////////////////////
 
+    public ControlledEditable = ControlledEditable;
     public Button = Button;
     public Textbox = Textbox;
     public Callout = Callout;
diff --git a/src/main.ts b/src/main.ts
index e201a4fdf..d495b11c5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import { Datacore } from "index/datacore";
 import { DateTime } from "luxon";
 import { App, Plugin, PluginSettingTab, Setting } from "obsidian";
 import { DEFAULT_SETTINGS, Settings } from "settings";
+import { DatacoreQueryView as DatacoreJSView, VIEW_TYPE_DATACOREJS } from "ui/view-page";
 
 /** @internal Reactive data engine for your Obsidian.md vault. */
 export default class DatacorePlugin extends Plugin {
@@ -47,6 +48,21 @@ export default class DatacorePlugin extends Plugin {
             -100
         );
 
+        // Views: DatacoreJS view.
+        // @ts-ignore be quiet
+        this.registerView(VIEW_TYPE_DATACOREJS, (leaf) => new DatacoreJSView(leaf, this.api));
+
+        // Add a command for creating a new view page.
+        this.addCommand({
+            id: "datacore-add-view-page",
+            name: "Create View Page",
+            callback: () => {
+                const newLeaf = this.app.workspace.getLeaf("tab");
+                newLeaf.setViewState({ type: VIEW_TYPE_DATACOREJS, active: true });
+                this.app.workspace.setActiveLeaf(newLeaf, { focus: true });
+            },
+        });
+
         // Register JS highlighting for codeblocks.
         this.register(this.registerCodeblockHighlighting());
 
diff --git a/src/typings/obsidian-ex.d.ts b/src/typings/obsidian-ex.d.ts
index 74841050a..cedbf17cd 100644
--- a/src/typings/obsidian-ex.d.ts
+++ b/src/typings/obsidian-ex.d.ts
@@ -1,10 +1,49 @@
 import type { DatacorePlugin } from "main";
-import type { CanvasMetadataIndex } from "index/types/json/canvas";
-
+import { Extension } from "@codemirror/state";
+import type { DatacoreApi } from "api/api";
+import { CanvasMetadataIndex } from "index/types/json/canvas";
 import "obsidian";
+import { App } from "obsidian";
+import * as hooks from "preact/hooks";
 
 /** Provides extensions used by datacore or provider to other plugins via datacore. */
 declare module "obsidian" {
+    interface WorkspaceLeaf {
+        serialize(): {
+            id: string;
+            type: "leaf";
+            state: {
+                type: string;
+                state: any;
+            };
+        };
+        tabHeaderEl: HTMLElement;
+        tabHeaderInnerTitleEl: HTMLElement;
+    }
+    interface View {
+        getState(): any;
+    }
+    interface ItemView {
+        titleEl: HTMLElement;
+        getState(): any;
+    }
+
+    interface InternalPlugin<T> {
+        id: string;
+        name: string;
+        description: string;
+        instance: T;
+    }
+    export interface PagePreviewPlugin {
+        onLinkHover: (
+            view: View,
+            hovered: HTMLElement,
+            hoveredPath: string,
+            sourcePath: string,
+            _unknown: unknown
+        ) => void;
+    }
+
     interface FileManager {
         linkUpdaters: {
             canvas: {
@@ -16,16 +55,26 @@ declare module "obsidian" {
             };
         };
     }
-
+    interface Vault {
+        getConfig: (conf: string) => any;
+    }
     interface App {
         appId?: string;
 
         plugins: {
             enabledPlugins: Set<string>;
             plugins: {
-                datacore?: DatacorePlugin;
+                datacore?: {
+                    api: DatacoreApi;
+                };
+                "datacore-addon-autocomplete"?: {
+                    readonly extensions: Extension[];
+                };
             };
         };
+        internalPlugins: {
+            getPluginById: <T>(id: string) => InternalPlugin<T>;
+        };
 
         embedRegistry: {
             embedByExtension: {
@@ -54,5 +103,10 @@ declare module "obsidian" {
 declare global {
     interface Window {
         datacore?: DatacoreApi;
+        app: App;
+        CodeMirror: {
+            defineMode: (mode: string, conf: (config: any) => any) => unknown;
+            [key: string]: any;
+        };
     }
 }
diff --git a/src/typings/select.d.ts b/src/typings/select.d.ts
new file mode 100644
index 000000000..568ce8166
--- /dev/null
+++ b/src/typings/select.d.ts
@@ -0,0 +1,20 @@
+
+declare module "react-select" {
+		import { RefAttributes, ReactElement, JSX } from "preact/compat";
+		import { StateManagerAdditionalProps } from "react-select/dist/declarations/src/useStateManager";
+		import { Props } from "react-select/dist/declarations/src/Select";
+		import Select from "react-select/dist/declarations/src/Select";
+		export * from "react-select/dist/declarations/src/types";
+		declare type StateManagedPropKeys = 'inputValue' | 'menuIsOpen' | 'onChange' | 'onInputChange' | 'onMenuClose' | 'onMenuOpen' | 'value';
+		declare type PublicBaseSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = JSX.LibraryManagedAttributes<typeof Select, Props<Option, IsMulti, Group>>;
+		declare type SelectPropsWithOptionalStateManagedProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<PublicBaseSelectProps<Option, IsMulti, Group>, StateManagedPropKeys> & Partial<PublicBaseSelectProps<Option, IsMulti, Group>>;
+		export declare type StateManagerProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = SelectPropsWithOptionalStateManagedProps<Option, IsMulti, Group> & StateManagerAdditionalProps<Option>;
+    declare const StateManagedSelect: <
+        Option = unknown,
+        IsMulti extends boolean = false,
+        Group extends GroupBase<Option> = GroupBase<Option>
+    >(
+        props: StateManagerProps<Option, IsMulti, Group>
+    ) =>  ReactElement;
+    export default StateManagedSelect;
+}
diff --git a/src/ui/fields/boolean-field.tsx b/src/ui/fields/boolean-field.tsx
new file mode 100644
index 000000000..f5011794e
--- /dev/null
+++ b/src/ui/fields/boolean-field.tsx
@@ -0,0 +1,32 @@
+/**
+ * @module ui
+ */
+import { useEditableDispatch } from "ui/fields/editable";
+import { FieldControlProps } from "./common-props";
+import { TargetedEvent } from "preact/compat";
+import { useStableCallback } from "ui/hooks";
+
+/** Editable field for a boolean (true/false) value.
+ * @group Editable Components
+ */
+export function BooleanEditable(props: FieldControlProps<boolean>) {
+    const [state, dispatch] = useEditableDispatch<boolean>({
+        content: props.value ?? props.defaultValue,
+        updater: props.updater!,
+    });
+
+    const onChange = useStableCallback(
+        (evt: TargetedEvent<HTMLInputElement> & MouseEvent) => {
+            let newValue = !evt.currentTarget.hasClass("is-enabled");
+            dispatch({ type: "content-changed", newValue });
+            dispatch({ type: "commit", newValue });
+        },
+        [state.content, state, props.value]
+    );
+
+    return (
+        <div onClick={onChange} className={`checkbox-container${state.content ? " is-enabled" : ""}`}>
+            <input type="checkbox" />
+        </div>
+    );
+}
diff --git a/src/ui/fields/common-props.ts b/src/ui/fields/common-props.ts
new file mode 100644
index 000000000..4055c3361
--- /dev/null
+++ b/src/ui/fields/common-props.ts
@@ -0,0 +1,29 @@
+/**
+ * @module ui
+ */
+import { LiteralType } from "expression/literal";
+import { InlineField } from "index/import/inline-field";
+
+/** Props for any kind of editable field.
+ * @group Props
+ * @typeParam T - the type of field being edited
+ */
+export interface FieldControlProps<T> extends BaseFieldProps<T> {
+    field: InlineField;
+    value: T;
+    file: string;
+    updater?: (val: T) => unknown;
+}
+
+/**
+ * @group Props
+ *
+ */
+
+export interface BaseFieldProps<T> {
+    type: LiteralType;
+    defaultValue?: T | (() => T);
+    renderAs?: "progress" | "rating" | "select" | "raw";
+    // TODO: type this better
+    config?: Record<string, any>;
+}
diff --git a/src/ui/fields/editable.tsx b/src/ui/fields/editable.tsx
new file mode 100644
index 000000000..5402bd9f8
--- /dev/null
+++ b/src/ui/fields/editable.tsx
@@ -0,0 +1,532 @@
+/**
+ * @module ui
+ */
+import { ComponentType, Fragment, VNode } from "preact";
+import { Dispatch, Reducer, useContext, useEffect, useMemo, useRef } from "preact/hooks";
+import { ChangeEvent, useReducer } from "preact/compat";
+import Select, { ActionMeta } from "react-select";
+import { useStableCallback } from "../hooks";
+import { CURRENT_FILE_CONTEXT, Lit, Markdown, SETTINGS_CONTEXT } from "../markdown";
+import { Literal, LiteralType, Literals } from "expression/literal";
+import { DateTime } from "luxon";
+import { BaseFieldProps, FieldControlProps } from "./common-props";
+import { MarkdownListItem, MarkdownTaskItem } from "index/types/markdown";
+import { BooleanEditable } from "./boolean-field";
+import { ProgressEditable } from "./progress-field";
+import { RatingEditable } from "./rating";
+
+import "./fields.css";
+
+/** Core state for tracking an editable object.
+ * @group States
+ * @typeParam T - the type of the value being edited
+ */
+export interface EditableState<T> {
+    /** Whether the value is currently being edited. */
+    isEditing?: boolean;
+    /** The current (arbitrary) content of the editable. */
+    content: T;
+    /** Callback whenever the editable value is changed. */
+    updater: (val: T) => unknown;
+    /** Whether the editor is being rendered inline in a paragraph or not. */
+    inline?: boolean;
+}
+
+/**
+ * @group Props
+ * @typeParam T - the type of the value being edited
+ */
+export interface EditableProps<T> {
+    /** Source file from which the editable value originates. */
+    sourcePath?: string;
+    /** Backup default renderer for this object. */
+    defaultRender?: VNode;
+    /** Node which points to the actual editor. */
+    editor: React.ReactNode;
+    /** Dispatcher for controlling the edit state, tracking updates, commits, and so on. */
+    dispatch: Dispatch<EditableAction<T>>;
+    /** The current state of the editor. */
+    state: EditableState<T>;
+}
+
+type EditableElementProps<T, P> = EditableState<T> & P;
+export type EditableElement<T, P = any> = ComponentType<EditableElementProps<T, P> & P>;
+
+/**
+ *  Actions which update/change the state of an editable.
+ *
+ * @internal
+ * */
+export type EditableAction<T> =
+    | {
+          type: "commit";
+          // oldValue: any,
+          newValue: T;
+      }
+    | {
+          type: "editing-toggled";
+          newValue: boolean;
+      }
+    | {
+          type: "content-changed";
+          newValue: T;
+      };
+
+/** Default reducer for applying actions to the editable state.
+ *
+ * @internal
+ */
+export function editableReducer<T>(
+    { content, updater, ...rest }: EditableState<T>,
+    action: EditableAction<T>
+): EditableState<T> {
+    switch (action.type) {
+        case "commit":
+            updater(action.newValue);
+            return { ...rest, updater, content: action.newValue };
+        case "editing-toggled":
+            !action.newValue && updater(content);
+            return { ...rest, updater, content, isEditing: action.newValue };
+        case "content-changed":
+            return { ...rest, updater, content: action.newValue };
+        default:
+            return { content, updater, ...rest };
+    }
+}
+
+/** Provides state management for an editable field.
+ * @internal
+ */
+export function useEditableDispatch<T>(
+    initial: EditableState<T> | (() => EditableState<T>)
+): [EditableState<T>, Dispatch<EditableAction<T>>] {
+    const init = useMemo(() => (typeof initial == "function" ? initial() : initial), [initial]);
+    return useReducer(editableReducer as Reducer<EditableState<T>, EditableAction<T>>, init, (s) => init);
+}
+/**
+ * a higher-order-component for editing fields.
+ * @param props
+ * @group Editable Components
+ */
+export function Editable<T>({ sourcePath, defaultRender, editor, dispatch, state }: EditableProps<T>) {
+    const currentRef = useRef(null);
+
+    const element = useMemo(() => {
+        if (state.isEditing) {
+            return editor;
+        } else {
+            if (defaultRender) return defaultRender;
+            else return <Lit value={state.content as Literal} inline={true} sourcePath="" />;
+        }
+    }, [state.isEditing, state.content, sourcePath, defaultRender]);
+
+    useEffect(() => {
+        dispatch && dispatch({ type: "content-changed", newValue: state.content });
+    }, [state.content, state.isEditing]);
+
+    return (
+        <span className="datacore-editable-outer" ref={currentRef}>
+            {element}
+        </span>
+    );
+}
+
+export function ControlledEditable<T, P = unknown>({
+    defaultRender,
+    editor: Editor,
+    onUpdate,
+    content,
+    props,
+    sourcePath,
+}: Omit<EditableProps<T>, "dispatch" | "state" | "editor"> & {
+    onUpdate: (v: T) => unknown;
+    content: T;
+    editor: EditableElement<T, P>;
+    props: P;
+    sourcePath: string;
+}) {
+    const [state, dispatch] = useEditableDispatch<T>(() => ({
+        updater: onUpdate,
+        content,
+        inline: false,
+        isEditing: false,
+    }));
+    return <Editor {...props} {...state} />;
+}
+
+/** A single selectable value.
+ */
+type SelectableBase = string | number;
+/** A type for either multi- or single-select values. */
+type SelectableType = SelectableBase | SelectableBase[];
+
+/** Editable which allows for selection from a list of options.
+ * @group Editable Components
+ */
+export function SelectableEditable({
+    isEditing,
+    content,
+    updater,
+    config,
+    dispatch,
+}: EditableState<SelectableType> &
+    BaseFieldProps<SelectableType> & {
+        dispatch: Dispatch<EditableAction<SelectableType>>;
+    }) {
+    const onChange = useStableCallback(
+        (newValue: any, actionMeta: ActionMeta<SelectableType>) => {
+            if (Array.isArray(newValue)) {
+                dispatch({
+                    type: "content-changed",
+                    newValue: newValue.map((x) => x.value) as SelectableType,
+                });
+            } else {
+                dispatch({
+                    type: "content-changed",
+                    newValue: newValue.value as SelectableType,
+                });
+            }
+        },
+        [config, content, updater, isEditing]
+    );
+
+    const editor = useMemo(() => {
+        return (
+            <Select
+                classNamePrefix="datacore-selectable"
+                onChange={onChange}
+                unstyled
+                isMulti={config?.multi ?? false}
+                options={config?.options ?? []}
+                menuPortalTarget={document.body}
+                classNames={{
+                    input: (props: any) => "prompt-input",
+                    valueContainer: (props: any) => "suggestion-item value-container",
+                    container: (props: any) => "suggestion-container",
+                    menu: (props: any) => "suggestion-content suggestion-container",
+                    option: (props: any) => `suggestion-item${props.isSelected ? " is-selected" : ""}`,
+                }}
+            />
+        );
+    }, [content, updater, isEditing, config]);
+
+    return <Editable editor={editor} dispatch={dispatch} state={{ isEditing, content, updater }} />;
+}
+
+/** Editable which allows for selecting a date.
+ * @group Editable Components
+ */
+export function DateEditable({
+    dispatch,
+    sourcePath,
+    ...rest
+}: EditableState<DateTime | string | null> & {
+    sourcePath: string;
+    dispatch: Dispatch<EditableAction<DateTime | string | null>>;
+}) {
+    /** the extra dispatch is _just_ in case... */
+    const [state, o] = useEditableDispatch<DateTime | string | null>(() => ({
+        isEditing: rest.isEditing,
+        content: rest.content,
+        updater: rest.updater,
+        inline: rest.inline ?? false,
+    }));
+    const settings = useContext(SETTINGS_CONTEXT);
+
+    const onChange = (evt: ChangeEvent<HTMLInputElement>) => {
+        let v = new Date(Date.parse(evt.currentTarget.value));
+        dispatch({
+            type: "content-changed",
+            newValue: !!v ? DateTime.fromJSDate(v).toFormat(settings.defaultDateFormat) : null,
+        });
+        dispatch({
+            type: "commit",
+            newValue: !!v ? DateTime.fromJSDate(v).toFormat(settings.defaultDateFormat) : null,
+        });
+        o({
+            type: "commit",
+            newValue: !!v ? DateTime.fromJSDate(v).toFormat(settings.defaultDateFormat) : null,
+        });
+    };
+
+    const jsDate = useMemo(() => {
+        return state.content instanceof DateTime
+            ? state.content
+            : typeof state.content == "string" && !!state.content
+            ? DateTime.fromJSDate(new Date(Date.parse(state.content)))
+            : null;
+    }, [state.content]);
+
+    const editorNode = <input type="date" onChange={onChange} value={jsDate?.toFormat("yyyy-MM-dd")} />;
+    return <Editable<DateTime | string | null> dispatch={dispatch} state={rest} editor={editorNode} />;
+}
+
+/** An editor which allows selecting a numneric value.
+ * @group Editable Components
+ */
+export function NumberEditable(props: EditableState<number>) {
+    const cfc = useContext(CURRENT_FILE_CONTEXT);
+
+    const [state, dispatch] = useEditableDispatch<number>(() => ({
+        isEditing: false,
+        content: props.content,
+        updater: props.updater,
+        inline: true,
+    }));
+    const value = useRef(props.content);
+
+    const onChangeCb = useStableCallback(
+        async (evt: ChangeEvent) => {
+            value.current = parseFloat((evt.currentTarget as HTMLTextAreaElement).value);
+        },
+        [value.current, state.content, state.updater, state.isEditing]
+    );
+
+    const finalize = async () => {
+        dispatch({
+            type: "commit",
+            newValue: value.current,
+        });
+        dispatch({
+            type: "editing-toggled",
+            newValue: false,
+        });
+    };
+
+    const onInput = useStableCallback(
+        async (e: KeyboardEvent) => {
+            if (e.key === "Enter") {
+                await finalize();
+            }
+        },
+        [value.current, state.updater, state.content, state.isEditing]
+    );
+
+    const dblClick = useStableCallback(
+        (e: MouseEvent) => {
+            dispatch({
+                type: "editing-toggled",
+                newValue: true,
+            });
+        },
+        [value.current, state.updater, state.isEditing, state.content]
+    );
+
+    const readonlyEl = <Lit inline={false} sourcePath={cfc} value={value.current as Literal} />;
+    const editor = <input className="datacore-editable" type="number" onChange={onChangeCb} onKeyUp={onInput} />;
+    return (
+        <span className="has-texteditable" onDblClick={dblClick}>
+            <Editable<number> dispatch={dispatch} editor={editor} defaultRender={readonlyEl} state={state} />
+        </span>
+    );
+}
+
+/** Editor which supports multi-line text editing; note this is a very simple input and does not support most markdown metadata.
+ * @group Editable Components
+ */
+export function TextEditable(props: EditableState<string> & { markdown?: boolean; sourcePath: string }) {
+    const cfc = useContext(CURRENT_FILE_CONTEXT);
+    const [state, dispatch] = useEditableDispatch<string>(() => ({
+        isEditing: props.isEditing,
+        content: props.content,
+        updater: props.updater,
+        inline: props.inline ?? false,
+    }));
+
+    const text = useRef("-");
+    useEffect(() => {
+        text.current = props.content;
+        dispatch({ type: "content-changed", newValue: props.content });
+    }, [props.content]);
+
+    const onChangeCb = useStableCallback(
+        async (evt: ChangeEvent) => {
+            text.current = (evt.currentTarget as HTMLTextAreaElement).value;
+        },
+        [text.current, props.sourcePath, state.content, state.updater, state.isEditing]
+    );
+
+    const finalize = async () => {
+        dispatch({
+            type: "commit",
+            newValue: text.current,
+        });
+        dispatch({
+            type: "editing-toggled",
+            newValue: false,
+        });
+    };
+    const onInput = useStableCallback(
+        async (e: KeyboardEvent) => {
+            if (props.inline) {
+                if (e.key === "Enter") {
+                    await finalize();
+                }
+            } else {
+                if (e.key === "Enter" && e.ctrlKey) {
+                    e.preventDefault();
+                    await finalize();
+                }
+            }
+        },
+        [text.current, props.sourcePath, state.updater, state.content, state.isEditing]
+    );
+
+    const dblClick = useStableCallback(
+        (e: MouseEvent) => {
+            dispatch({
+                type: "editing-toggled",
+                newValue: true,
+            });
+        },
+        [text.current, props.sourcePath, state.updater, state.isEditing, state.content]
+    );
+    const readonlyEl = (
+        <Fragment>
+            {props.markdown ? (
+                <Markdown content={text.current as string} sourcePath={props.sourcePath || cfc} inline={false} />
+            ) : (
+                <Lit inline={false} sourcePath={props.sourcePath || cfc} value={text.current as Literal} />
+            )}
+        </Fragment>
+    );
+    const editor = !state.inline ? (
+        <textarea className="datacore-editable" onChange={onChangeCb} onKeyUp={onInput}>
+            {text.current}
+        </textarea>
+    ) : (
+        <input className="datacore-editable" type="text" onChange={onChangeCb} onKeyUp={onInput} />
+    );
+    return (
+        <span className="has-texteditable" onDblClick={dblClick}>
+            <Editable<string> dispatch={dispatch} editor={editor} defaultRender={readonlyEl} state={state} />
+        </span>
+    );
+}
+
+/** An editable list of items.
+ *
+ * @group Editable Components
+ */
+export function EditableListField({
+    props,
+    field,
+    parent,
+    type,
+    dispatch,
+    renderAs,
+    config,
+}: { props: EditableState<Literal> } & FieldControlProps<Literal> & {
+        parent: MarkdownTaskItem | MarkdownListItem;
+        type: LiteralType;
+        dispatch: Dispatch<EditableAction<Literal>>;
+    }) {
+    const subEditor = useMemo(() => {
+        switch (renderAs) {
+            case "progress":
+                return type == "number" ? (
+                    <ProgressEditable
+                        dispatch={dispatch}
+                        isEditing={props.isEditing}
+                        content={props.content as number}
+                        updater={props.updater}
+                        max={config?.max || 100}
+                        sourcePath={parent.$file}
+                        step={config?.step || 0.1}
+                        min={config?.min || 0}
+                    />
+                ) : null;
+            case "rating":
+                return (
+                    <RatingEditable
+                        field={field}
+                        file={parent.$file}
+                        type={type}
+                        config={config}
+                        value={props.content as string | number}
+                        updater={props.updater}
+                    />
+                );
+            case "select":
+                return (
+                    <SelectableEditable
+                        isEditing={props.isEditing}
+                        dispatch={dispatch}
+                        config={config}
+                        updater={props.updater}
+                        type={type}
+                        content={props.content as SelectableType}
+                    />
+                );
+            default:
+                return null;
+        }
+    }, [parent, field, props.content, props.content, props, config, renderAs]);
+    const editor = useMemo(() => {
+        switch (type) {
+            case "date":
+                return (
+                    <DateEditable
+                        dispatch={dispatch}
+                        sourcePath={parent.$file}
+                        isEditing={props.isEditing}
+                        content={props.content as DateTime}
+                        updater={props.updater as (val: string | DateTime | null) => any}
+                    />
+                );
+            case "boolean":
+                return (
+                    <BooleanEditable
+                        updater={props.updater}
+                        type={type}
+                        value={props.content as boolean}
+                        field={field}
+                        file={parent.$file}
+                    />
+                );
+            case "string":
+                return (
+                    <>
+                        {subEditor ?? (
+                            <TextEditable
+                                sourcePath={parent.$file}
+                                isEditing={false}
+                                content={props.content as string}
+                                updater={props.updater as (val: string) => unknown}
+                            />
+                        )}
+                    </>
+                );
+            case "number":
+                return <>{subEditor ?? <NumberEditable content={props.content as number} updater={props.updater} />}</>;
+            default:
+                return (
+                    <TextEditable
+                        sourcePath={parent.$file}
+                        isEditing={props.isEditing}
+                        content={Literals.toString(props.content)}
+                        updater={props.updater as (val: string) => unknown}
+                    />
+                );
+        }
+    }, [parent, field, props.content, props.content, props, config, renderAs, subEditor]);
+
+    const dblclick = useStableCallback(
+        (evt: MouseEvent) => {
+            evt.stopPropagation();
+            dispatch({ type: "editing-toggled", newValue: !props.isEditing });
+        },
+        [props.isEditing]
+    );
+
+    return (
+        <div className="datacore-field">
+            <span className="field-title" onDblClick={dblclick}>
+                {field.key}
+            </span>
+            <span className="field-value" tabIndex={0}>
+                {editor}
+            </span>
+        </div>
+    );
+}
diff --git a/src/ui/fields/fields.css b/src/ui/fields/fields.css
new file mode 100644
index 000000000..6f2c7b0b2
--- /dev/null
+++ b/src/ui/fields/fields.css
@@ -0,0 +1,97 @@
+.datacore-list-item-fields {
+    color: var(--text-normal) !important;
+}
+
+.datacore-list-item-fields > .datacore-field + .datacore-field {
+    margin-left: 0.4em;
+}
+
+.datacore-field {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    border-radius: 0.25em;
+    font-size: 0.85em;
+    align-items: center;
+}
+
+.datacore-field .field-title {
+    flex-grow: 0;
+    font-weight: bold;
+    height: inherit;
+    display: inline-block;
+    background: var(--color-base-25);
+    border-right: 2px solid var(--text-accent);
+    margin-right: 0.3em;
+    padding: 0.2em 0.5em;
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+    user-select: none;
+}
+
+.datacore-field .field-value {
+    display: inline-block;
+}
+
+.datacore-field .field-value .checkbox-container {
+    top: 3px;
+}
+
+.datacore-field .field-value input {
+    height: unset !important;
+}
+
+.datacore-rating-star.filled {
+    color: var(--text-accent);
+}
+
+.datacore-rating-star {
+    user-select: none;
+    font-size: 1.3rem;
+}
+
+.datacore-editable-outer .prompt-input {
+    display: inline-block !important;
+    flex-grow: 1;
+}
+
+.datacore-selectable__menu {
+    z-index: 99999 !important;
+    top: 0 !important;
+}
+
+.datacore-editable-outer .prompt-input input:after {
+    content: none !important;
+}
+
+.datacore-editable-outer > .suggestion-container:has(.datacore-selectable__control--menu-is-open) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.datacore-selectable__menu {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: none;
+}
+
+.datacore-editable-outer > .suggestion-container {
+    box-shadow: none;
+}
+
+.datacore-selectable__menu-list .suggestion-item:hover {
+    background-color: var(--text-normal);
+    color: var(--text-on-accent-inverted);
+}
+
+.datacore-editable-outer .datacore-multi-select-container {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+
+.datacore-editable-outer .datacore-multi-select-value {
+    background-color: var(--interactive-accent);
+    border-radius: var(--tag-radius);
+    padding: var(--tag-padding-y) var(--tag-padding-x);
+}
diff --git a/src/ui/fields/progress-field.tsx b/src/ui/fields/progress-field.tsx
new file mode 100644
index 000000000..2d689d4d1
--- /dev/null
+++ b/src/ui/fields/progress-field.tsx
@@ -0,0 +1,63 @@
+/**
+ * @module ui
+ */
+import { ChangeEvent } from "preact/compat";
+import { Dispatch, useEffect, useRef } from "preact/hooks";
+import { Editable, EditableAction, EditableState } from "ui/fields/editable";
+import { useStableCallback } from "ui/hooks";
+
+import "./fields.css";
+
+/** Editable field for multi-step progress.
+ * @group Editable Components
+ */
+export function ProgressEditable(
+    props: EditableState<number> & {
+        sourcePath: string;
+        min: number;
+        max: number;
+        step: number;
+        dispatch: Dispatch<EditableAction<number>>;
+    }
+) {
+    const val = useRef(props.content);
+    useEffect(() => {
+        props.dispatch({ type: "content-changed", newValue: val.current });
+    }, [val.current]);
+    const finalize = async () => {
+        props.dispatch({
+            type: "commit",
+            newValue: val.current,
+        });
+    };
+    const changeCB = useStableCallback(
+        (e: ChangeEvent<HTMLInputElement>) => {
+            finalize();
+            val.current = parseFloat(e.currentTarget.value);
+        },
+        [val.current, props.sourcePath]
+    );
+    const readOnly = <progress value={val.current} max={props.max} />;
+
+    const editor = (
+        <input
+            type="range"
+            className="datacore-progress-editable"
+            min={props.min}
+            value={val.current}
+            onChange={changeCB}
+            step={props.step}
+        />
+    );
+
+    return (
+        <span className="has-texteditable">
+            <Editable<number>
+                dispatch={props.dispatch}
+                editor={editor}
+                state={{ ...props, content: val.current, isEditing: props.isEditing }}
+                defaultRender={readOnly}
+            />
+        </span>
+    );
+}
diff --git a/src/ui/fields/rating.tsx b/src/ui/fields/rating.tsx
new file mode 100644
index 000000000..29356d772
--- /dev/null
+++ b/src/ui/fields/rating.tsx
@@ -0,0 +1,60 @@
+/**
+ * @module ui
+ */
+import { useMemo } from "preact/hooks";
+import { useStableCallback } from "ui/hooks";
+import { FieldControlProps } from "./common-props";
+import { useEditableDispatch } from "ui/fields/editable";
+
+import "./fields.css";
+
+/** Editable field for a star-based rating field.
+ * @group Editable Components
+ */
+export function RatingEditable({ value, updater, config: config, defaultValue }: FieldControlProps<number | string>) {
+    const [state, dispatch] = useEditableDispatch<number | string>({
+        content: value ?? defaultValue,
+        updater: updater!,
+    });
+
+    const parsedValue = useMemo(() => {
+        if (typeof state.content == "string") {
+            if (state.content.contains("/")) {
+                let split = state.content.split("/");
+                return parseInt(split[0]) / parseInt(split[1]);
+            }
+        } else if (typeof state.content == "number") {
+            return Math.min(state.content, 5);
+        }
+        return 0;
+    }, [state.content]);
+
+    const stars = useMemo(() => {
+        let r: React.ReactNode[] = [];
+        for (let i = 0; i < (config?.max ?? 5); i++) {
+            let clickCb = useStableCallback(() => {
+                let newValue: number | string | null = null;
+                if (typeof state.content == "string") {
+                    if (state.content.contains("/")) {
+                        newValue = `${i + 1}/5`;
+                    }
+                } else if (typeof state.content == "number") {
+                    newValue = Math.min(i + 1, config?.max ?? 5);
+                }
+
+                dispatch({ type: "content-changed", newValue: newValue || i + 1 });
+                dispatch({ type: "commit", newValue: newValue || i + 1 });
+            }, [state, parsedValue, i]);
+            let classes = ["datacore-rating-star"];
+            classes.push(i < parsedValue ? "filled" : "empty");
+            r.push(
+                <span onClick={clickCb} className={classes.join(" ")}>
+                    &#9733;
+                </span>
+            );
+        }
+        return r;
+    }, [parsedValue, state]);
+
+    return <span className="datacore-rating">{stars}</span>;
+}
diff --git a/src/ui/hooks.tsx b/src/ui/hooks.tsx
index 49ef1cb88..10e533bbb 100644
--- a/src/ui/hooks.tsx
+++ b/src/ui/hooks.tsx
@@ -214,3 +214,70 @@ export function useAsElement(element: ReactNode | Literal): ReactNode {
         }
     }, [element]);
 }
+
+type FulfilledPromise<T> = {
+    status: "success";
+    value: T;
+};
+type PendingPromise<T> = {
+    status: "pending";
+};
+type RejectedPromise<T> = {
+    status: "error";
+    reason: any;
+};
+
+type AsyncResult<T> = FulfilledPromise<T> | PendingPromise<T> | RejectedPromise<T>;
+
+/**
+ * a simple hook that leverages `useEffect` and `useState` to
+ * return some async data and its fulfillment status.
+ *
+ * @group Hooks
+ * @param loader a parameterless function that returns a promise
+ * @param deps optional deps to pass to useEffect
+ * @returns a tuple in the form of [resolvedPromise, hasResolved, hasError]
+ */
+export function useAsync<T>(loader: () => Promise<T>, deps: any[] = []): T {
+    const [state, set] = useState<AsyncResult<T>>({
+			status: "pending"
+		}); 
+    useEffect(() => { 
+			set({
+			status: "pending"
+		});
+        let suspender = loader().then(
+            (v) => {
+                set({
+                    status: "success",
+                    value: v,
+                });
+            },
+            (e) => {
+                set({
+                    status: "error",
+                    reason: e,
+                });
+            }
+        );
+				if(state.status == "pending") throw suspender;
+				if(state.status == "error") throw state.reason;
+        /* if (state.done) {
+            set((prevState) => ({ ...prevState, done: false }));
+        }
+
+        loader().then(
+            (value) => {
+                cid === callId.current && set({ value, done: true, error: false });
+
+                return value;
+            },
+            (error) => {
+                cid === callId.current && set({ value: undefined!, done: true, error: true });
+
+                return error;
+            }
+        ); */
+    }, deps);
+    return (state as FulfilledPromise<T>).value;
+}
diff --git a/src/ui/view-page.css b/src/ui/view-page.css
new file mode 100644
index 000000000..06858b83d
--- /dev/null
+++ b/src/ui/view-page.css
@@ -0,0 +1,24 @@
+.dc-cm-editor .cm-gutters {
+    flex: 0 0 auto;
+    background-color: transparent;
+    color: var(--text-faint) !important;
+    border-right: none !important;
+    margin-inline-end: var(--file-folding-offset);
+    font-size: var(--font-ui-smaller);
+    z-index: 1;
+    font-variant: tabular-nums;
+}
+.cm-typeName {
+    color: var(--headers);
+}
+.dc-cm-editor {
+    padding: 1em;
+    border-radius: 0.5em;
+    border: 1px solid var(--h5-color);
+}
+.cm-tooltip.cm-tooltip-autocomplete {
+    background: var(--embed-bg);
+}
+.dc-cm-editor img.cm-widgetBuffer[aria-hidden="true"] {
+    display: none;
+}
diff --git a/src/ui/view-page.tsx b/src/ui/view-page.tsx
new file mode 100644
index 000000000..8def035f9
--- /dev/null
+++ b/src/ui/view-page.tsx
@@ -0,0 +1,534 @@
+import { debounce, ItemView, MarkdownRenderChild, Menu, Scope, ViewStateResult, WorkspaceLeaf } from "obsidian";
+import { ScriptLanguage } from "utils/javascript";
+import { DatacoreJSRenderer, ReactRenderer } from "./javascript";
+import { DatacoreLocalApi } from "api/local-api";
+import { DatacoreApi } from "api/api";
+import { createContext } from "preact";
+import { Group, Stack } from "api/ui/layout";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { Textbox, VanillaSelect } from "api/ui/basics";
+import { useIndexUpdates } from "./hooks";
+import { DATACORE_CONTEXT, ErrorMessage } from "./markdown";
+import {default as Select} from "react-select";
+import "./view-page.css";
+import { history, defaultKeymap, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { foldGutter, indentOnInput, syntaxHighlighting, bracketMatching, foldKeymap } from "@codemirror/language";
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { lintKeymap } from "@codemirror/lint";
+import {
+    crosshairCursor,
+    drawSelection,
+    dropCursor,
+    EditorView,
+    highlightSpecialChars,
+    keymap,
+    lineNumbers,
+    rectangularSelection,
+    ViewPlugin,
+    ViewUpdate,
+} from "@codemirror/view";
+import { tagHighlighter, tags } from "@lezer/highlight";
+import { javascript } from "@codemirror/lang-javascript";
+import { vim } from "@replit/codemirror-vim";
+import { Compartment, EditorState } from "@codemirror/state";
+
+/** Key for datacore JS query views. */
+export const VIEW_TYPE_DATACOREJS = "datacorejs-view";
+
+/** Stores the current Obsidian view object, so it can be manipulated from react. */
+const CUSTOM_VIEW_CONTEXT = createContext<DatacoreQueryView>(undefined!);
+
+const EDITOR_HL = syntaxHighlighting(
+    tagHighlighter([
+        {
+            tag: tags.link,
+            class: "cm-link",
+        },
+        {
+            tag: tags.heading,
+            class: "cm-heading",
+        },
+        {
+            tag: tags.emphasis,
+            class: "cm-emphasis",
+        },
+        {
+            tag: tags.strong,
+            class: "cm-strong",
+        },
+        {
+            tag: tags.keyword,
+            class: "cm-keyword",
+        },
+        {
+            tag: tags.atom,
+            class: "cm-atom",
+        },
+        {
+            tag: tags.bool,
+            class: "cm-bool",
+        },
+        {
+            tag: tags.url,
+            class: "cm-url",
+        },
+        {
+            tag: tags.labelName,
+            class: "cm-labelName",
+        },
+        {
+            tag: tags.inserted,
+            class: "cm-inserted",
+        },
+        {
+            tag: tags.deleted,
+            class: "cm-deleted",
+        },
+        {
+            tag: tags.literal,
+            class: "cm-literal",
+        },
+        {
+            tag: tags.string,
+            class: "cm-string",
+        },
+        {
+            tag: tags.number,
+            class: "cm-number",
+        },
+        {
+            tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+            class: "cm-string2",
+        },
+        {
+            tag: tags.variableName,
+            class: "cm-variableName",
+        },
+        {
+            tag: tags.local(tags.variableName),
+            class: "cm-variableName cm-local",
+        },
+        {
+            tag: tags.definition(tags.variableName),
+            class: "cm-variableName cm-definition",
+        },
+        {
+            tag: tags.special(tags.variableName),
+            class: "cm-variableName2",
+        },
+        {
+            tag: tags.definition(tags.propertyName),
+            class: "cm-propertyName cm-definition",
+        },
+        {
+            tag: tags.typeName,
+            class: "cm-typeName",
+        },
+        {
+            tag: tags.namespace,
+            class: "cm-namespace",
+        },
+        {
+            tag: tags.className,
+            class: "cm-className",
+        },
+        {
+            tag: tags.macroName,
+            class: "cm-macroName",
+        },
+        {
+            tag: tags.propertyName,
+            class: "cm-propertyName",
+        },
+        {
+            tag: tags.operator,
+            class: "cm-operator",
+        },
+        {
+            tag: tags.comment,
+            class: "cm-comment",
+        },
+        {
+            tag: tags.meta,
+            class: "cm-meta",
+        },
+        {
+            tag: tags.invalid,
+            class: "cm-invalid",
+        },
+        {
+            tag: tags.punctuation,
+            class: "cm-punctuation",
+        },
+    ])
+);
+const LANG_COMPARTMENT = new Compartment();
+const EDITOR_EXTS = [
+    lineNumbers(),
+    highlightSpecialChars(),
+    history(),
+    foldGutter(),
+    drawSelection(),
+    dropCursor(),
+    EditorState.allowMultipleSelections.of(true),
+    indentOnInput(),
+    bracketMatching(),
+    closeBrackets(),
+    rectangularSelection(),
+    crosshairCursor(),
+    highlightSelectionMatches(),
+    keymap.of([
+        indentWithTab,
+        ...closeBracketsKeymap,
+        ...defaultKeymap,
+        ...searchKeymap,
+        ...historyKeymap,
+        ...foldKeymap,
+        ...completionKeymap,
+        ...lintKeymap,
+    ]),
+    EditorView.baseTheme({
+        ".cm-cursor": {
+            borderLeftColor: "var(--text)",
+        },
+        ".cm-tooltip": {
+            backgroundColor: "var(--bg)",
+        },
+        "&:not(.cm-focused) .cm-fat-cursor": {
+            outline: "solid 1px var(--accent) !important",
+            background: "none",
+        },
+        "&.cm-focused .cm-fat-cursor": {
+            background: "var(--accent) !important",
+        },
+    }),
+];
+/** Provides a minimal editor with syntax highlighting */
+function CodeMirrorEditor({
+    state: { script, sourceType: lang },
+    setState,
+}: {
+    lang?: ScriptLanguage;
+    state: DatacoreViewState;
+    setState: (state: Partial<DatacoreViewState>) => void;
+}) {
+    const editorRef = useRef<HTMLDivElement>(null);
+    const viewRef = useRef<EditorView>(null);
+    const viewContext = useContext(CUSTOM_VIEW_CONTEXT);
+    useEffect(() => {
+        if (editorRef.current && !viewRef.current) {
+            viewRef.current = new EditorView({
+                parent: editorRef.current,
+                extensions: [viewContext.app.vault.getConfig("vimMode") && vim()].filter(Boolean).concat(
+                    ...EDITOR_EXTS.concat(
+                        ...[
+                            LANG_COMPARTMENT.of(javascript()),
+                            ViewPlugin.fromClass(
+                                class {
+                                    constructor(public view: EditorView) {}
+                                    update(update: ViewUpdate) {
+                                        if (update.docChanged) {
+                                            setState({ script: this.view.state.sliceDoc() || "" });
+                                        }
+                                    }
+                                }
+                            ),
+                            EDITOR_HL,
+                            viewContext.app.vault.getConfig("vimMode") && vim(),
+                            ...(viewContext.app.plugins.plugins["datacore-addon-autocomplete"]?.extensions || []),
+                        ].filter((a) => !!a)
+                    )
+                ),
+                doc: script || "",
+            });
+        }
+    }, [editorRef.current]);
+    useEffect(() => {
+        if (viewRef.current)
+            viewRef.current.dispatch({
+                effects: LANG_COMPARTMENT.reconfigure(
+                    javascript({ jsx: lang?.endsWith("x"), typescript: lang?.startsWith("ts") })
+                ),
+            });
+    }, [lang]);
+
+    return <div className="dc-cm-editor" ref={editorRef}></div>;
+}
+
+/** Provides options for configuring a datacore view pane. */
+function DatacoreViewSettings() {
+    const view = useContext(CUSTOM_VIEW_CONTEXT) as DatacoreQueryView;
+    const setViewState = useMemo(
+        () => debounce((state: Partial<DatacoreViewState>) => view.setState(state, { history: false }), 500),
+        [view]
+    );
+
+    const [localState, setLocalState] = useState(view.getState());
+    const setState = useCallback(
+        (state: Partial<DatacoreViewState>) => {
+            const finalState = { ...localState, ...state };
+            // Not debounced.
+            setLocalState(finalState);
+
+            // Debounced.
+            setViewState(finalState);
+        },
+        [localState, setLocalState, view]
+    );
+
+    return (
+        <Stack align="stretch">
+            <button className="clickable-icon" style="align-self: start" onClick={() => view.view("script")}>
+                {BACK_BUTTON}
+            </button>
+            <Group justify="space-between" align="center">
+                <h6>View Title</h6>
+                <Textbox
+                    defaultValue={view.getState().title}
+                    onChange={(e) => setState({ title: e.currentTarget.value as string })}
+                />
+            </Group>
+            <Group justify="space-between" align="center">
+                <h6>View Type</h6>
+                <VanillaSelect
+                    defaultValue={view.getState().sourceType}
+                    options={LANGUAGE_OPTIONS}
+                    value={localState.sourceType}
+                    onValueChange={(s) => setState({ sourceType: s as ScriptLanguage })}
+                />
+            </Group>
+            <Group justify="space-between" align="center">
+                <h6>Script/View source</h6>
+                <div style={{ minWidth: "75%", fontFamily: "monospace" }}>
+                    <CodeMirrorEditor state={localState} setState={setState} lang={localState.sourceType ?? "js"} />
+                </div>
+            </Group>
+            <Group justify="space-between" align="center">
+                <Stack>
+                    <h6>Current File</h6>
+                    <small>The path returned by functions like `useCurrentPath` in this view</small>
+                </Stack>
+                <div style={{ minWidth: "50%" }}>
+                    <CurrentFileSelector
+                        defaultValue={localState.currentFile}
+                        onChange={(v) => setState({ currentFile: v })}
+                    />
+                </div>
+            </Group>
+        </Stack>
+    );
+}
+
+/** React component for asynchronously showing the active set of current files to select one from. */
+function CurrentFileSelector({
+    defaultValue,
+    onChange,
+}: {
+    defaultValue?: string;
+    onChange: (value: string | undefined) => void;
+}) {
+    const core = useContext(DATACORE_CONTEXT);
+    const revision = useIndexUpdates(core, { debounce: 2000 });
+    const defaultOption = !defaultValue
+        ? { label: "No file", value: "" }
+        : { label: defaultValue!, value: defaultValue! };
+    // Cached list of relevant files, which is only recomputed on vault changes.
+    const options = useMemo(() => {
+        return core.vault
+            .getMarkdownFiles()
+            .map((f) => ({ label: f.path, value: f.path }))
+            .concat(defaultOption);
+    }, [revision]);
+
+    return (
+        <Select
+						options={options}
+            classNamePrefix="datacore-selectable"
+            defaultValue={defaultOption}	
+            onChange={(nv, _am) => onChange(nv?.value)}
+            unstyled
+            menuPortalTarget={document.body}
+            tabIndex={-1}
+            styles={{
+                container(base, _props) {
+                    return { ...base, minWidth: "100%" };
+                },
+                menu(base, _props) {
+                    return { ...base, minWidth: "100%" };
+                },
+            }}
+            classNames={{
+                input: (props: any) => "prompt-input",
+                valueContainer: (props: any) => "suggestion-item value-container",
+                container: (props: any) => "suggestion-container",
+                menu: (props: any) => "suggestion-content suggestion-container",
+                option: (props: any) => `suggestion-item${props.isSelected ? " is-selected" : ""}`,
+            }}
+        />
+    );
+}
+
+/** Selectable options for picking which language to execute the script in. */
+const LANGUAGE_OPTIONS: { label: string; value: ScriptLanguage }[] = [
+    { label: "Javascript", value: "js" },
+    { label: "Typescript", value: "ts" },
+    { label: "Javascript (JSX)", value: "jsx" },
+    { label: "Typescript JSX", value: "tsx" },
+];
+
+/** SVG back button shown to exit the settings view. */
+const BACK_BUTTON = (
+    <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-arrow-left"
+    >
+        <path d="m12 19-7-7 7-7"></path>
+        <path d="M19 12H5"></path>
+    </svg>
+);
+
+/** State for the datacore view page. */
+export interface DatacoreViewState {
+    /** Custom title for the view pane. */
+    title?: string;
+    /** Language that the script will be executed in. */
+    sourceType?: ScriptLanguage;
+    /** If defined, the file the view will be relative to. */
+    currentFile?: string;
+    /** Contents of the script. */
+    script?: string;
+    /** The current view; defaults to 'settings' for initialization. */
+    view?: "settings" | "script";
+}
+
+export class DatacoreQueryView extends ItemView {
+    /** Internal current state of the view; can be modified by setState. */
+    public internalState: DatacoreViewState = {
+        title: "New view",
+        script: "",
+        sourceType: "js",
+        view: "settings",
+    };
+
+    /** The current active view - either the settings view */
+    private activeView: MarkdownRenderChild;
+    private activeViewType: string;
+
+    constructor(leaf: WorkspaceLeaf, public api: DatacoreApi) {
+        super(leaf);
+        this.rerender();
+    }
+
+    /** Should always be VIEW_TYPE_DATACOREJS. */
+    getViewType(): string {
+        return VIEW_TYPE_DATACOREJS;
+    }
+
+    /** Text shown in the title window. */
+    getDisplayText(): string {
+        return `${this.internalState.title} (DatacoreJS)`;
+    }
+
+    public async onload() {
+        this.contentEl.addClass("markdown-rendered");
+        this.registerDomEvent(this.containerEl, "keydown", (k) => {
+            if (k.charCode == 27) {
+                k.preventDefault();
+                k.stopPropagation();
+            }
+        });
+        this.scope = new Scope(this.app.scope);
+        this.scope?.register(null, "Escape", (ev) => {});
+        this.rerender();
+    }
+
+    public onunload(): void {
+        if (this.activeView) this.removeChild(this.activeView);
+    }
+
+    /** Synchronizes the screen state to properly reflect the current internal state. */
+    rerender(): void {
+        this.leaf.tabHeaderInnerTitleEl.textContent = this.titleEl.textContent = this.getDisplayText();
+        if (this.activeViewType == this.internalState.view) return;
+
+        if (this.activeView) this.removeChild(this.activeView);
+        if (this.internalState.view === "settings") {
+            this.activeViewType = "settings";
+            this.activeView = new ReactRenderer(
+                this.app,
+                this.api.core,
+                this.contentEl,
+                this.internalState.currentFile || "",
+                (
+                    <CUSTOM_VIEW_CONTEXT.Provider value={this}>
+                        <DatacoreViewSettings />
+                    </CUSTOM_VIEW_CONTEXT.Provider>
+                )
+            );
+        } else {
+            // If a script, try to execute it; otherwise, show a reasonable error message.
+            this.activeViewType = "script";
+            if (this.internalState.script) {
+                this.activeView = new DatacoreJSRenderer(
+                    new DatacoreLocalApi(this.api, this.internalState.currentFile || ""),
+                    this.contentEl,
+                    this.internalState.currentFile || "",
+                    this.internalState.script || "",
+                    this.internalState.sourceType || "js"
+                );
+            } else {
+                this.activeView = new ReactRenderer(
+                    this.app,
+                    this.api.core,
+                    this.contentEl,
+                    this.internalState.currentFile || "",
+                    (
+                        <CUSTOM_VIEW_CONTEXT.Provider value={this}>
+                            <ErrorMessage message="No script defined for this view." />
+                        </CUSTOM_VIEW_CONTEXT.Provider>
+                    )
+                );
+            }
+        }
+
+        this.addChild(this.activeView);
+    }
+
+    public getState() {
+        return this.internalState;
+    }
+
+    /** Update the state of this view with new metadata. Generally controlled by the settings pane. */
+    public async setState(state: DatacoreViewState, _result: ViewStateResult): Promise<void> {
+        this.internalState = state;
+        this.rerender();
+    }
+
+    /** Swap the active view. */
+    public view(mode: "settings" | "script"): void {
+        this.internalState.view = mode;
+        this.rerender();
+    }
+
+    public async onOpen(): Promise<void> {}
+
+    /** Handle for right click menus. */
+    public onPaneMenu(menu: Menu, source: "more-options" | "tab-header" | string): void {
+        if (source === "more-options") {
+            menu.addItem((it) => {
+                it.setIcon("settings");
+                it.setTitle("Configure View");
+                it.onClick((e) => this.view("settings"));
+            });
+        }
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index 3c537bcf6..9391e2c57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -276,6 +276,51 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.18.6":
+  version "6.18.6"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz#de26e864a1ec8192a1b241eb86addbb612964ddb"
+  integrity sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/commands@^6.8.1":
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.8.1.tgz#639f5559d2f33f2582a2429c58cb0c1b925c7a30"
+  integrity sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.4.0"
+    "@codemirror/view" "^6.27.0"
+    "@lezer/common" "^1.1.0"
+
+"@codemirror/lang-javascript@^6.2.3":
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.2.3.tgz#d705c359dc816afcd3bcdf120a559f83d31d4cda"
+  integrity sha512-8PR3vIWg7pSu7ur8A07pGiYHgy3hHj+mRYRCSG8q+mPIrl0F02rgpGv+DsQTHRTc30rydOsf5PZ7yjKFg2Ackw==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.6.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/javascript" "^1.0.0"
+
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.6.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.11.0.tgz#5ae90972601497f4575f30811519d720bf7232c9"
+  integrity sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.23.0"
+    "@lezer/common" "^1.1.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+    style-mod "^4.0.0"
+
 "@codemirror/language@https://github.com/lishid/cm-language":
   version "6.11.2"
   resolved "https://github.com/lishid/cm-language#a9c3c7efe17dd1d24395ee2a179fe12dd6ed1e76"
@@ -294,6 +339,38 @@
   dependencies:
     "@marijn/find-cluster-break" "^1.0.0"
 
+"@codemirror/state@^6.5.0":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.5.2.tgz#8eca3a64212a83367dc85475b7d78d5c9b7076c6"
+  integrity sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==
+  dependencies:
+    "@marijn/find-cluster-break" "^1.0.0"
+
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.23.0", "@codemirror/view@^6.27.0", "@codemirror/view@^6.35.0", "@codemirror/view@^6.36.7":
+  version "6.36.7"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.36.7.tgz#f3711d3fea457a3eec1c09a76b8a132f98df17b1"
+  integrity sha512-kCWGW/chWGPgZqfZ36Um9Iz0X2IVpmCjg1P/qY6B6a2ecXtWRRAigmpJ6YgUQ5lTWXMyyVdfmpzhLZmsZQMbtg==
+  dependencies:
+    "@codemirror/state" "^6.5.0"
+    style-mod "^4.1.0"
+    w3c-keyname "^2.2.4"
+
+"@codemirror/state@^6.5.0":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.5.2.tgz#8eca3a64212a83367dc85475b7d78d5c9b7076c6"
+  integrity sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==
+  dependencies:
+    "@marijn/find-cluster-break" "^1.0.0"
+
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.23.0", "@codemirror/view@^6.27.0", "@codemirror/view@^6.35.0", "@codemirror/view@^6.36.7":
+  version "6.36.7"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.36.7.tgz#f3711d3fea457a3eec1c09a76b8a132f98df17b1"
+  integrity sha512-kCWGW/chWGPgZqfZ36Um9Iz0X2IVpmCjg1P/qY6B6a2ecXtWRRAigmpJ6YgUQ5lTWXMyyVdfmpzhLZmsZQMbtg==
+  dependencies:
+    "@codemirror/state" "^6.5.0"
+    style-mod "^4.1.0"
+    w3c-keyname "^2.2.4"
+
 "@codemirror/view@^6.0.1", "@codemirror/view@^6.23.0":
   version "6.38.0"
   resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.38.0.tgz#4486062b791a4247793e0953e05ae71a9e172217"
@@ -796,6 +873,16 @@
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.3.tgz#138fcddab157d83da557554851017c6c1e5667fd"
   integrity sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==
 
+"@lezer/common@^1.2.0":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.3.tgz#138fcddab157d83da557554851017c6c1e5667fd"
+  integrity sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==
+
+"@lezer/common@^1.2.0":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.3.tgz#138fcddab157d83da557554851017c6c1e5667fd"
+  integrity sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==
+
 "@lezer/highlight@^1.0.0":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.2.1.tgz#596fa8f9aeb58a608be0a563e960c373cbf23f8b"
@@ -803,6 +890,22 @@
   dependencies:
     "@lezer/common" "^1.0.0"
 
+"@lezer/highlight@^1.1.3":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.2.1.tgz#596fa8f9aeb58a608be0a563e960c373cbf23f8b"
+  integrity sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lezer/javascript@^1.0.0":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-1.5.1.tgz#2a424a6ec29f1d4ef3c34cbccc5447e373618ad8"
+  integrity sha512-ATOImjeVJuvgm3JQ/bpo2Tmv55HSScE2MTPnKRMRIPx2cLhHGyX2VnqpHhtIV1tVzIjZDbcWQm+NCTF40ggZVw==
+  dependencies:
+    "@lezer/common" "^1.2.0"
+    "@lezer/highlight" "^1.1.3"
+    "@lezer/lr" "^1.3.0"
+
 "@lezer/lr@^1.0.0":
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.4.2.tgz#931ea3dea8e9de84e90781001dae30dea9ff1727"
@@ -863,6 +966,11 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@replit/codemirror-vim@^6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@replit/codemirror-vim/-/codemirror-vim-6.3.0.tgz#1bcde09f25bcb1c4f96d2cd50ea07f9f71fc9ec4"
+  integrity sha512-aTx931ULAMuJx6xLf7KQDOL7CxD+Sa05FktTDrtLaSy53uj01ll3Zf17JdKsriER248oS55GBzg0CfCTjEneAQ==
+
 "@rushstack/node-core-library@5.13.1":
   version "5.13.1"
   resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-5.13.1.tgz#e56b915ecb08b5a92711acac6b233417353a32dc"
@@ -1955,6 +2063,16 @@ gopd@^1.2.0:
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
   integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
 
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
 graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"