Bento – une suite bureautique complète dans un seul fichier

• Une alternative à PowerPoint qui regroupe document/éditeur/visionneuse/outil de présentation dans un seul fichier .bento.html, ouvrable, modifiable et présentable avec un simple navigateur
• Un unique fichier d’environ 570 Ko fonctionne comme une application complète, avec sauvegarde et partage par e-mail ou AirDrop, sans compte, cloud ni programme d’installation
• Les données des diapositives sont stockées dans le fichier sous forme de JSON lisible, ce qui permet à des agents IA comme Claude Code/Codex/Gemini/ChatGPT de modifier directement le fichier
• En fournissant aussi un .pptx existant à l’IA, celle-ci peut réécrire les diapositives en exploitant les fonctionnalités de Bento, comme Morph ou les graphiques en temps réel, plutôt que de se contenter d’une conversion simple
• Prend en charge les transitions Morph, graphiques, vidéos, audio et collaboration chiffrée en temps réel ; après Slides, Docs et Sheets sont aussi prévus selon le même modèle de fichier unique

---

Un seul fichier, à la fois document et application

• .bento.html contient à la fois les diapositives et l’éditeur complet
• Lorsque le fichier est ouvert dans le navigateur, l’éditeur se lance immédiatement ; à l’enregistrement, les données du document sont réécrites dans le fichier lui-même
• Polices, images et graphiques sont également inclus, ce qui permet d’ouvrir et de présenter une copie du fichier de manière autonome
• En mode hors ligne, les mises à jour et la collaboration sont bloquées afin que tout le travail soit traité localement
• Vous pouvez l’exécuter directement dans le navigateur depuis Bento/Slides ou télécharger le fichier applicatif unique

Un format de document pensé pour les agents IA

• Les données du document sont stockées en JSON en clair dans le bloc <script type="application/bento+json" id="bento-doc"> en haut du fichier
• Il est possible de lire le document courant avec window.bento.doc et de charger un document modifié avec window.bento.loadDoc(json)
• Les agents IA peuvent ajouter des diapositives, graphiques, notes de présentateur, etc. en modifiant uniquement le JSON, sans toucher au code de l’application
• Utilisable avec des agents de code comme Claude Code/Cursor/Aider, mais aussi avec des chatbots généralistes prenant en charge les pièces jointes
• Avec les chatbots ne prenant pas en charge les fichiers, on peut copier le JSON, le faire modifier, puis le recoller
• Avec Ollama/llama.cpp/LM Studio, l’édition par IA peut aussi s’exécuter entièrement en local
• Un fichier agents.md est fourni pour aider les agents IA à exploiter correctement Bento

Des fonctionnalités de présentation plus proches du Web que de PowerPoint

• Prend en charge les transitions Morph, qui déplacent naturellement entre les diapositives les éléments ayant le même id
  • En dupliquant une diapositive existante puis en déplaçant des éléments ou en changeant leur style, la transition se construit sans créer de timeline séparée
• Dessine des graphiques en barres, en lignes, en secteurs et en nuage de points grâce à un moteur de graphiques sans dépendance propre
  • Les graphiques en barres/lignes/secteurs/nuage de points restent interactifs pendant la présentation, avec infobulles, zoom et changement de données
• Les vidéos et l’audio peuvent être intégrés dans les diapositives ou liés sous forme de fichiers externes
• Les fichiers PowerPoint existants ne sont pas importés tels quels : l’IA les recompose en documents Bento
• Prend aussi en charge l’écran présentateur, les commentaires, les mises en page, l’export PDF, plusieurs formats de page et 8 langues d’interface
• L’édition est principalement pensée pour le desktop, mais la consultation et la présentation sont possibles aussi sur smartphone

Collaboration local-first

• Lorsqu’une session live est lancée depuis le fichier, les utilisateurs ayant ouvert une copie du même fichier rejoignent l’espace de collaboration
• Les données de collaboration sont chiffrées de bout en bout avec AES-GCM, et le serveur relais ne traite que du texte chiffré
• Un CRDT maison gère l’édition en temps réel et la fusion des modifications hors ligne
• La clé de collaboration étant contenue dans le fichier lui-même, le partage du fichier sert de mécanisme d’invitation
• Les modifications qui divergent hors ligne sont fusionnées dans les deux sens lors de la reconnexion

Feuille de route et licence de Bento/Suite

• Bento/Slides, actuellement distribué, est la première application de Bento/Suite
• Bento/Docs et Bento/Sheets sont prévus comme fichiers .bento.html autonomes et indépendants
• Le logiciel Bento lui-même est publié sous licence MIT

[GN⁺]

Avis sur Hacker News

