Piny

Piny lets you edit your app visually while working with your AI agent. Click an element, change its text or appearance, and see the result right away. Changes are saved directly to your project files.

Piny works with local React + Vite projects.

Set up with your AI agent

Read the getting started guide, or use the prompt below.

Copy this prompt into your AI agent while working in your project:

Set up Piny in this project.

Inspect package.json, the lockfile, Node version, dev script and Vite config
before making changes. Requirements:
- A single-package, client-rendered project.
- Node ^20.19.0 || >=22.12.0.
- Vite ^5.2.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 with @vitejs/plugin-react or
  @vitejs/plugin-react-swc.
- HTTP loopback and one active editor session in a desktop Chromium browser.

Tailwind is optional. Its visual panels require Tailwind v4 with the matching
@tailwindcss/vite plugin. Keep ordinary CSS projects as they are.
Next.js/SSR, monorepos, remote/LAN hosts, HTTPS and service-worker-controlled
editor or preview routes are unsupported. Use trusted projects and dependencies:
the editor and app share an origin. Explain incompatibilities before installing;
do not upgrade dependencies or restructure the project automatically.

Install or update @pinegrow/piny@latest as a development dependency using the
project's existing package manager. Then read
node_modules/@pinegrow/piny/AGENT_SETUP.md and follow its setup and verification
instructions.

Preserve my application source, other dependency versions, scripts and configuration.
Keep the updated lockfile for repeatable installs.
Add import {piny} from '@pinegrow/piny/vite' and put piny() before the existing
React and CSS-transforming plugins. Keep existing aliases, routes and base.
Piny is excluded from production builds, Vite preview, Vitest and Storybook.

Use the project's normal development command. Reuse or restart its existing
server as needed instead of starting a duplicate; warn before a restart clears
an active Piny Undo history.

Run the installed piny doctor --json and piny status --json commands. Use the
actual server.editorUrl returned by status and open it in my local browser if
you can. Otherwise, give me that URL. Report the installed Piny version, which
files changed, any remaining warnings, and what you actually verified.

For troubleshooting, collect the package, OS, Node, React and Vite versions,
doctor output and reproduction steps. Omit secrets and private source.

Your first edit

1. Click an element in your page.
2. Change its text or appearance in Properties.
3. Use Undo to reverse your edit.

Press Enter to apply a single-line field, or ⌘Enter / Ctrl+Enter for multiline and rich text; Enter adds a line there. Leaving the whole control also applies its value. Using its formatting toolbar or expanded input keeps the same edit open. A compact Apply button appears only while the value has changed. Hover Apply for its shortcut, Escape-to-cancel guidance, and a reminder that leaving the control applies the value. Escape cancels the pending draft; Undo reverses an edit already saved.

These controls share the same behavior in Properties, Content, Visual Properties, Class Inspector, Grid, and Page View sizes. Source edits show Saving…, then Saved after confirmation; errors keep the draft available for correction. Local settings and dialog field changes show Applied. Dialogs retain their final Insert, Apply, or Save action, and expression/code editors show the shortcut on their existing Apply or Save button.

When elements share the same source, editing one updates them all. Controls that do not apply to your selection stay unavailable.

Hold Alt/Option or enable Test clicks to use buttons and links in your app. Use Target this element/component to tell your AI agent exactly what you want to work on.

Free, Trial and Pro

Free includes selection, navigation, source and class inspection, literal text, images, links, ordinary HTML attributes, agent targeting, and Undo/Redo. Use it for as many projects as you like, including commercial work, with no time limit or watermark.

Pro adds visual styling, class editing, Tailwind and Grid controls, component settings, inserting and rearranging elements, linking text and images to your project's data, the Content Workspace, and Project Guide authoring.

Open Settings → License and trial… to activate a license or start a trial. The trial begins when you activate the emailed code, lasts up to 14 days, and requires no card. You can continue using Free when it ends.

Piny Pro is a monthly or yearly subscription. While it is active, Pro works in every Piny release, so you can always update to the latest version. If it ends, you keep Piny Free and every change you made.

Help and feedback

Piny checks for updates once every 24 hours while the editor is open. An available update appears as a teal download icon in the toolbar. Open it to get the update prompt or dismiss that version's notification. A newer release can notify again. Open Settings → Check for updates… to check immediately, including updates you dismissed. The update dialog includes a copyable prompt for your AI agent to update Piny with your project's package manager. Piny does not install updates automatically.

The update prompt names the exact version and first runs the installed piny update check --target VERSION --json, which confirms that the release supports your project's Node and Vite versions. If it doesn't, the notice explains why and offers no prompt. Prompts preserve your project and lockfile.

Open Settings → Documentation for the bundled guide, or Video tutorials in the status bar for short videos, one feature each. When an issue needs attention, open the toolbar's issue indicator and choose Details.

Ask your AI agent how to do something in Piny. It can run piny help <topic>, which prints the matching video, its chapters and the steps it shows; piny help lists every video. The same guide is in the package as dist/help/videos.json.

Piny sends usage data to Pinegrow: the features you use, setup check results, trial and license events, and your Piny, Node, React, Vite and Tailwind versions. It never sends file paths, names from your project, source code or license keys.

For help or feedback, contact support. Visit the Piny website for more information. Distribution terms are in LICENSE.md.