Piny
In-IDE visual editor for Astro, React, Next.js and Tailwind that edits your real code, with a free tier and paid Pro features.
What it does
Piny is a visual editor that runs inside VS Code-compatible IDEs for Astro, React, Next.js and Tailwind CSS projects. Clicking elements applies Tailwind styling directly to the source code, with a class inspector, component navigation and AI-assisted drag-and-drop alongside your coding assistant.
How to use: To use Piny, first install the Piny extension directly from the extension marketplace for your preferred IDE (e.g., VS Code Marketplace). Once installed, right-click anywhere in your code and select "Edit in Piny" to begin styling with visual controls. Piny works with Astro, React, or Next.js projects.
Core features
Visual Tailwind controls that edit real code
Tailwind class inspector and everywhere-editing
Component navigation and preview
AI-assisted drag-and-drop UI building
Pro visual select and multi-element editing
Custom Tailwind theme import
Best for
→Visually styling Tailwind components in the IDE
→Building UI faster alongside an AI coding assistant
→Navigating and editing components across a project
→Editing Lovable or other React/Next.js projects
Pricing
Free
Pro Monthly
$15/mo
Pro Yearly
$120/year
Toolspool rankingby monthly traffic