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

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.

Key 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

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