8 min readJust now

–

Press enter or click to view image in full size

How we can 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. Gossip 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 slides’ structure.

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

Press enter or click to view image in full size

Present Mode

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

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

Press enter or click to view image in full size

Four Main Components

The name Gossip comes from an idea in the book Sapiens: A Brief History of Humankind*. *In the book, 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 ideas behind presentations: telling and sharing stories!

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

Let’s get started!

Inspiration

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

Press enter or click to view image in full size

Talk in ChinaVis 2019

However, I spent a lot of time making the slides, because I had to place each slides manually through code. In the meantime, I realized that existing tools for authoring and delivering presentations have problems which can’t be ignored.

Hard to Author a Presentation

First of all, existing tools make authors focus more on the graphic design of each slide, rather than the efficiency of transmitting information and the whole structure of the presentation.

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

Hard to Deliver a Presentation

Then, it’s difficult for existing tools to provide the audience more context to hold their interest during presentations, such as the relationships between individual slides or how they fit into the larger structure of the presentation.

As a result, they are often inadequate in helping presenters communicate the structure of a presentation to the audience.

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

Process

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

Authoring Components

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

Press enter or click to view image in full size

Generating Component

Then I realized that the overall structure of a slide — more specifically, its *hierarchical structure *— is very important. To emphasize this, I built a Outline Panel. This helps make decisions about abstractions and ordering that lead to a hierarchy. There is also a Thumbnail Panel for linear structures.

Press enter or click to view image in full size

Organizing Component

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 the linear order or hierarchy of the presentation, instead of dragging many nodes for a small change.

After this, we need to determine the content for each slide. it often requires many drag-and-align operations to set positions and sizes, which is time-consuming and tedious. This is because there are no constraints between elements, which means users have to lay out every element manually.

Inspired by the CSS Flexible Box Layout (Flexbox), I built an an Element Panel to create elements for each slide using a flexbox structure. IIn the Element Panel, I added container elements (rows and columns) to manage other visual elements such as text and images. Based on the structure defined in the Element Panel, elements are placed and sized automatically in the Main Panel without precise drag-and-align operations.

Press enter or click to view image in full size

Composing Component

If you want to change the layout, modify the structure in the Element Panel using drag operations, and the changes will be applied in the Main Panel.

People usually can’t create the ideal slide on the first try. So I thought it important to provide features that better support the revision process. Luckily, the features I built before have already made it easier to adjust the whole structure of the slides, such as adding, deleting, and editing each slide. However, there is also a need to make it easy to change styles. To solve this problem, I built the Style and Variable Panels.

Press enter or click to view image in full size

Revising Component

For elements that typically share the same style — for example, highlighted text color or title font size — users can create a variable and assign it to those elements. When users change the variable’s value, Gossip updates the related elements accordingly.

Presentation Transitions

So far, I had built the features for authoring slides. The final step was to figure out how to present slides. In the presenting process, the main task is to hold the audience’s interests and help the presenter communicate the structure of a presentation to the audience.

Impress.js does a great job of holding the audience’s interest, 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 the hierarchy defined in the Outline Panel, so users don’t need to set it manually.

Press enter or click to view image in full size

Zoom In (Left), Zoom Out (Middle) , Rotate (Right)

Finally, I added a Canvas Element to make slides more interactive — a place where you can run code directly. This feature can make your sketch feel live.

Press enter or click to view image in full size

Challenges

Several aspects proved challenging:

The first challenge was state management. The state of a slide-authoring system is complex. It’s not easy to synchronize state with the view even with React.js. After investigation, I chose DVA to simplify the task.

The second challenge was fitting editable text into its container. Given a fixed rectangle and a string, it’s hard to determine which font size will make the string fill the rectangle, so I implemented a binary-search algorithm to find the optimal size.

The last challenge was the transition. At the time, I couldn’t figure out a way to adopt impress.js directly. Instead, I read the source code of impress.js and implemented the transition system from scratch.

User Feedback

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

Surprisingly, my classmates liked it very much. They thought it’s so cool to use your own tool for real life situations. One of them even said: “You look like Steve Jobs when you present this!” My professor even suggested me further developing this idea and publish a paper about it. Although this didn’t happen because of time constraints.

However, I open-sourced it on GitHub and received many positive comments and feature requests. Here are some selected comments:

By 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.

By strongman22255:

I am using your gossip ppt maker web. And it is actually brilliant.

By RafaelLinux:

This project is awesome and I would like to teach to use it to Spanish speakers people!

It’s great to see people like the ideas in Gossip and actually use it in their daily lives!

Next steps

Based on users’ feedback on Github issues, there are some features I would like to add first:

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

Reflections

Gossip means a lot to me. Here are some reflections I have drawn from it.

**Good structure makes information easier to process. **Unlike traditional slide tools that emphasize manual design, Gossip focuses on structure and automation. Gossip highlights the hierarchical organization across and within slides, helping users see how pieces of information connect and making the whole presentation more coherent.

**Projects are the best way to learn. **Before creating Gossip, I knew nothing about React.js, and it was hard to learn from documentation or videos alone. The building process really helped me gain a deeper understanding of the core concepts in React.js. From then on, I developed a habit to learn by doing projects. For me this is the most effective way to learn!

**Open source has an awesome community. **Gossip is my first open-source project. I didn’t expect so many people to like it and be willing to help. This made me realize that GitHub is such a wonderful community for sharing work. Most importantly, I fell in love with coding because I know there is a good place to get positive feedback!

**Building digital tools for others is really cool. **It make me so satisfied when I found Gossip helps others. I also found code to be such a flexible medium. In this world, you’re the “god”. It enables you to really unleash your creativity. The only thing that can stop you is your imagination. If you’re lucky, users can experience that world through your tools.

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

Thanks

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