What is 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.
Problem
Developers building UIs with Astro, React, Next.js, and Tailwind CSS manually write code for layout and styling, which is time-consuming and requires deep framework expertise
Solution
A VS Code-integrated visual editor that lets developers drag-and-drop components, modify Tailwind classes, and see changes directly in their codebase without abstractions or external services
Customers
Front-end developers (especially React/Next.js/Astro users), UI engineers, and teams building web apps with Tailwind CSS
Unique Features
In-IDE visual editing with direct code synchronization (no cloud middleware), native support for React/Next.js component structures, and full control over Tailwind CSS configurations
User Comments
Saves hours of manual coding
Perfect for Tailwind customization
No vendor lock-in worries
Seamless VS Code integration
Real-time component previews
Traction
Launched on ProductHunt on May 23, 2024 with 280+ upvotes
Integrated with VS Code/Cursor/Windsurf IDEs
Supports major frameworks (React, Next.js, Astro)
Market Size
The global $10 billion front-end development tools market (2023) with 4.4M+ Tailwind CSS users (2024)
