OPEN-SLIDE : le framework de slides où l’agent écrit le React
⏱️ Temps de lecture estimé : 4 minutes
https://github.com/open-slide/open-slide
📌 OPEN-SLIDE est un framework de présentation open source qui transforme votre agent de code en auteur de decks : chaque slide est un composant React sur un canvas fixe de 1920 × 1080, et l’inspecteur du navigateur transforme vos retouches visuelles en commentaires que l’agent applique ensuite. MIT, plus de 8 700 étoiles, créé en avril 2026.
Le point de départ tient en une phrase : les slides sont du code visuel, et les agents écrivent très bien du code. Tout le reste — canvas, mise à l’échelle, navigation, rechargement à chaud, mode présentation, export — est confié au framework, pour que l’agent se contente du contenu. Une seule commande amorce le workspace :
bash
npx @open-slide/cli init my-deck
npm run dev démarre le serveur sur localhost:5173, avec l’inspecteur et le panneau d’assets déjà branchés.
Le contrat tient en trois règles. Chaque deck vit dans slides/, l’export par défaut est un tableau de composants sans props, et la racine doit remplir son conteneur :
tsx
const Cover: Page = () =>gt; gt;Hello, open-slide.gt;
export default [Cover] satisfies Page[]
Le canvas ne bouge jamais : 1920 × 1080 pixels que le runtime met à l’échelle uniformément. Le pixel que vous écrivez est celui qui part en export, sur un téléphone comme sur un vidéoprojecteur. Une échelle typographique accompanye le tout — titres héros de 140 à 200 px, corps de texte de 32 à 44 px, marges de 100 à 160 px — pour qu’un agent n’ait pas à réinventer le rendu de chaque deck.
Le morceau vraiment intéressant, c’est l’inspecteur. Vous cliquez un élément dans le navigateur, vous le déplacez, le redimensionnez, le faites pivoter, avec guides magnétiques et un panneau Format pour la typographie, la couleur ou les images. Surtout, vous pouvez écrire une note — « mets la couleur d’accent sur ce titre », « réduis à 88 px » — qui se retrouve ancrée dans le source sous forme de marqueur @slide-comment, invisible à l’exécution. /apply-comments applique exactement les zones signalées, puis efface les marqueurs. La sélection courante est publiée dans un fichier que l’agent lit via /current-slide : « agrandis ça » se résout vers le nœud JSX exact, sans aller-retour.
Cinq skills accompagnent le workspace : /create-slide, qui pose quatre questions de cadrage avant d’écrire, /slide-authoring pour la spec technique, /apply-comments, /create-theme et /current-slide. Les règles dures vivent dans un AGENTS.md à la racine : aucune dépendance ajoutée, package.json et open-slide.config.ts intouchables, React et les API web standard seulement. Les skills restent versionnés dans le projet, pas dans la configuration globale de l’agent.
Le reste est du confort, mais du vrai confort. Les assets existent en deux portées, locale au deck ou globale via un alias @assets/*, avec un panneau qui accepte le glisser-déposer et cherche parmi plus de 1 500 logos de marque via svgl. Les thèmes sont deux fichiers appariés : un .md que l’agent lit comme recette, un .demo.tsx qui sert de vignette vivante. Le mode présentateur s’ouvre dans une seconde fenêtre avec la slide courante, la suivante, les notes et un chronomètre.
Mon avis, avec deux réserves. L’export PDF donne une page paysage 1920 × 1080 par slide mais ne fonctionne pas sous Safari, et le PPTX exporte chaque page en image : la doc indique qu’un PowerPoint natif éditable n’existe pas encore, alors que le README l’annonce déjà. Il faut aussi connaître React, ou accepter de lire du JSX. En face, 8 700 étoiles, 617 forks, un MIT et un rythme de commits soutenu depuis avril. Pour qui veut des decks versionnés, reviewables et produits par un agent, le rapport est franchement bon.
Quelques points clés :
- 📐 Canvas 1920 × 1080 mis à l’échelle : un pixel écrit, un pixel exporté
- 🎯 Inspecteur visuel : cliquer, déplacer, commenter, puis
/apply-commentsapplique - 🤖 Cinq skills versionnés dans le workspace et un
AGENTS.mdqui verrouille les règles - 🖼️ Assets en deux portées et plus de 1 500 logos de marque via svgl, sans quitter le navigateur
- 🎬 Vue présentateur : slide suivante, notes et chronomètre dans une seconde fenêtre
- 📦 Export HTML statique, PDF paysage et PPTX en images, build sans serveur
Sources
