js to presentation

Create PowerPoint presentations with JavaScript

The most popular powerpoint+js library on npm with 1,800 stars on github, works everywhere.

• Every modern desktop and mobile browser is supported
• Integrates with Node, Angular, React, and Electron
• Compatible with Microsoft PowerPoint, Apple Keynote, and many others

Full Featured

• All major objects are available (charts, shapes, tables, etc.)
• Master Slide support for academic/corporate branding
• Animated gifs, SVG images, YouTube videos, RTL text, and Asian fonts

Simple And Powerful

• The absolute easiest PowerPoint library to use
• Learn as you code using the built-in typescript definitions
• Tons of sample code comes included (75+ slides of demos)

Export Your Way

• Exports files direct to client browsers with proper MIME-type
• Other export formats available: base64, blob, stream, etc.
• Presentation compression options and more

• 4 Dependencies
• 58 Dependents
• 51 Versions

Create JavaScript PowerPoint Presentations

• Table of Contents

Introduction

Works everywhere, full featured, simple and powerful, export your way, html to powerpoint, additional builds, angular/react, es6, typescript, script/web browser, library api, html-to-powerpoint feature, library ports, issues / suggestions, contributors.

This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

• Every modern desktop and mobile browser is supported
• Integrates with Node, Angular, React, and Electron
• Compatible with PowerPoint, Keynote, and more
• All major object types are available (charts, shapes, tables, etc.)
• Master Slides for academic/corporate branding
• SVG images, animated gifs, YouTube videos, RTL text, and Asian fonts
• The absolute easiest PowerPoint library to use
• Learn as you code will full typescript definitions included
• Tons of demo code comes included (over 75 slides of features)
• Exports files direct to client browsers with proper MIME-type
• Other export formats available: base64, blob, stream, etc.
• Presentation compression options and more
• Includes powerful HTML-to-PowerPoint feature to transform HTML tables into presentations with a single line of code

Visit the demos page to create a simple presentation to see how easy it is to use pptxgenjs, or check out the complete demo which showcases every available feature.

• PptxGenJS Demos

Installation

PptxGenJS NPM Home

jsDelivr Home

Bundle: Modern Browsers and IE11

Min files: Modern Browsers

GitHub Latest Release

Bundle: Modern Browsers

• Use the bundle for IE11 support
• CommonJS: dist/pptxgen.cjs.js
• ES Module: dist/pptxgen.es.js

Documentation

Quick start guide.

PptxGenJS PowerPoint presentations are created via JavaScript by following 4 basic steps:

That's really all there is to it!

Full documentation and code examples are available

• Creating a Presentation
• Presentation Options
• Adding a Slide
• Slide Options
• Saving a Presentation
• Master Slides
• Adding Charts
• Adding Images
• Adding Media
• Adding Shapes
• Adding Tables
• Adding Text
• Speaker Notes
• Using Scheme Colors
• Integration with Other Libraries

Easily convert HTML tables to PowerPoint presentations in a single call.

Learn more:

• HTML-to-PowerPoint Docs/Demo

React: react-pptx - thanks to Joonas !

Please file issues or suggestions on the issues page on github , or even better, submit a pull request . Feedback is always welcome!

When reporting issues, please include a code snippet or a link demonstrating the problem. Here is a small jsFiddle that is already configured and uses the latest PptxGenJS code.

Sometimes implementing a new library can be a difficult task and the slightest mistake will keep something from working. We've all been there!

If you are having issues getting a presentation to generate, check out the code in the demos directory. There are demos for both client browsers, node and react that contain working examples of every available library feature.

• Use a pre-configured jsFiddle to test with: PptxGenJS Fiddle
• View questions tagged PptxGenJS on StackOverflow . If you can't find your question, ask it yourself - be sure to tag it PptxGenJS .

Thank you to everyone for the issues, contributions and suggestions! ❤️

Special Thanks:

• Dzmitry Dulko - Getting the project published on NPM
• Michal Kacerovský - New Master Slide Layouts and Chart expertise
• Connor Bowman - Adding Placeholders
• Reima Frgos - Multiple chart and general functionality patches
• Matt King - Chart expertise
• Mike Wilcox - Chart expertise
• Joonas - React port

PowerPoint shape definitions and some XML code via Officegen Project

If you find this library useful, please consider sponsoring us through a donation

Copyright © 2015-present Brent Ely

• html-to-powerpoint
• javascript-create-powerpoint
• javascript-create-pptx
• javascript-generate-pptx
• javascript-powerpoint
• javascript-powerpoint-charts
• javascript-pptx
• js-create-powerpoint
• js-create-pptx
• js-generate-powerpoint
• js-powerpoint
• js-powerpoint-library
• js-powerpoint-pptx
• react-powerpoint
• typescript-powerpoint

Package Sidebar

npm i pptxgenjs

Git github.com/gitbrent/PptxGenJS

gitbrent.github.io/PptxGenJS/

Downloads Weekly Downloads

Unpacked size, total files, last publish, collaborators.

Top 9 JavaScript frameworks to create beautiful presentation slides

Presentation frameworks are tools or libraries that can help you create presentations using web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You’ll have full control over the appearance and layout of your slides.

They allow you to export your slides as HTML files that can be viewed in any modern browser. You don’t need to install any software or plugin to view your slides. You can also share your slides online using platforms such as Slides.com, GitHub Pages, Netlify.

Reveal ( 64.2k ⭐) — An open source HTML presentation framework that allows you to create beautiful and interactive presentations using web technologies. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Impress ( 37.3k ⭐) — Another open source HTML presentation framework that is similar to reveal.js, but with a different approach, inspired by the idea behind prezi.com. It uses CSS3 3D transforms to create dynamic and spatial presentations that can zoom, rotate, and pan across the slides.

Sli dev ( 27.3k ⭐) — A web-based slides maker and presenter that is designed for developers. It allows you to create beautiful and interactive presentations using Markdown, HTML, Vue components, and other web technologies. You can also use features such as live coding, recording, drawing, LaTeX, diagrams, icons, and more to enhance your slides.

MDX Deck ( 11.1k ⭐) — A library based on MDX that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- . You can also import and use any React component in your slides, as well as customize the theme and layout of your presentation.

Spectacle ( 9.5k ⭐) — A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code, created and maintained by Formidable Labs. You can use it to create beautiful and interactive slides with animations, transitions, code highlighting, and other features.

Code Surfer ( 6.2k ⭐) — A library that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- , add code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides.

WebSlides ( 6.1k ⭐) — A library that allows you to create beautiful HTML presentations and websites. Just choose a demo and customize it in minutes. 120+ slides ready to use. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Fusuma ( 5.3k ⭐) — A tool that allows you to create slides with Markdown easily. You can use HTML, CSS, JavaScript, Markdown, Vue components, and other web technologies to create stunning slides with animations, transitions, code highlighting, and other features.

PptxGenJS ( 2.1k ⭐) — A JavaScript library that allows you to create presentations, compatible with PowerPoint, Keynote, and other applications that support the Open Office XML (OOXML) format. You can use it to generate PPTX files with just a few simple JavaScript commands in any modern desktop and mobile browser. You can also integrate PptxGenJS with Node, Angular, React, and Electron.

Common features

Presentation frameworks typically share several common features that aim to enhance the creation and delivery of visually engaging and interactive presentations. Here are some of the common features you can find:

Ease of use : They allow you to use web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You don’t need to learn a new software or tool to create your slides. You can also use your favorite code editor or IDE to write and edit your slides.

Nested slides : They allow you to create sub-sections or sub-topics within your presentation. You can use nested slides to organize your content, add more details, or create interactive menus.

Markdown support : Markdown is a lightweight markup language that allows you to format text using simple syntax. You can use Markdown to write your slides in a plain text editor and then convert them to HTML. Markdown makes it easy to create headings, lists, links, images, code blocks, and more.

Auto-Animate : A feature that automatically animates the transitions between slides or elements to create smooth and dynamic effects for your presentation, detect the changes between slides and animate them accordingly.

PDF export : You can use PDF export to print your presentation, share it online, or view it offline. PDF export can also preserve the layout, fonts, and images of your presentation.

Speaker notes : You can use speaker notes to prepare your speech, add additional information, or provide references. Speaker notes are usually hidden from the audience but visible to you in a separate window or screen.

LaTeX support : LaTeX is a document preparation system that allows you to create high-quality typesetting for mathematical and scientific expressions. You can use LaTeX to write complex formulas, equations, symbols, and diagrams in your presentation. LaTeX can also handle cross-references, citations, and bibliographies.

Syntax highlighted code : You can use syntax highlighted code to display your source code in your presentation. Syntax highlighted code can make your code more readable, understandable, and attractive.

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

The HTML Presentation Framework

hakimel/reveal.js

Folders and files, repository files navigation.

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at revealjs.com .

The framework comes with a powerful feature set including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX typesetting , syntax highlighted code and an extensive API .

