added the way to edit using json for now, will add real ui soon!

src/routes/flashcards/+page.svelte

@@ -3,7 +3,13 @@
 	import Card from "./card.svelte";
 	import StatsAndButtons from "./StatsAndButtons.svelte";
 
-	import { stats, resetDeck } from "./logic.svelte.js";
+	import { stats, resetDeck,SetNewDeck } from "./logic.svelte.js";
+	import { onMount } from "svelte";
+	import tempelateDeck from "./tempelateDeck.json";
+
+	onMount(() => {
+		SetNewDeck(JSON.parse(localStorage.getItem("deck")) || tempelateDeck);
+	});
 </script>
 
 <div class="flex h-full flex-col overflow-hidden">

src/routes/flashcards/editCards.svelte

@@ -1 +1,27 @@
-<div class="border-2 rounded bg-zinc-800">heyyy</div>
+<script>
+	import { SetNewDeck, deck } from "./logic.svelte";
+	import toast from "svelte-5-french-toast";
+
+	let LocalDeck = $state.snapshot(deck);
+	let deckText = JSON.stringify(LocalDeck, null, 2); // Pretty print for textarea
+
+	function saveDeck() {
+		try {
+			const parsedDeck = JSON.parse(deckText);
+			localStorage.setItem("deck", JSON.stringify(parsedDeck));
+			SetNewDeck(parsedDeck);
+			toast.success("Deck saved successfully! You can now close this window.");
+		} catch (e) {
+			toast.error("Invalid JSON format!");
+		}
+	}
+</script>
+
+<div class="flex flex-col items-center gap-2 rounded border-2 bg-zinc-800 p-3">
+	<textarea bind:value={deckText} class="input"></textarea>
+
+	<button on:click={saveDeck} class="btn">
+		<i class="nf nf-fa-save"></i>
+		Save
+	</button>
+</div>

src/routes/flashcards/logic.svelte.js

@@ -1,3 +1,4 @@
+
 export let card = $state({ Q: "", a: "" });
 
 export let statusOfCard = $state({
@@ -8,12 +9,17 @@ export let statusOfCard = $state({
 	entering: false,
 });
 
-let deck = [
+export let deck = [
 	{ Q: "Best programer in the world?", a: "RezHackXYZ" },
 	{ Q: "Best coding community?", a: "HackClub" },
 	{ Q: "Will @Shub go totally bankrupt?", a: "yes!" },
 ];
 
+export function SetNewDeck (newDeck) {
+	deck = newDeck;
+	resetDeck();
+}
+
 export let stats = $state({
 	isDeckEmpty: false,
 	AnswerKnown: 0,

src/routes/flashcards/tempelateDeck.json

@@ -0,0 +1,5 @@
+[
+	{ "Q": "Best programer in the world?", "a": "RezHackXYZ" },
+	{ "Q": "Best coding community?", "a": "HackClub" },
+	{ "Q": "Will @Shub go totally bankrupt?", "a": "yes!" }
+]