Gossip: A Web-Based Interface for Concise and Impressive Presentations

How can we focus more on content rather than visuals when authoring slides, while still ensuring the resulting slides convey ideas efficiently?

Gossip is an open-source, web-based interface for quickly authoring and delivering concise, impressive presentations. It is designed to help people focus on content, not visuals, while still creating visually impressive slides.

On the one hand, Gossip adopts an impress.js-style presentation transition. The key differences are:

• Placing each slide automatically using a word cloud algorithm.
• Animating slides automatically based on the slide structure.

This allows users to quickly deliver slides with impressive transitions to better catch the audience's attention, making it easier to convey ideas.

On the other hand, Gossip adopts four common components of the text-authoring model - generating, organizing, composing, and revising - to facilitate converting unstructured information into structured ideas:

• A readable outline that makes it easy to organize your slides.
• A new layout method based on Flexbox to quickly place visual elements.
• A variable system to change styles quickly.

The name Gossip comes from an idea in Sapiens: A Brief History of Humankind. The author argues that stories make humans stronger than animals because they enable strangers to trust each other, leading to large-scale cooperation. Gossip is one of the most commonly told types of stories. Therefore, I named this platform Gossip to highlight the core idea behind presentations: telling and sharing stories.

Kaiyi Zhang and I built Gossip in 2020. He implemented the word cloud algorithm while I took care of the rest. I now want to revive the project because people are still using it. Before that, I thought it best to document the project and reflect on what I learned for future development.

Let's get started.

Inspiration

Gossip was inspired by impress.js, which I used for presenting at ChinaVis 2019 Challenges. It was indeed impressive; audiences liked it.

However, I spent a lot of time making slides because I had to place each slide manually through code. Meanwhile, I realized that existing tools for authoring and delivering presentations have problems that cannot be ignored.

Hard to Author a Presentation

Existing tools often make authors focus more on graphic design for each slide rather than the efficiency of transmitting information and the overall structure of the presentation.

At this stage, the key task is deciding what information will be included, how that information will be organized, and how to turn that organization into a story for the target audience.

Hard to Deliver a Presentation

It is also difficult for existing tools to provide audiences with contextual cues during presentations, such as relationships between slides or how slides fit into the larger structure.

As a result, these tools are often inadequate in helping presenters communicate presentation structure clearly.

So I decided to create Gossip to help people focus more on content rather than visuals when authoring slides, while still enabling created slides to convey ideas efficiently.

Process

I started by learning React.js, a UI library for web applications. After building some toy projects, I felt confident enough to move on. The next step was identifying challenges at each authoring stage: generating, organizing, composing, and revising.

Authoring Components

The first challenge was that there was no integrated place to collect raw materials such as random thoughts and images. We often switch context between tools, resulting in an inconsistent experience. To solve this, I built an Idea Panel where ideas are collected and recorded.

Then I realized the overall slide structure - especially hierarchy - is very important. To emphasize this, I built an Outline Panel. This helps with decisions about abstraction and ordering that lead to hierarchy. There is also a Thumbnail Panel for linear structures.

In the Outline Panel, when a presenter creates a new node, Gossip automatically creates a slide for it. Users can simply drag a node to modify linear order or hierarchy, instead of dragging many nodes for a small change.

After this, we need to determine content for each slide. This often requires many drag-and-align operations to set positions and sizes, which is tedious. The root issue is that there are no constraints between elements, so users must lay out everything manually.

Inspired by CSS Flexible Box Layout (Flexbox), I built an Element Panel to create slide elements with a flexbox structure. In the Element Panel, I added container elements (rows and columns) to manage text and images. Based on this structure, elements are placed and sized automatically in the Main Panel without precise drag-and-align operations.

If you want to change layout, modify structure in the Element Panel, and changes are applied in the Main Panel.

People usually cannot create ideal slides on the first try, so revision support is essential. Features built earlier already make structural adjustments easier (add/delete/edit slides). But style changes should also be easy. To solve this, I built Style and Variable Panels.

For elements that share style (for example highlighted text color or title font size), users can create a variable and assign it to those elements. When the variable value changes, Gossip updates related elements accordingly.

Presentation Transitions

So far, I had built features for authoring slides. The final step was presenting slides. During presentation, the main task is holding audience interest while helping presenters communicate structure.

impress.js does a great job of grabbing attention, but how well does it communicate structure? To address this, I assigned different meanings to transitions:

• Zoom In: move from a large context to a focused point.
• Zoom Out: move from a focused point to a larger context.
• Rotate: move to another point at the same hierarchical level.

The transition type for each slide is determined by hierarchy in the Outline Panel, so users do not set it manually.

Finally, I added a Canvas Element to make slides more interactive - a place where you can run code directly. This makes sketches feel live.

Challenges

Several aspects were challenging:

• State management: Slide authoring state is complex. It is not easy to synchronize state with view, even with React.js. After investigation, I chose DVA to simplify this.
• Editable text fitting: Given a fixed rectangle and a string, determining the best font size is hard. I implemented a binary-search algorithm to find the optimal size.
• Transition system: At the time, I could not directly adopt impress.js. I read its source and implemented the transition system from scratch.

User Feedback

Gossip was my final project for a Human-Computer Interaction class. Not surprisingly, I used Gossip to present Gossip.

My classmates liked it a lot. They said it was cool to use your own tool in real situations. One classmate said: "You look like Steve Jobs when you present this!" My professor suggested further developing the idea and publishing a paper, though that did not happen due to time constraints.

Still, I open-sourced it on GitHub and received many positive comments and feature requests. Some selected comments:

• Borber: "It completely shattered my preconceived notions about what a PPT-style presentation can do. Very interesting! I'm looking forward to the desktop version."
• strongman22255: "I am using your gossip ppt maker web. And it is actually brilliant."
• RafaelLinux: "This project is awesome and I would like to teach to use it to Spanish speakers people!"

It is great to see people like the ideas in Gossip and actually use it in daily life.

Next Steps

Based on user feedback on GitHub issues, features I would like to add first:

• Export slides as PDF or as a static site.
• Support Markdown editing.
• Build a desktop app with Electron.
• Explore AI integration in PR #64.

Reflections

Gossip means a lot to me. Here are reflections I drew from it:

• Good structure makes information easier to process. Unlike traditional slide tools that emphasize manual design, Gossip focuses on structure and automation. It highlights hierarchy across and within slides, helping users see information connections and making presentations more coherent.
• Projects are the best way to learn. Before Gossip, I knew little about React.js. Documentation and videos alone were not enough. Building the project gave me much deeper understanding, and since then I learn by doing.
• Open source has an awesome community. Gossip was my first open-source project. I did not expect so many people to like it and contribute. This made me realize GitHub is a wonderful place for sharing work and receiving feedback.
• Building digital tools for others is really cool. It is deeply satisfying when tools help real users. Code is a flexible medium - you can unleash creativity and build worlds others can experience through your tools.

Building Gossip taught me that creating digital tools is not just about code - it is about enabling others to express ideas more effectively.

Thanks

Many thanks to my collaborator, Kaiyi Zhang, who implemented the word cloud algorithm.