diff --git a/components/CanvasEditor.vue b/components/CanvasEditor.vue
new file mode 100644
index 0000000..d2405d1
--- /dev/null
+++ b/components/CanvasEditor.vue
@@ -0,0 +1,187 @@
+<script lang="ts">
+type Direction = 'bottom' | 'top' | 'left' | 'right';
+const rotation: Record<Direction, string> = {
+    top: "180",
+    bottom: "0",
+    left: "90",
+    right: "270"
+};
+</script>
+
+<script setup lang="ts">
+import { useDrag, useHover, usePinch, useWheel } from '@vueuse/gesture';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { clamp } from '#shared/general.utils';
+import type { CanvasContent, CanvasEdge, CanvasNode } from '~/types/canvas';
+import { labelCenter, getPath } from '#shared/canvas.util';
+import FakeA from './prose/FakeA.vue';
+
+const { canvas } = defineProps<{
+    canvas: CanvasContent
+}>();
+
+const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
+const focusing = ref<CanvasNode | CanvasEdge>(), editing = ref<CanvasNode | CanvasEdge>();
+const canvasRef = useTemplateRef('canvasRef');
+
+const nodes = computed(() => {
+    return canvas.nodes.map(e => ({ ...e, class: e.color ? e.color?.class ? 
+        { bg: `bg-light-${e.color?.class} dark:bg-dark-${e.color?.class}`, border: `border-light-${e.color?.class} dark:border-dark-${e.color?.class}`, outline: `outline-light-${e.color?.class} dark:outline-dark-${e.color?.class}` } : 
+        { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]`, outline: `outline-[color:var(--canvas-color)]` } : 
+        { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40`, outline: `outline-light-40 dark:outline-dark-40` } }))
+})
+const edges = computed(() => {
+    return canvas.edges.map(e => { 
+        const from = canvas.nodes.find(f => f.id === e.fromNode), to = canvas.nodes.find(f => f.id === e.toNode);
+        const path = getPath(from!, e.fromSide, to!, e.toSide)!;
+        return { ...e, from, to, path };
+    });
+})
+
+const reset = (_: MouseEvent) => {
+    zoom.value = minZoom.value; 
+
+    dispX.value = 0; 
+    dispY.value = 0;
+}
+
+const cancelEvent = (e: Event) => e.preventDefault()
+useHover(({ hovering }) => {
+    if (!hovering) {
+        //@ts-ignore
+        window.removeEventListener('wheel', cancelEvent, { passive: false });
+        document.removeEventListener('gesturestart', cancelEvent)
+        document.removeEventListener('gesturechange', cancelEvent)
+        return
+    }
+    
+    window.addEventListener('wheel', cancelEvent, { passive: false });
+    document.addEventListener('gesturestart', cancelEvent)
+    document.addEventListener('gesturechange', cancelEvent)
+}, {
+    domTarget: canvasRef,
+});
+
+const dragHandler = useDrag(({ delta: [x, y] }: { delta: number[] }) => { 
+    if(editing.value === undefined)
+    {
+        dispX.value += x / zoom.value;
+        dispY.value += y / zoom.value;
+    }
+}, {
+    useTouch: true,
+    domTarget: canvasRef,
+});
+const wheelHandler = useWheel(({ delta: [x, y] }: { delta: number[] }) => {
+    if(editing.value === undefined)
+    {
+        zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
+    }
+}, {
+    eventOptions: {
+        capture: true,
+    },
+    domTarget: canvasRef,
+});
+const pinchHandler = usePinch(({ offset: [z] }: { offset: number[] }) => {
+    if(editing.value === undefined)
+    {
+        zoom.value = clamp(z / 2048, minZoom.value, 3);
+    }
+}, {
+    domTarget: canvasRef,
+});
+</script>
+
+<template>
+    <div ref="canvasRef" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none" :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }" @click.self="() => { focusing = undefined; editing = undefined; }">
+        <div class="flex flex-col absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden gap-4">
+            <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
+                <Tooltip message="Zoom avant" side="right">
+                    <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:plus" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Reset" side="right">
+                    <div @click="zoom = 1" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:reload" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Tout contenir" side="right">
+                    <div @click="reset" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:corners" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Zoom arrière" side="right">
+                    <div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:minus" />
+                    </div>
+                </Tooltip>
+            </div>
+            <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
+                <Tooltip message="Aide" side="right">
+                    <Dialog title="Aide" iconClose>
+                        <template #trigger>
+                            <div class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                                <Icon icon="radix-icons:question-mark-circled" />
+                            </div>
+                        </template>
+                        <template #default>
+                            <div class="flex items-center"><Icon icon="ph:mouse-left-click-fill" class="w-6 h-6"/>: Selectionner</div>
+                            <div class="flex items-center"><Icon icon="ph:mouse-middle-click-fill" class="w-6 h-6"/>: Déplacer</div>
+                            <div class="flex items-center"><Icon icon="ph:mouse-right-click-fill" class="w-6 h-6"/>: Menu</div>
+                        </template>
+                    </Dialog>
+                </Tooltip>
+            </div>
+        </div>
+<!--         <ContextMenuRoot>
+            <ContextMenuTrigger asChild> -->
+                <div :style="{
+                    '--tw-translate-x': `${dispX}px`,
+                    '--tw-translate-y': `${dispY}px`,
+                    '--tw-scale-x': `${zoom}`,
+                    '--tw-scale-y': `${zoom}`,
+                    transform: 'scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)'
+                }">
+                    <div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none touch-none">
+                        <div>
+                            <div v-for="node of nodes" :key="node.id" class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
+                                <div v-if="editing?.id !== node.id" style="outline-style: solid;" :class="[node.class.border, node.class.outline, { '!outline-4': focusing?.id === node.id }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex" @click.left="() => { focusing = node; editing = undefined; }" @dblclick="() => { if(node.type === 'text') editing = node; }">
+                                    <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="node.class.bg">
+                                        <div v-if="node.text?.length > 0" class="flex items-center">
+                                            <MarkdownRenderer :content="node.text" :proses="{ a: FakeA }" />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div v-else style="outline-style: solid;" :class="[node.class.border, node.class.outline, { '!outline-4': focusing?.id === node.id }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex" >
+                                    <Editor v-model="node.text" />
+                                </div>
+                                <div v-if="node.type === 'group' && node.label !== undefined" :class="node.class.border" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
+                            </div>
+                        </div>
+                        <template v-for="edge of edges">
+                            <div :key="edge.id" v-if="edge.label" class="absolute z-10"
+                                :style="{ transform: labelCenter(edge.from!, edge.fromSide, edge.to!, edge.toSide) }">
+                                <div class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 -translate-x-[50%] -translate-y-[50%]">{{ edge.label }}</div>
+                            </div>
+                        </template>
+                        <svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none">
+                            <g v-for="edge of edges" :key="edge.id" :style="{'--canvas-color': edge.color?.hex}" class="z-0">
+                                <path :style="`stroke-linecap: butt; stroke-width: calc(3px * var(--zoom-multiplier));`" :class="edge.color?.class ? `stroke-light-${edge.color.class} dark:stroke-dark-${edge.color.class}` : ((edge.color && edge.color?.hex !== undefined) ? 'stroke-[color:var(--canvas-color)]' : 'stroke-light-40 dark:stroke-dark-40')" class="fill-none stroke-[4px]" :d="edge.path.path"></path>
+                                <g :style="`transform: translate(${edge.path.to.x}px, ${edge.path.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[edge.path.side]}deg);`">
+                                    <polygon :class="edge.color?.class ? `fill-light-${edge.color.class} dark:fill-dark-${edge.color.class}` : ((edge.color && edge.color?.hex !== undefined) ? 'fill-[color:var(--canvas-color)]' : 'fill-light-40 dark:fill-dark-40')" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div><!-- 
+            </ContextMenuTrigger>
+            <ContextMenuPortal>
+                <ContextMenuContent>
+                    <ContextMenuItem @select="(e) => canvas.nodes.push({ id: useId(), })" >Nouveau</ContextMenuItem>
+                </ContextMenuContent>
+            </ContextMenuPortal>
+        </ContextMenuRoot> -->
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/Editor.vue b/components/Editor.vue
index 0a22a43..23676dc 100644
--- a/components/Editor.vue
+++ b/components/Editor.vue
@@ -84,13 +84,14 @@ watchEffect(() => {
 </script>
 
 <template>
-    <div ref="editor" class="flex flex-1 w-full justify-stretch items-stretch border border-light-35 dark:border-dark-35 caret-light-100 dark:caret-dark-100" />
+    <div ref="editor" class="flex flex-1 w-full justify-stretch items-stretch border border-light-35 dark:border-dark-35 caret-light-100 dark:caret-dark-100 py-2 px-1.5 font-sans text-base" />
 </template>
 
 <style>
 .cm-editor
 {
     @apply bg-transparent;
+    @apply flex-1
 }
 .cm-editor .cm-content
 {
diff --git a/components/base/Kbd.vue b/components/base/Kbd.vue
new file mode 100644
index 0000000..f634424
--- /dev/null
+++ b/components/base/Kbd.vue
@@ -0,0 +1,3 @@
+<template>
+    <span class="rounded bg-light-35 dark:bg-dark-35 font-mono text-sm px-1 py-0 select-none" style="box-shadow: black 0 2px 0 1px;"><slot /></span>
+</template>
\ No newline at end of file
diff --git a/components/canvas/CanvasEdge.vue b/components/canvas/CanvasEdge.vue
index 238fdfe..9bd2775 100644
--- a/components/canvas/CanvasEdge.vue
+++ b/components/canvas/CanvasEdge.vue
@@ -1,15 +1,9 @@
 <script setup lang="ts">
+import type { Direction, Path } from "~/shared/canvas.util";
 import type { CanvasColor } from "~/types/canvas";
 
-type Direction = 'bottom' | 'top' | 'left' | 'right';
-
 const props = defineProps<{
-    path: {
-        path: string;
-        from: { x: number; y: number };
-        to: { x: number; y: number };
-        side: Direction;
-    };
+    path: Path;
     color?: CanvasColor;
     label?: string;
 }>();
diff --git a/components/canvas/CanvasRenderer.vue b/components/canvas/CanvasRenderer.vue
index f1fe846..0e5d853 100644
--- a/components/canvas/CanvasRenderer.vue
+++ b/components/canvas/CanvasRenderer.vue
@@ -11,19 +11,23 @@
         </template>
         <svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none">
             <CanvasEdge v-for="edge of canvas.edges" :key="edge.id"
-                :path="getPath(getNode(canvas.nodes, edge.fromNode)!, edge.fromSide, getNode(canvas.nodes, edge.toNode)!, edge.toSide)"
+                :path="getPath(getNode(canvas.nodes, edge.fromNode)!, edge.fromSide, getNode(canvas.nodes, edge.toNode)!, edge.toSide)!"
                 :color="edge.color" :label="edge.label" />
         </svg>
     </div>
 </template>
 
 <script setup lang="ts">
+import { labelCenter, getNode, getPath } from '#shared/canvas.util';
+import type { CanvasContent } from '~/types/content';
+import type { CanvasContent as Canvas } from '~/types/canvas';
+
 const { path } = defineProps<{
     path: string
 }>();
 
 const { content, get } = useContent();
-const overview = computed(() => content.value.find(e => e.path === path));
+const overview = computed(() => content.value.find(e => e.path === path) as CanvasContent | undefined);
 
 const loading = ref(false);
 if(overview.value && !overview.value.content)
@@ -32,90 +36,6 @@ if(overview.value && !overview.value.content)
     await get(path);
     loading.value = false;
 }
-const canvas = computed(() => overview.value && overview.value.content ? JSON.parse(overview.value.content) as CanvasContent : undefined);
+const canvas = computed(() => overview.value && overview.value.content ? JSON.parse(overview.value.content) as Canvas : undefined);
 
-</script>
-
-<script lang="ts">
-import { clamp } from '~/shared/general.utils';
-import type { CanvasContent, CanvasNode } from '~/types/canvas';
-
-function edgePos(side: 'bottom' | 'top' | 'left' | 'right', pos: { x: number, y: number }, offset: number): { x: number, y: number } {
-    switch (side) {
-        case "left":
-            return {
-                x: pos.x - offset,
-                y: pos.y
-            };
-        case "right":
-            return {
-                x: pos.x + offset,
-                y: pos.y
-            };
-        case "top":
-            return {
-                x: pos.x,
-                y: pos.y - offset
-            };
-        case "bottom":
-            return {
-                x: pos.x,
-                y: pos.y + offset
-            }
-    }
-}
-function getNode(nodes: CanvasNode[], id: string): CanvasNode | undefined
-{
-    return nodes.find(e => e.id === id);
-}
-function posFromDir(e: { minX: number, minY: number, maxX: number, maxY: number }, t: 'bottom' | 'top' | 'left' | 'right'): { x: number, y: number } {
-    switch (t) {
-        case "top":
-            return { x: (e.minX + e.maxX) / 2, y: e.minY };
-        case "right":
-            return { x: e.maxX, y: (e.minY + e.maxY) / 2 };
-        case "bottom":
-            return { x: (e.minX + e.maxX) / 2, y: e.maxY };
-        case "left":
-            return { x: e.minX, y: (e.minY + e.maxY) / 2 };
-    }
-}
-function getBbox(node: CanvasNode): { minX: number, minY: number, maxX: number, maxY: number } {
-    return { minX: node.x, minY: node.y, maxX: node.x + node.width, maxY: node.y + node.height };
-}
-function getPath(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
-    if(from === undefined || to === undefined)
-    {
-        return {
-            path: '',
-            from: {},
-            to: {},
-            toSide: '',
-        }
-    }
-    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
-    return bezier(start, fromSide, end, toSide);
-}
-function bezier(from: { x: number, y: number }, fromSide: 'bottom' | 'top' | 'left' | 'right', to: { x: number, y: number }, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
-    const r = Math.hypot(from.x - to.x, from.y - to.y), o = clamp(r / 2, 70, 150), a = edgePos(fromSide, from, o), s = edgePos(toSide, to, o);
-    return {
-        path: `M${from.x},${from.y} C${a.x},${a.y} ${s.x},${s.y} ${to.x},${to.y}`,
-        from: from,
-        to: to,
-        side: toSide,
-    };
-}
-function labelCenter(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): string {
-    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
-    const len = Math.hypot(start.x - end.x, start.y - end.y), offset = clamp(len / 2, 70, 150), b = edgePos(fromSide, start, offset), s = edgePos(toSide, end, offset);
-    const center = getCenter(start, end, b, s, 0.5);
-    return `translate(${center.x}px, ${center.y}px)`;
-}
-function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r: { x: number, y: number }, o: { x: number, y: number }, e: number): { x: number, y: number } {
-    const a = 1 - e, s = a * a * a, l = 3 * e * a * a, c = 3 * e * e * a, u = e * e * e;
-    return {
-        x: s * n.x + l * r.x + c * o.x + u * i.x,
-        y: s * n.y + l * r.y + c * o.y + u * i.y
-    };
-}
 </script>
\ No newline at end of file
diff --git a/components/page/Canvas.vue b/components/page/Canvas.vue
index 83fb203..183a429 100644
--- a/components/page/Canvas.vue
+++ b/components/page/Canvas.vue
@@ -70,6 +70,18 @@ dark:border-dark-yellow
 dark:border-dark-green
 dark:border-dark-cyan
 dark:border-dark-purple
+outline-light-red
+outline-light-orange
+outline-light-yellow
+outline-light-green
+outline-light-cyan
+outline-light-purple
+dark:outline-dark-red
+dark:outline-dark-orange
+dark:outline-dark-yellow
+dark:outline-dark-green
+dark:outline-dark-cyan
+dark:outline-dark-purple
 
 */
 
@@ -141,7 +153,13 @@ const pinchHandler = usePinch(({ offset: [z] }: { offset: number[] }) => {
                 </Tooltip>
             </div>
         </div>
-        <div :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}" >
+        <div :style="{
+            '--tw-translate-x': `${dispX}px`,
+            '--tw-translate-y': `${dispY}px`,
+            '--tw-scale-x': `${zoom}`,
+            '--tw-scale-y': `${zoom}`,
+            transform: 'scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)'
+        }">
             <CanvasRenderer :path="path"  />
         </div>
     </div>
diff --git a/db.sqlite b/db.sqlite
index 89d2494..3c131de 100644
Binary files a/db.sqlite and b/db.sqlite differ
diff --git a/db.sqlite-shm b/db.sqlite-shm
index 6201f89..ca9fdfe 100644
Binary files a/db.sqlite-shm and b/db.sqlite-shm differ
diff --git a/db.sqlite-wal b/db.sqlite-wal
index a3c9f7b..d07a3f9 100644
Binary files a/db.sqlite-wal and b/db.sqlite-wal differ
diff --git a/pages/explore/edit/index.vue b/pages/explore/edit/index.vue
index c368269..8bcf53a 100644
--- a/pages/explore/edit/index.vue
+++ b/pages/explore/edit/index.vue
@@ -129,16 +129,22 @@
 							<Head>
 								<Title>d[any] - Modification de {{ selected.title }}</Title>
 							</Head>
-							<CollapsibleRoot v-model:open="topOpen" class="my-4 w-full relative">
+							<CollapsibleRoot v-model:open="topOpen" class="group data-[state=open]:mt-4 w-full relative">
 								<CollapsibleTrigger asChild>
-									<Button class="absolute left-1/2 -translate-x-1/2 -bottom-3" icon>
+									<Button class="absolute left-1/2 -translate-x-1/2 group-data-[state=open]:-bottom-3 group-data-[state=closed]:-bottom-6 z-30" icon>
 										<Icon v-if="topOpen" icon="radix-icons:caret-up" class="h-4 w-4" />
 										<Icon v-else icon="radix-icons:caret-down" class="h-4 w-4" />
 									</Button>
 								</CollapsibleTrigger>
 								<CollapsibleContent class="xl:px-12 lg:px-8 px-6">
 									<div class="pb-2 grid lg:grid-cols-2 grid-cols-1 lg:items-center justify-between gap-x-4 flex-1 border-b border-light-35 dark:border-dark-35">
-										<input type="text" v-model="selected.title" placeholder="Titre" style="line-height: normal;" class="flex-1 md:text-5xl text-4xl md:h-14 h-12 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none pb-3 font-thin bg-transparent"/>
+										<input type="text" v-model="selected.title" @input="() => {
+											if(selected && !selected.customPath)
+											{
+												selected.name = parsePath(selected.title);
+												rebuildPath(selected.children, getPath(selected));
+											}
+										}" placeholder="Titre" style="line-height: normal;" class="flex-1 md:text-5xl text-4xl md:h-14 h-12 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none pb-3 font-thin bg-transparent"/>
 										<div class="flex flex-row justify-between items-center gap-x-4">
 											<div v-if="selected.customPath" class="flex lg:items-center truncate">
 												<pre class="md:text-base text-sm truncate" style="direction: rtl">/{{ selected.parent !== '' ? selected.parent + '/' : '' }}</pre>
