Piny

Piny is a visual editor that runs directly in Visual Studio Code, Cursor and Windsurf. It supports Tailwind CSS, Astro, React and Next.js. All edits happen directly in the code, so there are no abstractions, no cloud services and no lock-in.

Piny is a visual editor designed for developers working with Astro, React, Next.js, and Tailwind CSS. It integrates directly into popular IDEs like Visual Studio Code, Cursor, and Windsurf, allowing real-time styling without cloud dependencies or code abstractions. Key features include intuitive visual controls for Tailwind CSS, enabling users to edit classes in strings, variables, and non-React/Astro code. The AI-powered drag-and-drop functionality and component navigation streamline UI development. A free version offers essential tools, while the Pro plan adds advanced features like multi-element editing and custom Tailwind theme imports. Piny operates locally, ensuring no lock-in, and edits happen directly in the codebase for seamless workflow integration. Early adopters can access discounted Pro pricing with a 30-day money-back guarantee.