Hi, Matjaz here.<p>Piny is a visual editor that runs directly in Visual Studio Code, Cursor and Windsurf. It supports Tailwind CSS, Astro, React and Next.js.<p>All edits happen directly in the code, so there are no abstractions, no cloud services and no lock-in.<p>Piny doesn’t try to be all-in-one visual editor that would cover layout creation, styling, data, logic… That is no longer relevant in the age of AI coding agents.<p>Instead, Piny focuses on two areas where it can really add value:<p># Tailwind styling<p>Piny lets you easily style JSX / HTML with Visual Controls and Class Inspector (an editable tree view of all classes and states). This also works with any strings that contain Tailwind classes.<p>For visual tasks (such as changing the text size) it is often much easier to directly change a visual property than to go back and forth about it with your AI agent.<p># Project navigation<p>Navigate the project code by selecting elements directly in the built-in browser preview. Just click on a heading, image, icon, section etc in the preview and its source element is selected in Piny and in the code.<p>This feature requires a small dev-only script to be inserted into the layout. React with Vite, any Next.js and Astro projects are supported at this time.<p>Piny is based on Pinegrow Web Editor, our desktop visual editor for static HTML & WordPress that we’ve been actively developing for more than a decade. This makes Piny feature complete and robust, it’s not a MVP.<p># Piny Free and Pro<p>The standard edition is completely free. You don’t even have to sign up. Just install it from the extension marketplace and you’re ready to go.<p>Piny Pro adds Visual select (Project navigation, mentioned above), custom Tailwind theme import and other goodies. We’re running an Early Access deal with 60% discount that you get to keep forever.<p># Visual tools in the age of AI<p>A lot has changed in web development. When Pinegrow was launched here on HN 11 years ago, Bootstrap was a shiny new framework.<p>Today, visual tools should be designed to complement AI assisted development. This principle is reflected in Piny:<p>- It runs in your IDE, where you already work
- All changes happen in the code
- Uses visual tools for visual tasks
- Helps you jump to the relevant component / element in the code so that you can then edit it visually, in code or with AI
- Piny is there when you need it and gets out of your way when you don’t<p># Getting started<p>To take Piny for a spin, install it from extension marketplace, right-click anywhere in your code and choose “Edit in Piny”.<p>Pro trial version is included if you want to try Visual select.<p>Let me know if you run into any issues, or just want to get in touch!