What is Piny?

Piny is a powerful 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, ensuring no abstractions, no cloud services, and no lock-in. It allows developers to edit code visually, navigate components, and streamline styling without special libraries or extra setup. Piny is built for speed and control, working alongside or independently of coding assistants, and is compatible with any React or Next.js project.

How to use Piny?

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.

Piny's Core Features

Visual Tailwind Controls

Tailwind Class Inspector

Edit Tailwind Classes Everywhere

Component Navigation

AI Powered Drag & Drop

Visual Select

Edit Multiple Elements at the Same Time

Navigate the Whole Project

Import Your Custom Tailwind Theme

Piny's Use Cases

Visually styling elements with Tailwind CSS

Managing complex Tailwind styles in an organized tree

Editing Tailwind classes within strings, variables, and non-React/Astro code

Quickly jumping between components and associating routes for relevant previews

Building UI visually using AI-assisted drag and drop

Selecting and styling multiple elements simultaneously

Exploring and navigating components across an entire project

Customizing visual controls with custom Tailwind configurations

Piny Support Email & Customer service contact & Refund contact etc.

Here is the Piny support email for customer service: [email protected] .