Comment créer de magnifiques captures d'écran de publication sans abonnement ni Figma

Chaque fois avant de publier un article ou de sortir un projet personnel, la même routine se répète. Vous prenez une capture d'écran brute de l'interface, ouvrez un éditeur graphique, ajustez l'arrondi des coins, ajoutez des ombres, choisissez un dégradé pour l'arrière-plan. Vingt minutes plus tard, vous réalisez que vous passez du temps non pas sur du code, mais sur l'ajustement de pixels.

Les services payants pour de belles maquettes facturent depuis longtemps les exports de haute qualité ou placent leurs filigranes juste au centre. Récemment, je suis tombé sur un projet open source screenshot-studio qui résout ce problème directement dans le navigateur. Pas d'inscription, pas d'abonnement, et pas de limitations cachées.

Ce qu'il y a à l'intérieur du projet

Le dépôt est maintenu par le développeur Kartik Labhshetwar. En essence, c'est un éditeur web où vous pouvez déposer une image ou un extrait de code et le transformer rapidement en matériel promotionnel soigné.

Le projet fonctionne localement ou directement sur screenshot-studio.com. Tous les calculs et le rendu se font côté client, donc vos images ne vont nulle part. Pour beaucoup de gens, c'est critique si les captures d'écran contiennent des données de test ou des fragments de tableaux de bord privés.

Ce que l'éditeur peut faire :

• Envelopper les captures d'écran dans des maquettes de navigateur Chrome, Safari ou Arc avec des barres d'adresse personnalisables.
• Appliquer des arrière-plans dégradés, floutés ou texturés parmi des centaines d'options prêtes à l'emploi.
• Faire pivoter les images dans l'espace 3D avec une perspective et des ombres réalistes.
• Ajouter des annotations, des flèches, du texte et des zones de flou pour masquer les informations confidentielles.
• Rendre des vidéos et des animations d'interface aux formats MP4, WebM ou GIF.
• Exporter des graphiques statiques en PNG et JPG avec une mise à l'échelle jusqu'à 5x.

Fonctionnalités pratiques de l'éditeur

Travailler avec du code et des maquettes

Si vous préparez un post sur les réseaux sociaux ou de la documentation, vous avez souvent besoin de montrer un extrait de configuration ou un composant. L'éditeur dispose d'un générateur d'extraits de code intégré, éliminant le besoin d'outils externes comme Carbon.

Pour les captures d'écran de services web, il y a des cadres Safari et Chrome élégants. Vous pouvez basculer entre les thèmes clair et sombre, ajuster la taille de l'en-tête du navigateur et saisir manuellement l'URL souhaitée dans la barre d'adresse. C'est un petit détail, mais une capture d'écran dans un post ressemble immédiatement à un produit fonctionnel en direct plutôt qu'à un rectangle recadré.

Effets 3D et perspective

Les images plates régulières dans les supports promotionnels se perdent souvent dans les fils d'actualité. L'éditeur dispose d'environ 30 préréglages de perspective intégrés. Vous pouvez faire pivoter l'image selon un angle, l'incliner et ajouter une ombre douce avec une profondeur ajustable.

Cela fonctionne rapidement sans lag sur le canevas. L'effet est créé via des transformations CSS et WebGL, donc il n'est pas nécessaire de rerendre la source chaque fois que vous déplacez un curseur.

Animations et export vidéo

C'est vraiment une fonctionnalité rare pour des utilitaires open source comme celui-ci. Vous pouvez non seulement enregistrer une image statique, mais aussi créer une courte vidéo avec des animations d'apparition d'éléments ou un zoom fluide.

À l'intérieur, il y a une chronologie basique avec des images clés et une paire de dizaines de préréglages d'animation. L'encodage vidéo est géré par les bibliothèques FFmpeg WASM et WebCodecs directement dans le navigateur. Cela signifie que l'export utilise l'accélération matérielle GPU si le navigateur le prend en charge.

Stack technique

Le projet utilise une stack moderne qui peut servir de bon exemple pour ceux qui apprennent le développement frontend React contemporain :

• Next.js 16 et React 19 comme framework de base.
• TypeScript pour le typage de tout l'éditeur.
• Tailwind CSS 4 et Radix UI pour les interfaces des composants.
• Zustand pour gérer l'état du canevas et des calques.
• Motion (anciennement Framer Motion) pour les animations de l'interface.
• FFmpeg WASM et WebCodecs pour l'encodage des fichiers média.

La base de code est bien structurée, avec l'état de l'éditeur stocké dans des stores Zustand prévisibles, ce qui facilite la compréhension du fonctionnement de la logique du canevas.

Comment exécuter le projet localement

Si vous voulez déployer l'éditeur localement ou explorer le code source, lancez simplement les commandes standard :

git clone https://github.com/kartik-lab/screenshot-studio.git
cd screenshot-studio
npm install
npm run dev

Après la construction, l'application démarrera sur http://localhost:3000. Le dépôt est distribué sous la licence Apache 2.0 permissive, donc vous pouvez librement utiliser le code comme base pour vos propres outils internes d'entreprise.

Qui trouvera ce projet utile

Cet utilitaire gère parfaitement les tâches routinières pour plusieurs scénarios :

• Développeurs de projets personnels : formatez les aperçus de dépôts dans README, préparez des captures d'écran pour Product Hunt ou des posts sur Telegram et X.
• Rédacteurs techniques : floutez rapidement les jetons et e-mails dans les captures d'écran admin et conditionnez élégamment les images pour les guides.
• Indie hackers : créez des GIF animés et de courtes vidéos démontrant la fonctionnalité des features sans lancer d'éditeurs vidéo lourds.

Le projet gagne activement des étoiles et est soutenu par le programme de subventions Vercel OSS.

Si vous êtes fatigué de passer du temps sur des maquettes dans des éditeurs lourds, consultez screenshot-studio.com ou forkez le dépôt. L'outil fait gagner beaucoup de temps et fait exactement ce qu'on attendrait de lui.