Want to create reveal.js presentation in a graphical editor? Try https://slides.com . It's made by the same people behind reveal.js.

Hakim's open source work is supported by GitHub sponsors . Special thanks to:

Getting started

• 🚀 Install reveal.js
• 👀 View the demo presentation
• 📖 Read the documentation
• 🖌 Try the visual editor for reveal.js at Slides.com
• 🎬 Watch the reveal.js video course (paid)

Releases 47

Sponsor this project, contributors 322.

• JavaScript 59.7%

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

• No order here

Fantastic Ordered List

• One is smaller than...
• Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

• Right-to-left support
• Extensive JavaScript API
• Auto-progression
• Parallax backgrounds
• Custom keyboard bindings

- Try the online editor - Source code & documentation

A Presentation Framework by @marcolago

Press Down Key to continue Or Swipe Up if you prefer.

What is it?

Flowtime.js is a framework for easily building HTML presentations or websites.

It’s built with web standards in mind and on top of a solid full page grid layout.

The animations are managed with native and accelerated CSS3 transitions. Javascript takes care of the navigation behaviour and adds advanced functionalities and configuration options.

Press Down Key or Swipe Up to continue.

Compatibility and Support

Flowtime.js is fully compatible with real moderns browsers:

• Internet Explorer 10

Internet Explorer 9 and some old versions of other browsers lack the transitions and some modern Javascript features but the main navigation and functionalities will work.

In older browsers degrades to a bi-directional scrolling navigation with anchor links.

Touch Devices Support

On touch devices you can navigate through slides swiping in all directions.

By now Flowtime.js was tested and works on Safari Mobile and Chrome Mobile on iOS devices but the support will be wider in the near future.

Mastering the Navigation

You can navigate in many ways. The most common way is using the keyboard.

Navigation Keys and default behaviours:

• Down Key goes to the next page or shows up the next fragment (we’ll see this later).
• Up Key goes to the previous page or hides the fragment.
• Right Key goes to the adjacent page in the next section (if available, it’s like a grid, otherwise it goes to the last page in the next section).
• Left Key goes to the adjacent page in the previous section.

Alternate Navigation Control

Pressing the Shift Key you can alternate the the default navigation keys behaviour; let’s see how:

• Down Key goes to the next page skipping all the fragments.
• Up Key goes to the previous page skipping all the fragments.
• Right Key goes to the first page in the next section.
• Left Key goes to the first page in the previous section.

Some Other Keys

Because: the more, the better.

• Page Up Key goes to the first page of the current section.
• Page Down Key goes to the last page of the current section.
• Home Key goes to the first page of the first section.
• End Key goes to the last page of the last section.

Overview Mode.

You can look at the entire presentation by pressing ESC Key . When in Overview Mode you can go back to the Page Mode by pressing again the ESC Key.

Try it out!

WARNING! Experimental Feature. If you experience problems in webkit browser you can use the alternate Overview Mode; see the documentation for more info.

Navigating the Overview

In Overview Mode the arrow keys works in the same way as in Page Mode, highlighting the future destination. To navigate to the highlighted page just press Return or Enter Key or click on the desired page.

Navigate via Links or Javascript API

You can link every page by simply building the href value using this schema:

Where data-id attribute is an optional attribute you can add to every section or page. I.e.: if you want to go to back to the first page click here (press backspace to come back to this page) .

You can also trigger every navigation behaviour using the Flowtime.js Javascript API . Take a look at the documentation if you want to learn more.

Navigate With History

Flowtime.js offers a full support for the HTML5 History API where available or gracefully degrades on the hashchange event.

This means that you can navigate using the browser’s back and forward buttons and deeplink a page for sharing purposes.

Progress Indicator

You can enable a default progress indicator useful not only to know what’s the current page you are looking, but also as a navigation tool.

Look at the bottom right corner and you can see a miniature of the presentation structure.

Clicking on a page thumb will navigate to that page.

Fragments Support

The built in fragments navigation allows to advance step by step inside a page. Press down to try.

You can discover single elements or even a single part of an element, one at a time.

Fragments navigation is deeply customizable with some configuration options You can learn how in the documentation .

Fragments Unleashed

Thanks to some special classes you can add a couple of useful custom behaviours.

• The .step fragment will partially fades out;
• The .shy fragment will completely hides itself;
• You can use this two special fragment types to easily create special effects.

This is a .shy example!

And this is a .step one!

Default HTML Structures

Flowtime.js comes with a default theme that styles the most common HTML structures, like:

1 st Level Heading

2 nd level heading, 3 rd level heading, 4 th , 5 th and 6 th level heading, unordered lists.

• Another item.
• Just another item.
• Ok, we get it!

Ordered Lists

Definition lists, quotes and citations.

My favourite quotation: The bad craftsman blames his tools .

Sotto un cespo di rose scarlatte dai al rospo the caldo col latte. Sotto un cespo di rose paonazze tocca al rospo lavare le tazze.

Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute on HTML5 Doctor.

Theme and Styling

If you don’t like the default theme or you want to build your own (or both things), or if you want to build a website on top of Flowtime.js, you can write your own theme and replace the default one.

Theme and core css are in separate files so you can’t break the layout (unless you override some classes).

Fluid Layout

Everything can be fluid, just use em , rem and % units if you want to make an element resizable.

Image Management

Images are fluid like all the other content.

You can insert images in the flow or stack images ones on top the others with a minimal markup overhead to create some fancy fragments tricks.

Go to the next pages to see fluid images in action and how stacked images can be managed, both in the flow or centered in the slide. Look at the source code to learn how to write the markup.

Stacked Images

Centered Stacked Images

About the Centered Stack

You can center anything, not only images!

Just like this content. Useful for splash pages and titles.

And you are not limited to stacks, you can center what you want.

Native Parallax Support

By popular demand Flowtime.js includes native parallax support*.

Simply add a parallax class to anything you want to have parallax enabled and configure the amount of distance for all elements or for a single element using data-parallax attribute.

For an example go to the next page ; for more info read the documentation .

* By the way: I’m not a parallax fan; but ehi… this is the "web 3.0".

The Invaders from Audiogalaxy

This Page Is Just for Testing the Parallax

In the previous page, from left to right:

Code Snippets Highlight

Code highlight is a courtesy of Lea Verou’s Prism . Because I really didn’t want to re-invent the wheel. You can use what you want, it’s not a dependency (but it’s very smart and cool).

Events and Custom Implementations

When navigated to a page Flowtime.js fires a custom flowtimenavigation event full of useful properties to customize or build your components or behaviours.

Read the documentation to learn more about this event and its properties.

Some Examples

You can take a look at some examples to explore some of the possibilities that Flowtime.js offers to customize your experience.

• Cross Direction
• Custom Fragment Animations
• Duplicated IDs
• Modal Overlay
• Page Titles in Navigation
• Scroll the Current Section Only
• Sub Pages Demo
• Video Embedding and Controls

Continues …

More Examples

• Default Behavior;
• gridNavigation(false);
• nearestPageToTop(true);
• rememberSectionsLastPage(true);
• rememberSectionsStatus(true);

If you need a specific example or if you have a question about a feature feel free to ask or open an issue .

Use It! It’s Free

This project is open source, feel free to contribute to the development on Github .

Feedbacks, suggestions and bug reports are welcomes.

Use it as you wish and build great things. And when you have done so let me know the URL, I will appreciate it.

Designed and coded by Marco Lago Interaction/Experience/Game/Designer/Developer

You can find me on Twitter as @marcolago

If you like this work spread the word, you know how ;)

• About Harlepengren
• Gravity’s Symphony: a Marble Run Journey
• Open Shading Language Resources

A Beginner’s Guide to Using Reveal.js for Presentations

Introduction.

In our last post , we talked about FullPageOS. FullPageOS is designed to immediately boot into Chromium. With this approach, you can set up a Raspberry Pi to show one or more slides. If you’re looking to create dynamic and interactive presentations, Reveal.js is an excellent tool to consider. Reveal.js is a powerful JavaScript framework that allows you to build stunning presentations using HTML, CSS, and JavaScript. In this tutorial, we will guide you through the process of using Reveal.js to create engaging presentations that will captivate your audience. If you are interested in a more advanced use of Reveal.js, check out how we used Reveal to create a dynamic presentation .

Setting Up Reveal.js

Start by downloading the latest version of Reveal.js from the official GitHub repository . This repository has everything you need to get started.

I created a new folder called “test” and copied index.html as well as the folders dist, css, and plugin. The file, index.html, contains a template structure for the presentation. You can modify the <div class=”slides”> section to create your slides. Each <section> element represents a slide. You add headings, paragraphs, images, and other HTML elements within the <section> tags. For example, we created two slides:

Customizing Your Presentation in Reveal.js

Reveal.js offers many options for customizing your slides. We are going to cover three areas here:

Slide Themes

• Configuration Options

Slide Transitions

Reveal.js offers several built in themes https://revealjs.com/themes/ . In the dist folder, there is a subfolder that includes the themes. We can simply set the stylesheet to the desired theme through the following code.