• Je suis le créateur de Bento. En haut du fichier, il y a un bloc JSON ordinaire qui contient les données des diapositives, ce qui permet de le lire, de faire des grep dessus ou de le traiter avec des outils d’automatisation. L’app est un blob base64 chargé via un petit loader ; elle est décompressée avec DecompressionStream dans le navigateur afin de garder le paquet compact et de ne récupérer aucun fichier externe à l’exécution.
  Avec la File System Access API, le JSON est réécrit dans le même fichier ; si elle n’est pas prise en charge, l’app bascule vers un téléchargement classique, et toutes les mises à jour sont signées avec ECDSA. Je suis parti de reveal.js, en y ajoutant GSAP/Flip et echarts, puis j’ai réimplémenté moi-même toutes les fonctionnalités d’animation et de graphiques à cause de problèmes de taille et de comportement.
  Je suis particulièrement satisfait du bon fonctionnement de la collaboration CRDT. Un petit relais aveugle exécuté sur Cloudflare Durable Objects ne voit que les données chiffrées des clients, et la collaboration reste désactivée tant qu’un fichier d’invitation n’a pas été partagé pour démarrer une session. Les droits d’accès sont gérés avec des clés utilisateur, ce qui permet d’avoir des utilisateurs en lecture seule, et les autorisations de collaboration en temps réel peuvent aussi être révoquées par utilisateur.

  • Il semble qu’un nouveau compte GitHub ait été créé il y a une semaine pour le projet ; je me demande s’il existe aussi un autre compte GitHub permettant de vérifier l’historique de maintenance et de sécurité.
  • Comme il ne s’agit que d’un seul fichier, je me demandais où le CRDT fonctionne et où se trouve le serveur. J’aimais TiddlyWiki sans jamais vraiment l’adopter, tandis qu’une présentation facilement modifiable est un cas d’usage facile à comprendre.
    Je me demande aussi s’il n’y a pas un risque de voir le trafic affluer sur le compte Cloudflare si la fonction de collaboration est fournie par défaut à tous les utilisateurs.
  • La fonctionnalité magique de Reveal.js, ce sont les diapositives verticales sur lesquelles on peut se déplacer vers le haut ou le bas, comme dans l’exemple. Dans un même deck, on peut descendre pour montrer du contenu technique selon le public, ou le sauter.
    En essayant de le faire ressembler à PowerPoint, cette fonction semble avoir été retirée, mais c’est celle que je préfère dans Reveal.js, donc j’espère qu’elle ne sera pas oubliée.
  • Je me demande ce qu’il advient des decks de diapositives v1 lorsque Bento est mis à niveau vers la v2. Quand on clique sur mettre à niveau, il faudrait pouvoir exporter les données JSON des diapositives existantes vers le shell v2.
  • La voie qui consiste à prendre en charge les formats Office diaboliques mène tout droit en enfer, donc je préférerais appeler cela un diaporama plutôt qu’un PowerPoint. J’espère qu’un format simple comme celui-ci deviendra un standard et que les anciens formats disparaîtront.

• J’ai créé un outil similaire, centré sur la création de petites apps React plutôt que de présentations. Le HTML de base avec une app d’exemple est ici, et la documentation est ici ; ce n’est pas encore parfaitement peaufiné, mais c’est déjà largement utilisable.
  Il intègre un transformateur JSX et un éditeur de code, prend en charge l’enregistrement dans un fichier ou dans localStorage, et peut aussi exporter séparément le JSX et les données JSON depuis le shell chargé de l’enregistrement, de la transformation et de l’édition.
  J’ai aussi créé une app iOS pour stocker des mini-apps. Elle ne dépend pas uniquement de localStorage et conserve durablement les changements de données et de code, ce qui rend le flux enregistrement/rafraîchissement fluide. Le sandbox bloque les appels réseau des apps enregistrées, mais ils peuvent être autorisés app par app, et j’aimerais ajouter à l’avenir des fonctionnalités pratiques comme un éditeur natif.

• Je pense que ce type de forme va devenir plus courant. Beaucoup de logiciels peuvent être fournis entièrement en local avec HTML, TypeScript, React, etc., et conserver aussi leur état localement, mais jusqu’ici l’incitation économique manquait.
  Personnellement, j’utilise Kimi K3 pour créer un jeu mobile-friendly couvrant des sujets allant de l’algèbre linéaire à la physique quantique. L’objectif est de tenir compte des utilisateurs neurodivergents, de stocker tout l’état en local et de le servir depuis GitHub Pages afin de susciter l’intérêt pour ce domaine. C’est un projet qui exige des compétences variées et du temps, et qui n’aurait pas été économiquement viable sans LLM ; je compte y jouer moi-même, l’améliorer, éliminer les bugs, puis le publier sur HN.

  • J’ai discuté avec un collègue de documents hybrides où les fonctions de contrôle de l’édition et le contenu se trouvent dans un seul fichier HTML. Des wikis comme Feather Wiki en sont des précédents, et je me demande à quoi cela ressemblerait avec du SVG ou un tableur.

