From b09f2dff5b8ec8faec78a24c853a3621cd1a0a48 Mon Sep 17 00:00:00 2001
From: Malte Teichert <malte@malteteichert.de>
Date: Sun, 9 Jun 2024 02:16:27 +0200
Subject: [PATCH 1/2] Rework path handling

---
 .../components/atoms/ParameterInput.svelte    | 157 ++++----------
 src/lib/components/atoms/ServerInput.svelte   |  94 ++++----
 .../components/atoms/paths/PathEditing.svelte | 116 ++++++++++
 src/routes/paths/+page.svelte                 |   1 +
 src/routes/paths/[index]/+page.svelte         | 200 +++++-------------
 5 files changed, 269 insertions(+), 299 deletions(-)
 create mode 100644 src/lib/components/atoms/paths/PathEditing.svelte

diff --git a/src/lib/components/atoms/ParameterInput.svelte b/src/lib/components/atoms/ParameterInput.svelte
index 1c68df7..369cfbb 100644
--- a/src/lib/components/atoms/ParameterInput.svelte
+++ b/src/lib/components/atoms/ParameterInput.svelte
@@ -3,122 +3,57 @@
 	import { SlideToggle } from '@skeletonlabs/skeleton';
 	import ExampleInput from '$lib/components/atoms/ExampleInput.svelte';
 
-	export let variableName: string;
-	export let value: OpenAPIV3.ParameterObject;
-	export let location: 'path' | 'query' | 'header' | 'cookie';
+	export let parameter: OpenAPIV3.ParameterObject | OpenAPIV3.ReferenceObject;
 
-	value.name = variableName;
-	value.in = location;
-	if (location === 'path') value.required = true;
-	let multipleExamples = value.examples && Object.keys(value.examples).length > 1;
+	// if the parameter is a reference, we need to link to the reference
+	let isReference = '$ref' in parameter;
 
-	const addParameterExample = () => {
-		const exampleName = prompt('Enter a name for the example');
-		if (!exampleName) return;
-		// @ts-expect-error - working we are setting a new key
-		value.examples[exampleName] = {
-			$ref: '',
-			summary: '',
-			description: '',
-			value: '',
-			externalValue: ''
-		};
-	};
+	parameter = isReference
+		? (parameter as OpenAPIV3.ReferenceObject)
+		: (parameter as OpenAPIV3.ParameterObject);
+
+	// if the parameter is a path parameter, we need to limit the editing options
+	// @ts-expect-error parameter.in has to exist if the parameter is not a reference
+	let isPathParameter = !isReference && parameter.in === 'path';
 </script>
 
 <div class="card py-6 px-4 flex flex-col gap-4 text-sm">