For me, the size of the font (40px) was a little large, so I added the following style code to the header to override the stylesheet font size.

Slide Configuration

The second area of customization is the configuration of how the slides and the controls are presented. These options can be adjusted in the the reveal.Initialize() section of the code. For example, the code below removes the slide tutorial (basically the arrow bouncing so the user knows that it is there), moves the arrows to the edge instead of the bottom, and adds a slide progress indicator.

Below is a chart with the different options:

Here is example code.

Here are example slides that show the autoAnimate transition:

You can also implicitly animate the position of text. For example:

In the previous section, we showed how to enable slide transitions in the configuration. However, you can also adjust in each slide by adding a data-transition element to each slide with the animation type. In addition, you can add data-transition-speed to control the speed of the change. For example, the following slide would zoom:

Code and Math in Reveal.js

Reveal.js offers built in features for including both code and math in your presentation.

For code, reveal.js includes highlight.js as a plugin. This allows you to use a code header followed by your code. I won’t go into detail on this plugin here (maybe a future post). For now, you can check out the highlight.js website .

Reveal.js also includes a math plugin that allows you to display mathematical equations. You can choose among multiple different math typesetters, including: KaTeX or MathJax.

Advanced Features in Reveal.js

Reveal.js offers many advanced features, such as vertical slides, speaker notes, fragments, and more.

• Vertical slides allow you to create nested slides within a horizontal slide, providing a hierarchical structure to your presentation. Personally, I like the idea of being able to organize the presentation in this way.
• Speaker notes allow you to add additional information or reminders that are visible only to the presenter.
• Fragments enable you to animate elements on a slide, revealing them incrementally.
• Through the markdown plugin , you can format the content of the slide using markdown.

You have learned the basics of using Reveal.js to create interactive and captivating presentations. By leveraging HTML, CSS, and JavaScript, you can customize your presentations, add advanced features, and engage your audience like never before. As you delve deeper into Reveal.js, explore its rich documentation and experiment with the available options to create visually stunning and interactive presentations. Happy presenting!

Related Posts

Analyzing the Game Show Deal or No Deal: Strategies to Win Big

From Static to Spectacular: Adding Real-Time Data to RevealJS

Unit Testing in Python Using unittest: A Quick Overview

Create Incredible Web Presentations with Reveal.js

Feb 24, 2023 · 12 min read

Reveal.js is an open-source HTML presentation framework. Anyone with a web browser can use it to make attractive presentations for free. The program allows anyone with a web browser to create fully-featured and interactive presentations that support CSS 3D transforms , nested slides, and a variety of other capabilities. It is recommended for those interested in programmable techniques and web technology.

It has lots of benefits. Some of these consist of the following:

• Responsive design: Reveal.js presentations scale to fit the user’s screen, making them compatible with a wide range of devices.
• Interactive elements: Reveal.js supports these elements, which can improve user experience and make presentations more interesting. Interactive elements include links, images, and videos.
• Themes can be readily modified to reflect the user’s brand or tastes to make a presentation look more attractive when the theme matches the content in a slide.
• Simple and intuitive user interface: Reveal.js enables users to build and edit presentations with minimal technical expertise.
• Open-source: Reveal.js is free to use, and its source code is available for users to examine and edit.

React Reveal vs. Reveal.js: what’s the difference?

The distinction between React Reveal and Reveal.js will be demonstrated in this section:

• HTML, CSS, and JavaScript are the foundations on which Reveal.js is constructed, but React Reveal requires React.
• Reveal.js is the way to go if you want to make static presentations and need to deal with a vanilla JavaScript-based project. React Reveal is the greatest option for creating interactive presentations if you are working with React.
• You can make interactive slides with Reveal.js, which has a number of features like slides and transitions. You can also make interactive slides with React Reveal, but you can also do so while using React components .
• Additional capabilities offered by React Reveal include a higher degree of customization and support for animations.

Alternatives to Reveal.js

Many Reveal.js alternatives may be utilized to make engaging presentations with eye-catching visuals. Several well-liked choices include:

• Impress.js , a JavaScript library that enables the creation of 3D presentations with a range of transitional effects.
• Prezi : An online presentation tool that lets users zoom in and out of slides to make dynamic, interactive presentations.
• PhotoSwipe : An open-source JavaScript picture gallery and lightbox, PhotoSwipe. It is modular, independent of frameworks, and made for desktop and mobile devices.
• Owl Carousel 2 : Owl Carousel 2 is a jQuery carousel plugin with full customization and touch and drag functionality.
• FlexSlider is a fantastic, totally responsive jQuery slider plugin. It offers designers and developers a quick way to launch a slideshow, carousel, or image slider.
• Keynote : Apple’s PowerPoint-like presentation software for Mac and iOS devices.
• Haiku Deck : A web-based application that enables users to design minimalistic presentations with spectacular visual effects.

Getting Started

In this session, we’ll use Reveal.js to create spectacular presentations by utilizing JavaScript. In this section, we’ll learn everything we need to know to get Reveal.js running on our project. To write code to create stunning presentations, let’s first understand the basic setup and installations before using Reveal.

Installations

The best way to install Reveal.js is to clone the source code on GitHub. Utilizing this is extremely simple for you. Just use the code below in your terminal to clone the GitHub repository.

Run the following command to install all the necessary packages and start Reveal.js after you’ve cloned the repository for it in your working directory.

Furthermore, once Reveal.js has been successfully installed in your project, you must start the Reveal.js server on port 8000 (the default port) by executing the following code:

Please use the code below if you decide to run the Reveal.js server on a different port:

You can easily install Reveal.js manually using npm or yarn if you don’t want to clone the GitHub repository:

You may easily include the Reveal.js file as an ES6 module once it has been installed in your front-end framework, such as React:

Folder Structure

This section will go over Reveal.js’ folder structure. When changes are made, the folder structure might change, but this won’t affect how Reveal.js is utilized in our project.

Since we are not the original developers, we won’t be explaining every file in Reveal.js. I’ll go over the most significant directories and files first:

• CSS files that describe how a presentation should appear and be organized are stored in the CSS folder.
• The JS folder houses the JS files that provide interaction and other functionality.
• The presentation begins with a file called index.html that also contains the HTML markup for the slides.
• A reveal.js file contains reveal.js’ setup parameters.

Reveal.js’s folder structure is shown in the image below:

As you can see in the screenshot above, I installed Reveal.js in the opened terminal and launched it by typing npm start .

Starter Template

The starter template is just what is loaded in the index.html page of the Reveal.js folder structure, which we mentioned in the section labeled “Folder Structure” above.

Launch your browser and navigate to the following URLs: http://localhost:8000 The link takes you to the active running page where our presentations will appear in the browser:

This section will concentrate on the contents of Reveal.js. On Reveal Web Presentation, the contents are the components of a responsive presentation. We can use Reveal.js on any project once we have worked with all the components that go into making responsive, stunning presentations, covering Markup, Markdown, Backgrounds, Media, Code Math, Fragments, Links, and Layout.

Markup is the first step in getting started with Reveal.js, and you must use the section element to build markups in Reveal.js. Please remember that the parent class will have the class name . reveal , and the reveal class div will have a child element with the class name .slide . If you place the section element line by line, as in the code below, you will have a slider that moves horizontally.

To make a vertically moving slide, add sections within a section; this is a simple technique; see the code below:

Just use the up and down arrows to view the previous and next slides.

Please use the code below to add a horizontal and vertical sliding format. It’s really simple; the horizontal section of our code will stand alone and not be inside of any section; however, the vertical section will have sections inside of a section.

Backgrounds

It’s simple to add a background color to a slider in Reveal.js; all you have to do is include an attribute that initializes the color for a specific area. You can use the data-background-color attribute to add a background color to a section and specify the value to any color name you choose. View a responsible slider with background colors by referring to the code and outputs below.

Click here to read more about background colors in Reveal.js.

In Reveal.js, media can be used as a presentation. We’ll be showing a video as a presentation in this section. The data-autoplay autoplay attribute must be included in the video tag as an attribute to make the video play when its slide section is open. Code:

You can present codes on the slide and have the code highlighted using Reveal.js. Highlight.js is the only thing that powers the code highlight. You will always use the <code> element when presenting code in Reveal.js, and all you need to do to make HTML escape the default behavior and treat the content as genuine code. Add the data-line-numbers attribute to the <code> element and specify values that will represent the line of code that will be highlighted, as shown below.

In Reveal.js, mathematical expressions can be displayed. To use math in your presentation, you must include the RevealMath.KaTeX plugin, which will reflect the math in your presentation.

Let’s run The Lorenz Equations as a presentation:

The Lorenz equations are a set of partial differential equations that describe two-dimensional fluid flow. Please click here to learn more.

On a slide, fragments are utilized to draw attention to or gradually reveal specific parts. Before moving on to the next slide, each element with the class fragment will be stepped through.