• J’ai pris plaisir à utiliser le livre d’or en temps réel, mais mon Mac M1 a fini par se figer et j’ai dû le redémarrer de force. Tant que tout HN ne modifie pas la page en même temps, cela devrait bien fonctionner dans la plupart des cas, mais il semble y avoir une raison pour laquelle Figma utilise WASM et un moteur de rendu personnalisé.
  Le focus de saisie actuel ne devrait pas être réinitialisé quand un autre utilisateur modifie du contenu sans rapport. De plus, le texte de la landing page et du deck d’exemple sonne beaucoup trop comme du LLM, alors que la soumission HN est bien plus agréable à lire. Le fait de l’avoir publié comme logiciel libre et open source est excellent.

  • Le livre d’or a été réinitialisé à cause du spam ; nous en sommes actuellement à l’epoch 4. Le problème de réinitialisation du focus n’est pas apparu dans les tests avec seulement une ou deux personnes, mais je vais le corriger tout de suite.
    Je suis aussi d’accord sur le problème du texte, mais je ne suis pas très sûr de moi à l’écrit et je manque de temps entre le travail et les enfants, donc je compte l’améliorer progressivement.

• Je fais connaître le concept de web apps en fichier unique, et il serait pertinent d’ajouter Bento au brouillon Wikipedia proposé.

  • mdwiki, que j’ai créé en 2013, pourrait aussi en faire partie. C’était un unique fichier .html qui incluait images, icônes et styles en inline et fonctionnait hors ligne, au point que je plaisantais en l’appelant la première vraie single-page app.
  • Ce brouillon ne ressemble pas vraiment à un article Wikipedia, notamment parce qu’il s’adresse au lecteur avec you. Wikipedia doit être une source tertiaire, pas un endroit où promouvoir un concept que l’on veut établir, donc cela ne me semble pas être le bon endroit.
  • Les diagrammes Ilograph peuvent aussi être exportés en HTML autonome, comme dans cet exemple. Ils disposent aussi d’une sorte de fonction de présentation, et le fichier fait environ 560 Ko.
  • Hyperclay pourrait aussi figurer dans la liste.
  • Quand j’ai commencé Bento, je ne connaissais que TiddlyWiki, donc je vais examiner cette liste.

• C’est chouette qu’il suffise d’indiquer à Claude la technologie Bento pour pouvoir l’utiliser.

• En créant des diagrammes avec draw.io depuis longtemps, j’ai trouvé astucieuse la façon de sauvegarder le document comme une sorte de blob iframe contenant à la fois l’éditeur et le fichier. Cela dit, avec draw.io, l’éditeur lui-même n’est pas inclus dans le fichier, il faut donc charger le code via une connexion web
  J’espérais pouvoir faire de cette approche le principal cas d’usage, et Bento correspond presque exactement à ce que j’imaginais

  • Comme j’utilise souvent draw.io, j’ai aussi envisagé cette approche, mais j’ai d’abord estimé qu’il valait mieux commencer avec un fichier local unique. Plus tard, si des fonctionnalités d’entreprise comme le SSO deviennent nécessaires, l’hébergement pourra aussi se justifier

• Cela répond à un besoin très courant en entreprise. Dans certaines équipes de l’entreprise, les bugs des logiciels de présentation et de visualisation existants ne sont pas corrigés et les fonctionnalités sur mesure ne sont pas ajoutées, si bien qu’elles ont abandonné les produits cloud ou desktop pour passer à des outils basés sur HTML et JavaScript
  Les petits détenteurs de pouvoir des organisations IT internes devraient sans doute s’inquiéter

  • Dans notre entreprise aussi, des techniciens créent de superbes présentations sous forme d’apps web qui impressionnent tout le monde, mais si les chiffres sont faux et doivent être corrigés avant le comité de pilotage de l’après-midi, un responsable non technique qui n’a que Claude, sans Claude Code, se retrouve démuni. C’est parce qu’il a été décidé que seuls les techniciens et les ingénieurs logiciel pouvaient utiliser Claude Code

• J’envisage un outil de présentation autonome qui installerait un Bento vide en PWA via la fonction du navigateur « installer le site comme application », remplirait automatiquement le nom de l’auteur, etc., puis le rendrait en lecture seule pour que l’utilisateur puisse faire « Enregistrer sous »
  Ce serait bien que le projet inclue une fonction permettant d’installer comme PWA un document de base vide, en lecture seule à l’exception des informations d’auteur

  • J’ai aussi envisagé la PWA, mais je réfléchis encore à la question plus générale de l’hébergement ou non. Pour prendre en charge les usages en entreprise, l’hébergement finira sans doute par être nécessaire, mais pour l’instant je veux me concentrer sur la création d’un outil simple et élégant
    Je compte étudier davantage les fonctionnalités que les utilisateurs voudront dans une version hébergée et la façon de préserver les principes particuliers de Bento

• Quand on crée des présentations HTML avec des agents de code, le résultat est plutôt bon. Selon l’objectif, on peut utiliser Slidev, basé sur Markdown, ou demander à un agent de créer des slides Typst, notamment très beaux pour les expressions mathématiques
  Cela dit, en voyant le titre, j’ai pensé qu’il s’agissait d’un outil directement lié à PowerPoint, alors qu’en réalité PowerPoint est utilisé comme synonyme de « présentation ». C’est assez ironique, étant donné que beaucoup de gens détestent PowerPoint