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!