Pour modifier la conception d’un site web, il est essentiel de modifier son CSS. Parfois, les modifications peuvent prendre du temps, d’autant plus que très peu d’outils, permettent d’éditer le CSS en temps réel. Je vous propose de découvrir, un outil ou plutôt une extension Chrome qui va vous faciliter la tâche ! Devsync permet de modifier visuellement le CSS de votre site et les modifications se synchronisent automatiquement avec votre éditeur.
Devsync a récemment été mis en avant sur Product Hunt et a été élu « Produit du jour » le 17 février dernier. Les avis sont très positifs et reconnaissent que Devsync, permet de faciliter la conception !

Découvrez ci-dessous, comment fonctionne Devsync.

Un gain de temps dans la conception !

Une fois l’extension Chrome installée, l’éditeur Devsync s’affiche sur la droite de votre écran, un peu comme celui de Sketch ou Figma. À partir de là, vous pouvez modifier n’importe quel élément, sans avoir à coder en CSS. Il vous suffit de choisir la position, la police, la taille, l’espacement etc. Vous obtenez en temps réel un aperçu des modifications.
Ces dernières apparaissent également dans votre éditeur classique. L’extension et votre éditeur sont connectés, afin de ne pas faire les modifications plusieurs fois et ainsi synchroniser en direct les modifications réalisées.

Devsync fonctionne avec un grand nombre de frameworks comme HTML, Webpack, Rollup, Vue JS ou encore Angular et Next.

À l’origine du projet, Will Willems. Ce dernier explique que lorsqu’il conçoit des sites, il « s’amusait toujours à modifier le style des éléments à l’aide des outils du navigateur […] je devais constamment copier ces modifications dans mon éditeur, et je les perdais souvent en cours de route. » Afin de résoudre cela, il a créé un « moyen de préserver ces éditions et cette conception d’une manière plus visuelle. »

Devsync est un outil payant. Ce dernier est proposé à 59 euros au lieu de 79 euros en ce moment.