@@ -154,7 +160,7 @@
 											<DropdownMenu align="end" :options="[{
 												type: 'checkbox',
 												label: 'URL custom',
-												select: (state: boolean) => selected!.customPath = state,
+												select: (state: boolean) => { selected!.customPath = state; if(!state) selected!.name = parsePath(selected!.title) },
 												checked: selected.customPath
 											}]">
 												<Button class="" icon><Icon icon="radix-icons:dots-vertical"/></Button>
@@ -163,7 +169,7 @@
 									</div>
 								</CollapsibleContent>
 							</CollapsibleRoot>
-							<div class="py-4 flex-1 w-full max-h-full flex overflow-hidden xl:px-12 lg:px-8 px-6">
+							<div class="py-4 flex-1 w-full max-h-full flex overflow-hidden xl:px-12 lg:px-8 px-6 relative">
 								<template v-if="selected.type === 'markdown'">
 									<div v-if="contentStatus === 'pending'" class="flex flex-1 justify-center items-center">
 										<Loading />
@@ -175,12 +181,12 @@
 										</SplitterPanel>
 										<SplitterResizeHandle class="bg-light-35 dark:bg-dark-35 w-px xl!mx-4 mx-2" />
 										<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }">
-											<div class="flex-1 max-h-full !overflow-y-auto px-8" :class="{ 'hidden': isCollapsed }"><MarkdownRenderer :content="debounced" :proses="{ 'a': FakeA }" /></div>
+											<div class="flex-1 max-h-full !overflow-y-auto px-8" :class="{ 'hidden': isCollapsed }"><MarkdownRenderer :content="(debounced as string)" :proses="{ 'a': FakeA }" /></div>
 										</SplitterPanel>
 									</SplitterGroup>
 								</template>
 								<template v-else-if="selected.type === 'canvas'">
