NewNow in Claude Code and CodexEdit visually right inside Claude Code and Codex
Your agent builds it. You fine-tune and maintain it.
Piny is a visual editor for your React code, whether you write it yourself or with your AI agent. Click anything to change its layout, styling and content right on the page, or point your agent to the exact element you mean.
Works with
- React
- Vite
- Tailwind CSS
- Claude Code
- Codex
- other coding agents, or none
How it works
Your agent and Piny edit the same code
In your coding agent
- Build features, pages and logic
- Connect data and APIs
- Make big design changes
In Piny
- Click any element to select it
- Adjust spacing, colors, type and layout
- Edit text, images and links
- Insert, move and edit components
- See the result right away, with no prompt and no waiting
Features
What you can do in Piny
FREEIncluded in Piny Free
PROPiny Pro adds
Also in Free: Undo and Redo for every edit, class inspection, and Target this element, which copies an element's component, file and line for your agent's prompt.
Get started
Ask your agent to set it up
Set up Piny visual editing in this project, using @pinegrow/piny@latest. Follow https://getpiny.com/get-started.html#agent-setup and give me the Piny editor link when it's ready.
It installs Piny, adds the Vite plugin, starts your dev server and gives you the editor link.
Pricing options
Become a Piny pro
Use Free for as long as you like. Try Pro free for 14 days, then subscribe when you're ready.
Piny Free
Inspect your app and fix its content.
$0
Use it for free- Click to select any element
- Component tree and navigation
- Inspect source and classes
- Edit text, images, links and attributes
- Multiple page views
- Undo and Redo
- Target this element for your agent
- No account, no time limit
Piny Pro
BEST VALUE
Yearly subscription
The same Pro tools, billed once a year.
$60/year + tax
Renews yearly. Cancel any time. Refundable within 30 days.
Subscribe yearly- Everything in Free
- Visual styling, Tailwind, classes and Grid
- Component props and expression bindings
- Insert, rearrange, duplicate and delete
- Content Workspace
- Component library, slots and Project Guide
- Email support
- One developer, up to three computers
Every Piny release is included while you're subscribed. If you cancel, you keep Piny Free and every change you made.
Piny Pro
Monthly subscription
The same Pro tools, paid month by month.
$10/month + tax
Renews monthly. Cancel any time.
Subscribe monthly- Everything in Free
- Visual styling, Tailwind, classes and Grid
- Component props and expression bindings
- Insert, rearrange, duplicate and delete
- Content Workspace
- Component library, slots and Project Guide
- Email support
- One developer, up to three computers
Every Piny release is included while you're subscribed. If you cancel, you keep Piny Free and every change you made.
Try Pro free for 14 days, without buying
The trial starts in Piny, not on this page. Click Start Pro trial at the top right of the editor and enter the code we email you. No card and nothing to cancel. When the trial ends, you're back on Free and your edits stay.
FAQ
Frequently asked questions
-
You keep using Piny Free, and every change you made stays in your code. Pro tools come back as soon as you subscribe again.
-
Yes. Both include every Pro tool and every Piny release while the subscription is active, so you can always update to the latest version. Yearly costs less over a year.
-
Yes. A Pro subscription is for one developer, on up to three computers.
-
Yearly subscriptions can be refunded within 30 days of payment. Monthly payments aren't refundable; cancel any time and Pro stays until the month ends.
-
No. Piny works with the coding agent you already use. It doesn't need an AI subscription or API key.
-
No. Piny edits your React source directly, so it works the same when you write the code yourself. Use it next to your usual editor; when you save a file there, Piny shows the change right away. Set it up yourself
-
Client-rendered React projects on Vite 5.2+, 6, 7 or 8, running on your computer, opened in Chrome or another Chromium-based browser. Astro support is coming soon. Next.js isn't supported yet. Requirements
-
No. They're for different kinds of projects. Piny edits React apps: it runs in your browser with your app's dev server and saves changes to your JSX and TSX. Pinegrow Web Editor is a desktop app for HTML and CSS websites and WordPress themes. Both use the same visual controls. About Pinegrow Web Editor
-
No. Piny is a separate product, so Pro needs its own subscription. Piny Free doesn't need a license at all.
-
No. Free includes supported text, image, link and ordinary attribute edits. Class editing requires Pro; the visual Tailwind controls also need Tailwind CSS v4.
-
A development dependency and a Vite plugin. Settings are stored in
.piny. Nothing is included in production builds. -
Piny picks up the agent's change and doesn't overwrite it. Its own edits are minimal, so your agent sees ordinary source changes.
-
Anonymous usage data, such as which features are used. Never your code, content or personal data. Privacy policy
-
You're back on Free. Your edits stay in your code.
-
No. Buying starts your Pro license right away, and you're billed at checkout. Yearly subscriptions can be refunded within 30 days. To try Pro first, start the free trial inside Piny: click Start Pro trial at the top right of the editor.
-
It's deprecated. Details
Meet all our products
Built by Pinegrow for professional web developers
Piny uses the visual controls from Pinegrow Web Editor.
Pinegrow Web Editor • Pinegrow Online • Pinegrow WordPress Plugin • Vue Designer • HTML Planet for Kids
