Piny – Visual Editor for React, Next.js & Tailwind CSS

Piny is a visual editor for React, Next.js, and Tailwind CSS projects that runs directly in Visual Studio Code, Cursor and Windsurf. Piny lets you visually edit Tailwind styles and navigate your components directly within your IDE.

Piny in Visual Studio Code

🚀 Getting Started

Install the Piny Extension (you are doing this now)
Start Editing: Right-click anywhere in your code and select Edit in Piny to launch visual editing controls.

Edit in Piny

📺 Quick Overview

▶️ Watch Quick Overview (90 seconds)

🌟 Features

All edits happen directly in the code. There is no abstraction, no lock-in. Piny is here when you need it and gets out of your way when you don't.

Free Features

Visual Tailwind Controls

Click elements in your code and visually style them with intuitive Tailwind CSS controls. Changes instantly sync to your code.

Tailwind Class Inspector

Manage complex Tailwind styles in an organized visual tree. Supports editing hover, focus, active, and responsive states.

Edit Tailwind Classes Everywhere

Directly edit Tailwind classes within strings, variables, and non-React code.

Quickly navigate and preview components across your project.

AI-Powered Drag & Drop

Rapidly build UI with visual drag & drop powered by your own AI provider key.

Pro Features

Visual Select

Click elements visually in the preview and directly jump to their corresponding React components in the code.

Multi-Element Editing

Use CMD/CTRL + Click or SHIFT + Click to select multiple elements simultaneously and style them collectively.

Navigate and manage components across your entire project from a single interface.

Custom Tailwind Themes

Import your custom Tailwind configurations including colors, fonts, and spacing.

📺 Watch the Getting Started Video (15 min)

💰 Pricing

Plan	Pricing	Features
Free	Free	Core editing features, Tailwind controls, AI drag & drop
Pro Early Access (Limited Time Offer)	60% OFF (Limited Time) Check Pricing	Visual select, multi-element editing, project navigation, custom themes
Pro Regular	Regular Price Check Pricing	Full Pro features, standard pricing after Early Access

Early Access: Lock in the discounted Early Access price for life if you subscribe by May 28, 2025.

📄 Documentation & Support

Documentation
Support

Made by Pinegrow team 🌲 | getpiny.com

Piny – Tailwind Visual editor for React & Next

Pinegrow Pte. Ltd.