Features

Features 10 · Numbers strip

A compact row of four short facts, each with a large number or word and a label.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-black'><div class='mx-auto max-w-6xl px-6 py-20'><h2 class='text-center text-2xl font-semibold text-white'>The short version</h2><dl class='mt-12 grid gap-10 text-center sm:grid-cols-2 lg:grid-cols-4'><div><dd class='text-5xl font-semibold text-white'>0</dd><dt class='mt-2 text-sm text-neutral-400'>export steps</dt></div><div><dd class='text-5xl font-semibold text-white'>2</dd><dt class='mt-2 text-sm text-neutral-400'>Tailwind versions</dt></div><div><dd class='text-5xl font-semibold text-white'>1</dd><dt class='mt-2 text-sm text-neutral-400'>HTML file per page</dt></div><div><dd class='text-5xl font-semibold text-white'>∞</dd><dt class='mt-2 text-sm text-neutral-400'>room to edit the code</dt></div></dl></div></section>

Features 09 · List and detail panel

A list of three features beside a detail panel showing a screenshot of the selected one.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto grid max-w-6xl gap-8 px-6 py-24 md:grid-cols-[320px_1fr]'><div class='space-y-2'><button type='button' class='block w-full rounded-xl bg-black p-5 text-left text-white'><span class='font-semibold'>Visual editing</span><span class='mt-1 block text-sm text-neutral-400'>Change anything from the panel.</span></button><button type='button' class='block w-full rounded-xl border border-neutral-200 p-5 text-left'><span class='font-semibold text-black'>Code panel</span><span class='mt-1 block text-sm text-neutral-500'>HTML, CSS, JS and config.</span></button><button type='button' class='block w-full rounded-xl border border-neutral-200 p-5 text-left'><span class='font-semibold text-black'>Interactions</span><span class='mt-1 block text-sm text-neutral-500'>Behaviour without scripts.</span></button></div><div class='overflow-hidden rounded-2xl border border-neutral-200 bg-neutral-50'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/editor.png' alt='The editor with a page on the canvas and the properties panel' loading='lazy' class='h-full w-full object-cover object-top'></div></div></section>

Features 08 · Big preview with three points

A heading, a large picture frame and three short points underneath.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><div class='mx-auto max-w-2xl text-center'><h2 class='text-4xl font-semibold tracking-tight text-black'>See the whole page at once</h2><p class='mt-4 text-lg text-neutral-600'>Frames on a board, each one a real page.</p></div><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/frames.png' alt='A board of frames in Windcraft, next to the frame list and layers' loading='lazy' class='mt-12 aspect-[16/7] w-full rounded-3xl border border-neutral-200 object-cover object-top'><div class='mt-10 grid gap-8 md:grid-cols-3'><div><h3 class='font-semibold text-black'>Frames</h3><p class='mt-1 text-sm text-neutral-600'>Pages and screens side by side on one canvas.</p></div><div><h3 class='font-semibold text-black'>Preview</h3><p class='mt-1 text-sm text-neutral-600'>Click through your frames like a prototype.</p></div><div><h3 class='font-semibold text-black'>Share</h3><p class='mt-1 text-sm text-neutral-600'>Send a link so others can view it.</p></div></div></div></section>

Features 07 · Checklist in two columns

Centered heading above a two-column checklist of short feature lines.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50'><div class='mx-auto max-w-4xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-black'>What you get</h2><ul class='mt-12 grid gap-x-12 gap-y-5 sm:grid-cols-2'><li class='flex gap-3 text-neutral-700'><span class='mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-black text-xs text-white'>✓</span>Plain HTML and Tailwind output</li><li class='flex gap-3 text-neutral-700'><span class='mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-black text-xs text-white'>✓</span>Tailwind v3 and v4</li><li class='flex gap-3 text-neutral-700'><span class='mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-black text-xs text-white'>✓</span>Hover, focus and breakpoint editing</li><li class='flex gap-3 text-neutral-700'><span class='mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-black text-xs text-white'>✓</span>Animation library</li><li class='flex gap-3 text-neutral-700'><span class='mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-black text-xs text-white'>✓</span>Tailwind config tab</li><li class='flex gap-3 text-neutral-700'><span class='mt-0.5 grid h-5 w-5 shrink-0 place-items-center rounded-full bg-black text-xs text-white'>✓</span>Figma plugin and MCP server</li></ul></div></section>

