ai code generator preview live-preview component ai code generator preview live render component code generator with live preview code and preview split view
Code Generator with Preview
Fetch pattern JSON:
curl https://webspire.de/patterns/code-generator/with-preview.json with-preview.html
<section
class="mx-auto max-w-3xl overflow-hidden rounded-2xl border shadow-md"
style="
--ws-code-generator-bg: oklch(0.985 0.002 75);
--ws-code-generator-text: oklch(0.205 0.015 75);
--ws-code-generator-text-soft: oklch(0.556 0.01 75);
--ws-code-generator-border: oklch(0.885 0.008 75);
--ws-code-generator-accent: oklch(0.588 0.16 250);
--ws-code-generator-action-bg: oklch(0.588 0.16 250);
--ws-code-generator-action-text: oklch(0.985 0.002 75);
background: var(--ws-code-generator-bg);
color: var(--ws-code-generator-text);
border-color: var(--ws-code-generator-border);
"
>
<!-- Tab bar: Code / Preview -->
<div
class="flex border-b"
style="border-color: var(--ws-code-generator-border)"
role="tablist"
aria-label="View mode"
>
<button
role="tab"
aria-selected="true"
class="border-b-2 px-6 py-3 text-sm font-medium"
style="border-color: var(--ws-code-generator-accent); color: var(--ws-code-generator-text)"
>
Code
</button>
<button
role="tab"
aria-selected="false"
class="border-b-2 border-transparent px-6 py-3 text-sm font-medium"
style="color: var(--ws-code-generator-text-soft)"
>
Preview
</button>
</div>
<!-- Code section -->
<div class="bg-gray-950"> <!-- ws-ok -->
<div class="flex items-center gap-2 border-b border-gray-800 px-4 py-2">
<span class="rounded bg-gray-800 px-3 py-1 text-xs font-medium text-gray-300">Card.tsx</span> <!-- ws-ok -->
</div>
<pre class="overflow-x-auto p-6 font-mono text-sm leading-relaxed"><code><span class="text-purple-400">export</span> <span class="text-purple-400">function</span> <span class="text-yellow-300">Card</span><span class="text-gray-300">({ title, description }) {</span>
<span class="text-purple-400">return</span> <span class="text-gray-300">(</span>
<span class="text-blue-300"><div</span> <span class="text-green-400">className</span><span class="text-gray-500">=</span><span class="text-green-400">"rounded-xl border p-6"</span><span class="text-blue-300">></span>
<span class="text-blue-300"><h3</span> <span class="text-green-400">className</span><span class="text-gray-500">=</span><span class="text-green-400">"text-lg font-semibold"</span><span class="text-blue-300">></span><span class="text-gray-300">{title}</span><span class="text-blue-300"></h3></span>
<span class="text-blue-300"><p</span> <span class="text-green-400">className</span><span class="text-gray-500">=</span><span class="text-green-400">"mt-2 text-gray-600"</span><span class="text-blue-300">></span><span class="text-gray-300">{description}</span><span class="text-blue-300"></p></span>
<span class="text-blue-300"></div></span>
<span class="text-gray-300">)</span>
<span class="text-gray-300">}</span></code></pre>
</div>
<!-- Preview section -->
<div
class="border-t p-6"
style="border-color: var(--ws-code-generator-border)"
>
<p class="mb-3 text-xs font-medium uppercase tracking-wider" style="color: var(--ws-code-generator-text-soft)">Preview</p>
<!-- Mock rendered card -->
<div
class="rounded-xl border p-6"
style="border-color: var(--ws-code-generator-border)"
>
<h3 class="text-lg font-semibold" style="color: var(--ws-code-generator-text)">Getting Started</h3>
<p class="mt-2 text-sm" style="color: var(--ws-code-generator-text-soft)">Learn how to set up your project and start building with our comprehensive guide.</p>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aicodegeneratorpreviewlive-previewcomponent
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Main content area |
Enhanced variant with a Code/Preview tab bar. The code section shows syntax-highlighted output, while the preview section renders a mock component below.