diff --git a/src/lib/components/preset.svelte b/src/lib/components/preset.svelte
index b60c18a8..b288384f 100644
--- a/src/lib/components/preset.svelte
+++ b/src/lib/components/preset.svelte
@@ -1 +1,85 @@
-flex-1
+<script lang="ts">
+	import { updateCode, updateCodeStore } from '$lib/util/state';
+
+	const samples = {
+		'Flow Chart': `graph TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]`,
+		'Sequence Diagram': `sequenceDiagram
+    Alice->>+John: Hello John, how are you?
+    Alice->>+John: John, can you hear me?
+    John-->>-Alice: Hi Alice, I can hear you!
+    John-->>-Alice: I feel great!
+            `,
+		'Class Diagram': `classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+    }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+    }
+    class Zebra{
+      +bool is_wild
+      +run()
+    }
+            `,
+		'State Diagram': `stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+            `,
+		'Gantt Chart': `gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+            `,
+		'Pie Chart': `pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+            `,
+		'ER Diagram': `erDiagram
+          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+          CUSTOMER ||--o{ ORDER : places
+          CUSTOMER ||--o{ INVOICE : "liable for"
+          DELIVERY-ADDRESS ||--o{ ORDER : receives
+          INVOICE ||--|{ ORDER : covers
+          ORDER ||--|{ ORDER-ITEM : includes
+          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+            `
+	};
+
+	const loadSampleDiagram = (diagramType: string): void => {
+		updateCode(samples[diagramType], true);
+	};
+</script>
+
+<div class="flex gap-2 flex-wrap p-2">
+	{#each Object.keys(samples) as sample}
+		<button class="rounded p-2 bg-blue-400 flex-auto" on:click={() => loadSampleDiagram(sample)}
+			>{sample}</button
+		>
+	{/each}
+</div>
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index cafbe38d..e8bbbefe 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -126,9 +126,10 @@
 					<div class="flex-1">
 						<Editor on:update={updateHandler} {language} {text} {errorMarkers} />
 					</div>
-					<Preset />
 				</div>
 			</Card>
+			<Preset />
+
 			<div class="flex-1">
 				<History />
 				<!-- Hello -->