Please include the data-fragment-index attribute and set its value to a number if you wish to use fragments. The number value indexed 1 will appear first, followed by the number 2, in that order.

Session Replay for Developers

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay suite for developers. It can be self-hosted in minutes, giving you complete control over your customer data

Happy debugging! Try using OpenReplay today.

While watching slides, Reveal.js also simplified things for us. The following slide in a presentation can be easily reached by clicking a link , and the previous slide can likewise be reached by doing the same.

If you want to navigate to a slider, be sure that the portion of the slider you are visiting has an Id that matches the value of the “href” attribute on the HTML anchor element that is now being clicked.

To instantly navigate to the first page of the slide without passing through any intermediary sections, add ”#/0” (0 == first-slide) to the clickable link that will take you to the first page of the slide.

This section will go over the layout in Reveal.js. You can change the text size, and you can also construct a slide by showing an item on top of the previous item; this is known as staking.

Let’s practice stacking by simply laying images on top of one another.

Now that we understand how stacking works, let’s spend some time working with FIT TEXT. We’ll display some text in a responsive large format in this part under layout by simply utilizing the class name r-fit-text. Below is a code sample of big text applied to Session Replay:

Please note that you can move forward and backward with the arrow keys.

Customization

In this section, we’ll customize some of Reveal.js’s presentations, focusing on Themes and Transitions, the two most significant things to consider while working with Reveal.js.

Theming is essential for creating anything on the internet. In Reveal.js, you can integrate some theme collections supplied by Reveal.js developers.

To use a theme of your choice, import the theme’s CSS styles into your project. The default theme is black when you install reveal.js or clone the Reveal.js repository. A line of code for incorporating a theme into your project is provided below:

Look closely at the code above; you can see where I wrote theme-name ; please replace it with any of the theme names listed below:

• Black (default)

Below, I used a theme name titled sky on a slide:

Utilizing the dracula theme produces the theme below:

Now that we’ve learned more about theming , I’d like you to experiment with different theme names to see how they look on your web presentation slide.

Transitions

Reveal.js provides us with some amazing transition effects to use while making a presentation on the web. It is quite simple to use these transition effects , and some of these transition effects include:

To use these effects, insert a data-transition attribute into your HTML element and set the attribute’s value to the name of the transition effect listed above.

That’s all for transitions in this section; if you want to learn more about Reveal.js transitions, please click here .

We’ll go through presentation features in Reveal.js, such as vertical slides and auto-slide in this section, and since we’ve already covered the implementation largely on vertical slides, we’ll go over more in depth. Let’s get started.

Vertical Slides

Moving between slides by default employs a horizontal sliding transition. These horizontal slides are the main or top-level slides in your presentation. We can’t rely on just one direction in a presentation, and the usage of presenting on slide vertically is critical. We learned how to design a slide that uses vertical direction earlier in this article.

Below is a code sample on utilizing vertical slides:

Auto-Animate

Reveal.js supports auto animation . The auto animate plays a vital role in web presentation. Auto animation applies smooth transition to a slide content, which is noticeable when viewing a presentation. For example, when you set margin-top: 40px to a section, you will see the smooth animation on how the second section comes down slowly. We’ll be implementing some examples here in this section.

To initiate the auto-animate to a section, add the data-auto-animate attribute to the two or multiple sections you want to integrate the auto-animate effect.

The code output above shows that we added margin-top: 100px to the section child (h1) using data-auto-animate , and you can see the effect applied smoothly and removing the default slide horizontal direction to a slightly vertical direction. Please remember that the element in this example is internally hidden but moved using the margin-top attribute. JavaScript will use a CSS transform to achieve fluid movement. Most CSS attributes may be animated and transitioned using the same technique, allowing you to modify positions, font-size, line-height, color, padding, and margin.

We’ll be working on auto-slide in a slide in this section. This is relatively straightforward to accomplish; simply look at our JavaScript code at the bottom of our HTML page and add the autoSlide duration as an integer and set the Boolean value of a loop to true :

JavaScript:

A play/pause icon can be found in the bottom left corner of the slide, as shown in the output above. A round loader describes the progress of the timing function in the icon. The following code is for the output presentation:

Slide Numbers

Numbering is important in slides, and you may add a slider number in two ways: obtain the current slide number and get the slide number and the overall slide count (X/X).

Set slideNumber to true in the config section at the bottom of the HTML page to obtain the real slide number.

Slide Code:

If you look closely at the output above, you will notice a page number counter in the bottom right corner of the screen. When I reached the vertical part while sliding horizontally, the counter format changed to 3.1, which indicates 3 represents the last horizontal slide page and 1 represents the first vertical slide.

To set a slide number in (X/X) format, set your config to the code below:

Please look closely at the bottom right corner of the screen; you will see the page numbering in X/X format. See the code for the output below:

Please, click here to learn more about slide numbers.

Useful hints and guidelines for Reveal.js

In this section, we’ll discover valuable hints and guidelines for working with Reveal.js, which will greatly improve our experience working with Reveal.js for presentation:

• Use keyboard shortcuts to navigate through slides: Use arrow keys or the space bar to move ahead and back through slides.
• Personalize the appearance and feel of your presentation: You can alter the theme, font, and background color of your slides with Reveal.js.
• To add background images to presentations, use the data-background attribute: You can change a slide’s background image by adding the data-background attribute to the slide’ element.
• To set the transition effect between slides, use the data-transition attribute: Transition effects such as ‘slide,’ ‘fade,’ ‘convex,’ and ‘concave’ are available.

I hope you enjoyed this article; we covered everything we needed to know to get started with Reveal.js. We also learned about how to use Reveal.js in our project. There are many more features in Reveal.js, and you can learn more by visiting Reveal’s official website . You may also begin integrating presentations into client’s projects or your project by using Reveal.js; this will help you grow your experience utilizing Reveal.js.

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.

Check our GitHub Repo

More articles from OpenReplay Blog

Oct 24, 2023, 4 min read

Exploring the Impact of Color Psychology on User Experience

{post.frontmatter.excerpt}

Feb 24, 2023, 12 min read

Exploring the best React charting libraries for 2023

Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome , Safari or Firefox browser.

impress.js *

It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.

visualize your big thoughts

and tiny ideas

by positioning , rotating and scaling them on an infinite canvas

the only limit is your imagination

want to know more?

one more thing...

have you noticed it’s in 3D * ?

Use a spacebar or arrow keys to navigate. Press 'P' to launch speaker console.

jQuery Script - Free jQuery Plugins and Tutorials

10 best html presentation frameworks in javascript (2024 update), what is html presentation framework.

An HTML Presentation Framework helps you create a fullscreen web presentation to showcase your web content just like Apple Keynote and Microsoft PowerPoint.

It separates your HTML content into several fullscreen pages (slides) so that the visitors are able to navigate between these slides with certain operations (mouse wheel, arrow keys, touch events, etc).

The Best HTML Presentation Framework

You have been tasked with building an HTML5 presentation application, but where should you start? As there are many frameworks to choose from, it can be challenging to know where to begin.

In this post, we're going to introduce you the 10 best JavaScript HTML presentation frameworks to help developers generate professional, nice-looking presentations using JavaScript, HTML, and CSS. Have fun.

Originally Published Feb 2020, up date d Feb 27 2024

Table of contents:

• jQuery HTML Presentation Frameworks
• Vanilla JS HTML Presentation Frameworks

Best jQuery HTML Presentation Frameworks

Full page presentations with jquery and css animations.

A vertical full-page presentation app (also called fullscreen page slider) implemented in JavaScript (jQuery) and CSS animations.

[ Demo ] [ Download ]

jQuery Amazing Scrolling Presentation Plugin - scrolldeck

scrolldeck is a cool jQuery plugin that make it easier to create amazing scrolling presentation like Slide Animation s, Image Slides and parallax effects for your project.

Easy Dynamic Presentation Plugin In jQuery - Presentation.js

A jQuery-powered presentation plugin that allows users to create better professional-looking presentations, with awesome jQuery and/or CSS 3 animations.

jQuery Plugin To Create Amazing Presentations - mb.disclose

An awesome jQuery plugin that provides an amazing way to present Html contents in carousel like presentations. You can customize the CSS3 powered animations for each Html element using Html5 data-* attributes.

Responsive Web Presentation Plugin For jQuery - sectionizr

A really simple jQuery web presentation plugin which presents any html contents in a responsive, fullscreen, carousel-style page UI. Supports both horizontal and vertical scrolling.

Best Vanilla JS HTML Presentation Frameworks

Beautiful html presentation library - reveal.js.

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an iframe or add your own custom behavior using our JavaScript API.

Fullscreen Scrolling Presentation In JavaScript – Pageable

A lightweight JavaScript library to generate a fullscreen scrolling presentation where the users are allowed to scroll through sectioned pages with drag, swipe, and mouse wheel events.

Amazing Presentation Framework With CSS3 - impress.js

