Piny - Visual editor for React, Next & Tailwind CSS 🌲

[Emmanuel]

Hi, Matjaz here. Pinegrow Web Editor just got a little brother:

Piny – visual editor for React, Next.js and Tailwind CSS that runs directly in Visual Studio Code, Cursor and Windsurf.

Watch a quick 90 seconds intro video to see what makes Piny special.

The standard edition of Piny is completely free, packed with powerful features, especially when it comes to styling Tailwind.

The Pro edition comes with Visual Select that lets you select elements directly in the browser preview, and more.

To celebrate the launch and reward early adopters we are running an Early Access deal with 60% discount on Piny Pro. This offer is available only until 28. May, 2025.

Learn more and get Piny »

Free trial of Pro features is included.

Getting started with Piny is very easy – just install it from the extension marketplace. Let me know if you run into any issues, we want to make Piny shine.

Have a great day!
Matjaz & the Pinegrow team

[Pinegrow_User]

Fun name and good concept, looks interesting. I presently can’t install it to try, so a few questions.

1. Does it require a constant internet connection, or is the plugin self contained (aside from license checks) ?
2. Does it include the full Pinegrow “Visual CSS Editor”, CSS Grid & Flexbox ?
3. Based upon #2 does that mean it also works with any vanilla non framework development ?

@Emmanuel

This offer is available only until 28. May, 2025.

Heads up, the Piny page it says the sale ends May 1st, 2025 ?

[matjaz]

Thanks @Pinegrow_User!

1. It is self contained, everything loads locally.
2. For now we focus only on Tailwind. Outside Tailwind, CSS styling in Reacts gets pretty wild with various CSS-in-JS options and many different approaches.
3. No, for such, Pinegrow Web Editor is still the best solution.

Have fixed the date there.

[Pinegrow_User]

Ok thanks for the response @matjaz, was curious if it was a plugin that would allow integrated vanilla visual editing inside a full blown IDE. Like the defunct(?) DevSync or the original Gimli.

You’re real close to having the dev unicorn of all dev unicorns inside an actual IDE.

[RedRocks]

I purchased a pro subscription with the hope that Astro support will be coming soon. I don’t do much React anymore because Astro is a better tool for most sites, and Piny would be a huge boon for my development process as I am usually building components in Pinegrow and then copying to Astro.

[fpichardom]

+1 for the hope of Astro support in the future. I just also purchased a pro subscription with the hope of Astro support at some point. Congratulations to the Pinegrow team on the release. Keep the good work.

[MichelyWeb]

Congrats for this nice Plugin @matjaz and Team.
Purchased to give my support for Astro integration.

[matjaz]

Wow, Astro is very popular here Good news, Astro integration is done (testing internally atm) and will ship soon.

[Blep]

Hi @matjaz

Just wanted to say how great it is to see you’re considering full support for Astro in Piny, that’s honestly one of the most exciting directions you could take with the project.

Astro isn’t just trending, it’s the future that’s already here. The way it handles content-driven sites, its performance, and its clean separation of concerns make it the perfect foundation for modern publishing platforms.

But what makes it even more powerful today is how Astro integrates seamlessly into automated IA workflows, especially when paired with orchestrators like Windsurf, Bolt, or even lighter solutions. The ability to manage an entire publication flow, from content creation in Markdown to preview and deployment, with little or no manual intervention is a game changer.

Here’s an example of what that kind of workflow might look like with Astro and Piny:
• Step 1: Write your blog post in Markdown (or draft it via AI)
• Step 2: AI enriches it (SEO, structure, metadata, image alt text, etc.)
• Step 3: Astro builds the site, and Piny gives us real-time preview inside VSCode (huge! )
• Step 4: The orchestrator (Windsurf or another) pushes it to staging or directly to production via CI/CD
• Step 5: The same system can trigger newsletter updates, social previews, or notify subscribers…

And all of this without leaving your editor. That’s the kind of smooth, integrated experience people want, not just developers, but also indie publishers, content teams, educators, me😋…

So thank you for building Piny, it feels like a vital piece of the puzzle, especially now that Astro is becoming the go-to for performance-first websites. You’re really tapping into something that a lot of us have been waiting for.

Looking forward to what comes next!

[RedRocks]

Astro support is live! Let’s go!!!

[matjaz]

Reposting here for convenience

A review on the marketplace would help us a lot: Tailwind Editor – Piny - Visual Studio Marketplace

[matjaz]

Also, if anyone has a Hacker News account or Show HN submission would need some encouragement: Show HN: Piny – Astro, React and Next Visual Editor for VSCode, Cursor, Windsurf | Hacker News

[Ray]

Hey, I tried the free demo and loved it, bought the pro version wanted to showcase the Click and Select and it wasn’t working anymore. I tried it in VSCode, Cursor (where it worked before), and Trae. I emailed support as I am not seeing a category for Piny in the forums.

[matjaz]

Thanks @Ray!

The Visual Select issue was fixed yesterday, please try again and let me know if it works now.

The new Piny release 1.0.14 is out with the following improvements:

Visual Select

The update fixes issues with Visual Select where in certain situations no data about DOM elements was received from Piny Phone (the small script injected into the layout that lets Piny communicate with your app in the preview).

In addition to updating the Piny extension (this should happen automatically) you will also have to update Piny Astro or Piny Vite modules in every project where they are used:

• Astro: npm update @pinegrow/piny-astro
• React Vite: npm update @pinegrow/piny-vite
• Next.js: Piny will update it automatically

We added a dialog that will popup if Piny detects that these modules are out of date.

If this does not get Visual Select working for your project, please get in touch with me through support@pinegrow.com. Piny now has an option to generate diagnostic data that will help us debug any issues (Settings → Visual Select → Show instructions → Generate debug info).