FAQ from Piny
What is Piny?
Piny is a lightweight, editor-native visual layer for Tailwind-powered frameworks. It runs locally inside VS Code–compatible IDEs and edits real source files—never generating intermediate code or requiring external services. Designed for Astro, React, and Next.js developers who value speed, transparency, and full code ownership.
How do I start using Piny?
Install the extension from your IDE’s marketplace. Then, right-click any JSX, TSX, or Astro component node—and select “Edit in Piny”. A focused, context-aware visual toolbar appears instantly, letting you tweak classes, inspect inheritance, preview breakpoints, and navigate related files—without leaving your editor.
Is Piny Free actually free—no trials, no paywalls?
Yes. Piny Free includes full visual editing, Tailwind inspection, component navigation, and theme support—forever. No telemetry, no sign-in, no usage caps. Pro unlocks AI-assisted layout suggestions, team-wide config sync, and advanced debugging workflows.
Why offer an early access discount?
To collaborate closely with pioneers who help us stress-test edge cases, refine UX flows, and prioritize integrations. Your early feedback directly shapes Piny’s evolution—and your discounted rate honors that partnership long-term.
Is the early access pricing permanent?
Absolutely. Lock in your rate at purchase—and keep it for the lifetime of your subscription, regardless of future list-price changes.
How does Visual Select map pixels to code?
Using a minimal, dev-only runtime script injected into your local dev server, Piny establishes a secure, ephemeral bridge between rendered DOM and source AST. Click any element → instantly highlight its corresponding JSX node, props, and Tailwind class string—even across dynamic imports or conditional renders.
What happens to my code if Piny shuts down?
Nothing. Piny never modifies your build process, adds dependencies, or injects runtime code. All edits are direct writes to your `.tsx`, `.astro`, or `.jsx` files. Discontinue Piny? Keep coding exactly as before—your project remains 100% portable, deployable, and independent.
How is Piny different from Pinegrow Web Editor?
Pinegrow Web Editor is a desktop application optimized for static HTML, WordPress, and site-wide visual composition. Piny is an IDE extension purpose-built for dynamic, component-based frameworks—where visual editing must coexist seamlessly with TypeScript, SSR, client-side hydration, and complex state logic. They serve complementary, not overlapping, needs.