Piny is a visual editor designed for developers working with Astro, React, Next.js, and Tailwind CSS, seamlessly integrating into your IDE to enhance the development workflow. It allows for intuitive, real-time styling and navigation directly within your codebase, eliminating the need for context switching or external tools. By providing visual controls and AI-assisted features, Piny streamlines the process of building and refining user interfaces, making it an invaluable asset for developers seeking efficiency and precision. Key Features and Functionality: - Visual Tailwind Controls: Click on any element in your code to style it using intuitive visual controls, with changes immediately reflected in the code and automatically saved to trigger hot reloads. - Tailwind Class Inspector: Manage complex Tailwind styles through a neatly organized, editable tree of classes and states. - Edit Tailwind Classes Everywhere: Modify Tailwind classes directly within strings, variables, and even in non-React/Astro code. - Component Navigation: Quickly jump between components in both Piny and your code, associating routes with individual components to always get the relevant preview. - AI-Powered Drag & Drop: Build your UI visually using AI-assisted drag and drop, utilizing a built-in AI Assistant with your own API provider key. - Visual Select (Pro Feature): Select elements visually and drill down into components directly from the preview. - Edit Multiple Elements Simultaneously (Pro Feature): Select multiple elements with `CMD/CTRL + Click` or a range with `SHIFT + Click`, then style them collectively using visual controls and the inspector. - Project-Wide Navigation (Pro Feature): Explore and navigate components across your entire project from a single interface. - Custom Tailwind Theme Import (Pro Feature): Customize visual controls with your own Tailwind configuration, including colors, fonts, and spacing. Primary Value and User Solutions: Piny addresses the common challenges developers face when styling and navigating complex projects by integrating visual editing capabilities directly into the development environment. This integration reduces the need for repetitive code adjustments and context switching, thereby accelerating the development process. By offering both free and pro features, Piny caters to a wide range of development needs, from basic styling to advanced project navigation and customization. Its AI-powered tools further enhance productivity, allowing developers to build and refine user interfaces with greater speed and accuracy.