-	<h4 class="h4">&lbrace;{variableName}&rbrace;</h4>
-
-	<span class="flex items-center gap-2">
-		<p>Location:</p>
-		<select
-			name="location"
-			class="select w-min"
-			disabled={location === 'path'}
-			bind:value={location}
-		>
-			<option value="path">Path</option>
-			<option value="query">Query</option>
-			<option value="header">Header</option>
-			<option value="cookie">Cookie</option>
-		</select>
-	</span>
-
-	<label class="space-y-2">
-		<p>Description</p>
-		<textarea
-			class="textarea"
-			bind:value={value.description}
-			placeholder="Description of the parameter. Supports markdown."
-		/>
-	</label>
-	<div class="flex flex-row gap-16">
-		<SlideToggle name="required" disabled={location === 'path'} bind:checked={value.required}>
-			Required
-		</SlideToggle>
-		<SlideToggle name="deprecated" bind:checked={value.deprecated} disabled={location === 'path'}>
-			Deprecated
-		</SlideToggle>
-		<SlideToggle
-			name="allowEmptyValue"
-			bind:value={value.allowEmptyValue}
-			disabled={location === 'path'}
-		>
-			Allow Empty Value
-		</SlideToggle>
-	</div>
-	<label class="space-y-2">
-		<p>Style</p>
-		<select name="style" class="select" bind:value={value.style}>
-			<option value={undefined} selected>none</option>
-			<option value="matrix">Matrix</option>
-			<option value="label">Label</option>
-			<option value="form">Form</option>
-			<option value="simple">Simple</option>
-			<option value="spaceDelimited">Space Delimited</option>
-			<option value="pipeDelimited">Pipe Delimited</option>
-			<option value="deepObject">Deep Object</option>
-		</select>
-	</label>
-	<div class="flex flex-row gap-16">
-		<SlideToggle name="explode" bind:checked={value.explode}>Explode</SlideToggle>
-		<SlideToggle name="allowReserved" bind:checked={value.allowReserved}>Allow Reserved</SlideToggle
-		>
-	</div>
-	<label class="space-y-2">
-		<p>Schema</p>
-		<!-- Subject to change -->
-		<select class="select" name="schema" bind:value={value.schema}>
-			<option value="schema">Schema not yet implemented</option>
-		</select>
-	</label>
-	<SlideToggle
-		name="multiExample"
-		bind:checked={multipleExamples}
-		on:click={() => {
-			if (!value.examples) value.examples = {};
-		}}
-	>
-		Multiple Examples?
-	</SlideToggle>
-	{#if multipleExamples}
-		<div class="space-y-2">
-			<p>Examples</p>
-			{#each Object.keys(value.examples) as example}
-				<ExampleInput bind:example={value.examples[example]} name={example} />
-			{/each}
-			<button
-				type="button"
-				class="btn btn-sm variant-filled-primary"
-				on:click={addParameterExample}
-			>
-				Add Example
-			</button>
-		</div>
+	{#if isReference}
+		<p class="text-xs text-error">This parameter is a reference and cannot be edited here.</p>
 	{:else}
-		<label class="space-y-2">
-			<p>Example</p>
-			<input type="text" class="input" name="example" placeholder="An example of the value." />
-		</label>
+		<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+			{#if isPathParameter}
+				<p class="h3 font-bold">{parameter.name}</p>
+			{:else}
+				<label>
+					<p>Name</p>
+					<input
+						type="text"
+						name="name"
+						class="input"
+						placeholder="Name"
+						bind:value={parameter.name}
+					/>
+				</label>
+			{/if}
+			<label>
+				<p>Location</p>
+				<select name="in" class="select" bind:value={parameter.in} disabled={isPathParameter}>
+					<option value="path">Path</option>
+					<option value="query">Query</option>
+					<option value="header">Header</option>
+					<option value="cookie">Cookie</option>
+				</select>
+			</label>
+			<label>
+				<p>Description</p>
+				<textarea
+					name="description"
+					class="textarea"
+					bind:value={parameter.description}
+					placeholder="Describe the parameter. Supports Markdown."
+				/>
+			</label>
+		</div>
 	{/if}
 </div>
diff --git a/src/lib/components/atoms/ServerInput.svelte b/src/lib/components/atoms/ServerInput.svelte
index c16e50a..b430e2b 100644
--- a/src/lib/components/atoms/ServerInput.svelte
+++ b/src/lib/components/atoms/ServerInput.svelte
@@ -84,53 +84,57 @@
 						</div>
 					</svelte:fragment>
 					<svelte:fragment slot="content">
-						<table class="table my-2">
-							<tbody>
-								{#each Object.keys(server.variables) as variable, index}
-									<tr>
-										<td class="text-center">
-											<div class="flex justify-center items-center">
-												<p class="text-lg">{variable}</p>
-											</div>
-										</td>
-										<td>
-											<label>
-												<span>Default</span>
-												<input
-													class="input"
-													placeholder="default"
-													type="text"
-													bind:value={server.variables[variable].default}
-												/>
-											</label>
-										</td>
-										<td>
-											<label>
-												<span>Description</span>
-												<textarea
-													class="textarea"
-													placeholder="description"
-													bind:value={server.variables[variable].description}
-												/>
-											</label>
-										</td>
-										<td class="!w-1/3">
-											<div>
-												<label for="Enum">
-													<span>Enum</span>
-													<InputChip
-														label="Enum"
-														bind:value={server.variables[variable].enum}
-														name="enum"
-														placeholder="enum (optional) - press enter to add more items"
+						{#if Object.keys(server.variables).length === 0}
+							<p class="text-sm">No variables found in the URL.</p>
+						{:else}
+							<table class="table my-2">
+								<tbody>
+									{#each Object.keys(server.variables) as variable, index}
+										<tr>
+											<td class="text-center">
+												<div class="flex justify-center items-center">
+													<p class="text-lg">{variable}</p>
+												</div>
+											</td>
+											<td>
+												<label>
+													<span>Default</span>
+													<input
+														class="input"
+														placeholder="default"
+														type="text"
+														bind:value={server.variables[variable].default}
 													/>
 												</label>
-											</div>
-										</td>
-									</tr>
-								{/each}
-							</tbody>
-						</table>
+											</td>
+											<td>
+												<label>
+													<span>Description</span>
+													<textarea
+														class="textarea"
+														placeholder="description"
+														bind:value={server.variables[variable].description}
+													/>
+												</label>
+											</td>
+											<td class="!w-1/3">
+												<div>
+													<label for="Enum">
+														<span>Enum</span>
+														<InputChip
+															label="Enum"
+															bind:value={server.variables[variable].enum}
+															name="enum"
+															placeholder="enum (optional) - press enter to add more items"
+														/>
+													</label>
+												</div>
+											</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						{/if}
 					</svelte:fragment>
 				</AccordionItem>
 			</Accordion>
diff --git a/src/lib/components/atoms/paths/PathEditing.svelte b/src/lib/components/atoms/paths/PathEditing.svelte
new file mode 100644
index 0000000..a24a4b4
--- /dev/null
+++ b/src/lib/components/atoms/paths/PathEditing.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { OpenAPIV3_1 } from 'openapi-types';
+	import ServerInput from '../ServerInput.svelte';
+	import ParameterInput from '../ParameterInput.svelte';
+	import { version } from '$app/environment';
+
+	export let path: OpenAPIV3_1.PathItemObject;
+
+	export const editedPath: OpenAPIV3_1.PathItemObject = {
+		summary: path.summary ?? '',
+		description: path.description ?? '',
+		servers: path.servers ?? [],
+		parameters: path.parameters ?? [],
+		get: path.get ?? undefined,
+		put: path.put ?? undefined,
+		post: path.post ?? undefined,
+		delete: path.delete ?? undefined,
+		options: path.options ?? undefined,
+		head: path.head ?? undefined,
+		patch: path.patch ?? undefined,
+		trace: path.trace ?? undefined
+	};
+
+	const addServer = () => {
+		if (!editedPath.servers) editedPath.servers = [];
+		editedPath.servers.push({
+			url: '',
+			description: '',
+			variables: {}
+		});
+		editedPath.servers = editedPath.servers;
+	};
+
+	const removeServer = (index: number) => {
+		if (!editedPath.servers) return;
+		editedPath.servers.splice(index, 1);
+		editedPath.servers = editedPath.servers;
+	};
+
+	const removeParameter = (index: number) => {
+		if (!editedPath.parameters) return;
+		editedPath.parameters.splice(index, 1);
+		editedPath.parameters = editedPath.parameters;
+	};
+</script>
+
+<div class="flex flex-col gap-1">
+	<p class="font-bold h5">Route Information</p>
+	<label>
+		<p class="font-bold">Summary</p>
+		<input
+			class="input"
+			type="text"
+			bind:value={editedPath.summary}
+			placeholder="A short summary of the route"
+		/>
+	</label>
+	<label>
+		<p class="font-bold">Description</p>
+		<textarea
+			class="textarea"
+			bind:value={editedPath.description}
+			placeholder="A longer description of the route (supports markdown)"
+		/>
+	</label>
+</div>
+<hr />
+<div class="flex flex-col gap-2">
+	<p class="font-bold h5">Servers</p>
+	{#if editedPath.servers}
+		{#each editedPath.servers as server, i}
+			<div class="ring-1 ring-surface-600-300-token rounded-container-token p-2 space-y-2">
+				<ServerInput id={i} {server} />
+				<button
+					type="button"
+					class="btn btn-sm variant-filled-error"
+					on:click={() => {
+						removeServer(i);
+					}}
+				>
+					Remove Server
+				</button>
+			</div>
+		{/each}
+	{/if}
+	<span>
+		<button type="button" class="btn btn-sm variant-filled-primary" on:click={addServer}>
+			Add Server
+		</button>
+	</span>
+</div>
+<hr />
+<div class="flex flex-col gap-2">
+	<p class="font-bold h5">Parameters</p>
+	{#if editedPath.parameters}
+		{#each editedPath.parameters as parameter, i}
+			<div class="ring-1 ring-surface-600-300-token rounded-container-token p-2 space-y-2">
+				<!-- If the parameter is a reference: show the reference link -->
+				{#if '$ref' in parameter}
+					<p class="text-sm">This parameter is a reference</p>
+				{:else}
+					<ParameterInput parameter={parameter} />
+				{/if}
+				<button
+					type="button"
+					class="btn btn-sm variant-filled-error"
+					on:click={() => {
+						removeParameter(i);
+					}}
+				>
+					Remove Parameter
+				</button>
+			</div>
+		{/each}
+	{/if}
+</div>
diff --git a/src/routes/paths/+page.svelte b/src/routes/paths/+page.svelte
index f2ff2de..a60bd23 100644
--- a/src/routes/paths/+page.svelte
+++ b/src/routes/paths/+page.svelte
@@ -3,3 +3,4 @@
 </script>
 
 <Paths />
+
diff --git a/src/routes/paths/[index]/+page.svelte b/src/routes/paths/[index]/+page.svelte
index 19f2bfa..1f47898 100644
--- a/src/routes/paths/[index]/+page.svelte
+++ b/src/routes/paths/[index]/+page.svelte
@@ -1,163 +1,77 @@
 <script lang="ts">
-	import { HttpMethods, openApiStore } from '$lib';
-	import ParameterInput from '$lib/components/atoms/ParameterInput.svelte';
-	import { getPathVariables } from '$lib/pathHandling';
-	import type { OpenAPIV3 } from '$lib/openAPITypes';
+	import PathEditing from '$lib/components/atoms/paths/PathEditing.svelte';
+	import type { OpenAPIV3_1 } from 'openapi-types';
 	import type { PageData } from './$types';
-	import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
+	import { getPathVariables } from '$lib';
 
 	export let data: PageData;
+	let initialPath: OpenAPIV3_1.PathItemObject = (data.path as OpenAPIV3_1.PathItemObject) ?? {};
+	let editedPath: OpenAPIV3_1.PathItemObject;
 
-	let newParam: 'query' | 'header' | 'cookie' = 'query';
-	let tempPath: OpenAPIV3.PathItemObject = {
-		parameters: []
-	};
-	openApiStore.subscribe((store) => {
-		if (!data.pathName) return;
-		if (store.paths == undefined) tempPath = {};
-		if (!store.paths!.hasOwnProperty(data.pathName)) tempPath = {};
-		// @ts-expect-error - working with a known not empty object
-		tempPath = store.paths[data.pathName] ?? {};
-
-		if (!tempPath.hasOwnProperty('parameters')) tempPath.parameters = [];
-	});
-
+	// if initialPath has variables, that are not yet included, add them
 	const pathVariables = getPathVariables(data.pathName ?? '');
-
 	pathVariables.forEach((variable) => {
-		// push path variables to the parameters array
-		// @ts-expect-error - working with a array thats loosely defined
-		tempPath.parameters.push({
+		// if a parameter with the same name does not exist, add it
+		if (
+			initialPath.parameters?.some((param) => {
+				// if the parameter is a reference skip it
+				if ('$ref' in param) return false;
+				return param.name === variable;
+			})
+		) {
+			return;
+		}
+		if (!initialPath.parameters) initialPath.parameters = [];
+		initialPath.parameters.push({
 			name: variable,
 			in: 'path',
-			required: true
+			description: '',
+			required: false,
+			deprecated: false,
+			allowEmptyValue: false, // this SHOULD not be used, but it is a valid value
+			allowReserved: false, // This property only applies to parameters with an in value of query. 
+			style: 'simple',
+			explode: false, // Defaults to true when style is form, otherwise false.
+			schema: {},
+			content: {},
+			example: {}, // any -> Example and Examples are mutually exclusive
+			examples: {},
 		});
 	});
 </script>
 
+<a
+	href="/paths"
+	class="btn variant-ringed-secondary hover:variant-glass-secondary my-2 gap-2 text-lg"
+>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="size-6"
+	>
+		<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+	</svg>
+	Back
+</a>
+
 <div
-	class="border-token border-surface-500 space-y-4 px-6 py-4 rounded-container-token variant-glass-surface"
+	class="border-token border-surface-500 space-y-2 px-4 py-2 rounded-container-token variant-glass-surface"
 >
 	<h3 class="h3">
 		{data.pathName}
 	</h3>
 	<hr />
-
-	<Accordion>
-		<AccordionItem>
-			<svelte:fragment slot="summary">
-				<h4 class="h4">General</h4>
-			</svelte:fragment>
-			<svelte:fragment slot="content">
-				<label class="space-y-2">
-					<p>Summary</p>
-					<input
-						type="text"
-						class="input"
-						bind:value={tempPath.summary}
-						placeholder="Summary of the path"
-					/>
-				</label>
-				<label class="space-y-2">
-					<p>Description</p>
-					<textarea
-						class="textarea"
-						bind:value={tempPath.description}
-						placeholder="Description of the path. Supports markdown."
-					/>
-				</label>
-			</svelte:fragment>
-		</AccordionItem>
-		<AccordionItem>
-			<svelte:fragment slot="summary">
-				<h4 class="h4">Custom Servers</h4>
-			</svelte:fragment>
-			<svelte:fragment slot="content">
-				<p>Here you can add custom servers for this specific call.</p>
-				{#if tempPath.servers && tempPath.servers.length > 0}
-					{#each tempPath.servers as server, index}
-						<label class="space-y-2">
-							<p>Server {index + 1}</p>
-							<input
-								type="text"
-								class="input"
-								bind:value={server.url}
-								placeholder="URL of the server"
-							/>
-						</label>
-					{/each}
-				{/if}
-
-				<button type="button" class="btn variant-filled-primary"> Add Server </button>
-			</svelte:fragment>
-		</AccordionItem>
-		<AccordionItem>
-			<svelte:fragment slot="summary">
-				<h4 class="h4">Parameters</h4>
-			</svelte:fragment>
-			<svelte:fragment slot="content">
-				{#each tempPath.parameters as param}
-					<ParameterInput variableName={param.name} bind:value={param} location="path" />
-				{/each}
-
-				<span class="flex items-center gap-2">
-					<select name="newParameter" bind:value={newParam} class="select w-min">
-						<option value="query">Query</option>
-						<option value="header">Header</option>
-						<option value="cookie">Cookie</option>
-					</select>
-					<button type="button" class="btn variant-filled-primary">
-						Add {newParam} Parameter
-					</button>
-				</span>
-			</svelte:fragment>
-		</AccordionItem>
-		<AccordionItem>
-			<svelte:fragment slot="summary">
-				<h4 class="h4">Operations</h4>
-			</svelte:fragment>
-			<svelte:fragment slot="content">
-				<p>
-					Here you can add operations for this path. Select only the operations you want to support
-				</p>
-
-				<div class="flex gap-4">
-					{#each Object.values(HttpMethods) as method}
-						<label class="flex items-center gap-2">
-							<input
-								type="checkbox"
-								class="checkbox"
-								on:input={(event) => {
-									if (event.target.checked) {
-										tempPath[method] = {
-											tags: [],
-											summary: '',
-											description: '',
-											externalDocs: {
-												description: '',
-												url: ''
-											},
-											operationId: '',
-											parameters: [],
-											requestBody: {
-												content: {},
-												description: '',
-												required: false
-											},
-											responses: {},
-											callbacks: {},
-											deprecated: false,
-											security: [],
-											servers: []
-										};
-									}
-								}}
-							/>
-							{method.toUpperCase()}
-						</label>
-					{/each}
-				</div>
-			</svelte:fragment>
-		</AccordionItem>
-	</Accordion>
+	<PathEditing path={initialPath} bind:editedPath />
+	<hr />
+	original:
+	<pre>
+{JSON.stringify(data, null, 2)}
+	</pre>
+	edited:
+	<pre>
+{JSON.stringify(editedPath, null, 2)}
+	</pre>
 </div>

From d7e054dd481e0e8eb2e6dc1c7cbdca941c836476 Mon Sep 17 00:00:00 2001
From: Malte Teichert <malte@malteteichert.de>
Date: Mon, 10 Jun 2024 00:54:08 +0200
Subject: [PATCH 2/2] improve path editing

---
 src/lib/components/atoms/ExampleInput.svelte  |  77 +++++++--
 .../components/atoms/ParameterInput.svelte    | 152 +++++++++++++++++-
 .../components/atoms/paths/PathEditing.svelte |  41 +++--
 src/routes/paths/[index]/+page.svelte         |   7 +-
 4 files changed, 250 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/atoms/ExampleInput.svelte b/src/lib/components/atoms/ExampleInput.svelte
index 4b9c1cb..971abcd 100644
--- a/src/lib/components/atoms/ExampleInput.svelte
+++ b/src/lib/components/atoms/ExampleInput.svelte
@@ -3,12 +3,39 @@
 	import { SlideToggle } from '@skeletonlabs/skeleton';
 
 	export let example: OpenAPIV3.ExampleObject;
-	export let name: string;
+	export let name: string = '';
+
+	let exampleValue = example.value;
+	let external = false;
+
+	// initialize the component
+	(() => {
+		if (
+			'value'! in example &&
+			'externalValue' in example &&
+			example.externalValue !== ('' || undefined)
+		) {
+			external = true;
+			return;
+		}
+		external = false;
+	})();
+
+	$: {
+		// make sure the exampleValue is a JSON-compatible string
+		try {
+			JSON.parse(exampleValue);
+		} catch (e) {
+			exampleValue = JSON.stringify(exampleValue);
+		}
+		// apply the changes to the example object
+		example.value = exampleValue;
+	}
 
 	let schema = false;
 </script>
 
-<div class="ml-6 ring-1 p-4 rounded-container-token ring-surface-500">
+<div class="ml-6 ring-1 p-4 rounded-container-token ring-surface-500 space-y-4">
 	<SlideToggle name="schema" bind:checked={schema}>Schema</SlideToggle>
 	<p class="-ml-2 font-bold">{name}</p>
 	{#if schema}
@@ -18,19 +45,45 @@
 	{:else}
 		<label>
 			<p>Summary</p>
-			<input type="text" class="input" name="summary" bind:value={example.summary} />
+			<input
+				type="text"
+				class="input"
+				name="summary"
+				placeholder="A short summary"
+				bind:value={example.summary}
+			/>
 		</label>
 		<label>
 			<p>Description</p>
-			<textarea class="textarea" name="description" bind:value={example.description} />
-		</label>
-		<label>
-			<p>Value</p>
-			<input type="text" class="input" name="value" bind:value={example.value} />
-		</label>
-		<label>
-			<p>External Value</p>
-			<input type="text" class="input" name="externalValue" bind:value={example.externalValue} />
+			<textarea
+				class="textarea"
+				name="description"
+				placeholder="A description of the example. Supports Markdown."
+				bind:value={example.description}
+			/>
 		</label>
+		<SlideToggle name="external" bind:checked={external} size="sm">External Value</SlideToggle>
+		{#if !external}
+			<label>
+				<p>Value</p>
+				<textarea
+					class="textarea"
+					name="value"
+					placeholder="The example value."
+					bind:value={exampleValue}
+				/>
+			</label>
+		{:else}
+			<label>
+				<p>External Value</p>
+				<input
+					type="text"
+					class="input"
+					name="externalValue"
+					placeholder="URL to external value."
+					bind:value={example.externalValue}
+				/>
+			</label>
+		{/if}
 	{/if}
 </div>
diff --git a/src/lib/components/atoms/ParameterInput.svelte b/src/lib/components/atoms/ParameterInput.svelte
index 369cfbb..2b45de1 100644
--- a/src/lib/components/atoms/ParameterInput.svelte
+++ b/src/lib/components/atoms/ParameterInput.svelte
@@ -7,6 +7,7 @@
 
 	// if the parameter is a reference, we need to link to the reference
 	let isReference = '$ref' in parameter;
+	let multipleExamples = false;
 
 	parameter = isReference
 		? (parameter as OpenAPIV3.ReferenceObject)
@@ -15,15 +16,84 @@
 	// if the parameter is a path parameter, we need to limit the editing options
 	// @ts-expect-error parameter.in has to exist if the parameter is not a reference
 	let isPathParameter = !isReference && parameter.in === 'path';
+	(() => {
+		if (isReference) return;
+		// set default requirements
+		if (isPathParameter) {
+			parameter.required = true;
+			parameter.style = 'simple';
+		}
+		if (parameter.in === 'query') {
+			parameter.style = 'form';
+		}
+		if (parameter.in === 'header') {
+			parameter.style = 'simple';
+		}
+		if (parameter.in === 'cookie') {
+			parameter.style = 'form';
+		}
+		// if parameter.examples contains values, we need to set multipleExamples to true
+		if (Object.keys(parameter.examples ?? {}).length > 0) {
+			multipleExamples = true;
+		}
+	})();
+
+	$: () => {
+		if (isReference) return;
+		if (parameter.style == 'form') {
+			parameter.explode = true;
+		} else {
+			parameter.explode = false;
+		}
+	};
+
+	// TODO: maybe needs validation for query-deepObject
+	const styleOptions = [
+		{
+			style: 'matrix',
+			description: 'Matrix',
+			validFor: ['path']
+		},
+		{
+			style: 'label',
+			description: 'Label',
+			validFor: ['path']
+		},
+		{
+			style: 'form',
+			description: 'Form',
+			validFor: ['query', 'cookie']
+		},
+		{
+			style: 'simple',
+			description: 'Simple',
+			validFor: ['header', 'path']
+		},
+		{
+			style: 'spaceDelimited',
+			description: 'Space Delimited',
+			validFor: ['query']
+		},
+		{
+			style: 'pipeDelimited',
+			description: 'Pipe Delimited',
+			validFor: ['query']
+		},
+		{
+			style: 'deepObject',
+			description: 'Deep Object',
+			validFor: ['query']
+		}
+	];
 </script>
 
-<div class="card py-6 px-4 flex flex-col gap-4 text-sm">
+<div class="py-6 px-4 flex flex-col gap-6 text-sm">
 	{#if isReference}
 		<p class="text-xs text-error">This parameter is a reference and cannot be edited here.</p>
 	{:else}
 		<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
 			{#if isPathParameter}
-				<p class="h3 font-bold">{parameter.name}</p>
+				<p class="h3 font-bold">"{parameter.name}" in: {parameter.in}</p>
 			{:else}
 				<label>
 					<p>Name</p>
@@ -55,5 +125,83 @@
 				/>
 			</label>
 		</div>
+		<div class="flex gap-3 divide-x">
+			<div>
+				<SlideToggle
+					name="required"
+					active="bg-primary-500"
+					size="sm"
+					disabled={isPathParameter}
+					bind:checked={parameter.required}>Required</SlideToggle
+				>
+			</div>
+			<div class="pl-2">
+				<SlideToggle
+					name="required"
+					active="bg-primary-500"
+					size="sm"
+					bind:checked={parameter.deprecated}>Deprecated</SlideToggle
+				>
+			</div>
+			<div class="pl-2">
+				<SlideToggle
+					name="required"
+					active="bg-primary-500"
+					size="sm"
+					bind:checked={parameter.allowEmptyValue}
+				>
+					Allow empty value (Use of this property is NOT RECOMMENDED, as it is likely to be removed
+					in a later revision.)
+				</SlideToggle>
+			</div>
+		</div>
+		<div class="flex gap-6 items-center">
+			<label>
+				<p>Style</p>
+				<select name="style" class="select" bind:value={parameter.style}>
+					{#each styleOptions as styleOption}
+						{#if styleOption.validFor.includes(parameter.in)}
+							<option value={styleOption.style}>{styleOption.description}</option>
+						{/if}
+					{/each}
+				</select>
+			</label>
+			<SlideToggle
+				name="explode"
+				active="bg-primary-500"
+				size="sm"
+				bind:checked={parameter.explode}
+			>
+				Explode
+			</SlideToggle>
+			{#if parameter.in === 'query'}
+				<SlideToggle
+					name="allowReserved"
+					active="bg-primary-500"
+					size="sm"
+					bind:checked={parameter.allowReserved}
+				>
+					Allow Reserved
+				</SlideToggle>
+			{/if}
+			<pre>TODO: Schema selector</pre>
+		</div>
+		<div class="space-y-4">
+			<div class="flex items-center gap-2">
+				<label for="name"> Single Example </label>
+				<SlideToggle
+					name="multipleExamples"
+					active="bg-primary-500"
+					size="sm"
+					bind:checked={multipleExamples}
+				/>
+				<label for="name"> Multiple Examples </label>
+			</div>
+			{#if multipleExamples}
+				multiple examples editor
+			{:else}
+				<ExampleInput bind:example={parameter.example} />
+			{/if}
+		</div>
 	{/if}
 </div>
diff --git a/src/lib/components/atoms/paths/PathEditing.svelte b/src/lib/components/atoms/paths/PathEditing.svelte
index a24a4b4..177c4d1 100644
--- a/src/lib/components/atoms/paths/PathEditing.svelte
+++ b/src/lib/components/atoms/paths/PathEditing.svelte
@@ -2,10 +2,11 @@
 	import type { OpenAPIV3_1 } from 'openapi-types';
 	import ServerInput from '../ServerInput.svelte';
 	import ParameterInput from '../ParameterInput.svelte';
-	import { version } from '$app/environment';
 
 	export let path: OpenAPIV3_1.PathItemObject;
 
+	let newParameter = 'query';
+
 	export const editedPath: OpenAPIV3_1.PathItemObject = {
 		summary: path.summary ?? '',
 		description: path.description ?? '',
@@ -42,6 +43,10 @@
 		editedPath.parameters.splice(index, 1);
 		editedPath.parameters = editedPath.parameters;
 	};
+
+    const addParameter = () => {
+        
+    }
 </script>
 
 <div class="flex flex-col gap-1">
@@ -94,23 +99,35 @@
 	<p class="font-bold h5">Parameters</p>
 	{#if editedPath.parameters}
 		{#each editedPath.parameters as parameter, i}
-			<div class="ring-1 ring-surface-600-300-token rounded-container-token p-2 space-y-2">
+			<div class="card ring-1 ring-surface-600-300-token rounded-container-token p-2 space-y-2">
 				<!-- If the parameter is a reference: show the reference link -->
 				{#if '$ref' in parameter}
 					<p class="text-sm">This parameter is a reference</p>
 				{:else}
-					<ParameterInput parameter={parameter} />
+					<ParameterInput bind:parameter />
+				{/if}
+				{#if parameter.in !== 'path'}
+					<div class="flex justify-center">
+						<button
+							type="button"
+							class="btn btn-sm variant-filled-error"
+							on:click={() => {
+								removeParameter(i);
+							}}
+						>
+							Remove Parameter
+						</button>
+					</div>
 				{/if}
-				<button
-					type="button"
-					class="btn btn-sm variant-filled-error"
-					on:click={() => {
-						removeParameter(i);
-					}}
-				>
-					Remove Parameter
-				</button>
 			</div>
 		{/each}
 	{/if}
+	<span class="mx-auto flex gap-2">
+		<select name="parameter-location" class="select" bind:value={newParameter}>
+			<option value="query">Query</option>
+			<option value="header">Header</option>
+			<option value="cookie">Cookie</option>
+		</select>
+		<button type="button" class="btn btn-sm variant-filled-primary"> Add {newParameter} parameter </button>
+	</span>
 </div>
diff --git a/src/routes/paths/[index]/+page.svelte b/src/routes/paths/[index]/+page.svelte
index 1f47898..dd7d2fc 100644
--- a/src/routes/paths/[index]/+page.svelte
+++ b/src/routes/paths/[index]/+page.svelte
@@ -34,7 +34,12 @@
 			explode: false, // Defaults to true when style is form, otherwise false.
 			schema: {},
 			content: {},
-			example: {}, // any -> Example and Examples are mutually exclusive
+			example: {
+				summary: '',
+				description: '',
+				value: undefined, // any -> Example and Examples are mutually exclusive
+				externalValue: undefined
+			}, // any -> Example and Examples are mutually exclusive
 			examples: {},
 		});
 	});