Introducing Piny: The Code-First Visual Editor for Modern Frontend Stacks
Piny is a tightly integrated visual editing layer built *inside* your editor—not as a separate app or cloud service, but as a native extension for VS Code, Cursor, and Windsurf. It empowers developers to visually style, inspect, and refactor UIs in real time—directly within Astro, React, Next.js, and Tailwind CSS projects. Every change you make reflects instantly in your source files. No proprietary wrappers. No hidden abstractions. No vendor lock-in. Just clean, human-readable code—enhanced with intuitive visual controls that accelerate iteration without sacrificing control.
Get Started in Under 30 Seconds
Install the Piny extension from the VS Code Marketplace (or your preferred compatible IDE). Open any `.astro`, `.tsx`, `.jsx`, or `.js` file in a supported project, right-click on an element or component, and choose “Edit in Piny”. Instantly launch a contextual visual panel—tailored to your framework and styling system—that lets you adjust spacing, colors, typography, responsiveness, and more—all while writing zero new classes or configuration.