An amazing Presentation framework for modern bowsers. Based on CSS3 transforms and transitions. It doesn't depend on any external stylesheets. It adds all of the styles it needs for the presentation to work.

Slidev aims to provide the flexibility and interactivity for developers to make their presentations even more interesting, expressive, and attractive by using the tools and technologies they are already familiar with.

When working with WYSIWYG editors, it is easy to get distracted by the styling options. Slidev remedies that by separating the content and visuals. This allows you to focus on one thing at a time, while also being able to reuse the themes from the community. Slidev does not seek to replace other slide deck builders entirely. Rather, it focuses on catering to the developer community.

Shower HTML presentation engine

Shower HTML presentation engine built on HTML, CSS and vanilla JavaScript. Works in all modern browsers. Themes are separated from engine. Fully keyboard accessible. Printable to PDF.

Conclusion:

There is no one right answer. The right presentation framework for you depends on your own project requirements, as well as your personal preferences. However, with the ten HTML presentation frameworks listed above to choose from, you are bound to find one that suits your specific needs.

Looking for more jQuery plugins or JavaScript libraries to create awesome HTML Presentations on the web & mobile? Check out the jQuery Presentation and JavaScript Presentation sections.

• 10 Best Mobile-friendly One Page Scroll Plugins
• Prev: Weekly Web Design & Development News: Collective #330
• Next: Weekly Web Design & Development News: Collective #331

You Might Also Like

10 Best JavaScript Plugins To Paginate Large HTML Table (2024 Update)

10 Best Mega Menu Systems In JavaScript And Pure CSS (2024 Update)

10 Best Rating Systems In JavaScript & Pure CSS (2024 Update)

10 Best Marquee-like Content Scrolling Plugins In JavaScript (2024 Update)

10 Best Tag Cloud Generators In JavaScript (2023 Update)

7 Best Github Style Calendar Heatmap Plugins In JavaScript

Add Your Review

Enter your email address below and we'll send you password reset instructions.

• Audio Converter
• Video Converter
• Image Converter
• Document Converter
• Archive Converter
• Presentation Converter
• Font Converter
• Ebook Converter

Convert HTML to PPT / URL to PPT. Online & Free

Advanced online tool to convert html files to ppt. for mac & windows. no download required.

• Presentation

HyperText Markup Language

Microsoft powerpoint 97/2000/xp, how to convert html to ppt, upload html-file(s).

Select files from Computer, Google Drive, Dropbox, URL or by dragging it on the page.

Choose "to ppt"

Choose ppt or any other format you need as a result (more than 200 formats supported)

Download your ppt

Let the file convert and you can download your ppt file right afterwards

HTML to PPT Quality Rating

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

Presentation API

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers .

Experimental: This is an experimental technology Check the Browser compatibility table carefully before using this in production.

The Presentation API lets a user agent (such as a Web browser) effectively display web content through large presentation devices such as projectors and network-connected televisions. Supported types of multimedia devices include both displays which are wired using HDMI, DVI, or the like, or wireless, using DLNA , Chromecast , AirPlay , or Miracast .

In general, a web page uses the Presentation Controller API to specify the web content to be rendered on presentation device and initiate the presentation session. With Presentation Receiver API, the presenting web content obtains the session status. With providing both the controller page and the receiver one with a messaged-based channel, a Web developer can implement the interaction between these two pages.

Depending on the connection mechanism provided by the presentation device, any controller- and receiver page can be rendered by the same user agent, or by separated user agents.

• For 1-UA mode devices, both pages are loaded by the same user agent. However, rendering result of the receiver page will be sent to the presentation device via supported remote rendering protocol.
• For 2-UAs mode device, the receiver page is loaded directly on the presentation device. Controlling user agent communicates with presentation device via supported presentation control protocol, to control the presentation session and to transmit the message between two pages.

In controlling browsing context, the Presentation interface provides a mechanism to override the browser default behavior of launching presentation to external screen. In receiving browsing context, Presentation interface provides the access to the available presentation connections.

Initiates or reconnects to a presentation made by a controlling browsing context.

A PresentationAvailability object is associated with available presentation displays and represents the presentation display availability for a presentation request.

The PresentationConnectionAvailableEvent is fired on a PresentationRequest when a connection associated with the object is created.

Each presentation connection is represented by a PresentationConnection object.

A PresentationConnectionCloseEvent is fired when a presentation connection enters a closed state.

The PresentationReceiver allows a receiving browsing context to access the controlling browsing contexts and communicate with them.

PresentationConnectionList represents the collection of non-terminated presentation connections. It is also a monitor for the event of new available presentation connection.

Example codes below highlight the usage of main features of the Presentation API: controller.html implements the controller and presentation.html implements the presentation. Both pages are served from the domain https://example.org ( https://example.org/controller.html and https://example.org/presentation.html ). These examples assume that the controlling page is managing one presentation at a time. Please refer to the comments in the code examples for further details.

Monitor availability of presentation displays

In controller.html :

Starting a new presentation

Reconnect to a presentation.

In the controller.html file:

Presentation initiation by the controlling UA

Setting presentation.defaultRequest allows the page to specify the PresentationRequest to use when the controlling UA initiates a presentation.

Monitor connection's state and exchange data

Monitor available connection(s) and say hello.

In presentation.html :

Passing locale information with a message

In the presentation.html file:

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Presentation API polyfill contains a JavaScript polyfill of the Presentation API specification under standardization within the Second Screen Working Group at W3C. The polyfill is mostly intended for exploring how the Presentation API may be implemented on top of different presentation mechanisms.

This browser is no longer supported.

Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

JavaScript API for PowerPoint

• 4 contributors

A PowerPoint add-in interacts with objects in PowerPoint by using the Office JavaScript API, which includes two JavaScript object models:

PowerPoint JavaScript API : The PowerPoint JavaScript API provides strongly-typed objects that you can use to access objects in PowerPoint.

Common APIs : Introduced with Office 2013, the Common API can be used to access features such as UI, dialogs, and client settings that are common across multiple types of Office applications.

Learn programming concepts

See PowerPoint add-ins overview for information about important programming concepts.

Learn about API capabilities

For hands-on experience using the Common API to interact with content in PowerPoint, complete the PowerPoint add-in tutorial .

For detailed information about the PowerPoint JavaScript API object model, see the PowerPoint JavaScript API reference documentation .

Try out code samples in Script Lab

Use Script Lab to get started quickly with a collection of built-in samples that show how to complete tasks with the API. You can run the samples in Script Lab to instantly see the result in the task pane or document, examine the samples to learn how the API works, and even use samples to prototype your own add-in.

• PowerPoint add-ins documentation
• PowerPoint add-ins overview
• PowerPoint JavaScript API reference
• Office client application and platform availability for Office Add-ins
• API Reference documentation

Office Add-ins

Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see: https://aka.ms/ContentUserFeedback .

Submit and view feedback for

Additional resources

The HTML Presentation Framework

Created by Hakim El Hattab / @hakimel

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Point of View

Press ESC to enter the slide overview.

Hold down alt and click on any element to zoom in on it using zoom.js . Alt + click anywhere to zoom back out.

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

current-visible

highlight-red

highlight-blue

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

reveal.js comes with a few themes built in: Black (default) - White - League - Sky - Beige - Simple Serif - Blood - Night - Moon - Solarized

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Marvelous List

• No order here

Fantastic Ordered List

• One is smaller than...
• Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: “The nice thing about standards is that there are so many to choose from” and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

• Right-to-left support
• Extensive JavaScript API
• Auto-progression
• Parallax backgrounds
• Custom keyboard bindings

- Try the online editor - Source code & documentation

• Awards & recognition
• Executive biographies
• Bank of America Institute
• Media contacts
• Media content library
• Report center

Bank of America Reports First-Quarter 2024 Financial Results

April 16, 2024 at 6:45 AM Eastern

CHARLOTTE, NC – Bank of America reported its first-quarter 2024 financial results today. The news release, supplemental filing and investor presentation can be accessed at Bank of America’s Investor Relations website at https://investor.bankofamerica.com/quarterly-earnings .

Investor Conference Call information:

Chief Executive Officer Brian Moynihan and Chief Financial Officer Alastair Borthwick will discuss the financial results in a conference call at 8:30 a.m. ET today. For a listen-only connection to the conference call, dial 1.877.200.4456 (U.S.) or 1.785.424.1732 (international), and the conference ID is 79795.  Please dial in 10 minutes prior to the start of the call.

Investors can also listen to live audio of the conference call and view the presentation slides by visiting the Events and Presentations section of the company’s Investor Relations website.

Replay information for Investor Conference Call:

Investors can access replays of the conference call by visiting the Investor Relations website or by calling 1.800.934.4850 (U.S.) or 1.402.220.1178 (international) from noon on April 16 through 11:59 p.m. ET on April 26. 

Bank of America

