Bento - una suite ofimática que cabe completa en un solo archivo

• Reúne documento/editor/visor/herramienta de presentaciones en un solo archivo .bento.html, para abrir, editar y presentar solo con un navegador como alternativa a PowerPoint
• Un solo archivo de aprox. 570 KB funciona como aplicación completa, y se puede guardar y enviar por correo o AirDrop sin cuenta/nube/instalador
• Los datos de las diapositivas se guardan como JSON legible dentro del archivo, por lo que agentes de IA como Claude Code/Codex/Gemini/ChatGPT pueden modificar el archivo directamente
• Si también se le entrega un .pptx existente a la IA, en vez de hacer una conversión simple puede reescribirlo como diapositivas que aprovechen funciones de Bento como Morph y gráficos en tiempo real
• Soporta transiciones Morph/gráficos/video/audio/colaboración cifrada en tiempo real, y después de Slides planea ofrecer también Docs y Sheets con el mismo enfoque de archivo único

---

Un solo archivo que es documento y aplicación

• Dentro de .bento.html vienen juntas las diapositivas y todo el programa de edición
• Al abrir el archivo en el navegador, el editor se ejecuta de inmediato, y al guardar, los datos del documento se vuelven a escribir dentro del propio archivo
• Fuentes/imágenes/gráficos también van incluidos, así que se puede abrir y presentar de forma independiente con solo una copia del archivo
• En modo offline bloquea actualizaciones y colaboración para procesar todo localmente
• Se puede ejecutar directo en el navegador desde Bento/Slides o descargar el archivo único de la aplicación

Un formato de documento para agentes de IA

• Los datos del documento se guardan como JSON en texto plano en el bloque <script type="application/bento+json" id="bento-doc"> al inicio del archivo
• Se puede leer el documento actual con window.bento.doc y cargar un documento modificado con window.bento.loadDoc(json)
• Los agentes de IA pueden agregar diapositivas/gráficos/notas del presentador y más modificando solo el JSON, sin tocar el código de la aplicación
• Puede usarse no solo con agentes de código como Claude Code/Cursor/Aider, sino también en chatbots generales que admitan adjuntar archivos
• En chatbots que no soportan archivos, se puede copiar el JSON, modificarlo y volverlo a pegar
• Con Ollama/llama.cpp/LM Studio, la edición con IA también puede ejecutarse completamente en local
• Ofrece agents.md para guiar a los agentes de IA y que aprovechen Bento correctamente

Funciones de presentación más cercanas a la web que a PowerPoint

• Soporta transiciones Morph que mueven de forma natural elementos con el mismo id entre diapositivas
  • Basta con duplicar una diapositiva existente y mover elementos o cambiar su estilo para crear la transición sin hacer una línea de tiempo aparte
• Incluye un motor de gráficos propio sin dependencias para dibujar barras/líneas/pastel/dispersión
  • Los gráficos de barras/líneas/pastel/dispersión siguen siendo interactivos durante la presentación, con tooltips/zoom/cambio de datos
• Se puede incrustar video y audio dentro de las diapositivas o enlazarlos como archivos externos
• Los archivos PowerPoint existentes no se importan tal cual; la IA los reorganiza como documentos Bento
• También soporta vista del presentador/comentarios/layout/exportación a PDF/múltiples tamaños de página/8 idiomas de interfaz
• La edición está enfocada en escritorio, pero también permite ver y presentar desde smartphone

Colaboración con prioridad local

• Al iniciar una sesión en vivo desde el archivo, otros usuarios que abran copias del mismo archivo pueden entrar al espacio de colaboración
• Los datos de colaboración se cifran de extremo a extremo con AES-GCM, y el servidor de retransmisión solo procesa texto cifrado
• Un CRDT propio se encarga de la edición en tiempo real y de fusionar cambios hechos offline
• El propio archivo contiene la clave de colaboración, así que compartir el archivo funciona como mecanismo de invitación
• Incluso las ediciones que se separaron offline se fusionan en ambos sentidos al volver a conectarse

Hoja de ruta y licencia de Bento/Suite

• Bento/Slides, que ya se está distribuyendo, es la primera aplicación de Bento/Suite
• Planea ofrecer Bento/Docs y Bento/Sheets como archivos .bento.html autocontenidos e independientes
• El software de Bento en sí se publica bajo la MIT License

[GN⁺]

Comentarios en Hacker News

