Piny

Travailler avec des frameworks web modernes et des CSS "utility-first" comme Tailwind CSS est puissant, mais jongler constamment entre le code, la documentation et les aperçus du navigateur pour peaufiner les styles peut interrompre votre flux de travail. Piny intègre les avantages d'un éditeur visuel directement dans votre environnement de développement habituel, vous permettant de styliser vos composants et de naviguer dans votre projet sans quitter votre IDE. Il fonctionne en éditant directement votre code, maintenant un workflow transparent et non abstrait.

Fonctionnalités clés

• 🖱️ Stylisez visuellement les éléments : Cliquez sur n'importe quel élément dans votre aperçu de code et ajustez ses classes Tailwind à l'aide de contrôles visuels intuitifs. Observez les modifications reflétées instantanément dans l'aperçu et dans votre code.

• 🔍 Inspectez et gérez les classes Tailwind : Visualisez et modifiez les styles Tailwind complexes pour n'importe quel élément, organisés de manière claire dans une arborescence éditable affichant les classes et les états.

• ✏️ Modifiez les classes Tailwind n'importe où : Modifiez les classes Tailwind directement dans les littéraux de chaînes, les variables et même dans le code en dehors des structures de composants React ou Astro standard.

• ↔️ Naviguez entre les composants : Passez rapidement de l'aperçu au composant correspondant dans votre code. Vous pouvez associer des routes à des composants pour vous assurer que l'aperçu affiche toujours le contenu pertinent.

• 🤖 Créez une interface utilisateur avec le glisser-déposer assisté par l'IA : Assemblez visuellement votre interface utilisateur plus rapidement grâce à une fonctionnalité de glisser-déposer intelligente. Piny s'intègre à votre propre clé de fournisseur d'API d'IA et fonctionne avec votre assistant de codage IA préféré.

• 👁️ Sélectionnez visuellement les éléments (Pro) : Sélectionnez directement les éléments dans l'aperçu en direct pour les mettre en évidence dans votre code et accéder à leurs contrôles de style visuel.

• 🛠️ Modifiez plusieurs éléments (Pro) : Sélectionnez plusieurs éléments simultanément à l'aide des touches de modification standard (CMD/CTRL, SHIFT) et appliquez des styles ou inspectez les classes sur l'ensemble de la sélection.

• 🧭 Explorez l'ensemble de votre projet (Pro) : Obtenez une vue d'ensemble et naviguez facilement entre les composants de l'ensemble de votre projet directement depuis l'interface de Piny.

• 🎨 Importez un thème Tailwind personnalisé (Pro) : Personnalisez les contrôles visuels de Piny pour qu'ils correspondent au système de conception spécifique de votre projet en important votre configuration Tailwind, y compris les couleurs, les polices et l'espacement personnalisés.

Cas d'utilisation

1. Affiner l'apparence des composants : Vous créez un nouveau composant de bouton et vous devez perfectionner son remplissage, son rayon de bordure et ses états de survol. Au lieu d'ajouter manuellement px-4 py-2 rounded-md hover:bg-blue-700 et de vérifier constamment le navigateur, vous utilisez les contrôles visuels de Piny pour ajuster ces propriétés directement sur le bouton dans l'aperçu. Piny met à jour le code instantanément, et le rechargement à chaud affiche le résultat, ce qui vous évite de taper et de changer de contexte de manière répétitive.

2. Déboguer des mises en page complexes : Vous avez rencontré un problème d'espacement dans une structure de mise en page imbriquée utilisant des classes flexbox et grid complexes. À l'aide de l'inspecteur de classes Tailwind, vous sélectionnez l'élément problématique dans l'aperçu (avec la fonctionnalité Pro) ou le code, examinez l'arborescence des classes appliquées, identifiez rapidement les utilitaires de marge ou de remplissage conflictuels et les modifiez directement dans l'inspecteur pour résoudre le problème de mise en page.

3. Prototypage et assemblage rapides : Vous devez rapidement maquiller une nouvelle section de page en utilisant des composants existants et en ajoutant de nouveaux éléments. À l'aide du glisser-déposer assisté par l'IA, vous insérez les composants pertinents, les disposez visuellement, puis utilisez les contrôles visuels de Piny pour affiner l'espacement et l'alignement sans écrire manuellement des classes d'utilitaires répétitives. Vous pouvez également utiliser la navigation dans les composants pour accéder rapidement à l'un des composants déposés s'il nécessite des ajustements structurels mineurs.

Conclusion

Piny intègre l'édition visuelle de manière transparente dans votre flux de travail de développement, en s'exécutant directement dans votre IDE. En vous permettant de styliser et de naviguer visuellement dans vos projets tout en gardant les modifications liées directement à votre code, Piny vous aide à travailler plus rapidement et plus intuitivement avec Tailwind CSS, React, Next.js et Astro. Il élimine le besoin d'outils distincts ou de services cloud, vous assurant de conserver le contrôle total de votre projet. Commencez avec les puissantes fonctionnalités gratuites et passez à la version Pro si vous avez besoin de fonctionnalités avancées de navigation et d'édition multi-éléments.

FAQ

• La version gratuite de Piny est-elle vraiment gratuite ? Oui, Piny Free est une version véritablement gratuite, sans limite de temps, qui ne nécessite aucun compte ni collecte de données. Elle offre des fonctionnalités d'édition visuelle de base pour les tâches courantes. La version Pro ajoute des fonctionnalités avancées.

• Pourquoi une réduction d'accès anticipé ? La réduction d'accès anticipé est offerte pour récompenser les premiers utilisateurs de leur confiance et pour recueillir des commentaires précieux qui permettent d'améliorer Piny en fonction de l'utilisation réelle.

• Le prix réduit est-il durable ? Oui, si vous achetez pendant la période d'accès anticipé, vous bloquez ce prix réduit pour toute la durée de votre abonnement, même après l'introduction du prix normal.

• Comment fonctionne Visual Select ? Visual Select fait correspondre les éléments de l'aperçu en direct à leurs emplacements de code correspondants à l'aide de techniques avancées de mappage DOM vers JSX. Il nécessite un petit script dans la mise en page de votre projet, qui n'est actif qu'en mode développement.