Piny

Working with modern web frameworks and utility-first CSS like Tailwind CSS is powerful, but constantly switching between code, documentation, and browser previews to tweak styles can interrupt your flow. Piny brings the benefits of a visual editor right into your familiar development environment, allowing you to style your components and navigate your project without leaving your IDE. It works by editing your code directly, maintaining a transparent and non-abstracted workflow.

Key Features

• 🖱️ Style elements visually: Click on any element in your code preview and adjust its Tailwind classes using intuitive visual controls. See changes reflected instantly in both the preview and your code.

• 🔍 Inspect and manage Tailwind classes: View and edit complex Tailwind styles for any element, organized neatly in an editable tree structure showing classes and states.

• ✏️ Edit Tailwind classes anywhere: Modify Tailwind classes directly within string literals, variables, and even in code outside of standard React or Astro component structures.

• ↔️ Navigate between components: Quickly jump from the preview to the corresponding component in your code. You can associate routes with components to ensure the preview always shows relevant content.

• 🤖 Build UI with AI-assisted drag & drop: Visually assemble your UI faster using intelligent drag and drop functionality. Piny integrates with your own AI API provider key and works alongside your preferred AI coding assistant.

• 👁️ Select elements visually (Pro): Directly select elements in the live preview to highlight them in your code and access their visual styling controls.

• 🛠️ Edit multiple elements (Pro): Select several elements simultaneously using standard modifier keys (CMD/CTRL, SHIFT) and apply styles or inspect classes across the selection.

• 🧭 Explore your entire project (Pro): Gain a bird's-eye view and easily navigate components across your whole project directly from the Piny interface.

• 🎨 Import custom Tailwind theme (Pro): Customize Piny's visual controls to match your project's specific design system by importing your Tailwind configuration, including custom colors, fonts, and spacing.

Use Cases

1. Refining Component Appearance: You're building a new button component and need to perfect its padding, border radius, and hover states. Instead of manually adding px-4 py-2 rounded-md hover:bg-blue-700 and constantly checking the browser, you use Piny's visual controls to adjust these properties directly on the button in the preview. Piny updates the code instantly, and hot reload shows the result, saving you repetitive typing and context switching.

2. Debugging Complex Layouts: You've encountered an issue with spacing in a nested layout structure using complex flexbox and grid classes. Using the Tailwind Class Inspector, you select the problematic element in the preview (with the Pro feature) or code, examine the tree of applied classes, quickly identify conflicting margin or padding utilities, and edit them directly in the inspector to resolve the layout issue.

3. Rapid Prototyping and Assembly: You need to quickly mock up a new page section using existing components and adding some new elements. Using the AI-assisted drag and drop, you pull in relevant components, arrange them visually, and then use Piny's visual controls to fine-tune spacing and alignment without writing repetitive utility classes by hand. You can also use Component Navigation to quickly jump into one of the dropped components if it needs minor structural adjustments.

Conclusion

Piny integrates visual editing seamlessly into your development workflow, running directly within your IDE. By enabling you to style and navigate your projects visually while keeping edits tied directly to your code, Piny helps you work faster and more intuitively with Tailwind CSS, React, Next.js, and Astro. It eliminates the need for separate tools or cloud services, ensuring you retain full control over your project. Start with the powerful free features and upgrade to Pro if you need advanced navigation and multi-element editing capabilities.

FAQ

• Is Piny Free truly free? Yes, Piny Free is a genuinely free version with no time limits, requiring no account or data collection. It provides core visual editing features for common tasks. The Pro version adds advanced capabilities.

• Why an early access discount? The early access discount is offered to reward early adopters for their trust and to gather valuable feedback that helps improve Piny based on real-world usage.

• Does the discounted price last? Yes, if you purchase during the early access period, you lock in that discounted price for the duration of your subscription, even after the regular price is introduced.

• How does Visual Select work? Visual Select maps elements in the live preview back to their corresponding code locations using advanced DOM to JSX mapping techniques. It requires a tiny script in your project's layout, which is only active in development mode.