• Soy el creador de Bento. En la parte superior del archivo hay un bloque JSON normal con los datos de las diapositivas, así que se puede leer, buscar con grep o procesar con herramientas de automatización. La app es un blob base64 que se carga mediante un pequeño loader, se descomprime con DecompressionStream del navegador para mantener el paquete pequeño y no trae archivos externos al ejecutarse
  Con la File System Access API vuelve a escribir el JSON en el mismo archivo y, si no es compatible, lo reemplaza con una descarga normal; todas las actualizaciones están firmadas con ECDSA. Empecé sobre reveal.js y añadí GSAP/Flip y echarts, pero por problemas de tamaño y comportamiento terminé reimplementando por mi cuenta tanto las animaciones como los gráficos
  En particular, me deja muy satisfecho que la colaboración con CRDT funcione de forma fluida. Un pequeño relay ciego que corre en Cloudflare Durable Objects solo ve datos cifrados del cliente, y la colaboración está desactivada hasta que se comparte un archivo de invitación para iniciar la sesión. El acceso se gestiona con claves de usuario, así que puede haber usuarios de solo lectura y también se pueden revocar permisos de colaboración en tiempo real por usuario

  • Parece que creaste una cuenta nueva de GitHub hace una semana para este proyecto; me pregunto si tienes otra cuenta de GitHub donde se pueda revisar tu historial de mantenimiento y seguridad
  • Me preguntaba dónde funciona el CRDT y dónde está el servidor si solo se maneja un único archivo. Me gustaba TiddlyWiki pero nunca terminé adoptándolo, mientras que unas presentaciones fáciles de editar son un caso de uso fácil de entender
    También me pregunto si, si la colaboración viene habilitada por defecto para todos los usuarios, no existe el riesgo de que el tráfico se acumule en la cuenta de Cloudflare
  • La función mágica de Reveal.js son las diapositivas verticales que se recorren hacia arriba y abajo como en este ejemplo. En un mismo deck puedes bajar para mostrar contenido técnico según el público o saltártelo
    Parece que la quitaste al hacerlo más parecido a PowerPoint, pero es mi función favorita de Reveal.js, así que espero que no la hayas olvidado
  • Me pregunto qué pasa con los decks de diapositivas v1 cuando Bento se actualice a v2. Si uno pulsa actualizar, debería poder exportar los datos JSON de las diapositivas existentes al shell v2
  • El camino hacia soportar formatos infernales de Office lleva al infierno, así que preferiría llamarlo presentación de diapositivas en vez de PowerPoint. Ojalá un formato simple como este se vuelva estándar y los formatos viejos desaparezcan

• Hice una herramienta parecida, pero enfocada en crear pequeñas apps en React en vez de presentaciones. El HTML base con una app de ejemplo está aquí y la documentación aquí; todavía no está muy pulida, pero ya se puede usar bastante bien
  Incluye un transformador JSX y editor de código integrados, soporta guardado en archivo o en localStorage, y también puede exportar por separado los datos JSX y JSON del shell que se encarga de guardar archivos, transformar y editar
  También hice una app de iOS para guardar miniapps. Como no depende solo de localStorage, conserva a largo plazo los cambios en datos y código, así que el flujo de guardar y recargar es fluido. El sandbox bloquea las llamadas de red de las apps guardadas, pero se pueden permitir por app, y más adelante quiero añadir funciones prácticas como un editor nativo

• Creo que este formato se volverá más común. Mucho software puede entregarse totalmente en local con HTML, TypeScript, React, etc., y también mantener el estado en local, pero hasta ahora faltaban incentivos económicos
  En lo personal, estoy usando Kimi K3 para hacer un juego mobile-friendly que cubre desde álgebra lineal hasta física cuántica. La meta es que sea amigable para usuarios neurodivergentes, guardar todo el estado en local y publicarlo en GitHub Pages para despertar interés en ese campo. Es un proyecto que habría sido inviable económicamente sin LLMs por la variedad de especialización y tiempo que requiere, y planeo publicarlo en HN después de jugarlo yo mismo, mejorarlo y quitar bugs

  • Hablé con un colega sobre documentos híbridos donde los controles de edición y el contenido van dentro de un solo archivo HTML. Wikis como Feather Wiki ya son un precedente; me pregunto cómo se vería algo así implementado con SVG o con una hoja de cálculo

