O Piny foi feito para um fluxo hoje comum: um agente de código com IA monta páginas e lógica, e depois uma pessoa precisa ajustar espaçamento, tipografia e textos sem reescrever prompts a cada pixel. O Piny se instala como dependência de desenvolvimento e plugin do Vite, abre um editor visual ao lado da aplicação e permite clicar em qualquer elemento para selecionar o JSX que o renderiza. A partir daí você ajusta controles de Tailwind de espaçamento, cor, tipografia, flex e grid em diferentes breakpoints e estados usando o tema do próprio projeto, edita texto, imagens e links, e inspeciona a árvore de classes de um elemento e de seus pais.
Como o Piny edita o código-fonte em vez de gerar camadas sobrepostas, as mudanças são alterações de código normais: seu agente as reconhece e nada é incluído nos builds de produção. Se o agente editar um arquivo enquanto você o edita no Piny, o Piny detecta a mudança e evita sobrescrevê-la. O recurso "Target this element" copia o componente, o arquivo e a linha de um elemento para apontar o agente exatamente ao lugar certo no próximo prompt.
O Piny vem dos criadores do Pinegrow Web Editor, mas é um produto separado com licenciamento próprio. Há um nível gratuito realmente utilizável, sem conta e sem limite de tempo: clique para selecionar, árvore de componentes, edição de conteúdo, várias visualizações de página, desfazer e refazer. O Pro adiciona os controles de Tailwind e Grid, inspetor de classes, edição de estrutura e props, um Content Workspace para textos e dados da página, e uma biblioteca de componentes que você registra para que os seus apareçam com pré-visualizações e presets. Os projetos compatíveis hoje são React renderizado no cliente em Vite 5.2 ou superior; o suporte a Astro está a caminho e o Next.js ainda não é suportado.
