ai code generator split-pane ide settings ai code generator split pane ide settings language framework split pane code generator side by side code generation interface
Code Generator Split Pane
Fetch pattern JSON:
curl https://webspire.de/patterns/code-generator/split-pane.json split-pane.html
<section
class="mx-auto max-w-5xl 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);
"
>
<div class="flex flex-col md:flex-row">
<!-- Left panel: Prompt + Settings -->
<div
class="flex w-full flex-col border-b md:w-80 md:border-b-0 md:border-r"
style="border-color: var(--ws-code-generator-border)"
>
<!-- Prompt area -->
<div class="flex-1 p-6">
<h2 class="mb-4 text-sm font-semibold" style="color: var(--ws-code-generator-text)">Prompt</h2>
<label for="code-gen-split-prompt" class="sr-only">Describe what you want to build</label>
<textarea
id="code-gen-split-prompt"
rows="4"
placeholder="Describe what you want to build..."
class="w-full resize-none rounded-lg border p-3 text-sm outline-none transition focus:ring-2"
style="border-color: var(--ws-code-generator-border); background: var(--ws-code-generator-bg); color: var(--ws-code-generator-text)"
></textarea>
<!-- Settings -->
<div class="mt-6 space-y-4">
<div>
<label class="mb-1.5 block text-xs font-medium" style="color: var(--ws-code-generator-text-soft)">Language</label>
<div
class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm"
style="border-color: var(--ws-code-generator-border); color: var(--ws-code-generator-text)"
role="listbox"
aria-label="Language selector"
>
<span>TypeScript</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" style="color: var(--ws-code-generator-text-soft)" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
</div>
<div>
<label class="mb-1.5 block text-xs font-medium" style="color: var(--ws-code-generator-text-soft)">Framework</label>
<div
class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm"
style="border-color: var(--ws-code-generator-border); color: var(--ws-code-generator-text)"
role="listbox"
aria-label="Framework selector"
>
<span>React</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" style="color: var(--ws-code-generator-text-soft)" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</div>
</div>
</div>
<button
type="button"
class="mt-6 w-full rounded-lg px-4 py-2.5 text-sm font-medium transition hover:opacity-90"
style="background: var(--ws-code-generator-action-bg); color: var(--ws-code-generator-action-text)"
>
Generate Code
</button>
</div>
</div>
<!-- Right panel: Code output -->
<div class="flex flex-1 flex-col">
<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">App.tsx</span> <!-- ws-ok -->
<span class="rounded bg-gray-900 px-3 py-1 text-xs text-gray-500">utils.ts</span> <!-- ws-ok -->
</div>
<pre class="min-h-[320px] overflow-x-auto p-6 font-mono text-sm leading-relaxed"><code><span class="text-purple-400">import</span> <span class="text-gray-300">{ useState }</span> <span class="text-purple-400">from</span> <span class="text-green-400">'react'</span>
<span class="text-purple-400">export default function</span> <span class="text-yellow-300">App</span><span class="text-gray-300">() {</span>
<span class="text-purple-400">const</span> <span class="text-gray-300">[</span><span class="text-blue-300">count</span><span class="text-gray-300">,</span> <span class="text-blue-300">setCount</span><span class="text-gray-300">]</span> <span class="text-gray-500">=</span> <span class="text-yellow-300">useState</span><span class="text-gray-300">(</span><span class="text-orange-300">0</span><span class="text-gray-300">)</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">"flex flex-col items-center gap-4 p-8"</span><span class="text-blue-300">></span>
<span class="text-blue-300"><h1</span> <span class="text-green-400">className</span><span class="text-gray-500">=</span><span class="text-green-400">"text-2xl font-bold"</span><span class="text-blue-300">></span><span class="text-gray-300">Counter: {count}</span><span class="text-blue-300"></h1></span>
<span class="text-blue-300"><button</span> <span class="text-green-400">onClick</span><span class="text-gray-500">=</span><span class="text-gray-300">{()</span> <span class="text-purple-400">=></span> <span class="text-yellow-300">setCount</span><span class="text-gray-300">(c</span> <span class="text-gray-500">=></span> <span class="text-gray-300">c + 1)}</span><span class="text-blue-300">></span>
<span class="text-gray-300">Increment</span>
<span class="text-blue-300"></button></span>
<span class="text-blue-300"></div></span>
<span class="text-gray-300">)</span>
<span class="text-gray-300">}</span></code></pre>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aicodegeneratorsplit-paneidesettings
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Main content area |
Enhanced variant with a side-by-side split-pane layout. The left panel contains the prompt textarea and configuration options for language and framework. The right panel displays the generated code with filename tabs.