Features 06 · Bento grid

A bento layout: one large black tile and four smaller light tiles around it.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>All in one place</h2><div class='mt-12 grid gap-4 md:grid-cols-3 md:grid-rows-2'><div class='rounded-3xl bg-black p-8 text-white md:col-span-2 md:row-span-2'><h3 class='text-2xl font-semibold'>A canvas and the code, side by side</h3><p class='mt-3 max-w-md text-neutral-400'>Edit visually or in code. Both stay in step, so nothing is lost in a handoff.</p><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/editor.png' alt='The Windcraft editor' loading='lazy' class='mt-10 h-48 w-full rounded-2xl border border-neutral-800 object-cover object-left-top'></div><div class='rounded-3xl border border-neutral-200 p-8'><h3 class='font-semibold text-black'>Interactions</h3><p class='mt-2 text-sm text-neutral-600'>Menus and modals from one rule.</p></div><div class='rounded-3xl border border-neutral-200 p-8'><h3 class='font-semibold text-black'>Figma plugin</h3><p class='mt-2 text-sm text-neutral-600'>Bring a frame in as HTML.</p></div></div></div></section>

Features 05 · Dark cards

Black section with three bordered feature cards and white headings.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-black'><div class='mx-auto max-w-6xl px-6 py-24'><h2 class='max-w-2xl text-4xl font-semibold tracking-tight text-white'>Small controls, real classes</h2><div class='mt-14 grid gap-4 md:grid-cols-3'><div class='rounded-2xl border border-neutral-800 p-8'><p class='font-mono text-sm text-neutral-500'>rounded-3xl</p><h3 class='mt-6 text-lg font-semibold text-white'>Drag a corner</h3><p class='mt-2 text-neutral-400'>Round it by dragging. The class appears in the code.</p></div><div class='rounded-2xl border border-neutral-800 p-8'><p class='font-mono text-sm text-neutral-500'>hover:opacity-85</p><h3 class='mt-6 text-lg font-semibold text-white'>Add a hover state</h3><p class='mt-2 text-neutral-400'>Switch to Hover in the panel and change the look.</p></div><div class='rounded-2xl border border-neutral-800 p-8'><p class='font-mono text-sm text-neutral-500'>animate-ripple</p><h3 class='mt-6 text-lg font-semibold text-white'>Pick an animation</h3><p class='mt-2 text-neutral-400'>Choose from the library. It is saved in your config.</p></div></div></div></section>

Features 04 · Alternating rows

Two feature rows, text and a picture frame swapping sides.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-6xl space-y-24 px-6 py-24'><div class='grid items-center gap-12 md:grid-cols-2'><div><p class='text-sm font-medium text-neutral-500'>Canvas</p><h3 class='mt-2 text-3xl font-semibold tracking-tight text-black'>Design where it feels natural</h3><p class='mt-4 text-neutral-600'>Select, drag, round and recolour on a canvas, then see the code change beside it.</p></div><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/editor.png' alt='The Windcraft editor with the canvas and the code panel' loading='lazy' class='aspect-[4/3] w-full rounded-2xl border border-neutral-200 object-cover object-left-top'></div><div class='grid items-center gap-12 md:grid-cols-2'><img src='https://raw.githubusercontent.com/Tolaj/windcraft/main/docs/media/config.png' alt='The Config tab with the Tailwind config beside the page' loading='lazy' class='order-2 aspect-[4/3] w-full rounded-2xl border border-neutral-200 object-cover object-left-top md:order-1'><div class='order-1 md:order-2'><p class='text-sm font-medium text-neutral-500'>Code</p><h3 class='mt-2 text-3xl font-semibold tracking-tight text-black'>Read it, edit it, keep it</h3><p class='mt-4 text-neutral-600'>HTML, CSS, JS and your Tailwind config sit in tabs. Change the code and the page follows.</p></div></div></div></section>

