diff --git a/src/PrismicRichText/DefaultComponent.svelte b/src/PrismicRichText/DefaultComponent.svelte
index 5238569..b1d0bfd 100644
--- a/src/PrismicRichText/DefaultComponent.svelte
+++ b/src/PrismicRichText/DefaultComponent.svelte
@@ -48,9 +48,7 @@
 	<span class={node.data.label}><slot /></span>
 {:else}
 	{#each node.text.split("\n") as line, index}
-		{#if index > 0}
-			<br />
-		{/if}
-		{line}
+		<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
+		{#if index > 0}<br />{/if}{line}
 	{/each}
 {/if}
diff --git a/src/PrismicRichText/Serialize.svelte b/src/PrismicRichText/Serialize.svelte
index 170372b..e29a972 100644
--- a/src/PrismicRichText/Serialize.svelte
+++ b/src/PrismicRichText/Serialize.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { RichTextNodeType } from "@prismicio/client";
 	import type { asTree } from "@prismicio/richtext";
 
 	import type { SvelteRichTextSerializer } from "../types";
@@ -9,28 +8,29 @@
 	export let components: SvelteRichTextSerializer = {};
 	export let children: ReturnType<typeof asTree>["children"];
 
-	const rewrittenNodeTypes: Partial<
-		Record<
-			(typeof RichTextNodeType)[keyof typeof RichTextNodeType],
-			keyof typeof RichTextNodeType
-		>
-	> = {
+	const CHILD_TYPE_RENAMES = {
 		"list-item": "listItem",
 		"o-list-item": "oListItem",
 		"group-list-item": "list",
 		"group-o-list-item": "oList",
-	};
+	} as const;
+
+	function getComponent(child: ReturnType<typeof asTree>["children"][number]) {
+		return (
+			components[
+				CHILD_TYPE_RENAMES[child.type as keyof typeof CHILD_TYPE_RENAMES] ||
+					(child.type as keyof typeof components)
+			] || DefaultComponent
+		);
+	}
 </script>
 
 {#each children as child}
-	<svelte:component
-		this={components[rewrittenNodeTypes[child.type] || child.type] ||
-			DefaultComponent}
-		node={child.node}
-		key={child.key}
+	<svelte:component this={getComponent(child)} node={child.node}>
+		<!-- This formatting is intentional to prevent unwanted whitespace between elements. -->
+		{#if child.children.length > 0}<svelte:self
+				children={child.children}
+				{components}
+			/>{/if}</svelte:component
 	>
-		{#if child.children.length > 0}
-			<svelte:self children={child.children} {components} />
-		{/if}
-	</svelte:component>
 {/each}