Piny est conçu pour un flux de travail devenu courant : un agent de code IA génère les pages et la logique, puis un humain doit affiner les espacements, la typographie et les textes sans relancer un prompt pour chaque pixel. Piny s'installe comme dépendance de développement et plugin Vite, ouvre un éditeur visuel à côté de votre application et vous laisse cliquer sur tout élément pour sélectionner le JSX qui le rend. Vous y réglez les contrôles Tailwind d'espacement, de couleur, de typographie, de flex et de grid selon les breakpoints et les états en utilisant le thème propre à votre projet, vous modifiez le texte, les images et les liens, et vous inspectez l'arbre de classes d'un élément et de ses parents.
Piny modifiant la source plutôt que de générer des surcouches, les changements sont de simples modifications de code : votre agent les repère et rien n'est inclus dans les builds de production. Si votre agent modifie un fichier pendant que vous l'éditez dans Piny, Piny détecte le changement et évite de l'écraser. La fonction « Target this element » copie le composant, le fichier et la ligne d'un élément pour pointer votre agent exactement au bon endroit au prompt suivant.
Piny vient des créateurs de Pinegrow Web Editor, mais c'est un produit distinct avec sa propre licence. Une formule gratuite réellement utilisable existe, sans compte ni limite de temps : clic pour sélectionner, arbre de composants, édition de contenu, vues multi-pages, annuler et rétablir. Pro ajoute les contrôles Tailwind et Grid, l'inspecteur de classes, l'édition de structure et de props, un Content Workspace pour les textes et données de page, et une bibliothèque de composants que vous enregistrez pour que les vôtres apparaissent avec aperçus et préréglages. Les projets pris en charge aujourd'hui sont les applications React rendues côté client sur Vite 5.2 ou plus ; le support d'Astro arrive bientôt et Next.js n'est pas encore pris en charge.
