Piny

Visual Editor for Astro, React, Next.js & Tailwind CSS

5.0•1 review•

98 followers

Visual Editor for Astro, React, Next.js & Tailwind CSS

5.0•1 review•

98 followers

Visit website

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.

Free Options

Launch tags:Design Tools•Developer Tools•Artificial Intelligence

Launch Team / Built With

Unblocked — Giving your agents the context to save time and tokens.

Giving your agents the context to save time and tokens.

Promoted

HTML Planet for Kids

Maker

📌

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. This deal will end on May 29, 08:00 CET. # 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!

Report

9mo ago

Piny seems like a great addition to the development workflow, especially for projects with Tailwind CSS, React, and Next.js! The ability to navigate the project code directly from the browser preview and select elements visually is a huge time-saver. Does Piny Pro support advanced customization for themes or project structures, especially for large-scale projects with complex layouts?

Report

9mo ago

HTML Planet for Kids

Maker

@evgenii_zaitsev1 Piny doesn't make any assumption about the project structure, so it should work with most projects.

Report

9mo ago

This little extension packs a big punch! I've been a Pinegrow Pro user for a long time and am thrilled to see them bringing the power of their visual editor to VS Code. Now, without any complicated setup, lock-in, or anything special to manage, I can visually edit, style, and navigate my Astro projects. Their AI features are also worth checking out. It's clear that they've put in a lot of effort to make the AI features work for you when you need it and get out of the way when you don't. Congrats to the Pinegrow team on another fantastic product!

Report

9mo ago

HTML Planet for Kids

Maker

@adamslowe Thanks Adam, glad to hear Piny is useful for you!

Report

9mo ago

Really cool stuff and crazy to see the code get updated in real time, reminds me of something my old company was working on. With tailwind being so widely used by newcomers/those who really care about the speed of development, I could see them quickly adopting a visual editor like this. I'm excited to see what you have planned next!

Report

9mo ago

HTML Planet for Kids

Maker

@thomasmwhite Thanks Thomas! Yes, I think this approach really hits the sweet spot between interactive styling and keeping the code the only source of truth.

Report

9mo ago

My Financé

@mikekerzhner this is similar to what you were asking about the other day!

Report

9mo ago

Genius

Report

9mo ago

HTML Planet for Kids

Maker

@thedatadavis thanks Chris!

Report

9mo ago

Piny is a clean visual editor inside VS Code and others, supporting Tailwind, React, Next.js, and more. No cloud, no lock-in—just pure code control. Really handy for developers!

Report

9mo ago

1 2