Bank of America is one of the world’s leading financial institutions, serving individual consumers, small and middle-market businesses and large corporations with a full range of banking, investing, asset management and other financial and risk management products and services. The company provides unmatched convenience in the United States, serving approximately 69 million consumer and small business clients with approximately 3,800 retail financial centers, approximately 15,000 ATMs (automated teller machines) and award-winning digital banking with approximately 57 million verified digital users. Bank of America is a global leader in wealth management, corporate and investment banking and trading across a broad range of asset classes, serving corporations, governments, institutions and individuals around the world. Bank of America offers industry-leading support to approximately 4 million small business households through a suite of innovative, easy-to-use online products and services. The company serves clients through operations across the United States, its territories and more than 35 countries. Bank of America Corporation stock is listed on the New York Stock Exchange (NYSE: BAC).

Investors May Contact:

Lee McEntire, Bank of America Phone:  1.980.388.6780 [email protected]

Jonathan G. Blum, Bank of America (Fixed Income) Phone: 1.212.449.3112 [email protected]

Reporters May Contact:

Bill Halldin, Bank of America Phone: 1.916.724.0093 [email protected]

• Corporate and Financial News

Get Bank of America news updates, including dividend announcements and other important information to your inbox.

What would you like the power to do.

Tell us about your experience

Help Center

• Location finder

Our company

• Responsible growth
• Business practices
• What we offer
• Modern Slavery Act Statement (PDF)

Making an impact

• Local Impact
• Racial equality & economic opportunity
• Driving economic & social progress
• Environmental sustainability
• Find resources

Working here

• Being a great place to work
• Quarterly earnings
• Events & presentations
• Regulatory & other filings
• Fixed income
• Shareholder info
• Annual reports & proxy
• Press releases
• Journalist resources

Investing in securities involves risks, and there is always the potential of losing money when you invest in securities.

This material does not take into account your particular investment objectives, financial situations or needs and is not intended as a recommendation, offer or solicitation for the purchase or sale of any security, financial instrument, or strategy. Before acting on any information in this material, you should consider whether it is suitable for your particular circumstances and, if necessary, seek professional advice. Any opinions expressed herein are given in good faith, are subject to change without notice, and are only correct as of the stated date of their issue.

Content contained herein may have been produced by an outside party that is not affiliated with Bank of America or any of its affiliates (Bank of America). Opinions or ideas expressed are not necessarily those of Bank of America nor do they reflect their views or endorsement. These materials are for informational purposes only. Bank of America does not assume liability for any loss or damage resulting from anyone's reliance on the information provided. Certain links may direct you away from Bank of America to an unaffiliated site. Bank of America has not been involved in the preparation of the content supplied at the unaffiliated sites and does not guarantee or assume any responsibility for its content. When you visit these sites, you are agreeing to all of their terms of use, including their privacy and security policies.

Merrill Lynch, Pierce, Fenner & Smith Incorporated (also referred to as “ MLPF&S ” or “Merrill”) makes available certain investment products sponsored, managed, distributed or provided by companies that are affiliates of Bank of America Corporation (“ BofA Corp.”). MLPF&S is a registered broker-dealer, registered investment adviser, Member  SIPC  and a wholly owned subsidiary of BofA Corp.

Trust and fiduciary services are provided by Bank of America Private Bank, a division of Bank of America, N.A., Member FDIC , and a wholly-owned subsidiary of Bank of America Corporation (“ BofA Corp.”). Insurance and annuity products are offered through Merrill Lynch Life Agency Inc. (“ MLLA ”), a licensed insurance agency and wholly-owned subsidiary of BofA Corp.

Investment products offered through MLPF&S and insurance and annuity products offered through MLLA :

Bank of America Private Bank is a division of Bank of America, N.A., Member FDIC and a wholly owned subsidiary of Bank of America Corporation ( BofA Corp.).

"Bank of America" is the marketing name for the global banking and global markets business of Bank of America Corporation. Lending, derivatives, and other commercial banking activities are performed globally by banking affiliates of Bank of America Corporation, including Bank of America, N.A., Member FDIC. Securities, strategic advisory, and other investment banking activities are performed globally by investment banking affiliates of Bank of America Corporation ("Investment Banking Affiliates"), including, in the United States, BofA Securities, Inc. and Merrill Lynch, Pierce, Fenner & Smith Incorporated, both of which are registered broker-dealers and Members of  SIPC , and, in other jurisdictions, by locally registered entities. BofA Securities, Inc. is registered as a futures commission merchant with the CFTC and is a member of the NFA.

Company goals are aspirational and not guarantees or promises that all goals will be met. Statistics and metrics included in our ESG documents are estimates and may be based on assumptions or developing standards.

• Review Cookie Categories
• Accessible Banking
• Social community guidelines
• Advertising Practices

Bank of America, N.A. Member FDIC.  Equal Housing Lender © 2024 Bank of America Corporation. All rights reserved.

Connect with us

Google Cloud Next 2024: Everything announced so far

Google’s Cloud Next 2024 event takes place in Las Vegas through Thursday, and that means lots of new cloud-focused news on everything from Gemini, Google’s AI-powered chatbot , to AI to devops and security. Last year’s event was the first in-person Cloud Next since 2019, and Google took to the stage to show off its ongoing dedication to AI with its Duet AI for Gmail and many other debuts , including expansion of generative AI to its security product line and other enterprise-focused updates and debuts .

Don’t have time to watch the full archive of Google’s keynote event ? That’s OK; we’ve summed up the most important parts of the event below, with additional details from the TechCrunch team on the ground at the event. And Tuesday’s updates weren’t the only things Google made available to non-attendees — Wednesday’s developer-focused stream started at 10:30 a.m. PT .

Google Vids

Leveraging AI to help customers develop creative content is something Big Tech is looking for, and Tuesday, Google introduced its version. Google Vids, a new AI-fueled video creation tool , is the latest feature added to the Google Workspace.

Here’s how it works: Google claims users can make videos alongside other Workspace tools like Docs and Sheets. The editing, writing and production is all there. You also can collaborate with colleagues in real time within Google Vids. Read more

Gemini Code Assist

After reading about Google’s new Gemini Code Assist , an enterprise-focused AI code completion and assistance tool, you may be asking yourself if that sounds familiar. And you would be correct. TechCrunch Senior Editor Frederic Lardinois writes that “Google previously offered a similar service under the now-defunct Duet AI branding.” Then Gemini came along. Code Assist is a direct competitor to GitHub’s Copilot Enterprise. Here’s why

And to put Gemini Code Assist into context, Alex Wilhelm breaks down its competition with Copilot, and its potential risks and benefits to developers, in the latest TechCrunch Minute episode.

Google Workspace

Image Credits: Google

Among the new features are voice prompts to kick off the AI-based “Help me write” feature in Gmail while on the go . Another one for Gmail includes a way to instantly turn rough email drafts into a more polished email. Over on Sheets, you can send out a customizable alert when a certain field changes. Meanwhile, a new set of templates make starting a new spreadsheet easier. For the Doc lovers, there is support for tabs now. This is good because, according to the company, you can “organize information in a single document instead of linking to multiple documents or searching through Drive.” Of course, subscribers get the goodies first. Read more

Google also seems to have plans to monetize two of its new AI features for the Google Workspace productivity suite. This will look like $10/month/user add-on packages. One will be for the new AI meetings and messaging add-on that takes notes for you, provides meeting summaries and translates content into 69 languages. The other is for the introduced AI security package, which helps admins keep Google Workspace content more secure. Read more

In February, Google announced an image generator built into Gemini, Google’s AI-powered chatbot. The company pulled it shortly after it was found to be randomly injecting gender and racial diversity into prompts about people. This resulted in some offensive inaccuracies. While we waited for an eventual re-release, Google came out with the enhanced image-generating tool, Imagen 2 . This is inside its Vertex AI developer platform and has more of a focus on enterprise. Imagen 2 is now generally available and comes with some fun new capabilities, including inpainting and outpainting. There’s also what Google’s calling “text-to-live images” where you  can now create short, four-second videos from text prompts, along the lines of AI-powered clip generation tools like Runway ,  Pika  and  Irreverent Labs . Read more

Vertex AI Agent Builder

We can all use a little bit of help, right? Meet Google’s Vertex AI Agent Builder, a new tool to help companies build AI agents.

“Vertex AI Agent Builder allows people to very easily and quickly build conversational agents,” Google Cloud CEO Thomas Kurian said. “You can build and deploy production-ready, generative AI-powered conversational agents and instruct and guide them the same way that you do humans to improve the quality and correctness of answers from models.”

To do this, the company uses a process called “grounding,” where the answers are tied to something considered to be a reliable source. In this case, it’s relying on Google Search (which in reality could or could not be accurate). Read more

Gemini comes to databases

Google calls Gemini in Databases a collection of features that “simplify all aspects of the database journey.” In less jargony language, it’s a bundle of AI-powered, developer-focused tools for Google Cloud customers who are creating, monitoring and migrating app databases. Read more

Google renews its focus on data sovereignty

Image Credits: MirageC / Getty Images

