diff --git a/resources/views/livewire/plugins/recipe.blade.php b/resources/views/livewire/plugins/recipe.blade.php
index 83d464f..08ee441 100644
--- a/resources/views/livewire/plugins/recipe.blade.php
+++ b/resources/views/livewire/plugins/recipe.blade.php
@@ -2,6 +2,7 @@
 
 use App\Models\Plugin;
 use Livewire\Volt\Component;
+use Illuminate\Support\Facades\Blade;
 
 new class extends Component {
     public Plugin $plugin;
@@ -11,7 +12,7 @@ new class extends Component {
     public string $name;
     public int $data_stale_minutes;
     public string $data_strategy;
-    public string $polling_url;
+    public string|null $polling_url;
     public string $polling_verb;
     public string|null $polling_header;
     public $data_payload;
@@ -72,7 +73,7 @@ new class extends Component {
         'name' => 'required|string|max:255',
         'data_stale_minutes' => 'required|integer|min:1',
         'data_strategy' => 'required|string|in:polling,webhook',
-        'polling_url' => 'required|url',
+        'polling_url' => 'required_if:data_strategy,polling|nullable|url',
         'polling_verb' => 'required|string|in:get,post',
         'polling_header' => 'nullable|string|max:255',
         'blade_code' => 'nullable|string',
@@ -199,6 +200,22 @@ HTML;
 HTML;
     }
 
+    public function renderPreview(): void
+    {
+        abort_unless(auth()->user()->plugins->contains($this->plugin), 403);
+
+        try {
+            if ($this->plugin->render_markup_view) {
+                $previewMarkup = view($this->plugin->render_markup_view, ['data' => $this->plugin->data_payload])->render();
+            } else {
+                $previewMarkup = Blade::render($this->plugin->render_markup, ['data' => $this->plugin->data_payload]);
+            }
+            $this->dispatch('preview-updated', preview: $previewMarkup);
+        } catch (\Exception $e) {
+            $this->dispatch('preview-error', message: $e->getMessage());
+        }
+    }
+
     public function deletePlugin(): void
     {
         abort_unless(auth()->user()->plugins->contains($this->plugin), 403);
@@ -217,6 +234,9 @@ HTML;
             </h2>
 
             <flux:button.group>
+                <flux:modal.trigger name="preview-plugin">
+                    <flux:button icon="eye" wire:click="renderPreview">Preview</flux:button>
+                </flux:modal.trigger>
                 <flux:modal.trigger name="add-to-playlist">
                     <flux:button icon="play" variant="primary">Add to Playlist</flux:button>
                 </flux:modal.trigger>
@@ -309,6 +329,16 @@ HTML;
             </div>
         </flux:modal>
 
+        <flux:modal name="preview-plugin" class="min-w-[850px] min-h-[480px] space-y-6">
+            <div>
+                <flux:heading size="lg">Preview {{ $plugin->name }}</flux:heading>
+            </div>
+
+            <div class="bg-white dark:bg-zinc-900 rounded-lg overflow-hidden">
+                <iframe id="preview-frame" class="w-full h-[480px] border-0"></iframe>
+            </div>
+        </flux:modal>
+
         <div class="mt-5 mb-5">
             <h3 class="text-xl font-semibold dark:text-gray-100">Settings</h3>
         </div>
@@ -442,3 +472,19 @@ HTML;
         @endif
     </div>
 </div>
+
+@script
+<script>
+    $wire.on('preview-updated', ({ preview }) => {
+        const frame = document.getElementById('preview-frame');
+        const frameDoc = frame.contentDocument || frame.contentWindow.document;
+        frameDoc.open();
+        frameDoc.write(preview);
+        frameDoc.close();
+    });
+
+    $wire.on('preview-error', ({ message }) => {
+        alert('Preview Error: ' + message);
+    });
+</script>
+@endscript