• Me divertí usando el libro de visitas en tiempo real, pero al final mi M1 Mac se congeló y tuve que reiniciarla a la fuerza. Probablemente funcione bien en la mayoría de casos si no es toda HN editando al mismo tiempo, pero parece haber una razón por la que Figma usa WASM y un renderizador personalizado
  Cuando otro usuario cambia algo no relacionado, no debería reiniciarse el foco de entrada actual. Además, el texto de la landing page y del deck de ejemplo suena demasiado a LLM, y la publicación en HN es mucho más fácil de leer. Es excelente que lo hayas publicado como software libre y de código abierto

  • Reinicié el libro de visitas por el spam, así que ahora está en epoch 4. El problema del reinicio del foco no apareció en pruebas con solo una o dos personas, pero voy a corregirlo enseguida
    También estoy de acuerdo con lo del texto, pero no tengo mucha confianza escribiendo y entre el trabajo y la crianza me falta tiempo, así que pienso ir mejorándolo poco a poco

• Estoy promoviendo esta idea de apps web de archivo único, y estaría bien añadir Bento al borrador de Wikipedia propuesto

  • mdwiki, que hice en 2013, también podría entrar ahí. Era un único archivo .html que incluía en línea imágenes, íconos y estilos, funcionaba offline y en broma lo llamaba la primera verdadera single-page app
  • Este borrador no suena a artículo de Wikipedia; por ejemplo, trata al lector de you. Wikipedia debe ser una fuente terciaria, no un lugar para promocionar conceptos que uno quiere establecer, así que no parece el lugar adecuado
  • Los diagramas de Ilograph también pueden exportarse como HTML autónomo, como en este ejemplo. También tienen una especie de función de diapositivas y el archivo pesa unos 560 KB
  • Hyperclay también podría entrar en la lista
  • Cuando empecé Bento, solo conocía TiddlyWiki, así que voy a revisar esa lista

• Está genial que baste con decirle a Claude sobre la tecnología de Bento para poder usarla

• Durante mucho tiempo, al crear diagramas con draw.io, me pareció ingeniosa la forma de guardar documentos como un blob iframe que contiene el editor y el archivo. Pero draw.io no incluye el editor dentro del archivo, así que necesita cargar el código mediante una conexión web
  Esperaba que este enfoque pudiera convertirse en un caso de uso principal, y Bento es casi exactamente como lo imaginaba

  • Uso draw.io con frecuencia y también evalué este enfoque, pero por ahora concluí que era mejor empezar con un archivo local único. Más adelante, si se necesitan funciones empresariales como SSO, alojarlo también podría tener sentido

• Cumple una necesidad muy común en entornos corporativos. Algunos equipos dentro de la empresa abandonaron productos en la nube o de escritorio y se pasaron a herramientas basadas en HTML y JavaScript, porque los bugs del software de presentación y visualización existente no se corrigen y tampoco se agregan funciones personalizadas
  Parece que los pequeños caciques del área de TI interna deberían ponerse nerviosos

  • En nuestra empresa también pasa que los técnicos crean impresionantes presentaciones web app y dejan a todos sorprendidos, pero si un número está mal y hay que corregirlo antes del comité operativo de la tarde, el personal no técnico que solo tiene Claude y no Claude Code se queda sin saber qué hacer. Esto se debe a que decidieron que solo los técnicos y los ingenieros de software pueden usar Claude Code

• Estoy pensando en una herramienta de presentaciones independiente que instale un Bento vacío como PWA con la función del navegador de “instalar sitio como app”, complete automáticamente el nombre del autor y otros datos, y luego lo deje en solo lectura para que el usuario haga “guardar como”
  Sería bueno que el proyecto incluyera la función de instalar como PWA un documento base vacío que sea de solo lectura salvo por la información del autor

  • También consideré PWA, pero todavía estoy pensando en el tema general de si debe alojarse o no. Para soportar el uso empresarial, al final seguramente hará falta alojamiento, pero por ahora quiero concentrarme en crear una herramienta simple y genial
    Voy a seguir explorando qué funciones querrán los usuarios en una versión alojada y cómo mantener los principios especiales de Bento

• Si usas un agente de código para crear presentaciones HTML, el resultado queda bastante bien. Según el objetivo, puedes usar Slidev basado en Markdown, o incluso hacer con un agente unas diapositivas en Typst, especialmente bonitas para expresiones matemáticas
  Eso sí, por el título pensé que era una herramienta directamente relacionada con PowerPoint, pero en realidad PowerPoint se usó como sinónimo de “presentación”. Resulta un poco irónico, considerando que a mucha gente no le gusta PowerPoint