Features 03 · Numbered list

Title and intro on the left, a numbered list of features with hairlines on the right.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto grid max-w-6xl gap-12 px-6 py-24 md:grid-cols-[1fr_1.4fr]'><div><h2 class='text-4xl font-semibold tracking-tight text-black'>How it works</h2><p class='mt-4 text-lg text-neutral-600'>From a blank canvas to shipped HTML in four steps.</p></div><ol class='divide-y divide-neutral-200 border-y border-neutral-200'><li class='flex gap-6 py-6'><span class='font-mono text-sm text-neutral-400'>01</span><div><h3 class='font-semibold text-black'>Start</h3><p class='mt-1 text-neutral-600'>Draw with the tools or paste a page you already have.</p></div></li><li class='flex gap-6 py-6'><span class='font-mono text-sm text-neutral-400'>02</span><div><h3 class='font-semibold text-black'>Edit</h3><p class='mt-1 text-neutral-600'>Change anything in the panel. The classes update.</p></div></li><li class='flex gap-6 py-6'><span class='font-mono text-sm text-neutral-400'>03</span><div><h3 class='font-semibold text-black'>Add behaviour</h3><p class='mt-1 text-neutral-600'>Hover states, animations and interactions, no script needed.</p></div></li><li class='flex gap-6 py-6'><span class='font-mono text-sm text-neutral-400'>04</span><div><h3 class='font-semibold text-black'>Ship</h3><p class='mt-1 text-neutral-600'>Copy the HTML. It is already plain code.</p></div></li></ol></div></section>

Features 02 · Bordered grid

A 2 by 2 grid of features separated by hairlines, with a heading on top.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-5xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-black'>Built for how you work</h2><div class='mt-14 grid overflow-hidden rounded-2xl border border-neutral-200 sm:grid-cols-2'><div class='border-b border-neutral-200 p-8 sm:border-r'><h3 class='font-semibold text-black'>Draw or paste</h3><p class='mt-2 text-sm text-neutral-600'>Start from a blank canvas or bring existing HTML in.</p></div><div class='border-b border-neutral-200 p-8'><h3 class='font-semibold text-black'>Edit visually</h3><p class='mt-2 text-sm text-neutral-600'>Corners, colour, spacing and states, all from a panel.</p></div><div class='border-b border-neutral-200 p-8 sm:border-b-0 sm:border-r'><h3 class='font-semibold text-black'>Animate</h3><p class='mt-2 text-sm text-neutral-600'>Pick from a library or make your own, kept as Tailwind.</p></div><div class='p-8'><h3 class='font-semibold text-black'>Connect tools</h3><p class='mt-2 text-sm text-neutral-600'>A Figma plugin and an MCP server for Claude and Cursor.</p></div></div></div></section>

Features 01 · Three columns with icons

Heading and three feature columns, each with a black icon tile, a title and a sentence.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><div class='max-w-2xl'><h2 class='text-4xl font-semibold tracking-tight text-black'>Everything stays real code</h2><p class='mt-4 text-lg text-neutral-600'>Three ideas that make the editor different.</p></div><div class='mt-14 grid gap-10 md:grid-cols-3'><div><span class='grid h-11 w-11 place-items-center rounded-xl bg-black font-mono text-sm text-white'>{ }</span><h3 class='mt-5 text-lg font-semibold text-black'>Code in sync</h3><p class='mt-2 text-neutral-600'>Every control reads and writes Tailwind classes. Nothing is hidden.</p></div><div><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-white'>↔</span><h3 class='mt-5 text-lg font-semibold text-black'>No export step</h3><p class='mt-2 text-neutral-600'>What you see on the canvas is the HTML you ship.</p></div><div><span class='grid h-11 w-11 place-items-center rounded-xl bg-black text-white'>◐</span><h3 class='mt-5 text-lg font-semibold text-black'>Your own config</h3><p class='mt-2 text-neutral-600'>Edit the Tailwind config next to the page and see it apply.</p></div></div></div></section>