Google has offered cloud sovereignties before, but now it is focused more on partnerships rather than building them out on their own. Read more

Security tools get some AI love

Image Credits: Getty Images

Google jumps on board the productizing generative AI-powered security tool train with a number of new products and features aimed at large companies. Those include Threat Intelligence, which can analyze large portions of potentially malicious code. It also lets users perform natural language searches for ongoing threats or indicators of compromise. Another is Chronicle, Google’s cybersecurity telemetry offering for cloud customers to assist with cybersecurity investigations. The third is the enterprise cybersecurity and risk management suite Security Command Center. Read more

Nvidia’s Blackwell platform

One of the anticipated announcements is Nvidia’s next-generation Blackwell platform coming to Google Cloud in early 2025. Yes, that seems so far away. However, here is what to look forward to: support for the high-performance Nvidia HGX B200 for AI and HPC workloads and GB200 NBL72 for large language model (LLM) training. Oh, and we can reveal that the GB200 servers will be liquid-cooled. Read more

Chrome Enterprise Premium

Meanwhile, Google is expanding its Chrome Enterprise product suite with the launch of Chrome Enterprise Premium . What’s new here is that it mainly pertains mostly to security capabilities of the existing service, based on the insight that browsers are now the endpoints where most of the high-value work inside a company is done. Read more

Gemini 1.5 Pro

Everyone can use a “half” every now and again, and Google obliges with Gemini 1.5 Pro. This, Kyle Wiggers writes, is “Google’s most capable generative AI model,” and is now available in public preview on Vertex AI, Google’s enterprise-focused AI development platform. Here’s what you get for that half: T he amount of context that it can process, which is from 128,000 tokens up to 1 million tokens, where “tokens” refers to subdivided bits of raw data (like the syllables “fan,” “tas” and “tic” in the word “fantastic”). Read more

Open source tools

At Google Cloud Next 2024, the company debuted a number of open source tools primarily aimed at supporting generative AI projects and infrastructure. One is Max Diffusion, which is a collection of reference implementations of various diffusion models that run on XLA, or Accelerated Linear Algebra, devices. Then there is JetStream, a new engine to run generative AI models. The third is MaxTest, a collection of text-generating AI models targeting TPUs and Nvidia GPUs in the cloud. Read more

We don’t know a lot about this one, however, here is what we do know : Google Cloud joins AWS and Azure in announcing its first custom-built Arm processor, dubbed Axion. Frederic Lardinois writes that “based on Arm’s Neoverse 2 designs, Google says its Axion instances offer 30% better performance than other Arm-based instances from competitors like AWS and Microsoft and up to 50% better performance and 60% better energy efficiency than comparable X86-based instances.” Read more

The entire Google Cloud Next keynote

If all of that isn’t enough of an AI and cloud update deluge, you can watch the entire event keynote via the embed below.

Google Cloud Next’s developer keynote

On Wednesday, Google held a separate keynote for developers . They offered a deeper dive into the ins and outs of a number of tools outlined during the Tuesday keynote, including Gemini Cloud Assist, using AI for product recommendations and chat agents, ending with a showcase from Hugging Face. You can check out the full keynote below.

Paramount Film Chief Brian Robbins Addresses Corporate M&A Saga at CinemaCon, Jokes About Launching Kickstarter to Buy Studio

By Matt Donnelly

Matt Donnelly

Senior Film Writer

• Participant Shutting Down Operations After 20 Years: Film Studio Was Behind Oscar Winners ‘Spotlight,’ ‘Green Book’ (EXCLUSIVE) 2 days ago
• CinemaCon Winners and Losers: Wolverine’s F-Bombs Boost Disney, Paramount Soars With Paul Mescal’s New Gladiator and More 5 days ago
• ‘Alien: Romulus’ Scares CinemaCon with Bloody, Bone-Cracking Footage of Creatures Shredding Human Chests 6 days ago

Paramount Pictures CEO Brian Robbins got cheeky about the sales talks surrounding his corporate parent Paramount Global.

In a presentation to worldwide theater owners at the annual Las Vegas convention CinemaCon, Robbins got right to the point in his opening remarks about what’s next for his team. The actor-turned-executive asked the crowd at Caesars Palace if they’d heard about recent speculation over the sale before announcing that “my colleague Chris Aronson is also raising money to make a bid for the studio; he has a Kickstarter.”

Popular on Variety

“Bringing your audiences the best that entertainment has to offer is making Paramount the home to the best talent on both sides of the camera,” Robbins said, before unveiling new projects in the works from Oscar winner Damien Chazelle, Edgar Wright, and Glenn Powell, as well as big IP swings like reboots for satire films like “The Naked Gun” and “Scary Movie.”

It’s not unprecedented that M&A makes for interesting and potentially awkward CinemaCon presentations, as chief executives try to hype their upcoming slates knowing their organizations could be upended by next year.

The sale of Paramount Global through its majority holder, National Amusements Inc., took a serious turn in early April when the company entered a 30-day exclusive window of sale negotiations with David Ellison’s Skydance.

Paramount Global’s assets include Paramount Pictures, the CBS network and some locally owned stations, cable networks including Comedy Central, BET, MTV, and Nickelodeon, and the direct-to-streaming businesses Paramount+ and Pluto TV.

More From Our Brands

Kelly clarkson’s ex-husband denies ‘every allegation’ after lawsuit over $2.6 million ruling, this 1933 hispano-suiza j12 cabriolet could fetch $3.5 million at auction, ncaa council approves looser nil, transfer rules for d-i, be tough on dirt but gentle on your body with the best soaps for sensitive skin, ahs: delicate exposes a major betrayal ahead of season finale, verify it's you, please log in.

• Share full article

Advertisement

Supported by

Luxury Linens Get the Thom Browne Treatment

The designer plans a sleepy presentation of his new collection for Frette.

By Stephen Treffinger

This article is part of our Design special report previewing Milan Design Week.

“You’re going to have a long two hours of watching people sleep,” Thom Browne said of the Tuesday evening event that will launch his collaboration with the luxury linen company Frette during Milan Design Week.

In his fashion shows, Mr. Browne typically works with the idea of uniformity and monotony to change the way people look at something familiar — such as his gray suits for men. Here, he will apply the same treatment to bedding. “There’s the idea of almost taking something that’s mundane and, I think, making it interesting to people,” he said in a video call.

The dramatic presentation of Mr. Browne’s new bedding and coordinating items may call to mind the 58-year-old designer’s show, for his Fall 2009 men’s wear collection. Then, 50 men identically dressed in truncated gray suits and khaki overcoats entered in rows and, cued by the ringing of a taskmaster’s bell, performed workaday activities like typing and eating lunch. No chitchat. No music. Then, after about 14 minutes, the men departed.

For Thom Browne by Frette, there will be six twin-size beds made up with the new products, each with a model resting on top. The models will enter in their underwear before fully dressing in gray suits with ties and even tie bars and then climbing onto the beds.

“The models will not be required to be actually asleep and will likely not be; however, if they choose to take a nap they most certainly could,” wrote a representative of Mr. Browne’s company, in an email.

“Initially, I wanted 50 beds, but then logistically getting a space for that was not working out,” Mr. Browne said. The room he settled for lies within the Palazzina Appiani, a neoclassical building in central Milan. The little palace was built in the early 19th century as a private space for Napoleon and his court. Its ornate decorations are in stark contrast to the minimalist bedding.

Mr. Browne said he loves that people will come to the invitation-only event, called “…time to sleep…” and expect something to happen when, in fact, nothing will happen.

“And that little bit of discomfort, I think, is funny and interesting and it’s almost like the music that I use for my shows,” he said. “A lot of times there’s a grating aspect to it that almost kind of drives you crazy. And I just like that in a way.” (The room will be filled with the “everyday sounds of sleeping and lullabies,” according to his office, and Mr. Browne was expected to contribute additional songs and sound effects.)

Why would he want to make people uncomfortable? “I think everybody nowadays wants so much to happen and they want things to keep moving and they want things to be quick,” he said. “And I like to do things slowly and almost not as much to happen and not as quickly.”

The collection, which is on view to the public at the Palazzina, Wednesday through Sunday (the beds will be there, but not the models), consists of cotton sateen sheets, duvet covers and pillowcases, in white with gray piping; towels, a bath mat and a beach bag in terry cloth; a gray cotton velour bathrobe; and gray wool-and-cashmere blankets and a decorative cushion. Many of the items feature Mr. Browne’s signature four-bar design.

“Any collaboration I do, I feel like I want it to feel just real and authentic to what I would use myself,” he said. He has designed home products for Baccarat and Christofle and owns crystal and silver from both companies. And yes, he said, he uses Frette linens.

Paolo Casati, a co-founder of Studiolabo, which oversees the promotion of many exhibitions connected with Milan Design Week, noted in an email that fashion brands have made housewares incursions into the festival for more than a decade, starting with early actors like Marni and Giorgio Armani and evolving to include Bottega Veneta and Dior.

