diff --git a/packages/editor/src/components/EditElementModal.tsx b/packages/editor/src/components/EditElementModal.tsx
new file mode 100644
index 00000000..7c797b97
--- /dev/null
+++ b/packages/editor/src/components/EditElementModal.tsx
@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ */
+
+export interface EditElementModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSave: (content: string) => void;
+    initialContent: string;
+    elementLabel: string;
+}
+
+export function EditElementModal({ isOpen, onClose, onSave, initialContent, elementLabel }: EditElementModalProps) {
+    const [content, setContent] = React.useState(initialContent);
+
+    React.useEffect(() => {
+        setContent(initialContent);
+    }, [initialContent, isOpen]);
+
+    if (!isOpen) return null;
+
+    const handleSave = () => {
+        onSave(content);
+        onClose();
+    };
+
+    const handleCancel = () => {
+        setContent(initialContent);
+        onClose();
+    };
+
+    return (
+        <div
+            style={{
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                background: 'rgba(0, 0, 0, 0.5)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 2000
+            }}
+            onClick={handleCancel}
+        >
+            <div
+                style={{
+                    background: 'white',
+                    borderRadius: '8px',
+                    boxShadow: '0 16px 48px rgba(0, 0, 0, 0.3)',
+                    width: '90%',
+                    maxWidth: '600px',
+                    maxHeight: '80vh',
+                    display: 'flex',
+                    flexDirection: 'column'
+                }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {/* Modal Header */}
+                <div style={{
+                    padding: '16px 20px',
+                    borderBottom: '1px solid #e1e5e9',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                }}>
+                    <h3 style={{
+                        margin: 0,
+                        fontSize: '16px',
+                        fontWeight: '600',
+                        color: '#24292f'
+                    }}>
+                        ✏️ Edit Element: {elementLabel}
+                    </h3>
+                    <button
+                        onClick={handleCancel}
+                        style={{
+                            background: 'transparent',
+                            border: 'none',
+                            fontSize: '20px',
+                            cursor: 'pointer',
+                            color: '#656d76',
+                            padding: '4px 8px',
+                            lineHeight: 1
+                        }}
+                        title="Close"
+                    >
+                        ✕
+                    </button>
+                </div>
+
+                {/* Modal Body */}
+                <div style={{
+                    padding: '20px',
+                    flex: 1,
+                    overflow: 'auto'
+                }}>
+                    <textarea
+                        value={content}
+                        onChange={(e) => setContent(e.target.value)}
+                        style={{
+                            width: '100%',
+                            minHeight: '200px',
+                            padding: '12px',
+                            border: '1px solid #d1d9e0',
+                            borderRadius: '6px',
+                            fontSize: '14px',
+                            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+                            resize: 'vertical',
+                            background: '#f6f8fa',
+                            color: '#24292f',
+                            lineHeight: '1.5',
+                            boxSizing: 'border-box'
+                        }}
+                        autoFocus
+                    />
+                </div>
+
+                {/* Modal Footer */}
+                <div style={{
+                    padding: '16px 20px',
+                    borderTop: '1px solid #e1e5e9',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: '12px',
+                    background: '#f6f8fa'
+                }}>
+                    <button
+                        onClick={handleCancel}
+                        style={{
+                            padding: '8px 16px',
+                            border: '1px solid #d1d9e0',
+                            borderRadius: '6px',
+                            background: 'white',
+                            color: '#24292f',
+                            fontSize: '14px',
+                            fontWeight: '500',
+                            cursor: 'pointer'
+                        }}
+                        onMouseEnter={(e) => {
+                            e.currentTarget.style.background = '#f6f8fa';
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.background = 'white';
+                        }}
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        onClick={handleSave}
+                        style={{
+                            padding: '8px 16px',
+                            border: 'none',
+                            borderRadius: '6px',
+                            background: '#2da44e',
+                            color: 'white',
+                            fontSize: '14px',
+                            fontWeight: '500',
+                            cursor: 'pointer'
+                        }}
+                        onMouseEnter={(e) => {
+                            e.currentTarget.style.background = '#2c974b';
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.background = '#2da44e';
+                        }}
+                    >
+                        Save
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/editor/src/components/TreeView.tsx b/packages/editor/src/components/TreeView.tsx
new file mode 100644
index 00000000..c84fb887
--- /dev/null
+++ b/packages/editor/src/components/TreeView.tsx
@@ -0,0 +1,581 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ */
+import { InteractiveDocument, InteractiveElement, PageElement } from '@microsoft/chartifact-schema';
+import { ElementType, ELEMENT_CONFIGS, ELEMENT_TYPES } from '../types/elementTypes.js';
+import { EditElementModal } from './EditElementModal.js';
+
+export interface TreeViewProps {
+    page: InteractiveDocument;
+    onPageChange: (page: InteractiveDocument) => void;
+}
+
+export interface ElementInsertMenuProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onInsert: (elementType: ElementType) => void;
+    position: { x: number; y: number };
+}
+
+function ElementInsertMenu({ isOpen, onClose, onInsert, position }: ElementInsertMenuProps) {
+    React.useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (isOpen) {
+                onClose();
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('click', handleClickOutside as EventListener);
+        }
+
+        return () => {
+            document.removeEventListener('click', handleClickOutside as EventListener);
+        };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div
+            style={{
+                position: 'fixed',
+                left: position.x,
+                top: position.y,
+                background: 'white',
+                border: '1px solid #e1e5e9',
+                borderRadius: '6px',
+                boxShadow: '0 8px 24px rgba(149, 157, 165, 0.2)',
+                zIndex: 1000,
+                minWidth: '280px',
+                maxHeight: '400px',
+                overflowY: 'auto',
+                padding: '8px 0'
+            }}
+            onClick={(e) => e.stopPropagation()}
+        >
+            <div style={{ 
+                padding: '8px 16px', 
+                borderBottom: '1px solid #e1e5e9', 
+                fontWeight: '600',
+                fontSize: '14px',
+                color: '#24292f'
+            }}>
+                Insert Element
+            </div>
+            {ELEMENT_TYPES.map((elementConfig) => (
+                <button
+                    key={elementConfig.type}
+                    onClick={() => {
+                        onInsert(elementConfig.type);
+                        onClose();
+                    }}
+                    style={{
+                        width: '100%',
+                        padding: '8px 16px',
+                        border: 'none',
+                        background: 'transparent',
+                        textAlign: 'left',
+                        cursor: 'pointer',
+                        fontSize: '14px',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '2px'
+                    }}
+                    onMouseEnter={(e) => {
+                        e.currentTarget.style.background = '#f6f8fa';
+                    }}
+                    onMouseLeave={(e) => {
+                        e.currentTarget.style.background = 'transparent';
+                    }}
+                >
+                    <div style={{ fontWeight: '500', color: '#24292f' }}>
+                        {elementConfig.icon} {elementConfig.label}
+                    </div>
+                    <div style={{ fontSize: '12px', color: '#656d76' }}>
+                        {elementConfig.description}
+                    </div>
+                </button>
+            ))}
+        </div>
+    );
+}
+
+export function TreeView({ page, onPageChange }: TreeViewProps) {
+    const [insertMenu, setInsertMenu] = React.useState<{
+        isOpen: boolean;
+        position: { x: number; y: number };
+        groupIndex?: number;
+        elementIndex?: number;
+    }>({
+        isOpen: false,
+        position: { x: 0, y: 0 }
+    });
+
+    const [editModal, setEditModal] = React.useState<{
+        isOpen: boolean;
+        groupIndex?: number;
+        elementIndex?: number;
+        content: string;
+        label: string;
+    }>({
+        isOpen: false,
+        content: '',
+        label: ''
+    });
+
+    const deleteElement = (groupIndex: number, elementIndex: number) => {
+        const newPage = {
+            ...page,
+            groups: page.groups.map((group, gIdx) => {
+                if (gIdx === groupIndex) {
+                    return {
+                        ...group,
+                        elements: group.elements.filter((_, eIdx) => eIdx !== elementIndex)
+                    };
+                }
+                return group;
+            })
+        };
+        onPageChange(newPage);
+    };
+
+    const deleteGroup = (groupIndex: number) => {
+        const newPage = {
+            ...page,
+            groups: page.groups.filter((_, gIdx) => gIdx !== groupIndex)
+        };
+        onPageChange(newPage);
+    };
+
+    const addGroup = () => {
+        const newGroupId = `group_${Date.now()}`;
+        const newPage = {
+            ...page,
+            groups: [
+                ...page.groups,
+                {
+                    groupId: newGroupId,
+                    elements: []
+                }
+            ]
+        };
+        onPageChange(newPage);
+    };
+
+    const createElement = (elementType: ElementType): PageElement => {
+        switch (elementType) {
+            case ElementType.MARKDOWN:
+                return 'New text content here...';
+            
+            case ElementType.TEXTBOX:
+                return {
+                    type: ElementType.TEXTBOX,
+                    variableId: `textbox_${Date.now()}`,
+                    label: 'Text Input'
+                } as InteractiveElement;
+            
+            case ElementType.NUMBER:
+                return {
+                    type: ElementType.NUMBER,
+                    variableId: `number_${Date.now()}`,
+                    label: 'Number Input',
+                    min: 0,
+                    max: 100,
+                    step: 1
+                } as InteractiveElement;
+            
+            case ElementType.SLIDER:
+                return {
+                    type: ElementType.SLIDER,
+                    variableId: `slider_${Date.now()}`,
+                    label: 'Slider',
+                    min: 0,
+                    max: 100,
+                    step: 1
+                } as InteractiveElement;
+            
+            case ElementType.CHECKBOX:
+                return {
+                    type: ElementType.CHECKBOX,
+                    variableId: `checkbox_${Date.now()}`,
+                    label: 'Checkbox'
+                } as InteractiveElement;
+            
+            case ElementType.DROPDOWN:
+                return {
+                    type: ElementType.DROPDOWN,
+                    variableId: `dropdown_${Date.now()}`,
+                    label: 'Dropdown',
+                    options: ['Option 1', 'Option 2', 'Option 3']
+                } as InteractiveElement;
+            
+            case ElementType.CHART:
+                return {
+                    type: ElementType.CHART,
+                    chartKey: 'chart_placeholder'
+                } as InteractiveElement;
+            
+            case ElementType.TABULATOR:
+                return {
+                    type: ElementType.TABULATOR,
+                    dataSourceName: 'data_placeholder'
+                } as InteractiveElement;
+            
+            case ElementType.IMAGE:
+                return {
+                    type: ElementType.IMAGE,
+                    url: 'https://via.placeholder.com/300x200',
+                    alt: 'Placeholder image'
+                } as InteractiveElement;
+            
+            case ElementType.MERMAID:
+                return {
+                    type: ElementType.MERMAID,
+                    diagramText: 'graph TD\n    A[Start] --> B[End]'
+                } as InteractiveElement;
+            
+            case ElementType.TREEBARK:
+                return {
+                    type: ElementType.TREEBARK,
+                    template: { 
+                        type: 'div', 
+                        content: 'Template content',
+                        children: []
+                    }
+                } as any;
+            
+            case ElementType.PRESETS:
+                return {
+                    type: ElementType.PRESETS,
+                    presets: []
+                } as InteractiveElement;
+            
+            default:
+                return 'New element';
+        }
+    };
+
+    const insertElement = (elementType: ElementType) => {
+        const newElement = createElement(elementType);
+        
+        if (insertMenu.groupIndex !== undefined) {
+            const newPage = {
+                ...page,
+                groups: page.groups.map((group, gIdx) => {
+                    if (gIdx === insertMenu.groupIndex) {
+                        const insertIndex = insertMenu.elementIndex !== undefined 
+                            ? insertMenu.elementIndex + 1 
+                            : group.elements.length;
+                        
+                        const newElements = [...group.elements];
+                        newElements.splice(insertIndex, 0, newElement);
+                        
+                        return {
+                            ...group,
+                            elements: newElements
+                        };
+                    }
+                    return group;
+                })
+            };
+            onPageChange(newPage);
+        }
+    };
+
+    const openInsertMenu = (event: any, groupIndex: number, elementIndex?: number) => {
+        event.stopPropagation();
+        const rect = event.currentTarget.getBoundingClientRect();
+        setInsertMenu({
+            isOpen: true,
+            position: { x: rect.right + 8, y: rect.top },
+            groupIndex,
+            elementIndex
+        });
+    };
+
+    const closeInsertMenu = () => {
+        setInsertMenu({
+            isOpen: false,
+            position: { x: 0, y: 0 }
+        });
+    };
+
+    const getElementContent = (element: PageElement): string => {
+        if (typeof element === 'string') {
+            return element;
+        }
+        return JSON.stringify(element, null, 2);
+    };
+
+    const openEditModal = (groupIndex: number, elementIndex: number) => {
+        const element = page.groups[groupIndex].elements[elementIndex];
+        setEditModal({
+            isOpen: true,
+            groupIndex,
+            elementIndex,
+            content: getElementContent(element),
+            label: getElementLabel(element)
+        });
+    };
+
+    const closeEditModal = () => {
+        setEditModal({
+            isOpen: false,
+            content: '',
+            label: ''
+        });
+    };
+
+    const saveEditedElement = (newContent: string) => {
+        if (editModal.groupIndex === undefined || editModal.elementIndex === undefined) {
+            return;
+        }
+
+        const currentElement = page.groups[editModal.groupIndex].elements[editModal.elementIndex];
+        let updatedElement: PageElement;
+
+        if (typeof currentElement === 'string') {
+            // For markdown strings, just use the new content directly
+            updatedElement = newContent;
+        } else {
+            // For objects, try to parse JSON
+            try {
+                updatedElement = JSON.parse(newContent);
+            } catch (e) {
+                // If JSON parsing fails, treat it as a markdown string
+                updatedElement = newContent;
+            }
+        }
+
+        const newPage = {
+            ...page,
+            groups: page.groups.map((group, gIdx) => {
+                if (gIdx === editModal.groupIndex) {
+                    return {
+                        ...group,
+                        elements: group.elements.map((el, eIdx) => 
+                            eIdx === editModal.elementIndex ? updatedElement : el
+                        )
+                    };
+                }
+                return group;
+            })
+        };
+        onPageChange(newPage);
+    };
+
+    const getElementIcon = (element: PageElement): string => {
+        if (typeof element === 'string') {
+            return ELEMENT_CONFIGS[ElementType.MARKDOWN].icon;
+        }
+        
+        const elementType = element.type as ElementType;
+        return ELEMENT_CONFIGS[elementType]?.icon || '🎨';
+    };
+
+    const getElementLabel = (element: PageElement): string => {
+        if (typeof element === 'string') {
+            return element.slice(0, 30) + (element.length > 30 ? '...' : '');
+        }
+        
+        const label = (element as any).label || (element as any).variableId || element.type;
+        return label.slice(0, 30) + (label.length > 30 ? '...' : '');
+    };
+
+    return (
+        <div style={{ height: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+            {/* Header */}
+            <div style={{ 
+                padding: '12px 16px', 
+                borderBottom: '1px solid #e1e5e9',
+                background: '#f6f8fa'
+            }}>
+                <div style={{ 
+                    fontSize: '16px', 
+                    fontWeight: '600', 
+                    color: '#24292f',
+                    marginBottom: '4px'
+                }}>
+                    Document Structure
+                </div>
+                <div style={{ fontSize: '12px', color: '#656d76' }}>
+                    {page.title}
+                </div>
+            </div>
+
+            {/* Tree Content */}
+            <div style={{ flex: 1, overflowY: 'auto', padding: '8px' }}>
+                {page.groups.map((group, groupIndex) => (
+                    <div key={groupIndex} style={{ marginBottom: '12px' }}>
+                        {/* Group Header */}
+                        <div style={{ 
+                            display: 'flex', 
+                            alignItems: 'center', 
+                            gap: '8px',
+                            padding: '6px 8px',
+                            borderRadius: '4px',
+                            background: '#f6f8fa',
+                            marginBottom: '4px'
+                        }}>
+                            <span style={{ fontSize: '14px', fontWeight: '500', color: '#24292f' }}>
+                                📁 {group.groupId}
+                            </span>
+                            <div style={{ marginLeft: 'auto', display: 'flex', gap: '4px' }}>
+                                <button
+                                    onClick={(e) => openInsertMenu(e, groupIndex)}
+                                    style={{
+                                        background: '#2da44e',
+                                        color: 'white',
+                                        border: 'none',
+                                        borderRadius: '4px',
+                                        padding: '4px 8px',
+                                        fontSize: '12px',
+                                        cursor: 'pointer',
+                                        fontWeight: '500'
+                                    }}
+                                    title="Insert element"
+                                >
+                                    + Insert
+                                </button>
+                                <button
+                                    onClick={() => deleteGroup(groupIndex)}
+                                    style={{
+                                        background: '#da3633',
+                                        color: 'white',
+                                        border: 'none',
+                                        borderRadius: '4px',
+                                        padding: '4px 8px',
+                                        fontSize: '12px',
+                                        cursor: 'pointer',
+                                        fontWeight: '500'
+                                    }}
+                                    title="Delete group"
+                                >
+                                    Delete
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Group Elements */}
+                        <div style={{ marginLeft: '16px' }}>
+                            {group.elements.map((element, elementIndex) => (
+                                <div 
+                                    key={elementIndex} 
+                                    style={{ 
+                                        display: 'flex', 
+                                        alignItems: 'center', 
+                                        gap: '8px', 
+                                        padding: '4px 8px',
+                                        borderRadius: '4px',
+                                        marginBottom: '2px',
+                                        background: 'white',
+                                        border: '1px solid #d1d9e0'
+                                    }}
+                                >
+                                    <span style={{ fontSize: '13px', color: '#24292f', flex: 1 }}>
+                                        {getElementIcon(element)} {getElementLabel(element)}
+                                    </span>
+                                    <div style={{ display: 'flex', gap: '6px' }}>
+                                        <button
+                                            onClick={(e) => openInsertMenu(e, groupIndex, elementIndex)}
+                                            style={{
+                                                background: '#0969da',
+                                                color: 'white',
+                                                border: 'none',
+                                                borderRadius: '3px',
+                                                padding: '2px 6px',
+                                                fontSize: '10px',
+                                                cursor: 'pointer',
+                                                fontWeight: '500'
+                                            }}
+                                            title="Insert after"
+                                        >
+                                            +
+                                        </button>
+                                        <button
+                                            onClick={() => openEditModal(groupIndex, elementIndex)}
+                                            style={{
+                                                background: 'white',
+                                                color: '#24292f',
+                                                border: '1px solid #d1d9e0',
+                                                borderRadius: '3px',
+                                                padding: '2px 6px',
+                                                fontSize: '10px',
+                                                cursor: 'pointer',
+                                                fontWeight: '500'
+                                            }}
+                                            title="Edit element"
+                                        >
+                                            ✏️
+                                        </button>
+                                        <button
+                                            onClick={() => deleteElement(groupIndex, elementIndex)}
+                                            style={{
+                                                background: '#da3633',
+                                                color: 'white',
+                                                border: 'none',
+                                                borderRadius: '3px',
+                                                padding: '2px 6px',
+                                                fontSize: '10px',
+                                                cursor: 'pointer',
+                                                fontWeight: '500'
+                                            }}
+                                            title="Delete element"
+                                        >
+                                            ✕
+                                        </button>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+
+                {/* Add Group Button */}
+                <button
+                    onClick={addGroup}
+                    style={{
+                        width: '100%',
+                        padding: '8px',
+                        border: '2px dashed #d1d9e0',
+                        borderRadius: '6px',
+                        background: 'transparent',
+                        color: '#656d76',
+                        cursor: 'pointer',
+                        fontSize: '14px',
+                        fontWeight: '500'
+                    }}
+                    onMouseEnter={(e) => {
+                        e.currentTarget.style.borderColor = '#0969da';
+                        e.currentTarget.style.color = '#0969da';
+                    }}
+                    onMouseLeave={(e) => {
+                        e.currentTarget.style.borderColor = '#d1d9e0';
+                        e.currentTarget.style.color = '#656d76';
+                    }}
+                >
+                    + Add Group
+                </button>
+            </div>
+
+            {/* Insert Menu */}
+            <ElementInsertMenu
+                isOpen={insertMenu.isOpen}
+                onClose={closeInsertMenu}
+                onInsert={insertElement}
+                position={insertMenu.position}
+            />
+
+            {/* Edit Modal */}
+            <EditElementModal
+                isOpen={editModal.isOpen}
+                onClose={closeEditModal}
+                onSave={saveEditedElement}
+                initialContent={editModal.content}
+                elementLabel={editModal.label}
+            />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/packages/editor/src/editor.tsx b/packages/editor/src/editor.tsx
index 50065997..b471295e 100644
--- a/packages/editor/src/editor.tsx
+++ b/packages/editor/src/editor.tsx
@@ -6,6 +6,7 @@ import { InteractiveDocument } from '@microsoft/chartifact-schema';
 import { SandboxDocumentPreview } from "./sandbox.js";
 import { Sandbox } from '@microsoft/chartifact-sandbox';
 import { EditorPageMessage, EditorReadyMessage, SpecReview, SandboxedPreHydrateMessage } from "common";
+import { TreeView } from './components/TreeView.js';
 
 export interface EditorProps {
     postMessageTarget?: Window;
@@ -97,32 +98,6 @@ export function EditorView(props: EditorViewProps) {
         postMessageTarget.postMessage(pageMessage, '*');
     };
 
-    const deleteElement = (groupIndex: number, elementIndex) => {
-        const newPage = {
-            ...page,
-            groups: page.groups.map((group, gIdx) => {
-                if (gIdx === groupIndex) {
-                    return {
-                        ...group,
-                        elements: group.elements.filter((_, eIdx) => eIdx !== elementIndex)
-                    };
-                }
-                return group;
-            })
-        };
-
-        sendEditToApp(newPage);
-    };
-
-    const deleteGroup = (groupIndex) => {
-        const newPage = {
-            ...page,
-            groups: page.groups.filter((_, gIdx) => gIdx !== groupIndex)
-        };
-
-        sendEditToApp(newPage);
-    };
-
     return (
         <div style={{
             display: 'grid',
@@ -131,65 +106,15 @@ export function EditorView(props: EditorViewProps) {
             overflow: 'hidden'
         }}>
             <div style={{
-                padding: '10px',
-                borderRight: '1px solid #ccc',
-                overflowY: 'auto'
+                borderRight: '1px solid #e1e5e9',
+                overflowY: 'auto',
+                background: '#fafbfc',
+                padding: '20px'
             }}>
-                <h3>Tree View</h3>
-                <div>
-                    <div>📄 {page.title}</div>
-                    <div style={{ marginLeft: '20px' }}>
-                        {page.groups.map((group, groupIndex) => (
-                            <div key={groupIndex} style={{ marginBottom: '10px' }}>
-                                <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-                                    📁 {group.groupId}
-                                    <button
-                                        onClick={() => deleteGroup(groupIndex)}
-                                        style={{
-                                            background: '#ff4444',
-                                            color: 'white',
-                                            border: 'none',
-                                            borderRadius: '3px',
-                                            padding: '2px 6px',
-                                            fontSize: '10px',
-                                            cursor: 'pointer'
-                                        }}
-                                        title="Delete group"
-                                    >
-                                        ✕
-                                    </button>
-                                </div>
-                                <div style={{ marginLeft: '20px' }}>
-                                    {group.elements.map((element, elementIndex) => (
-                                        <div key={elementIndex} style={{ display: 'flex', alignItems: 'center', gap: '5px', marginBottom: '2px' }}>
-                                            <span>
-                                                {typeof element === 'string'
-                                                    ? `📝 ${element.slice(0, 30)}${element.length > 30 ? '...' : ''}`
-                                                    : `🎨 ${element.type}`
-                                                }
-                                            </span>
-                                            <button
-                                                onClick={() => deleteElement(groupIndex, elementIndex)}
-                                                style={{
-                                                    background: '#ff4444',
-                                                    color: 'white',
-                                                    border: 'none',
-                                                    borderRadius: '3px',
-                                                    padding: '2px 6px',
-                                                    fontSize: '10px',
-                                                    cursor: 'pointer'
-                                                }}
-                                                title="Delete element"
-                                            >
-                                                ✕
-                                            </button>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                </div>
+                <TreeView 
+                    page={page} 
+                    onPageChange={sendEditToApp} 
+                />
             </div>
             <div style={{
                 display: 'grid',
diff --git a/packages/editor/src/types/elementTypes.ts b/packages/editor/src/types/elementTypes.ts
new file mode 100644
index 00000000..4303ce09
--- /dev/null
+++ b/packages/editor/src/types/elementTypes.ts
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ */
+
+/**
+ * Enum for all supported element types in interactive documents
+ */
+export enum ElementType {
+    MARKDOWN = 'markdown',
+    TEXTBOX = 'textbox',
+    NUMBER = 'number',
+    SLIDER = 'slider',
+    CHECKBOX = 'checkbox',
+    DROPDOWN = 'dropdown',
+    CHART = 'chart',
+    TABULATOR = 'tabulator',
+    IMAGE = 'image',
+    MERMAID = 'mermaid',
+    TREEBARK = 'treebark',
+    PRESETS = 'presets'
+}
+
+/**
+ * Configuration for an element type in the insert menu
+ */
+export interface ElementConfig {
+    type: ElementType;
+    label: string;
+    icon: string;
+    description: string;
+}
+
+/**
+ * Configuration for all element types
+ * Single source of truth for element metadata
+ */
+export const ELEMENT_CONFIGS: Record<ElementType, ElementConfig> = {
+    [ElementType.MARKDOWN]: {
+        type: ElementType.MARKDOWN,
+        label: 'Text/Markdown',
+        icon: '📝',
+        description: 'Add text content with markdown formatting'
+    },
+    [ElementType.TEXTBOX]: {
+        type: ElementType.TEXTBOX,
+        label: 'Textbox',
+        icon: '📝',
+        description: 'Text input field'
+    },
+    [ElementType.NUMBER]: {
+        type: ElementType.NUMBER,
+        label: 'Number',
+        icon: '🔢',
+        description: 'Numeric input field'
+    },
+    [ElementType.SLIDER]: {
+        type: ElementType.SLIDER,
+        label: 'Slider',
+        icon: '🎚️',
+        description: 'Numeric slider control'
+    },
+    [ElementType.CHECKBOX]: {
+        type: ElementType.CHECKBOX,
+        label: 'Checkbox',
+        icon: '☑️',
+        description: 'Boolean checkbox input'
+    },
+    [ElementType.DROPDOWN]: {
+        type: ElementType.DROPDOWN,
+        label: 'Dropdown',
+        icon: '📋',
+        description: 'Selection dropdown list'
+    },
+    [ElementType.CHART]: {
+        type: ElementType.CHART,
+        label: 'Chart',
+        icon: '📊',
+        description: 'Data visualization chart'
+    },
+    [ElementType.TABULATOR]: {
+        type: ElementType.TABULATOR,
+        label: 'Table',
+        icon: '📋',
+        description: 'Interactive data table'
+    },
+    [ElementType.IMAGE]: {
+        type: ElementType.IMAGE,
+        label: 'Image',
+        icon: '🖼️',
+        description: 'Display images'
+    },
+    [ElementType.MERMAID]: {
+        type: ElementType.MERMAID,
+        label: 'Diagram',
+        icon: '📊',
+        description: 'Mermaid diagrams'
+    },
+    [ElementType.TREEBARK]: {
+        type: ElementType.TREEBARK,
+        label: 'Template',
+        icon: '🌳',
+        description: 'HTML template component'
+    },
+    [ElementType.PRESETS]: {
+        type: ElementType.PRESETS,
+        label: 'Presets',
+        icon: '⚙️',
+        description: 'Variable preset controls'
+    }
+};
+
+/**
+ * Array of all element configurations for iteration
+ */
+export const ELEMENT_TYPES = Object.values(ELEMENT_CONFIGS);