diff --git a/src/lib/components/Preview.svelte b/src/lib/components/Preview.svelte
new file mode 100644
index 0000000..d74d021
--- /dev/null
+++ b/src/lib/components/Preview.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Pharos from "$lib/parser";
+
+  export let parser: Pharos;
+  export let rootIndexId: string;
+</script>
+
+<div>
+  <!-- Custom rendering logic will go here -->
+</div>
\ No newline at end of file
diff --git a/src/routes/new/edit/+page.svelte b/src/routes/new/edit/+page.svelte
index 6188a53..bd40ab8 100644
--- a/src/routes/new/edit/+page.svelte
+++ b/src/routes/new/edit/+page.svelte
@@ -2,16 +2,17 @@
   import { Input, Label, Textarea, Toolbar, ToolbarButton } from "flowbite-svelte";
   import { CodeOutline, EyeSolid } from "flowbite-svelte-icons";
   import { editorText } from "$lib/stores";
-  import Asciidoctor from 'asciidoctor';
+  import Preview from "$lib/components/Preview.svelte";
+  import Pharos from "$lib/parser";
+  import { ndk } from "$lib/ndk";
 
-  const asciidoctor = Asciidoctor();
+  const parser: Pharos = new Pharos($ndk);
 
   let isEditing: boolean = true;
-  let richEditorContent: string;
 
   const showPreview = () => {
     isEditing = false;
-    richEditorContent = asciidoctor.convert($editorText) as string;
+    parser.parse($editorText);
   };
 
   const hidePreview = () => {
@@ -50,7 +51,7 @@
               <CodeOutline class='w-6 h-6' />
             </ToolbarButton>
           </Toolbar>
-          {@html richEditorContent}
+          <Preview parser={parser} rootIndexId={parser.getRootIndexId()} />
         </div>
       {/if}
     </div>