windcraft

Design in Tailwind. Keep it as code.

A visual design editor where every click writes real Tailwind HTML, with a library of 360 Tailwind components and pages.

Try it live · Get started · Wiki · npm · MCP · Contribute

What it is

Windcraft is an editor for web pages where the page is plain HTML with Tailwind classes, and every control reads and writes those classes. Make the padding bigger and p-4 becomes p-6. Pick a colour and bg-rose-500 changes. Edit the code and the design follows; edit the design and the code follows.

There is no export step and no Windcraft-only format. What you see in the editor is the HTML you ship, so you can paste it into a codebase or hand it to a coding agent as it is.

Windcraft also comes with a library of 360 Tailwind designs: 350 components and 10 full pages, in categories such as pricing, hero sections, authentication, tables, charts, forms and footers. Every one is plain HTML with Tailwind classes. Copy it as it is, or open it in the editor and change it. Through the MCP server, Claude, Claude Code and Cursor can search the library, use a design in your project, and save a new one back ("save to library").

You can start from a blank page, from a Figma design (with a plugin that runs on your computer), or from a description (with Claude or a local model).

Documentation

The Windcraft wiki has the guides:

Screenshots

_{Select anything. The Properties panel shows its Tailwind classes, and the code panel highlights the exact element.
Click the screenshot to try the editor in your browser, with nothing to install.}

Interactions. Pick a button and say what it does: show or hide something, change classes, scroll, go to another frame. The arrow shows what it acts on.	Animations. A preset library, a keyframe editor and scroll effects. The keyframes go into your Tailwind config.
Your Tailwind config. Edit tailwind.config.js (Tailwind 3) or global.css (Tailwind 4), with plugins. It applies as you type.	A library of 360 Tailwind components and pages. Browse by category, copy the HTML, or open any design in the editor.

What you can do

• Start from a library. 360 Tailwind components and pages (350 components, 10 pages), all plain HTML. Copy one, or open it in the editor. With the MCP server, Claude or Cursor can search it, use a design in your project, and save new ones to it.
• Edit visually. Select, move, resize, align, group, copy and paste. Draw frames, shapes, text, images and buttons. Drag to rearrange. Edits are written for the device you are editing (Mobile plain, Tablet md:, Desktop lg:).
• Work with the code. A Properties panel where every field is a Tailwind class, edited at its source, with breakpoints and states. A code panel with HTML, CSS, JS and Config tabs. Paste HTML from anywhere.
• Make it respond. Interactions (click or hover to show, hide, change classes, scroll, copy, go to another frame), one-click Tabs and Modal, animations, scroll-linked effects, text effects, SVG drawing.
• Bring things in. A free Figma plugin (no LLM, no network). Or describe a page and let Claude or a local model draft it.
• Connect and share. An MCP server for Claude, Claude Code and Cursor. Projects with their own look, share links, a full-screen prototype, export to HTML, React, Vue or Svelte, version history.

Get started

Online

Open https://windcraft.swapniljadhav.com/. Nothing to install.

npm: windcraft-editor

npm install windcraft-editor

Serve node_modules/windcraft-editor as static files and import from it. No bundler or backend is needed.

import { startEditor } from "/windcraft/editor/index.js";
startEditor(document.getElementById("root"), { html: "<h1>Hello</h1>" });

Options, host functions and onChange are in the full guide.

MCP: Claude, Claude Code, Cursor

Windcraft runs an MCP server at your address plus /mcp (for the live site: https://windcraft.swapniljadhav.com/mcp).

Then ask: "Read my design guide, then build a settings page that matches", "Search my library for a pricing table and use it", or "Save this page to my Windcraft library." The MCP guide has the tool list.

Figma plugin

Install it from the Figma Community. It converts a selection to HTML and Tailwind on your computer, with no LLM and no network. To build it from source, see packages/figma.

Self-host the full app

Accounts, projects, the gallery, AI and MCP. You need Node.js 18+ and MongoDB (local or Atlas).

git clone https://github.com/Tolaj/windcraft.git
cd windcraft
npm install
cp .env.example .env     # fill in MONGO_URI and SESSION_SECRET at least
npm run dev              # http://localhost:3000

MONGO_URI and SESSION_SECRET are required. ANTHROPIC_API_KEY or LLM_URL turns on AI, and PUBLIC_URL lets Claude on the web reach your MCP server. .env.example lists the rest. For production use npm start; a vercel.json is included.

Run the editor locally (no database)

git clone https://github.com/Tolaj/windcraft.git
cd windcraft
npm install
npm run demo             # http://localhost:4000/editor/demo/

How it is built

A monorepo of small packages around a Node app.

Stack: Node.js · Express 5 · Handlebars · MongoDB · Tailwind CSS · CodeMirror 6 · Anthropic SDK.

npm test runs the unit tests, npm run e2e the browser tests (they need MongoDB and Chrome), npm run typecheck the types. CONTRIBUTING.md has the repo map.

Status

Windcraft is under active development.

• Solid: the Properties panel, the code panel, selection and layers, the Figma converter's basic rules, projects and sharing.
• Newer: Interactions, animations, the Tailwind config tab, and dragging to rearrange. They are tried in Chrome only. Safari, Firefox and touch are untried, and big pages have not been timed.

Roadmap

• Figma converter: constraints, lists, image crop, and responsive output.
• Components and variants as first-class Windcraft components.
• A steadier drag in more browsers and on large pages.

Contributing

Windcraft is MIT licensed and open to everyone. You do not need to ask first.

1. Fork the repo, npm install, and npm run demo to see your change.
2. Branch and keep the pull request small and about one thing.
3. Check with npm test and npm run typecheck. A bug fix in packages/core or the Figma converter should come with a test that fails without it.
4. Open a pull request into main and say what you changed and how you checked it.

CONTRIBUTING.md and the wiki's Contributing and Reviews explain how reviews work. For questions, bugs and ideas, open an issue with the steps, what you expected, what happened and your browser.

License

MIT © 2026 Swapnil Jadhav. Third-party code keeps its own licenses: THIRD_PARTY_LICENSES.md.