Tailwind Visual Editor inside your IDE

Piny lets you visually edit Tailwind CSS right in your React, Next.js, and Astro files. No browser context-switching, no vendor lock-in. Click an element, tweak its classes, and the code updates instantly.

Piny in Visual Studio Code

Get Piny Pro to select elements directly in the browser preview, and more.

⚠️ Piny works with Astro, React, or Next.js projects. For static HTML or WordPress, use Pinegrow Web Editor instead. Learn more →

🎉 Piny now supports Astro!

Visually style and navigate your Astro projects. ▶️ See it in action in this 1 minute video.

🚀 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/Astro 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 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 and get Piny Pro	Visual select, multi-element editing, project navigation, custom themes

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

📄 Documentation & Support

Created by Pinegrow team 🌲 | getpiny.com

Tailwind Editor – Piny

Pinegrow Pte. Ltd.