diff --git a/app/Http/Controllers/WriterController.php b/app/Http/Controllers/WriterController.php
index 660188f..0c55f09 100644
--- a/app/Http/Controllers/WriterController.php
+++ b/app/Http/Controllers/WriterController.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Article;
 use Illuminate\Http\Request;
 use Illuminate\Contracts\View\View;
 use Illuminate\Support\Facades\Auth;
@@ -47,4 +48,29 @@ class WriterController extends Controller
     {
         return view('writer.new-article');
     }
+
+    public function livePreview(Request $request): View
+    {
+        // Upload the file
+        $header_image_path = $request->headerImage->storeAs('header-image-previews');
+        $article_empty = new Article();
+        $article_empty->markdown_body = $request->markdownBody;
+        $article_empty->generateMarkupFromMarkdown();
+
+        $article = [
+            'title' => $request->title ?? null,
+            'header_image_url' => $header_image_path ?? null,
+            'subtitle' => $request->subtitle ?? null,
+            'author' => [
+                'display_name' => auth()->user()->author->displayName,
+            ],
+            'published_at' => $request->publicationDate ?? null,
+            'primary_link' => $request->primary_link ?? null,
+            'secondary_link' => $request->secondary_link ?? null,
+            'mastodon_handle' => $request->mastodon_handle ?? null,
+            'body' => $article_empty->body,
+        ];
+
+        return view('guest.article', ['article' => $article]);
+    }
 }
diff --git a/resources/views/writer/new-article.blade.php b/resources/views/writer/new-article.blade.php
index cc48233..b1e2282 100644
--- a/resources/views/writer/new-article.blade.php
+++ b/resources/views/writer/new-article.blade.php
@@ -3,7 +3,69 @@
 @section('title', 'Write New Article')
 
 @section('content')
-<div>
-    New Article
+<style>
+#page-body-container {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-evenly;
+}
+#new-article-form {
+    display: flex;
+    flex-direction: column;
+}
+
+#markdown-body {
+    width: 40vw;
+}
+</style>
+
+<script>
+document.addEventListener("DOMContentLoaded", (event) => {
+});
+</script>
+
+<div id="page-body-container">
+    <section id="new-article-form-container">
+        <form id="new-article-form" method="POST" action="route('')">
+            <label for="publication-date">Publication Date</label>
+            <input id="publication-date" name="publication-date" type="datetime-local" class="affects-preview" />
+            <label for="title">Title</label>
+            <input id="title" name="title" type="text" class="affects-preview" />
+            <label for="subtitle">Subtitle</label>
+            <input id="subtitle" name="subtitle" type="text" class="affects-preview" />
+            <label for="slug">Slug</label>
+            <input id="slug" name="slug" type="text" class="affects-preview" />
+            <label for="header-image">Header Image</label>
+            <input id="header-image" name="header-image" type="file" accept="image/png, image/jpeg, image/jpg, image/webp" class="affects-preview" />
+            <label for="markdown-body">Markdown Body</label>
+            <textarea id="markdown-body" rows="12" name="markdown-body" placeholder="Github-flavored markdown is supported!" class="affects-preview"></textarea>
+            <button
+                id="preview-article"
+                type="submit"
+            >
+                Preview
+            </button>
+            <button id="save-article" type="submit">Save</button>
+        </form>
+            <button
+                data-hx-post="{{ route('live_preview') }}"
+                data-hx-trigger="click delay:2s"
+                data-hx-target="#true-container"
+                data-hx-swap="innerHTML"
+            >
+                HTMX Preview
+            </button>
+    </section>
+    <section id="new-article-preview-container">
+        <h4>Enjoy a live(ish) preview of what your article will look like</h4>
+        <div id="preview-inner-container">
+            @if(isset($article_preview))
+                <div id="true-container"></div>
+            @else
+                <p>Nothing to see yet!</p>
+            @endif
+        </div>
+    </section>
 </div>
 @endsection
diff --git a/routes/web.php b/routes/web.php
index aade2ee..6c3f91d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -50,4 +50,5 @@ Route::middleware('auth')->group(function () {
     Route::get('/writer', [WriterController::class, 'dashboard'])->name('dashboard');
     Route::post('/logout', [WriterController::class, 'logout'])->name('logout');
     Route::get('writer/new-article', [WriterController::class, 'newArticle'])->name('new_article');
+    Route::post('writer/live-preview', [WriterController::class, 'livePreview'])->name('live_preview');
 });