Visual editor for Astro, React, Next.js & Tailwind
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.
Pro feature imports custom Tailwind configuration including colors, fonts, and spacing. Visual controls adapt to project-specific design tokens, ensuring consistency and reducing manual configuration.
Pro feature enables project-wide component navigation from a single interface. Associate routes with components to always preview relevant context. Drill down visually from preview to component code.
Piny provides visual Tailwind controls directly in VS Code. Click any element in code to style it with intuitive controls; changes reflect immediately in code and trigger hot reload. No special libraries or setup required.
AI-powered drag & drop lets developers build UI visually using their own API provider key. Works alongside favorite AI agents like Lovable. Free feature available to all users.
Tailwind Class Inspector organizes classes in an editable tree view with states. Edit Tailwind classes anywhere—in strings, variables, and non-React code. Available free to all users.