What is Piny
Piny is a powerful visual editor for Astro, React, Next.js, and Tailwind CSS that runs directly in your IDE. It allows developers to edit code visually, navigate components, and streamline styling without requiring special libraries or extra setup. Piny is designed for speed and control, with all edits happening directly in your project's code.
How to use Piny
To start using Piny, install the Piny extension from the marketplace for your preferred IDE. Once installed, you can begin visually editing your project by right-clicking anywhere in your code and selecting "Edit in Piny". This allows you to style elements using visual controls.
Features of Piny
- Visual Tailwind Controls: Style elements in your code with intuitive visual controls.
- Tailwind Class Inspector: Manage complex Tailwind styles organized in an editable tree.
- Edit Tailwind Classes Everywhere: Edit Tailwind classes directly within strings, variables, and non-React/Astro code.
- Component Navigation: Quickly jump between components in Piny and the code.
- AI Powered Drag & Drop: Visually build UI with AI assistance.
- Visual Select (Pro): Select elements visually and drill down components from the preview.
- Edit Multiple Elements at the Same Time (Pro): Select and style multiple elements using CMD/CTRL + Click or SHIFT + Click.
- Navigate the Whole Project (Pro): Explore and navigate components across your entire project from a single interface.
- Import Your Custom Tailwind Theme (Pro): Customize visual controls with your own Tailwind configuration.
Use Cases of Piny
Piny can be used to visually edit Tailwind styling in dynamic code, streamline the styling process, navigate component structures, and quickly build UI using AI-assisted drag and drop. It helps developers manage complex Tailwind styles and customize visual controls based on their project's theme.
Pricing
Piny offers a Free plan with core functionality. The Pro plan is available through Early Access at $49/year (60% off the regular price) until May 28, 2025. The regular Pro price is $120/year. Both paid plans include a 30-day money-back guarantee.
FAQ
- Is Piny "free" really free, or is just a trial version? Piny Free is completely free with no time limitations, accounts, or data collection. It includes core functionality, while Pro offers advanced features.
- Why do you offer early access discount? The early access discount rewards early adopters for their trust and helps gather valuable feedback to improve the product.
- Is the discounted price only for the first year? No, the early access price is locked in for as long as you maintain your subscription.
- How does Visual Select work? Visual Select uses DOM to JSX mapping to allow clicking elements in the design. It works well in most cases but may not be 100% accurate due to complex component structures. A small script is included in the project's layout only in dev mode.
- Can I use Piny to edit Lovable projects? Yes, Piny can be used alongside Lovable.
- Do all team members have to use Piny? No, each team member can use Piny individually without affecting others. The Visual Select script can be included only for developers using Piny.
- What will happen to my projects if Piny is discontinued? Your projects are safe. Piny edits standard React/Next.js code directly without adding dependencies on the tool. Projects would continue to work normally.
- What is the difference between Piny and Pinegrow Web Editor? Piny is a VS Code compatible extension for visually editing Tailwind styling in dynamic code (Astro, React, Next.js). Pinegrow Web Editor is a standalone desktop app for static HTML projects and converting them to WordPress themes.
- How about Svelte, Astro, Vue...? Piny is designed to be extendable, and there are plans to support more libraries and frameworks in the future, starting with React for the launch.
- Why the name Piny? The name combines pine trees (Pinegrow team mascot) and the lightweight nature of the editor.