-									<span class="flex flex-1 justify-center items-center"><ProseH3>Editeur de graphe en cours de développement</ProseH3></span>
+									<CanvasEditor :canvas="JSON.parse(selected.content ?? '{}')" />
 								</template>
 								<template v-else-if="selected.type === 'map'">
 									<span class="flex flex-1 justify-center items-center"><ProseH3>Editeur de carte en cours de développement</ProseH3></span>
@@ -201,11 +207,11 @@
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
 import { parsePath } from '#shared/general.utils';
-import type { FileType, TreeItem } from '~/types/content';
+import type { ExploreContent, FileType, MarkdownContent, TreeItem } from '~/types/content';
 import { iconByType } from '#shared/general.utils';
 import FakeA from '~/components/prose/FakeA.vue';
 
-export interface TreeItemEditable extends TreeItem
+export type TreeItemEditable = TreeItem &
 {
 	parent: string;
 	name: string;
@@ -276,7 +282,7 @@ const debounced = useDebounce(content, 250, { maxWait: 500 });
 
 watch(debounced, () => {
 	if(selected.value && debounced.value)
-		sessionStorage.setItem(`editing:${encodeURIComponent(selected.value.path)}`, debounced.value);
+		sessionStorage.setItem(`editing:${encodeURIComponent(selected.value.path)}`, typeof debounced.value === 'string' ? debounced.value : JSON.stringify(debounced.value));
 });
 useShortcuts({
     meta_s: { usingInput: true, handler: () => save(false) },
@@ -412,7 +418,7 @@ function add(type: FileType): void
 
 	const news = [...tree.search(navigation.value, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
 	const title = `Nouveau${news.length > 0 ? ' (' + news.length +')' : ''}`;
-	const item: TreeItemEditable = { navigable: true, private: false, parent: '', path: '', title: title, name: parsePath(title), type: type, order: 0, children: type === 'folder' ? [] : undefined, customPath: false, content: type === 'markdown' ? '' : undefined, owner: -1, timestamp: new Date(), visit: 0 };
+	const item: TreeItemEditable = { navigable: true, private: false, parent: '', path: '', title: title, name: parsePath(title), type: type, order: 0, children: type === 'folder' ? [] : undefined, customPath: false, content: undefined, owner: -1, timestamp: new Date(), visit: 0 };
 
 	if(!selected.value)
 	{
@@ -523,11 +529,9 @@ async function save(redirect: boolean): Promise<void>
 		sessionStorage.clear();
 
 		toaster.clear('error');
-		toaster.add({
-			type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
-		});
+		toaster.add({ type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000 });
 
-		complete.value = result;
+		complete.value = result as ExploreContent[];
 		if(redirect) router.go(-1);
 	} catch(e: any) {
 		toaster.add({
diff --git a/schemas/project.ts b/schemas/project.ts
index 4dcfada..ae1d031 100644
--- a/schemas/project.ts
+++ b/schemas/project.ts
@@ -17,7 +17,6 @@ export const item: z.ZodType<ProjectItem> = baseItem.extend({
 });
 export const project = z.array(item);
 
-type Project = z.infer<typeof project>;
-type ProjectItem = z.infer<typeof baseItem> & {
+export type ProjectItem = z.infer<typeof baseItem> & {
     children?: ProjectItem[]
 }; 
\ No newline at end of file
diff --git a/server/api/project.post.ts b/server/api/project.post.ts
index 2001976..654844b 100644
--- a/server/api/project.post.ts
+++ b/server/api/project.post.ts
@@ -1,10 +1,10 @@
 import { hasPermissions } from "#shared/auth.util";
 import useDatabase from '~/composables/useDatabase';
 import { explorerContentTable } from '~/db/schema';
-import { project } from '~/schemas/project';
+import { project, type ProjectItem } from '~/schemas/project';
 import { parsePath } from "#shared/general.utils";
 import { eq, getTableColumns, sql } from "drizzle-orm";
-import type { ExploreContent } from "~/types/content";
+import type { ExploreContent, TreeItem } from "~/types/content";
 import type { TreeItemEditable } from "~/pages/explore/edit/index.vue";
 
 export default defineEventHandler(async (e) => {
@@ -47,14 +47,14 @@ export default defineEventHandler(async (e) => {
             const path = [item.parent, parsePath(item.name === '' ? item.title : item.name)].filter(e => !!e).join('/');
 
             tx.insert(explorerContentTable).values({ 
-                path: item.path,
+                path: item.path || path,
                 owner: user.id,
                 title: item.title,
                 type: item.type,
                 navigable: item.navigable,
                 private: item.private,
                 order: item.order,
-                content: item.content ?? old.content,
+                content: item.content ?? old?.content ?? null,
             }).onConflictDoUpdate({
                 set: {
                     path: path,
@@ -64,12 +64,12 @@ export default defineEventHandler(async (e) => {
                     private: item.private,
                     order: item.order,
                     timestamp: new Date(),
-                    content: item.content ?? old.content,
+                    content: item.content ?? old?.content ?? null,
                 },
                 target: explorerContentTable.path,
             }).run();
 
-            if(item.path !== path)
+            if(item.path !== path && !old)
             {
                 tx.update(explorerContentTable).set({ content: sql`replace(${explorerContentTable.content}, ${sql.placeholder('old')}, ${sql.placeholder('new')})` }).prepare().run({ 'old': item.path, 'new': path });
             }
diff --git a/shared/canvas.util.ts b/shared/canvas.util.ts
new file mode 100644
index 0000000..d400bfc
--- /dev/null
+++ b/shared/canvas.util.ts
@@ -0,0 +1,84 @@
+import type { CanvasNode } from "~/types/canvas";
+import { clamp } from "#shared/general.utils";
+
+export type Direction = 'bottom' | 'top' | 'left' | 'right';
+export type Position = { x: number, y: number };
+export type Path = {
+    path: string;
+    from: Position;
+    to: Position;
+    side: Direction;
+}
+
+export function edgePos(side: Direction, pos: Position, offset: number): Position {
+    switch (side) {
+        case "left":
+            return {
+                x: pos.x - offset,
+                y: pos.y
+            };
+        case "right":
+            return {
+                x: pos.x + offset,
+                y: pos.y
+            };
+        case "top":
+            return {
+                x: pos.x,
+                y: pos.y - offset
+            };
+        case "bottom":
+            return {
+                x: pos.x,
+                y: pos.y + offset
+            }
+    }
+}
+export function getNode(nodes: CanvasNode[], id: string): CanvasNode | undefined
+{
+    return nodes.find(e => e.id === id);
+}
+export function posFromDir(e: { minX: number, minY: number, maxX: number, maxY: number }, t: Direction): Position {
+    switch (t) {
+        case "top":
+            return { x: (e.minX + e.maxX) / 2, y: e.minY };
+        case "right":
+            return { x: e.maxX, y: (e.minY + e.maxY) / 2 };
+        case "bottom":
+            return { x: (e.minX + e.maxX) / 2, y: e.maxY };
+        case "left":
+            return { x: e.minX, y: (e.minY + e.maxY) / 2 };
+    }
+}
+export function getBbox(node: CanvasNode): { minX: number, minY: number, maxX: number, maxY: number } {
+    return { minX: node.x, minY: node.y, maxX: node.x + node.width, maxY: node.y + node.height };
+}
+export function getPath(from: CanvasNode, fromSide: Direction, to: CanvasNode, toSide: Direction): Path | undefined {
+    if(from === undefined || to === undefined)
+        return;
+
+    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
+    return bezier(start, fromSide, end, toSide);
+}
+export function bezier(from: Position, fromSide: Direction, to: Position, toSide: Direction): Path {
+    const r = Math.hypot(from.x - to.x, from.y - to.y), o = clamp(r / 2, 70, 150), a = edgePos(fromSide, from, o), s = edgePos(toSide, to, o);
+    return {
+        path: `M${from.x},${from.y} C${a.x},${a.y} ${s.x},${s.y} ${to.x},${to.y}`,
+        from: from,
+        to: to,
+        side: toSide,
+    };
+}
+export function labelCenter(from: CanvasNode, fromSide: Direction, to: CanvasNode, toSide: Direction): string {
+    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
+    const len = Math.hypot(start.x - end.x, start.y - end.y), offset = clamp(len / 2, 70, 150), b = edgePos(fromSide, start, offset), s = edgePos(toSide, end, offset);
+    const center = getCenter(start, end, b, s, 0.5);
+    return `translate(${center.x}px, ${center.y}px)`;
+}
+export function getCenter(n: Position, i: Position, r: Position, o: Position, e: number): Position {
+    const a = 1 - e, s = a * a * a, l = 3 * e * a * a, c = 3 * e * e * a, u = e * e * e;
+    return {
+        x: s * n.x + l * r.x + c * o.x + u * i.x,
+        y: s * n.y + l * r.y + c * o.y + u * i.y
+    };
+}
\ No newline at end of file
diff --git a/types/content.d.ts b/types/content.d.ts
index 6a4e94a..88fedf6 100644
--- a/types/content.d.ts
+++ b/types/content.d.ts
@@ -1,11 +1,52 @@
-import { explorerContentTable } from "~/db/schema";
-import type { CanvasContent } from "./canvas";
+import type { CanvasContent as Canvas } from "./canvas";
+import type { MapContent as Map } from "./map";
 
-export type FileType = typeof explorerContentTable.$inferSelect.type;
-export type Overview = Omit<typeof explorerContentTable.$inferSelect, 'content'>;
-export type Content = { content: string };
-export type ExploreContent= Overview & Partial<Content>;
-export type TreeItem = ExploreContent & { children?: TreeItem[] };
+
+export type FileType = keyof ContentMap;
+export interface Overview {
+    path: string;
+    owner: number;
+    title: string;
+    timestamp: Date;
+    navigable: boolean;
+    private: boolean;
+    order: number;
+    visit: number;
+}
+export interface CanvasContent extends Overview {
+    type: 'canvas';
+    content?: string;
+}
+export interface MapContent extends Overview {
+    type: 'map';
+    content?: string;
+}
+export interface MarkdownContent extends Overview {
+    type: 'markdown';
+    content?: string;
+}
+export interface FileContent extends Overview {
+    type: 'file';
+    content?: string;
+}
+export interface FolderContent extends Overview {
+    type: 'folder';
+    content?: null;
+}
+export interface ContentMap
+{
+    markdown: MarkdownContent;
+    file: FileContent;
+    canvas: CanvasContent;
+    map: MapContent;
+    folder: FolderContent;
+}
+
+export type ExploreContent = ContentMap[FileType];
+
+export type TreeItem = ExploreContent & {
+    children?: TreeItem[];
+}
 
 export interface ContentComposable {
     content: Ref<ExploreContent[]>
@@ -18,16 +59,4 @@ export interface ContentComposable {
      * Get the given content from the server.
      */
     get: (path: string) => Promise<void>
-}
-
-export type MarkdownContent = string;
-export type FileContent = any;
-export type FolderContent = null;
-
-export interface ContentTypeMap
-{
-    markdown: MarkdownContent;
-    canvas: CanvasContent;
-    file: FileContent;
-    folder: FolderContent;
 }
\ No newline at end of file
diff --git a/types/map.d.ts b/types/map.d.ts
new file mode 100644
index 0000000..8097dec
--- /dev/null
+++ b/types/map.d.ts
@@ -0,0 +1,17 @@
+export interface MapContent
+{
+    bg: string;
+    interests: MapInterest[];
+}
+export interface MapInterest
+{
+    id: string;
+    x: number;
+    y: number;
+    text: string;
+    width?: number;
+    height?: number;
+    color?: CanvasColor;
+    valign?: 'start' | 'center' | 'end';
+    halign?: 'start' | 'center' | 'end';
+}
\ No newline at end of file