“It has become an international reference point for promoting a cultural lifestyle, where product design, fashion, art, technology, architecture, automotive and material research all take center stage at the event,” he said. The fashion presence has expanded the international audience for the design week as a whole, he noted, “both financially and through their ability to create immersive installations and experiences.”

The collaboration with Mr. Browne marks the first time Frette, which was founded in 1860, has worked with a fashion brand. So what took so long?

Filippo Arnaboldi, Frette’s chief executive, said in a video call that other fashion companies have come knocking, but none had “the right DNA or the right image that could have really been complementary.”

Any partner needed to be a stickler for quality and attention to details, he said. But Frette was also looking for access to lackluster markets. Thom Browne “is very, very, very, very strong in Southeast Asia and China,” and Frette is not, Mr. Arnaboldi said, and he hoped some of that allure would rub off.

Asked if he wore clothing designed by Mr. Browne, Mr. Arnaboldi stood up and gestured at his navy blue suit, smiling. He was also enthusiastic about Mr. Browne’s eccentric showmanship. “It is something we have never done and you would not expect from Frette, this presentation with models with the beds.”

As is typical, Mr. Browne declined to employ an outside stylist or choreographer. “I like to almost die on the sword myself,” he said.

The Thom Browne by Frette collection will be displayed Wednesday through Sunday at Palazzina Appiani, Viale Giorgio Byron 2; frette.com . It also can be seen at Thom Browne – Milan Men, Via Gesù 10; thombrowne.com .

An earlier version of this article attributed an erroneous distinction to Thom Browne’s 2009 fashion show in Florence. It was his first fashion show in Europe, not the first in his career. The error was repeated in a picture caption. The earlier version also included a picture caption that described incorrectly a picture of models who will participate in Mr. Browne’s presentation at Milan Design Week. The models were photographed on location, not digitally added in a rendering.

How we handle corrections

Goldman Sachs Reports 2024 First Quarter Earnings Per Common Share of $11.58 and Annualized Return on Common Equity of 14.8%

NEW YORK, April 15, 2024 – The Goldman Sachs Group, Inc. (NYSE: GS) today reported net revenues of $14.21 billion and net earnings of $4.13 billion for the first quarter ended March 31, 2024. Diluted earnings per common share (EPS) was $11.58 and annualized return on average common shareholders’ equity (ROE) was 14.8% for the first quarter of 2024.  

Please view printable versions of the First Quarter 2024 Earnings Results [PDF] and the First Quarter 2024 Earnings Results Presentation [PDF]. 

David Solomon, Chairman and CEO of Goldman Sachs, said, “Our first quarter results reflect the strength of our world-class and interconnected franchises and the earnings power of Goldman Sachs. We continue to execute on our strategy, focusing on our core strengths to serve our clients and deliver for our shareholders.” 

A conference call to discuss the firm’s financial results, outlook and related matters will be held at 9:30 am (ET) on the date noted above. The call will be open to the public. 

Members of the public who would like to listen to the conference call should dial +1-800-289-0459 (in the U.S.) and +1-323-794-2095 (outside the U.S.) passcode number 7042022. The number should be dialed at least 10 minutes prior to the start of the conference call. The conference call will also be accessible as an audio webcast through the Investor Relations section of the website, www.goldmansachs.com/investor-relations . There is no charge to access the call. For those unable to listen to the live broadcast, a replay will be available on our website beginning approximately three hours after the event.

Please direct any questions regarding obtaining access to the conference call to Goldman Sachs Investor Relations, via e-mail, at  [email protected] .

Sign up for BRIEFINGS, a newsletter from Goldman Sachs about trends shaping markets, industries and the global economy.

Thank you for subscribing to BRIEFINGS: a newsletter from Goldman Sachs about trends shaping markets, industries and the global economy.

Some error occurred. Please refresh the page and try again.

Invalid input parameters. Please refresh the page and try again.

Connect With Us

WELCOME TO THE FAMILY! Please check your email for confirmation from us.

2024 WNBA Draft fashion highlights individuality and hometown pride

Angel Reese, Rickea Jackson and more grace the orange carpet with designer looks and hometown homages.

• Share on Facebook
• Share on Twitter
• Share via Email
• Copy Link Link Copied

It’s apparent that the underlying theme for Monday night’s WNBA Draft fashion was empowerment. From shining designer looks to subtle hometown homages, the draftees showed off every ounce of their individuality and personality. 

The hardest decision for any woman on any special occasion centers around beauty. Women have to take into account every detail from the right hairstyle to the perfect accessories. For other women, especially on the taller side, the search is harder with less suitable options to match their height. However, the draftees, with their dynamic orange carpet looks, made the process look effortless.    

Rickea Jackson stole the attention with not only one, but two show-stopping looks. “I’m choosing between these two fits, and I’m like, ‘Why not give them both? You will never have another draft. Go big or go home,’” she told theGrio, after becoming the 4th overall draft pick for the Los Angeles Sparks.

The first outfit, a striking red pantsuit with Cartier glasses and black heels, was a “powerful statement” that paid homage to her hometown, Detroit. The second look, a silver shimmery pantsuit, gave the sophisticated shine that she wanted for the draft selection. Both looks showcased her full personality, while giving the world a glimpse of the fierceness her hometown instilled in her. 

Dyaisha Fair also paid homage to her hometown with her draft look. The main goal behind her fashion statement was subtleness with a little flair. The Rochester, New York, native accomplished that objective, with the smaller details that brought the outfit together. Her jacket featured a bedazzled flower on her right side, representing her hometown’s nickname, and her Prada sneakers added the finishing touches. 

Recommended Stories

The WNBA rookies are ready to elevate the landscape of women’s basketball

Kayla Grant

WNBA rides the wave and takes center stage as it welcomes star players in 2024 draft 

Deron Snyder

WNBA fashionistas expected to showcase their styles at the draft with spotlight on women’s hoops

Associated Press

Will AI-generated fashion models help or hurt diversity in the industry?

Black in style: Fashion, technology and sports converge in Nike’s uniforms for the Paris Olympics

TheGrio Lifestyle

Zendaya names her biggest challengers in Vogue

Black in Style: Angel Reese’s fashionable WNBA Draft announcement

The night’s looks proved one thing: the rookies love designer brands. Along with Jackson’s Cartier glasses and Fair’s Prada sneakers, Charisma Osborne’s Louis Vuitton purse was the perfect accessory for her Veronica Beard cream-colored suit. Angel Reese, who secured her dress two days before the draft, wore a sparkling Bronx and Banco halterneck dress, complete with a Simon Miller bag and Christian Louboutin shoes. 

These designer additions are only the beginning for the players, as more opportunities open up both on and off the court. With the rise of viewership and NIL deals, players have a bigger spotlight on them than ever before. The increase of attention is an adjustment for any person, and learning to stay grounded in the moment is key. 

For some of the players, the clothing and accessories they wore reminded them who they were and their goals. With her white dress, silver “A” necklace and sparkly basketball purse, Aaliyah Edwards walked the orange carpet with her signature purple and yellow braids on display. In the midst of the excitement from the draft, it was Edwards’ bracelet from her mother that gave her confidence and kept her present in the moment.

“This bracelet … says, ‘Whenever you feel overwhelmed, remember whose daughter you are and strengthen your crown,’” she said. “My mom gave me this bracelet, so it’s something that keeps me grounded because a little piece of her is always with me and it just reminds me to stay confident, know my strength and know my worth.”

Rickea Jackson at the 2024 WNBA Draft wearing Ellaé Lisqué. (Photo by Sarah Stier/Getty Images)

Aaliyah Edwards at the 2024 WNBA Draft wearing Galvan. (Photo by Sarah Stier/Getty Images)

Angel Reese at the 2024 WNBA Draft wearing Bronx and Banco. (Photo by Sarah Stier/Getty Images)

Celeste Taylor at the 2024 WNBA Draft. (Photo by Sarah Stier/Getty Images)

Kamilla Cardoso at the 2024 WNBA Draft. (Photo by Sarah Stier/Getty Images)

Marquesha Davis at the 2024 WNBA Draft. (Photo by Sarah Stier/Getty Images)

Charisma Osborne at the 2024 WNBA Draft. (Photo by Sarah Stier/Getty Images)

Nyadiew Puoch at the 2024 WNBA Draft. (Photo by Sarah Stier/Getty Images)

Dyaisha Fair at the 2024 WNBA Draft. (Photo by Sarah Stier/Getty Images)

Kayla Grant is a multimedia journalist with bylines in Business Insider, Shondaland, Oz Magazine, Prism, Rolling Out and more. She writes about culture, books and entertainment news. Follow her on X: @TheKaylaGrant  

• Share on Facebook Facebook
• Share on Twitter Twitter
• Share via Email Email
• Copy Link Copy Link Link Copied

STREAM FREE MOVIES, LIFESTYLE AND NEWS CONTENT ON OUR NEW APP