Show HN: Piny – Astro, React and Next Visual Editor for VSCode, Cursor, Windsurf
Piny is a visual editor that runs directly in Visual Studio Code, Cursor and Windsurf. It supports Tailwind CSS, Astro, React and Next.js.
All edits happen directly in the code, so there are no abstractions, no cloud services and no lock-in.
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.
Instead, Piny focuses on two areas where it can really add value:
# Tailwind styling
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.
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.
# Project navigation
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.
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.
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.
# Piny Free and Pro
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.
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.
# Visual tools in the age of AI
A lot has changed in web development. When Pinegrow was launched here on HN 11 years ago, Bootstrap was a shiny new framework.
Today, visual tools should be designed to complement AI assisted development. This principle is reflected in Piny:
- 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
# Getting started
To take Piny for a spin, install it from extension marketplace, right-click anywhere in your code and choose “Edit in Piny”.
Pro trial version is included if you want to try Visual select.
Let me know if you run into any issues, or just want to get in touch!
“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.”
Looks like in Pinegrow where this came from you have a brilliant CSS Editor. We as developers and frontenders who use IDE's are still heavily revising through traditional methods even beyond the use of AI. So the described detached mindset concerning AI still seems pretty distant into the future. AI and the industry are not there yet to void the need for further edits. A visual CSS tool inside an IDE like that would be a powerful integrated solution for all developers and frontenders.
“IDE, where you already work”
Exactly, most of us want to be inside full fledged IDE's vs an apps like Pinegrow or similar. It’s odd you didn’t choose to first set the foundation with your core CSS Editor then build out from there regarding frameworks and libraries. Development is vast but the the core is common. Hope it’s not too late to go back and rectify this, maybe through various user modes or something. You would then literally match your statements of tools designed to compliment with easier iteration past AI.
“visual tools should be designed to complement AI assisted development.” + “it is often much easier to directly change a visual property than to go back and forth about it with your AI agent.”
You got the CSS editor and we have the IDE’s. Definitely a concept with big potential to keep an eye on. Especially if you are willing to consider the feedback as you move forward.
We're definitely open to feedback and we are considering bringing the CSS editor into Piny. One concern, when I think about it, is that CSS styling in React & co is very fragmented, with many different solutions such as CSS-in-JS etc... Maybe I'm just overthinking it :)
We did start with Tailwind because it is very convenient, with all styling inlined directly into HTML.
You’re not alone everything is being over complicated nowadays so don’t over think it too much, the core web remains the core. Will keep an eye on Piny, thanks for the feedback.