Bento – Office-Suite in einer einzigen Datei

 (bento.page)
3 Punkte von GN⁺ 4 시간 전 | 1 Kommentare | Auf WhatsApp teilen
  • Eine PowerPoint-Alternative, die Dokument, Editor, Viewer und Präsentationstool in einer einzigen .bento.html-Datei bündelt und sich allein mit einem Browser öffnen, bearbeiten und präsentieren lässt
  • Eine einzelne Datei von etwa 570 KB funktioniert als vollständige Anwendung und kann ohne Konto, Cloud oder Installer gespeichert und per E-Mail oder AirDrop weitergegeben werden
  • Die Foliendaten werden als lesbares JSON innerhalb der Datei gespeichert, sodass AI Agents wie Claude Code, Codex, Gemini oder ChatGPT die Datei direkt bearbeiten können
  • Wenn man vorhandene .pptx-Dateien ebenfalls an die KI übergibt, können diese statt einer einfachen Konvertierung als Folien neu geschrieben werden, die Bento-Funktionen wie Morph und Echtzeitdiagramme nutzen
  • Unterstützt Morph-Übergänge, Diagramme, Video, Audio und verschlüsselte Zusammenarbeit in Echtzeit; nach Slides sollen auch Docs und Sheets nach demselben Ein-Datei-Prinzip angeboten werden

Eine Datei ist zugleich Dokument und App

  • In .bento.html stecken die Folien und das komplette Bearbeitungsprogramm gemeinsam
  • Öffnet man die Datei im Browser, startet sofort der Editor; beim Speichern werden die Dokumentdaten wieder in die Datei selbst geschrieben
  • Schriftarten, Bilder und Diagramme sind ebenfalls enthalten, sodass eine Kopie der Datei unabhängig geöffnet und präsentiert werden kann
  • Im Offline-Modus werden Updates und Zusammenarbeit blockiert, sodass alle Arbeiten lokal verarbeitet werden
  • Bento/Slides kann direkt im Browser gestartet werden; alternativ lässt sich die einzelne Anwendungsdatei herunterladen

Ein Dokumentformat für AI Agents

  • Die Dokumentdaten werden im Block <script type="application/bento+json" id="bento-doc"> am Anfang der Datei als Klartext-JSON gespeichert
  • Mit window.bento.doc lässt sich das aktuelle Dokument lesen, mit window.bento.loadDoc(json) ein geändertes Dokument laden
  • AI Agents können nur das JSON ändern, ohne den Anwendungscode anzufassen, und so Folien, Diagramme, Speaker Notes und mehr hinzufügen
  • Nutzbar nicht nur mit Coding Agents wie Claude Code, Cursor oder Aider, sondern auch mit allgemeinen Chatbots, die Dateianhänge unterstützen
  • Bei Chatbots ohne Dateiunterstützung kann man das JSON kopieren, ändern lassen und wieder einfügen
  • Mit Ollama, llama.cpp oder LM Studio kann auch die KI-Bearbeitung vollständig lokal laufen
  • Stellt agents.md bereit, damit AI Agents Bento korrekt nutzen können

Präsentationsfunktionen näher am Web als an PowerPoint

  • Unterstützt Morph-Übergänge, bei denen sich Elemente mit derselben id zwischen Folien natürlich bewegen
    • Dupliziert man eine vorhandene Folie und verschiebt Elemente oder ändert deren Stil, entsteht der Übergang ohne separate Timeline
  • Zeichnet Balken-, Linien-, Kreis- und Streudiagramme mit einer eigenen Chart-Engine ohne externe Abhängigkeiten
    • Balken-, Linien-, Kreis- und Streudiagramme bleiben auch während der Präsentation interaktiv, mit Tooltips, Zoom und Datenwechsel
  • Videos und Audio können in Folien eingebettet oder als externe Dateien verknüpft werden
  • Bestehende PowerPoint-Dateien werden nicht unverändert importiert, sondern von der KI als Bento-Dokument neu aufgebaut
  • Unterstützt außerdem Presenter View, Kommentare, Layouts, PDF-Export, mehrere Seitengrößen und 8 UI-Sprachen
  • Die Bearbeitung ist auf Desktop ausgerichtet, aber Anzeigen und Präsentieren sind auch auf Smartphones möglich

