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