Local-first-Zusammenarbeit

  • Startet man aus der Datei eine Live-Session, treten Nutzer, die eine Kopie derselben Datei öffnen, dem gemeinsamen Arbeitsbereich bei
  • Die Kollaborationsdaten sind mit AES-GCM Ende-zu-Ende-verschlüsselt; der Relay-Server verarbeitet nur Chiffretext
  • Ein eigenes CRDT übernimmt Echtzeitbearbeitung und das Zusammenführen von Offline-Änderungen
  • Der Kollaborationsschlüssel steckt in der Datei selbst, sodass das Weitergeben der Datei als Einladung funktioniert
  • Auch offline auseinanderlaufende Bearbeitungen werden nach dem erneuten Verbinden in beide Richtungen zusammengeführt

Roadmap und Lizenz von Bento/Suite

  • Das derzeit ausgelieferte Bento/Slides ist die erste Anwendung von Bento/Suite
  • Bento/Docs und Bento/Sheets sollen jeweils als eigenständige, selbstenthaltene .bento.html-Dateien angeboten werden
  • Die Bento-Software selbst ist unter der MIT License veröffentlicht

Verwandte Beiträge

1 Kommentare

 
GN⁺ 4 시간 전
Meinungen auf Hacker News

  • Ich bin der Entwickler von Bento. Am Anfang der Datei befindet sich ein normaler JSON-Block mit den Slide-Daten, der gelesen, per grep durchsucht oder von Automatisierungstools verarbeitet werden kann. Die App ist ein base64-Blob, der über einen kleinen Loader geladen wird; sie wird mit dem DecompressionStream des Browsers entpackt, um das Paket klein zu halten und zur Laufzeit keine externen Dateien nachzuladen.
    Mit der File System Access API wird das JSON wieder in dieselbe Datei geschrieben; wenn sie nicht unterstützt wird, gibt es einen normalen Download als Fallback, und alle Updates sind mit ECDSA signiert. Als Basis diente reveal.js, später kamen GSAP/Flip und echarts hinzu, doch wegen Größen- und Verhaltensproblemen wurden Animationen und Chart-Funktionen komplett neu implementiert.
    Besonders zufrieden bin ich damit, dass die CRDT-Kollaboration reibungslos funktioniert. Ein kleiner blinder Relay, der auf Cloudflare Durable Objects läuft, sieht nur die verschlüsselten Daten der Clients; Kollaboration ist deaktiviert, bis eine Sitzung durch Teilen einer Einladungsdatei gestartet wird. Zugriffsrechte werden über Nutzerschlüssel verwaltet, sodass es Read-only-Nutzer geben kann, und auch Live-Kollaborationsrechte lassen sich pro Nutzer wieder entziehen.

    • Es sieht so aus, als sei für das Projekt erst vor einer Woche ein neues GitHub-Konto erstellt worden. Ich frage mich, ob es auch ein anderes GitHub-Konto gibt, über das man Wartungs- und Sicherheits-Historie nachvollziehen kann.
    • Ich habe mich gefragt, wo CRDT hier eigentlich läuft und wo der Server ist, wenn doch nur eine einzelne Datei bearbeitet wird. TiddlyWiki mochte ich, bin aber nie dabei geblieben; eine leicht editierbare Präsentation ist dagegen ein gut verständlicher Anwendungsfall.
      Außerdem frage ich mich, ob nicht die Gefahr besteht, dass sich der Traffic auf dem Cloudflare-Konto staut, falls die Kollaborationsfunktion standardmäßig allen Nutzern zur Verfügung steht.
    • Die magische Funktion von Reveal.js sind die vertikalen Slides, durch die man wie im Beispiel nach oben und unten navigiert. In einem einzigen Slide-Deck kann man je nach Publikum nach unten gehen, um technische Details zu zeigen, oder sie überspringen.
      Beim Versuch, es PowerPoint ähnlicher zu machen, scheint diese Funktion weggefallen zu sein; sie ist aber meine Lieblingsfunktion in Reveal.js, daher hoffe ich, dass sie nicht vergessen wird.
    • Ich frage mich, was mit v1-Slide-Decks passiert, wenn Bento auf v2 aktualisiert wird. Wenn man auf Upgrade klickt, sollte es möglich sein, die bestehenden JSON-Slide-Daten in eine v2-Shell zu exportieren.
    • Der Weg zur Unterstützung der teuflischen Office-Formate führt in die Hölle, daher würde ich es lieber Slide Show als PowerPoint nennen. Ich hoffe, dass sich ein solch einfaches Format als Standard etabliert und die alten Formate verschwinden.

  • Ich habe ein ähnliches Tool gebaut, das sich statt auf Präsentationen auf das Erstellen kleiner React-Apps konzentriert. Die Basis-HTML mit Beispiel-App ist hier, die Dokumentation hier; es ist noch nicht ganz ausgereift, aber schon gut nutzbar.
    Es enthält einen JSX-Transformer und Code-Editor, unterstützt das Speichern in Dateien oder localStorage und kann JSX- und JSON-Daten auch getrennt aus der Shell exportieren, die für Speichern, Transformieren und Bearbeiten zuständig ist.
    Außerdem habe ich eine iOS-App zum Speichern von Mini-Apps gebaut. Sie verlässt sich nicht nur auf localStorage, sondern speichert Daten- und Codeänderungen langfristig, sodass der Ablauf aus Speichern und Neuladen reibungslos ist. Die Sandbox blockiert Netzwerkaufrufe gespeicherter Apps, lässt sie sich aber pro App erlauben; künftig möchte ich auch Komfortfunktionen wie einen nativen Editor hinzufügen.

  • Ich glaube, diese Form wird häufiger werden. Viel Software lässt sich mit HTML, TypeScript, React usw. vollständig lokal bereitstellen, und auch der Zustand kann lokal liegen, aber bisher fehlte der wirtschaftliche Anreiz.
    Persönlich nutze ich Kimi K3, um ein mobilfreundliches Spiel zu bauen, das Themen von linearer Algebra bis Quantenphysik abdeckt. Es soll neurodiverse Nutzer berücksichtigen, den gesamten Zustand lokal speichern und über GitHub Pages bereitgestellt werden, um Interesse an diesem Bereich zu wecken. Das Projekt erfordert vielfältige Expertise und viel Zeit und wäre ohne LLM wirtschaftlich nicht sinnvoll gewesen; nachdem ich es selbst gespielt, verbessert und Bugs entfernt habe, will ich es auf HN veröffentlichen.

    • Ich habe mit Kollegen über hybride Dokumente gesprochen, bei denen Bearbeitungssteuerung und Inhalte in einer einzigen HTML-Datei stecken. Wikis wie Feather Wiki sind ein Vorbild, und ich frage mich, wie so etwas als SVG oder Tabellenkalkulation aussehen würde.

  • Ich habe das Live-Gästebuch mit Spaß benutzt, aber am Ende hing mein M1 Mac, sodass ich einen erzwungenen Neustart machen musste. Solange nicht ganz HN gleichzeitig editiert, wird es meistens gut funktionieren, aber es scheint Gründe zu geben, warum Figma WASM und einen eigenen Renderer nutzt.
    Wenn andere Nutzer irrelevante Inhalte ändern, sollte der aktuelle Eingabefokus nicht zurückgesetzt werden. Außerdem klingen die Texte auf der Landingpage und im Beispiel-Deck zu sehr nach LLM; der HN-Submission-Text liest sich deutlich besser. Dass es als freie Open-Source-Software veröffentlicht wurde, ist großartig.

    • Wegen Spam wurde das Gästebuch zurückgesetzt und ist derzeit bei Epoch 4. Das Problem mit dem Fokus-Reset ist in Tests mit nur ein oder zwei Beteiligten nicht aufgefallen, wird aber sofort behoben.
      Beim Textproblem stimme ich ebenfalls zu, aber ich bin beim Schreiben unsicher und habe zwischen Arbeit und Kinderbetreuung wenig Zeit; ich will es schrittweise verbessern.

  • Ich mache auf das Konzept solcher Single-File-Web-Apps aufmerksam, und Bento könnte gut in den vorgeschlagenen Wikipedia-Entwurf aufgenommen werden.

    • mdwiki, das ich 2013 gebaut habe, dürfte auch dazugehören. Es ist eine einzige .html-Datei, die Bilder, Icons und Styles vollständig inline enthält und offline funktioniert; scherzhaft nannte ich es die erste wirklich echte Single-Page-App.
    • Dieser Entwurf wirkt nicht wie ein Wikipedia-Artikel, unter anderem weil er die Leser mit you anspricht. Wikipedia sollte keine Plattform sein, um ein Konzept zu bewerben, das man etablieren möchte, sondern eine tertiäre Quelle; daher scheint es nicht der passende Ort zu sein.
    • Ilograph-Diagramme können ebenfalls als eigenständiges HTML exportiert werden, wie in diesem Beispiel. Es gibt auch eine Art Slide-Funktion, und die Dateigröße liegt bei etwa 560 KB.
    • Hyperclay könnte wohl ebenfalls auf die Liste.
    • Als ich mit Bento angefangen habe, kannte ich nur TiddlyWiki; ich werde mir diese Liste ansehen.

  • Cool ist, dass man Claude einfach die Bento-Technik zeigen kann und es sie dann nutzen kann.

  • Nachdem ich lange Zeit Diagramme mit draw.io erstellt habe, fand ich die Idee clever, ein Dokument wie einen iframe-Blob zu speichern, der Editor und Datei enthält. Allerdings ist bei draw.io der Editor selbst nicht in der Datei enthalten; der Code muss über eine Webverbindung geladen werden.
    Ich hatte gehofft, dass man diesen Ansatz zum zentralen Anwendungsfall machen könnte, und Bento entspricht ziemlich genau dem, was ich mir vorgestellt hatte.

    • Da ich draw.io häufig nutze, habe ich auch diesen Ansatz geprüft, kam aber zu dem Schluss, dass es zunächst besser ist, mit einer einzelnen lokalen Datei zu beginnen. Wenn später Enterprise-Funktionen wie SSO nötig werden, kann Hosting ebenfalls sinnvoll sein.

  • Es erfüllt eine in Unternehmensumgebungen sehr verbreitete Anforderung. Einige Teams im Unternehmen haben Cloud- oder Desktop-Produkte zugunsten von HTML- und JavaScript-basierten Tools aufgegeben, weil Bugs in bestehender Präsentations- und Visualisierungssoftware nicht behoben und keine Custom Features ergänzt wurden.
    Die kleinen Machthaber in internen IT-Organisationen sollten wohl nervös werden.

    • Auch in unserem Unternehmen überraschen Techniker alle mit beeindruckenden Web-App-Präsentationen. Wenn aber eine Zahl falsch ist und vor dem Operations-Committee am Nachmittag korrigiert werden muss, steht eine nichttechnische Person, die nur Claude, aber nicht Claude Code hat, ziemlich ratlos da. Der Grund ist, dass Claude Code bei uns nur Technikern und Software Engineers vorbehalten ist.

  • Ich denke über ein eigenständiges Präsentationstool nach: Man installiert ein leeres Bento über die Browser-Funktion „Website als App installieren“ als PWA, füllt automatisch den Autorennamen usw. aus, macht es dann schreibgeschützt und lässt Nutzer „Speichern unter“ verwenden.
    Es wäre schön, wenn das Projekt eine Funktion enthielte, mit der man ein leeres Standarddokument, das außer den Autoreninformationen schreibgeschützt ist, als PWA installieren kann.

    • PWA habe ich ebenfalls in Betracht gezogen, aber die grundsätzliche Frage des Hostings ist noch offen. Um Enterprise-Anwendungsfälle zu unterstützen, wird Hosting am Ende wohl nötig sein, aber im Moment möchte ich mich darauf konzentrieren, ein schlichtes und schönes Tool zu bauen.
      Ich werde mir noch genauer ansehen, welche Funktionen Nutzer in einer gehosteten Version wünschen und wie sich Bentos besondere Prinzipien dabei bewahren lassen.

  • Wenn man mit einem Code-Agenten HTML-Präsentationen erstellt, sind die Ergebnisse ziemlich gut. Je nach Zweck kann man das Markdown-basierte Slidev verwenden oder den Agenten Typst-Slides erstellen lassen, bei denen etwa mathematische Ausdrücke besonders schön aussehen.
    Allerdings dachte ich aufgrund des Titels zunächst, es handle sich um ein Tool mit direktem Bezug zu PowerPoint; tatsächlich wurde PowerPoint hier eher als Synonym für „Präsentation“ verwendet. Angesichts der vielen Menschen, die PowerPoint nicht mögen, ist das etwas ironisch.