create presentations in js

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.

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

• 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

Navigation Menu

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, used by 785k.

Contributors 322

• JavaScript 59.7%

DEV Community

Posted on Jan 11, 2019

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

Today, we're going to learn how to create a stunning and animated presentation using HTML, CSS, and JavaScript.

If you're a beginner to web development, don't fret! This tutorial will be easy enough to keep up with. So let's slide right into it!

We're going to be using an awesome framework called Reveal.js . It provides robust functionality for creating interesting and customizable presentations.

• Head over to the Reveal.js repository and clone the project (you can also fork this to your GitHub namespace).

• Change directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run the project.

The index.html file holds all of the markup for the slides. This is one of the downsides of using Reveal.js; all of the content will be placed inside this HTML file.

Built-In Themes

Reveal includes 11 built-in themes for you to choose from:

Changing The Theme

• Open index.html
• Change the CSS import to reflect the theme you want to use

The theme files are:

• solarized.css

Custom Themes

It's quite easy to create a custom theme. Today, I'll be using my custom theme from a presentation I gave called "How To Build Kick-Ass Website: An Introduction To Front-end Development."

Here is what my custom slides look like:

Creating A Custom Theme

• Open css/theme/src inside your IDE. This holds all of the Sass files ( .scss ) for each theme. These files will be transpiled to CSS using Grunt (a JavaScript task runner). If you prefer to write CSS, go ahead and just create the CSS file inside css/theme.
• Create a new  .scss file. I will call mine custom.scss . You may have to stop your localhost and run npm run build to transpile your Sass code to CSS.
• Inside the index.html file, change the CSS theme import in the <head> tag to use the name of the newly created stylesheet. The extension will be  .css , not  .scss .
• Next, I created variables for all of the different styles I wanted to use. You can find custom fonts on Google Fonts. Once the font is downloaded, be sure to add the font URL's into the index.html file.

Here are the variables I chose to use:

• Title Font: Viga
• Content Font: Open Sans
• Code Font: Courier New
• Cursive Font: Great Vibes
• Yellow Color: #F9DC24
• Add a  .reveal class to the custom Sass file. This will wrap all of the styles to ensure our custom theme overrides any defaults. Then, add your custom styling!

Unfortunately, due to time constraints, I'll admit that I used quite a bit of  !important overrides in my CSS. This is horrible practice and I don't recommend it. The reveal.css file has extremely specific CSS styles, so I should have, if I had more time, gone back and ensured my class names were more specific so I could remove the  !importants .

Mixins & Settings

Reveal.js also comes with mixins and settings you can leverage in your custom theme.

To use the mixins and settings, just import the files into your custom theme:

Mixins You can use the vertical-gradient, horizontal-gradient, or radial-gradient mixins to create a neat visual effect.

All you have to do is pass in the required parameters (color value) and voila, you've got a gradient!

Settings In the settings file, you'll find useful variables like heading sizes, default fonts and colors, and more!

The structure for adding new content is:

.reveal > .slides > section

The <section> element represents one slide. Add as many sections as you need for your content.

Vertical Slides

To create vertical slides, simply nest sections.

Transitions

There are several different slide transitions for you to choose from:

To use them, add a data-transition="{name}" to the <section> which contains your slide data.

Fragments are great for highlighting specific pieces of information on your slide. Here is an example.

To use fragments, add a class="fragment {type-of-fragment}" to your element.

The types of fragments can be:

• fade-in-then-out
• fade-in-then-semi-out
• highlight-current-blue
• highlight-red
• highlight-green
• highlight-blue

You can additionally add indices to your elements to indicate in which order they should be highlighted or displayed. You can denote this using the data-fragment-index={index} attribute.

There are way more features to reveal.js which you can leverage to build a beautiful presentation, but these are the main things which got me started.

To learn more about how to format your slides, check out the reveal.js tutorial . All of the code for my presentation can be viewed on GitHub. Feel free to steal my theme!

Top comments (18)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Oct 2, 2018

I really love reveal.js. I haven't spoken in a while so I haven't used it. I've always used their themes and never thought about making my own. This is probably super useful for company presentations, too. I'm SO over google slides. Trying to format code in those is a nightmare LOL

• Location Stockholm
• Education Siena College
• Work Software Engineer at Spotify
• Joined Dec 21, 2018

Yeah it is time consuming, but the result is much better

• Location Antibes, France
• Work Senior Software Engineer at Spotify
• Joined Oct 16, 2017

The best thing in this - and now I'm not being ironic - is that while you work on a not so much technical task - creating a presentation - you still have to code. And the result is nice.

On the other hand, I know what my presentation skills teachers would say. Well, because they said it... :) If you really want to deliver a captivating presentation, don't use slides at all. Use the time to prepare what you want to say.

I'm not that good - yet, but taking their advice, if must I use few slides, with little information on them and with minimal graphical distractions. My goal is to impress them by what I say, not is what behind my head.

I'm going to a new training soon, where the first day we have to deliver a presentation supported by slides at a big auditorium and the next day we have to go back and forget about the slides and just get on stage and speak. I can't wait for it.

• Location Lake Villa, IL
• Education Bachelor in Electronics Engineering
• Work Computer & Technology Enthusiast
• Joined Oct 8, 2017

How about github.com/team-fluxion/slide-gazer ?

It's my fourth attempt at creating a simple presentation tool to help one present ideas quickly without having to spend time within a presentation editor like Microsoft PowerPoint. It directly converts markdown documents into elegant presentations with a few features and is still under development.

• Location Singapore
• Work Web Developer at FirstCom Solutions
• Joined Jan 15, 2019

Yup, RevealJS is awesome !

Previously I either used PPT or Google Slides. One is a paid license and the other requires an internet connection.

The cool thing about it is that since it's just HTML files behind the scenes, the only software you need to view it with is a web browser. Has amazing syntax-highlighting support via PrismJS. And as a web developer, it makes it simple to integrate other npm packages if need be...

I actually just used it to present a talk this week!

• Email [email protected]
• Location Indianapolis, IN
• Education Purdue University
• Pronouns he/him
• Work Senior Frontend Engineer at Whatnot
• Joined Aug 3, 2017

Great article, Emma! I love Reveal and this is a great write up for using it!

• Email [email protected]
• Location New Delhi, India 🇮🇳
• Joined Dec 5, 2018

I think its a coincidence 😅 I was just starting to think to use reveal.js and suddenly you see this post 🤩

• Location Saratoga Springs,NY
• Education BA, University of Michigan
• Work Documentarian
• Joined Sep 7, 2018

Check out slides.com If you want to skip the heavy lifting and/or use a presentation platform based on reveal.js.

Everything is still easy to customize. The platform provides a UI to work from and an easy way to share your stuff.

BTW - I have no affiliation with slides.com, or even a current account. I used the service a few years back when I regularly presented and wanted to get over PowerPoint, Google Slides, Prezi, etc.

• Location Toronto, ON
• Education MFA in Art Video Syracuse University 2013 😂
• Work Cannot confirm or deny atm
• Joined May 31, 2017

Well I guess you get to look ultra pro by skipping the moment where you have to adjust for display detection and make sure your notes don’t show because you plugged your display connector in 😩 But If the conference has no wifi then we’re screwed I guess

• Location Palm Bay, FL
• Education FullSail University
• Work Developer Relations Manager at MetaMask
• Joined Sep 16, 2018

I like Reveal, but I still have not moved past using Google docs slides because every presentation I do has to be done yesterday. Hoping that I can use Reveal more often this year as I get more time to work on each presentation.

• Email [email protected]
• Location Abuja Nigeria
• Work Project Manager Techibytes Media
• Joined Feb 19, 2019

Well this is nice and I haven't tried it maybe because I haven't spoken much in meet ups but I think PowerPoint is still much better than going all these steps and what if I have network connection issues that day then I'm scrolled right?

• Email [email protected]
• Joined Apr 16, 2018

Using Node and Soket.io remote control (meant to be used on phones) for my school's computer science club, it also features some more goodies which are helpful when having multiple presentations. It can be modded to use these styling techniques effortlessly. Feel free to fork!

SBCompSciClub / prez-software

A synchronized role based presentation software using node, prez-software.

TODO: Make system to easily manage multiple presentations Add Hash endocing and decoding for "sudo" key values TODO: Document Code

Run on Dev Server

npm i nodemon app.js Nodemon? - A life saving NPM module that is ran on a system level which automatically runs "node (file.js)" when files are modified. Download nodemon by running npm i -g nodemon

Making a Presentation

• Copy an existing presentation folder
• Change the folder name (which should be located at public/slides) with the name day[num of day] ex(day2)

Making a Slide

Making a slide is pretty simple. Just add a HTML section. <section> <!--slide content--> </section> inside the span with the class of "prez-root". Also keep in mind that you will need to copy and pate the markup inside the prez root to the other pages (viewer & controller).

Adding Text

You may add text however you desire, but for titles use the…

Awesome post! I’m glad I’m not the only one who likes libraries. 😎

• Location Los Angeles
• Education Engineering, Physics, and Math
• Joined Sep 6, 2018

Fantastic post. I just loved it.

• Location France
• Work Co-Founder of Depot
• Joined Sep 2, 2017

Awesome introduction! I feel like I need to give this a try the next time I create a presentation.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Find All Groups of Farmland

ZeeshanAli-0704 - Apr 20

Day 3 of 30 of JavaScript

Akshat Sharma - Apr 19

Diving Into Capacitor 6: What’s New, What’s Improved, and How to Upgrade

Daniel Sogl - Apr 15

A common TypeScript error with useRef

Arc - Apr 15

We're a place where coders share, stay up-to-date and grow their careers.

HTML Presentations Made Easy

Created by Hakim El Hattab / @hakimel

reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory.

Vertical Slides

Slides can be nested inside of other slides, try pressing down .

Basement Level 1

Press down or up to navigate.

Basement Level 2

Basement level 3.

That's it, time to go back up.

Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at http://slid.es .

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.

Works in Mobile Safari

Try it out! You can swipe through the slides and pinch your way to the overview.

Marvelous Unordered List

• No order here

Fantastic Ordered List

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

Transition Styles

You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default

Reveal.js comes with a few themes built in: Default - Sky - Beige - Simple - Serif - Night Moon - Solarized

* Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <head> using a <link> .

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

Custom Events

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

Slide Backgrounds

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

Image Backgrounds

Repeated image backgrounds, background transitions.

Pass reveal.js the backgroundTransition: 'slide' config argument to make backgrounds slide rather than fade.

Background Transition Override

You can override background transitions per slide by using data-background-transition="slide" .

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

Pretty Code

Courtesy of highlight.js .

Intergalactic Interconnections

You can link between slides internally, like this .

Fragmented Views

Hit the next arrow...

... to step through ...

Fragment Styles

There's a few styles of fragments, like:

highlight-red

highlight-green

highlight-blue

current-visible

highlight-current-blue

Spectacular image!

Export to pdf.

Presentations can be exported to PDF , below is an example that's been uploaded to SlideShare.

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

Stellar Links

• Try the online editor
• Source code on GitHub
• Follow me on Twitter

BY Hakim El Hattab / hakim.se

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.

• 4 Dependencies
• 59 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.

How to Create Beautiful HTML & CSS Presentations with WebSlides

Share this article

Getting Started with WebSlides

Create a web presentation with webslides.

• Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

In the fourth slide, use the grid component again to split the content into two columns:

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

Do a similar thing here:

This slide also uses a similar structure:

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

How can i customize the design of my webslides presentation.

WebSlides allows you to customize your presentation to suit your style and needs. You can change the color scheme, fonts, and layout by modifying the CSS file. If you’re familiar with CSS, you can easily tweak the styles to create a unique look. If you’re not, there are plenty of online resources and tutorials that can help you learn. Remember, the key to a great presentation is not only the content but also the design. A well-designed presentation can help keep your audience engaged and make your content more memorable.

Can I add multimedia elements to my WebSlides presentation?

How can i share my webslides presentation with others.

Once you’ve created your WebSlides presentation, you can share it with others by hosting it on a web server. You can use a free hosting service like GitHub Pages, or you can use your own web server if you have one. Once your presentation is hosted, you can share the URL with anyone you want to view your presentation. They’ll be able to view your presentation in their web browser without needing to install any special software.

Can I use WebSlides for commercial projects?

Yes, WebSlides is free to use for both personal and commercial projects. You can use it to create presentations for your business, for your clients, or for any other commercial purpose. However, please note that while WebSlides itself is free, some of the images and fonts used in the templates may be subject to copyright and may require a license for commercial use.

How can I add interactive elements to my WebSlides presentation?

You can add interactive elements to your WebSlides presentation by using JavaScript. For example, you can add buttons that the user can click to navigate to different slides, or you can add forms that the user can fill out. This can be done by adding the appropriate HTML and JavaScript code to your slides. If you’re not familiar with JavaScript, there are plenty of online resources and tutorials that can help you learn.

Can I use WebSlides offline?

Yes, you can use WebSlides offline. Once you’ve downloaded the WebSlides files, you can create and view your presentations offline. However, please note that some features may not work offline, such as loading external images or fonts. To ensure that all features work correctly, it’s recommended to host your presentation on a web server.

How can I add transitions and animations to my WebSlides presentation?

You can add transitions and animations to your WebSlides presentation by using CSS. CSS allows you to control the appearance and behavior of elements on your slides, including transitions and animations. For example, you can use the transition property to animate the change of a property from one value to another, or you can use the animation property to create more complex animations.

Can I use WebSlides on mobile devices?

Yes, WebSlides is designed to be responsive and works well on both desktop and mobile devices. However, please note that due to the smaller screen size, some elements may not display as intended on mobile devices. It’s recommended to test your presentation on different devices to ensure that it looks and works well on all platforms.

How can I add navigation controls to my WebSlides presentation?

You can add navigation controls to your WebSlides presentation by using the built-in navigation options. You can add arrows to navigate between slides, or you can add a slide counter to show the current slide number and the total number of slides. This can be done by adding the appropriate HTML and CSS code to your slides.

Can I use WebSlides with other web development tools?

Yes, you can use WebSlides with other web development tools. For example, you can use it with a text editor to write your HTML and CSS code, or you can use it with a version control system like Git to manage your project files. You can also use it with a build tool like Gulp or Grunt to automate tasks like minifying your code or compiling your CSS.

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, and React. When I'm not programming the Web, I love to program my own reality ;)

• Google Workspace
• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Google Slides

JavaScript quickstart

Quickstarts explain how to set up and run an app that calls a Google Workspace API.

Google Workspace quickstarts use the API client libraries to handle some details of the authentication and authorization flow. We recommend that you use the client libraries for your own apps. This quickstart uses a simplified authentication approach that is appropriate for a testing environment. For a production environment, we recommend learning about authentication and authorization before choosing the access credentials that are appropriate for your app.

Create a JavaScript web application that makes requests to the Google Slides API.

• Set up your environment.
• Set up the sample.
• Run the sample.

Prerequisites

• Node.js & npm installed.
• A Google Cloud project .
• A Google Account

Set up your environment

To complete this quickstart, set up your environment.

Enable the API

In the Google Cloud console, enable the Google Slides API.

Configure the OAuth consent screen

If you're using a new Google Cloud project to complete this quickstart, configure the OAuth consent screen and add yourself as a test user. If you've already completed this step for your Cloud project, skip to the next section.

Go to OAuth consent screen

• For User type select Internal , then click Create .
• Complete the app registration form, then click Save and Continue .

For now, you can skip adding scopes and click Save and Continue . In the future, when you create an app for use outside of your Google Workspace organization, you must change the User type to External , and then, add the authorization scopes that your app requires.

• Review your app registration summary. To make changes, click Edit . If the app registration looks OK, click Back to Dashboard .

Authorize credentials for a web application

Go to Credentials

• Click Create Credentials > OAuth client ID .
• Click Application type > Web application .
• In the Name field, type a name for the credential. This name is only shown in the Google Cloud console.
• Client-side apps (JavaScript) –Under Authorized JavaScript origins , click Add URI . Then, enter a URI to use for browser requests. This identifies the domains from which your application can send API requests to the OAuth 2.0 server.
• Server-side apps (Java, Python, and more) –Under Authorized redirect URIs , click Add URI . Then, enter an endpoint URI to which the OAuth 2.0 server can send responses.

Note the Client ID. Client secrets aren't used for Web applications.

• Click OK . The newly created credential appears under OAuth 2.0 Client IDs .

Make a note of these credentials because you need them later in this quickstart.

Create an API key

• Click Create credentials > API key .
• Click Copy content_copy to copy your API key for use in your app's code. The API key can also be found in the "API keys" section of your project's credentials.
• Click Restrict key to update advanced settings and limit use of your API key. For more details, see Applying API key restrictions .

Set up the sample

• In your working directory, create a file named index.html .

In the index.html file, paste the following sample code:

Replace the following:

• YOUR_CLIENT_ID : the client ID that you created when you authorized credentials for a web application .
• YOUR_API_KEY : the API key that you created as a Prerequisite .

Run the sample

In your working directory, install the http-server package:

In your working directory, start a web server:

• In your browser, navigate to http://localhost:8000 .
• If you're not already signed in to your Google Account, sign in when prompted. If you're signed in to multiple accounts, select one account to use for authorization.
• Click Accept .

Your JavaScript application runs and calls the Google Slides API.

• Troubleshoot authentication and authorization issues
• Slides API reference documentation
• google-api-javascript-client section of GitHub

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-04-03 UTC.

Create beautiful stories

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

WebSlides 1.5.0 Github

Why WebSlides?

Good karma & Productivity.

An opportunity to engage.

WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.

Work better, faster.

Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast .

→ Simple Navigation

Slide counter, 40 + beautiful components, vertical rhythm, 500 + svg icons, webslides demos.

Contribute on Github . View all ›

If you need help, here's just some tutorials. Just a basic knowledge of HTML is required:

• Components · Classes .
• WebSlides on Codepen .
• WebSlides Media: images, videos...

Built to expand

The best way to inspire with your content is to connect on a personal level:

• Background images: Unsplash .
• CSS animations: Animate.css .
• Longforms: Animate on scroll .

Ready to Start?

Create your own stories instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.

@jlantunez , @ant_laguna , and @luissacristan .

• SUGGESTED TOPICS
• The Magazine
• Newsletters
• Managing Yourself
• Managing Teams
• Work-life Balance
• The Big Idea
• Data & Visuals
• Reading Lists
• Case Selections
• HBR Learning
• Topic Feeds
• Account Settings
• Email Preferences

How to Make a “Good” Presentation “Great”

• Guy Kawasaki

Remember: Less is more.

A strong presentation is so much more than information pasted onto a series of slides with fancy backgrounds. Whether you’re pitching an idea, reporting market research, or sharing something else, a great presentation can give you a competitive advantage, and be a powerful tool when aiming to persuade, educate, or inspire others. Here are some unique elements that make a presentation stand out.

• Fonts: Sans Serif fonts such as Helvetica or Arial are preferred for their clean lines, which make them easy to digest at various sizes and distances. Limit the number of font styles to two: one for headings and another for body text, to avoid visual confusion or distractions.
• Colors: Colors can evoke emotions and highlight critical points, but their overuse can lead to a cluttered and confusing presentation. A limited palette of two to three main colors, complemented by a simple background, can help you draw attention to key elements without overwhelming the audience.
• Pictures: Pictures can communicate complex ideas quickly and memorably but choosing the right images is key. Images or pictures should be big (perhaps 20-25% of the page), bold, and have a clear purpose that complements the slide’s text.
• Layout: Don’t overcrowd your slides with too much information. When in doubt, adhere to the principle of simplicity, and aim for a clean and uncluttered layout with plenty of white space around text and images. Think phrases and bullets, not sentences.

As an intern or early career professional, chances are that you’ll be tasked with making or giving a presentation in the near future. Whether you’re pitching an idea, reporting market research, or sharing something else, a great presentation can give you a competitive advantage, and be a powerful tool when aiming to persuade, educate, or inspire others.

• Guy Kawasaki is the chief evangelist at Canva and was the former chief evangelist at Apple. Guy is the author of 16 books including Think Remarkable : 9 Paths to Transform Your Life and Make a Difference.

Partner Center

Baltimore high school athletic director used AI to create fake racist audio of principal: Police

Dazhon Darien allegedly retaliated against Eric Eisworth, investigators said.

Police arrested a Baltimore high school athletic director Thursday after they said they discovered he allegedly used artificial intelligence to create a phony audio recording of the school's principal that went viral and cost the school leader his job temporarily and his safety.

Principal Eric Eisworth was removed from his position at Pikesville High School after the school district began investigating the audio clip that was circulated among staff and social media in January where it appeared Eisworth made racist comments against Black and Jewish persons, investigators allege.

The three-month probe, which involved local police and the FBI, concluded that the audio was forged using AI tools by Dazhon Darien, the athletic director at the school, according to Baltimore Chief of Police Robert McCollough.

"Detectives alleged Mr. Darien…made the recording to retaliate against the principal who had launched an investigation into the potential mishandling of school funds," McCollough told reporters at a news conference Thursday.

MORE: Experts warn of rise in scammers using AI to mimic voices of loved ones in distress

The situation began on Jan. 16, when the recording that appeared to be a conversation between Eisworth and an assistant principal first circulated, according to the charging documents.

In the audio, Eisworth allegedly claimed Black students were unable to "test their way out of a paper bag" and made "disparaging comments" about Jewish individuals and two teachers, the charging document said.

Investigators said the audio had "profound repercussions" for Eisworth and the school community.

"It not only led to Eisworth's temporary removal but also triggered a wave of hate-filled messages on social media and numerous calls to the school," the charging document said.

As school officials began investigating the incident, Eisworth maintained that the conversation in the audio never happened and told investigators that Darien, 31, may have been involved because he was good with technology, according to the charging document.

Eisworth ordered an investigation into Darien in December over allegations that he misused school funds, the charging document said.

MORE: Father warns others about AI voice scams after his family lost $1k

Darien was one of three teachers who first received the audio from a mysterious e-mail, the charging document read. One of the other teachers told investigators she forwarded the message to a Pikesville High student "who she knew would rapidly spread the message around various social media outlets," according to the charging documents.

The unidentified teacher also forwarded the audio to several media outlets and groups including the NAACP, investigators said.

That teacher initially kept information from investigators that indicated that Darien was one of the original recipients of the message, the charging document said.

Related Stories

Athletic director used AI to frame principal with racist remarks in fake audio clip, police say

• Apr 25, 2:21 PM

Max Fried throws Atlanta's first 9-inning complete game since 2022, beats Marlins 5-0

• Apr 23, 9:21 PM

Man 'traumatized' after police release K-9 on him

• Apr 20, 10:31 PM

When Darien was questioned by investigators, he claimed that he did not know who the person was who sent him the audio, according to investigators. However, investigators were able to determine that the email address that sent out the audio was registered to Darien, the charging document said.

The Baltimore Police Department provided the audio to two forensic analysts who specialize in AI and they determined the recording had elements of AI-generated content, according to the charging document.

Detectives allege that Darien used his Large Language Models, such as OpenAI and Bing chat, to create the recording. The charging document claimed that Darien has a paid OpenAI account, which gives users more features than the free version.

He was arrested at Thurgood Marshall Airport Thursday morning as he was trying to board a flight to Houston and charged with several criminal counts including disrupting a school operation and stalking, police and charging documents said.

Investigators said that Darien tried to declare a gun at the airport and that triggered a security check that revealed the arrest warrant issued last night.

The investigation is ongoing.

Darien was released on a $5,000 unsecured bond Thursday afternoon. Attorney information for the defendant wasn't immediately available.

Baltimore County School Superintendent Myriam Rogers told reporters that the administrative process to discipline Darien has begun which she said could lead to his termination.

She added that the school is also investigating the other teachers who were involved in spreading the audio.

MORE: AI songs that mimic popular artists raising alarms in the music industry

Rogers said that for now, interim leaders would serve out the rest of the school year at Pikesville High School while the investigation continues.

"We will work with principal Eisworth and the Pikesville community concerning next year," she said.

"We are grateful we can bring some sense closure to the community and we can now shift our focus to moving forward and providing all parties with a fresh start," Rogers added.

Related Topics

• Artificial Intelligence

Kevin Bacon dances back to 'Footloose' high school

• Apr 21, 5:54 PM

Man admits to being gunman who carjacked woman in case involving drugs and money, affidavit says

• 4 hours ago

ABC News Live

24/7 coverage of breaking news and live events

Here's a barebones example of a fully working reveal.js presentation:

The presentation markup hierarchy needs to be .reveal > .slides > section where the section element represents one slide and can be repeated indefinitely.

If you place multiple section elements inside of another section they will be shown as vertical slides . The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence. For example:

It's also possible to write presentations using Markdown .

The reveal.js viewport is the wrapper DOM element that determines the size of your presentation on a web page. By default, this will be the body element. If you're including multiple presentations on the same page each presentations .reveal element will act as their viewport.

The viewport is always decorated with a reveal-viewport class reveal.js is initialized.

Slide States

If you set data-state="make-it-pop" on a slide <section> , "make-it-pop" will be applied as a class on the viewport element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.

You can also listen to these changes in state via JavaScript:

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

2024 NFL Draft preview: What is the hit rate on positions selected in first round?

With the 2024 NFL Draft so close, it's that time of year where fans start wondering who their favorite team is going to select. Will they choose the best player available, or draft for team needs? No matter the answer, the immediate reaction to whoever's name is called will be "Awesome! But how likely are they to succeed in the NFL?"

That's the billion dollar question, isn't it? While some players like Caleb Williams , Marvin Harrison Jr. , Joe Alt , and Dallas Turner are all considered "can't-bust" prospects and the best at their position in this year's class, no one is immune from busting. There is no way of knowing for certain which players will or won't succeed, but there are some patterns that can help us determine how well a player will perform. Most notably, their position.

While not every position gets drafted at the same rate in the first round, the expectations for first-round draftees are always the same: be a game-changer that takes your team to the next level. That's easier said than done though. However, some positions must be easier to scout, because there is a vast difference in levels of success between some positions in the league. So, which position produces the most/least serviceable NFL talent? Quarterbacks? Receivers? Offensive linemen? Defensive backs?

Here are the hit rates for every position in the NFL over the last twenty years based on various measurements of success.

2024 NFL Draft: Latest NFL mock draft picks for top 5 players

NFL DRAFT HUB: Latest NFL Draft mock drafts, news, live picks, grades and analysis.

Which positions earn a second contract or extension?

One way to determine NFL success is whether or not the team that drafted you wants to keep you around. Obviously, there are some instances where a team can't afford to keep someone coming off their rookie deal around, and that can really damage certain positions' percentages as markets in the NFL fluctuate.

For example, wide receivers are becoming more and more valuable by the day and their market keeps getting driven up. However, as they become more expensive, more and more teams will be unable to afford them, making it more likely they join a different team by the end of their rookie contracts. Running backs, on the other hand, keep seeing their value drop. Even though a great one can be an incredible weapon, their price tags make it more likely that teams will retain their star tailbacks.

At the same time though, a lot of halfbacks drafted in the first round are driven into the ground by the team that drafts them. Since they're so highly touted, they're often expected to be workhorses right away, and oftentimes, that can lead to regression by their fourth years. Many teams will refuse to re-sign their tailbacks in those cases because they've seen the regression first hand and don't want to pay for someone who isn't as good as they once were.

As you can see, offensive linemen have been pretty good bets to remain on their teams through their rookie contracts, whereas skill position players and DBs tend to be near the bottom. With that in mind, perhaps the best course of action for teams looking to rebuild would be to build the offensive line first, because they are the most likely players to stick around when their team eventually drafts a quarterback and weapons that can win them a Super Bowl while still only making rookie contract money.

Which positions create the most All-Pros?

Another measure of success could be first team All-Pro appearances. While the Pro Bowl is great, many skeptics believe the game to be a popularity contest that doesn't always put the league's best players on the proper pedestals. All-Pro selections are more or less concrete, although not bulletproof.

Some positions barely get any recognition in the All-Pro department. For example, quarterbacks only get one first team All-Pro every year. Players like Josh Allen, who are by no means a bust would not register on this metric since he's never been named first-team All-Pro.

Still, it's hard to argue against an All-Pro being a bust, so here is every first-round position ranked by how many First Team All-Pro selections they had between 2010 and 2019.

Surprisingly, a running back drafted in the first round is the most likely position to become an All-Pro at some point in the future. It makes sense. Given the way the NFL is headed in regards to running backs, it would take a truly incredible talent to warrant a first-round pick.

Of the 16 running backs drafted in the first round in the 2010s, five of them ended up first team All-Pros at one point or another in their careers (31%) – Josh Jacobs, Todd Gurley, Doug Martin, Ezekiel Elliott, and Christian McCaffrey.

After running backs, the next most likely positions to produce first team All-Pros are center (29%), guard (27%), and defensive back (23%). The least likely positions to produce first teamers are tight end (0%), quarterback (10%), and wide receiver (12%).

Will this year's heavy quarterback class produce any stars?

The 2024 draft class is very quarterback-heavy, with some experts predicting as many as six quarterbacks being selected in the first round this year – Caleb Williams, Jayden Daniels, Drake Maye, J.J. McCarthy, Michael Penix, and Bo Nix. Many believe that each of the first three picks of the draft will be quarterbacks.

The last time that happened was 2021 when Trevor Lawrence (Jacksonville), Zach Wilson (New York Jets), and Trey Lance (San Francisco) were taken with the first three picks. Although Trevor Lawrence was considered a generational prospect, he hasn't lived up to the hype quite yet. While he has led his team to the playoffs and even has a playoff win under his belt, he has not shown MVP-caliber talent like most people expected.

This year, a similar situation is upon us. USC's Caleb Williams is considered a generational talent at quarterback by some people, and he will likely be taken first overall. Clearly though, that doesn't guarantee he will be great in the NFL. Frankly, every other quarterback taken in the first round of that 2021 class wound up underwhelming in the NFL (with Justin Fields being an exception, as the court of public opinion is still undecided on him).

Of course, that doesn't mean the 2024 quarterback class is doomed to fail. It's just that although there are many chances for one of them to become a star, that is not a guarantee.

Since 1999, 74 quarterbacks have been taken in the first-round of the NFL Draft. USA Today's Jim Sergent lists that only 28 of those picks (38%) wound up being franchise stalwarts, while 39 would up being disappointments.

The hit rate on quarterbacks isn't spectacular in the first-round, but unless you're the 49ers and happen to stumble into a Pro Bowler with the last pick in the draft, there isn't much hope you'll find a franchise guy outside of the first round.

How to watch the 2024 NFL Draft:

• When:  April 25-27, 2024
• Where:  Campus Martius Park and Hart Plaza in Detroit, Michigan
• Time: 12 p.m. ET/9 a.m. PT
• TV:  ESPN; ABC; NFL Network
• Stream:  NFL+;  ESPN+ ; Hulu+ Live TV;  fuboTV

Watch the draft: Stream the 2024 NFL Draft with a Fubo subscription

We occasionally recommend interesting products and services. If you make a purchase by clicking one of the links, we may earn an affiliate fee. USA TODAY Network newsrooms operate independently, and this doesn’t influence our coverage.

Hints from Heloise: Tips on giving bones to dogs and creating unique nesting places for birds

• Published: Apr. 25, 2024, 9:00 a.m.

Heloise shares a tip bones that are okay for your dog to eat. Canva

Scratching those hard parts to reach

Dear Heloise: I have a bamboo back scratcher that I use frequently. Another use for it is to flip it over and apply a blob of thick lotion to the curve on the backside. I can easily reach parts of my back that itch this way. -- L.C.S., via email

RESPONSE TO “TRAVEL POLITELY”

Dear Heloise: A recent letter about politeness when traveling reminded me of a quote by author James A. Michener: “If you reject the food, ignore the customs, fear the religion and avoid the people, you might better stay at home.”

Our family’s lives have been enriched by traveling to different countries and interacting with the people of India, Nepal, Kenya, Zimbabwe, Zambia and others in Central America. -- Julie T., Harrisonburg, Virginia

FEEDING BONES TO YOUR DOG

Dear Heloise: I read this column every day in the Maui News. The reader in New Mexico is right about feeding bones to cats or dogs. Never feed “cooked” bones to any bone-eating animal. Here’s why:

Cooked bones splinter, but raw, uncooked bones shatter. Dogs can digest raw, shattered bones in as quick as two hours, but cooked bones can poke them and get stuck in their throat or digestive tract. It can even cause a painful death.

Thanks for so many of your great hints over the years! -- D. May, in Maui, Hawaii

DELIVERY BAGS

Dear Heloise: I use some of my package delivery bags in my small trash cans, like the ones in bathrooms and laundry rooms. I cut slits on the side so that they go over the cans.

I also use these bags when traveling to wrap bottles of liquid and to further protect my clothes. I use boxes from packages and fill them with items to be donated. I also use markers to cover up my name and address if I cannot remove the label. -- Jackie, in Colorado Springs, Colorado

TEAPOT NESTS

Dear Heloise: I had a charming old teapot that I loved. But one day, I dropped the lid, and it shattered. I was heartbroken to lose that little teapot, but my husband said we should hang it from the tree that is close to our kitchen window. He said birds would come and make a nest inside.

Sure enough, in two weeks, a bird built a nest in it, and that’s where she had her babies. Since then, I’ve bought two more teapots and hung them on the tree. Birds seem to love the teapots because they come back every year and make the trees their home. -- P.R., in Louisiana

QUICK LUNCHES

Dear Heloise: I work from home and have many Zoom meetings. Most last 45 minutes to an hour. I have found many things that I can put covered in an oven, set to 300 or 325 F, that are ready to eat by the time lunch comes around.

Here are some ideas: cut-up chicken and vegetables, baked potatoes, meatloaf, ham hash, pot pie, a stew or a soup, frozen vegetables, steak, baked apples and so on. Just add some liquid to the dishes. If things are not quite done, they finish up quickly in the microwave or stovetop. -- L.D., in Louisiana

KEEP YOUR EYES PEELED

Dear Readers: It’s so easy to get distracted on a beautiful, sunny day in spring, but remember to keep your eyes on the road. And make sure to pull over if you get sleepy. -- Heloise

Send a money-saving or timesaving hint to [email protected] . I can’t answer your letter personally but will use the best hints received in my column.

SEND A GREAT HINT TO: [email protected]

(c) 2024 by King Features Syndicate Inc.

If you purchase a product or register for an account through a link on our site, we may receive compensation. By using this site, you consent to our User Agreement and agree that your clicks, interactions, and personal information may be collected, recorded, and/or stored by us and social media and other third-party partners in accordance with our Privacy Policy.

Logi AI Prompt Builder

Free standard shipping on orders over $29.00

• Express Delivery
• Free Shipping
• Ukraine promo
• Carbon Neutral

Your shortcut to AI fluency

Build prompts faster, easier.

In today's fast-paced, technology-enabled world, everyone is learning to work differently with breakthroughs in Generative AI.

Mastering prompt building enhances your efficiency and creativity. That's why we developed the Logi AI Prompt Builder, a time and click-saving solution. Rephrase, summarize, and create custom-made prompt recipes with ChatGPT faster, with virtually no disruption to your workflow.

WHAT USERS ARE SAYING Testimonials collected in a user study commissioned by Logitech in which participants have received an incentive for their participation.

“It felt like having an assistant AI directly integrated in my computer, which helped me improve any of the actions or activities I wanted to do”

Marina, HSSE/Manager and Writer, Switzerland

“ It's genius, I love shortcuts and use them a lot ”

Melina,  University Researcher, Germany

“I'm shocked that this hasn’t existed before or that I am aware… A time saver compared to the normal way of accessing ChatGPT”

Alan, Software Developer, United Kingdom

Available for your Logitech mouse and keyboard

Install free Logi Options+ App to enable Logi AI Prompt Builder for your Logitech mice and  keyboards.

HOW TO GET STARTED

Download and Install Logi Options+ App or update it to the latest version

Click on the Logi AI Prompt Builder icon in the Options+ App

Assign Logi AI Prompt Builder to your Logitech mouse button or keyboard key

Trigger Logi AI Prompt Builder by pressing the assigned button or key

Get the Signature AI Edition mouse

For a limited time only, exclusively on logitech.com Get the limited edition mouse with a customizable button preconfigured to trigger Logi AI Prompt Builder. It brings instant, in-context access to ChatGPT while also simplifying and accelerating prompt building.

Logi Options+ App is required to use Logi AI Prompt Builder.

RECOMMENDED PRODUCTS

System requirements, compatibility, do i have to pay to use logi ai prompt builder.

The version of the Logi AI Prompt Builder is free to use. We will continue to develop new features and there may be a paid premium version in the future.

Is Logi AI Prompt Builder available in English only?

Today Logi AI Prompt Builder is available in English only. We are working to expand to other languages.

Does Logitech have access to the data submitted through Logi AI Prompt Builder?

No, Logitech does not access or store the data you input with your ChatGPT queries. Logitech does not share any personal data or other data with OpenAI, nor does OpenAI share any personal data or other data with Logitech.

Does it only work with ChatGPT?

This version of Logi AI Prompt Builder works with ChatGPT only. We plan to add compatibility with other AI tools in the future.

Is Logi AI Prompt Builder available only for Logitech mice and keyboards?

The AI Prompt Builder is available for Logi Options+ supported mice and keyboards only. Check Device Support

Do I need to pay for ChatGPT to use Logi AI Prompt Builder?

Logi AI Prompt Builder will work with whatever account you already have in ChatGPT, free or paid. You don’t need to have a paid account for it to work. If you are using a paid account, note that using Logi AI Prompt builder will count towards your usage.

How can I access Logi AI Prompt Builder?

The AI Prompt Builder is available via Logi Options+ App for Windows 10 and higher or macOS 12 or higher.

How do I request a new feature or report an issue with Logi AI Prompt Builder?

To create the best experience for all, we encourage and welcome input. Please click the Feedback button in the Logi AI Prompt Builder to share your feedback.

Is Logi AI Prompt Builder available globally?

The Logi AI Prompt Builder is available for Logi Options+ supported mice and keyboards in English language.

Signature AI Edition mouse is available in the US and UK while stocks last.

System Requirements System Requirements

Windows 10 and higher macOS 12 and higher

Compatibility Compatibility

Logi AI Prompt Builder is available through Logi Options+ App for Logitech mice and keyboards supported by this App.  Check Device Support . You need to have the latest version of Logi Options+ installed.

Languages Languages

Legal trademark statement.

Logitech, Logi, Logi Options+ and their logos are trademarks or registered trademarks of Logitech Europe S.A. and/or its affiliates in the U.S. and other countries.

Windows is a trademark of the Microsoft Corporation. macOS is a trademark of Apple Inc. Logitech. ChatGPT is a trademark of OpenAI, L.P. All other third party trademarks are the property of their respective owners.

Item Subtotal: (Not Including Tax or Shipping)

We'll email you when this product becomes available for purchase

Get the latest from Logitech

Yes, I want to receive news and products emails from Logitech.

Thank you for signing up.

What a TikTok ban in the US could mean for you

No, TikTok will not suddenly disappear from your phone. Nor will you go to jail if you continue using it after it is banned.

After years of attempts to ban the Chinese-owned app , including by former President Donald Trump , a measure to outlaw the popular video-sharing app has won congressional approval and is on its way to President Biden for his signature. The measure gives Beijing-based parent company ByteDance nine months to sell the company, with a possible additional three months if a sale is in progress. If it doesn’t, TikTok will be banned.

So what does this mean for you, a TikTok user, or perhaps the parent of a TikTok user? Here are some key questions and answers.

WHEN DOES THE BAN GO INTO EFFECT?

The original proposal gave ByteDance just six months to divest from its U.S. subsidiary, negotiations lengthened it to nine. Then, if the sale is already in progress, the company will get another three months to complete it.

So it would be at least a year before a ban goes into effect — but with likely court challenges, this could stretch even longer, perhaps years. TikTok has seen some success with court challenges in the past, but it has never sought to prevent federal legislation from going into effect.

WHAT IF I ALREADY DOWNLOADED IT?

TikTok, which is used by more than 170 million Americans, most likely won’t disappear from your phone even if an eventual ban does take effect. But it would disappear from Apple and Google’s app stores, which means users won’t be able to download it. This would also mean that TikTok wouldn’t be able to send updates, security patches and bug fixes, and over time the app would likely become unusable — not to mention a security risk.

BUT SURELY THERE ARE WORKAROUNDS?

Teenagers are known for circumventing parental controls and bans when it comes to social media, so dodging the U.S. government’s ban is certainly not outside the realm of possibilities. For instance, users could try to mask their location using a VPN, or virtual private network, use alternative app stores or even install a foreign SIM card into their phone.

But some tech savvy is required, and it’s not clear what will and won’t work. More likely, users will migrate to another platform — such as Instagram, which has a TikTok-like feature called Reels , or YouTube, which has incorporated vertical short videos in its feed to try to compete with TikTok. Often, such videos are taken directly from TikTok itself. And popular creators are likely to be found on other platforms as well, so you’ll probably be able to see the same stuff.

“The TikTok bill relies heavily on the control that Apple and Google maintain over their smartphone platforms because the bill’s primary mechanism is to direct Apple and Google to stop allowing the TikTok app on their respective app stores,” said Dean Ball, a research fellow with the Mercatus Center at George Mason University. “Such a mechanism might be much less effective in the world envisioned by many advocates of antitrust and aggressive regulation against the large tech firms.”

SHOULD I BE WORRIED ABOUT USING TIKTOK?

Lawmakers from both parties — as well as law enforcement and intelligence officials — have long expressed concerns that Chinese authorities could force ByteDance to hand over data on the 170 million Americans who use TikTok. The worry stems from a set of Chinese national security laws that compel organizations to assist with intelligence gathering - which ByteDance would likely be subject to – and other far-reaching ways the country’s authoritarian government exercises control.

Data privacy experts say, though, that the Chinese government could easily get information on Americans in other ways, including through commercial data brokers that sell or rent personal information.

Lawmakers and some administration officials have also expressed concerns that China could - potentially – direct or influence ByteDance to suppress or boost TikTok content that are favorable to its interests. TikTok, for its part, has denied assertions that it could be used as a tool of the Chinese government. The company has also said it has never shared U.S. user data with Chinese authorities and won’t do so if it’s asked.

Advertisement

Opening Statements in Trump’s Criminal Trial: Five Takeaways

Prosecutors signaled a sweeping case and Donald J. Trump’s lawyers began their assault on witnesses’ credibility. The judge seems intent on expediting the first trial of an American president.

• Share full article

By Jesse McKinley and Kate Christobek

• April 22, 2024

Monday marked another key moment in the criminal trial of Donald J. Trump: opening statements, during which the former president listened quietly to the prosecution’s allegations of crimes, and the defense’s counterargument that he was a simple man, wrongly accused.

The jury that will decide Mr. Trump’s case concentrated intently on the statements, which began the presentation of what will be weeks of testimony and other evidence, all in a tense courtroom in Lower Manhattan.

The presumptive Republican presidential nominee once more, Mr. Trump, 77, is charged with falsifying 34 business records in an attempt to cover up a payment to a porn star, Stormy Daniels, in the days before the 2016 election. Ms. Daniels, who may testify, says that she and Mr. Trump had a sexual encounter in 2006, a claim the former president denies.

Mr. Trump has also denied the 34 felony charges, calling them orchestrated by Democrats; if convicted, the former president could face probation or up to four years in prison.

Here are five takeaways from Mr. Trump’s fifth day on trial:

The prosecution has a big story to tell.

The charges faced by Mr. Trump may sound bland — “falsifying business records” doesn’t really set the heart racing — but the prosecution made clear on Monday that it plans on painting a much broader picture.

Matthew Colangelo, a prosecutor, laid out in his opening statement a tale that touched on tabloid journalism , tawdry affairs and covertly recorded phone calls . Jurors will likely be told about events inside fancy hotel rooms, Trump Tower and even the Oval Office. And the stakes? The presidency.

All that suggests that the case will keep jurors wide-awake during the six or so weeks it is projected to take. Indeed, when asked if they wanted paper and pens to take notes, more than half of the people in the jury box (12 jurors and six alternates) raised their hands.

Who Are Key Players in the Trump Manhattan Criminal Trial?

The first criminal trial of former President Donald J. Trump is underway. Take a closer look at central figures related to the case.

The defense wants to destroy prosecution witnesses.

Mr. Trump’s lead lawyer, Todd Blanche, used his opening statement to cast Mr. Trump’s actions leading to this case as run-of-the-mill business, and said that Mr. Trump is defending himself at trial, just as “any of us would do.”

He argued that the use of a nondisclosure agreement — the document Ms. Daniels signed after receiving the payment — was typical among the wealthy and the famous and “nothing illegal.” He continued that there was nothing wrong with trying to influence an election, adding: “It’s called democracy.”

Mr. Blanche also attacked Mr. Cohen, a former lawyer and fixer for Mr. Trump. He said Mr. Cohen, who pleaded guilty to federal campaign finance crimes in 2018, was a “criminal” who “can’t be trusted.” He added that Ms. Daniels was “biased” against Mr. Trump and made a living off her story about the sexual encounter.

He called the heart of the prosecution case just “34 pieces of paper” that don’t involve Mr. Trump.

Trump was muted during the abbreviated day in court.

On Mr. Trump’s way into the courtroom on Monday, he addressed reporters for about three minutes and blasted a range of perceived enemies, including New York’s attorney general, Letitia James, and the judge in a recent civil fraud case that resulted in a $454 million judgment against him.

But Mr. Trump’s behavior during opening statements reflected that he understood the gravity of the moment.

Mr. Trump made no outbursts during the prosecution’s opening statement, although he occasionally showed displeasure: He shook his head slightly at arguments that he orchestrated a scheme to corrupt the presidential election and then more strenuously when prosecutors said he was guilty of felonies.

During his own side’s opening statement, Mr. Trump sat largely motionless and expressionless watching his lawyer Mr. Blanche. Mr. Trump’s behavior was muted compared with his volatility during past Manhattan court appearances.

But at the conclusion of the trial day, Mr. Trump took his preferred spot in front of a television camera in the hallway, and spoke for more than nine minutes, attacking the prosecutor’s case — once again — as unfair.

David Pecker used to live on celebrity news. Now, he is the news.

Prosecutors’ first witness was David Pecker, the longtime publisher of The National Enquirer . He ambled to the stand and promptly gave a lesson in the ways of tabloid journalism, including the purchasing of articles — anything more than $10,000, he had to approve — and the significance of putting a famous face right out front.

“The only thing that was important is the cover of a magazine,” Mr. Pecker testified.

In about 30 minutes of testimony, Mr. Pecker also laid out trade secrets on sourcing, saying hotel workers and limo drivers could be a font of information on the rich and famous.

He seemed at ease: laughing at a prosecutor’s jokes, and sometimes directly addressing the jury just a few feet away.

We’re moving right along.

Over the past five trial days, the judge overseeing the case, Juan M. Merchan, has shown that he is eager to keep this trial on schedule. He seems serious about keeping his word to the jurors that the trial will last six weeks.

On Monday, truncated by a juror’s dental emergency and the Passover holiday, he decided to start with the first witness — Mr. Pecker — despite having only half an hour left on his schedule.

On Tuesday, the court will first consider a prosecution motion to hold Mr. Trump in contempt over recent comments that they say violated a gag order meant to keep him from attacking participants in the trial and their families.

Then, Mr. Pecker will continue on the stand, probably diving deeper into the “catch-and-kill” scheme used to buy up — and cover up — unflattering stories, a central element of the prosecution’s narrative.

Court will end early again, at 2 p.m., for further observance of Passover and then will have its weekly Wednesday break.

But there is little indication that as the weeks pass, Justice Merchan will let the pace slacken.

Jesse McKinley is a Times reporter covering upstate New York, courts and politics. More about Jesse McKinley

Kate Christobek is a reporter covering the civil and criminal cases against former president Donald J. Trump for The Times. More about Kate Christobek

Our Coverage of the Trump Hush-Money Trial

News and Analysis

Prosecutors accused Donald Trump of violating a gag order four additional times , saying that he continues to defy the judge’s directions  not to attack witnesses , prosecutors and jurors in his hush-money trial.

Trump’s criminal trial in Manhattan is off to an ominous start for the former president, and it might not get any easier  in the days ahead. Here’s why.

The National Enquirer  was more than a friendly media outlet  for Trump’s presidential campaign in 2016. It was a powerful, national political weapon that was thrust into the service of a single candidate , in violation of campaign finance law.

More on Trump’s Legal Troubles

Key Inquiries: Trump faces several investigations  at both the state and the federal levels, into matters related to his business and political careers.

Case Tracker:  Keep track of the developments in the criminal cases  involving the former president.

What if Trump Is Convicted?: Could he go to prison ? And will any of the proceedings hinder Trump’s presidential campaign? Here is what we know , and what we don’t know .

Trump on Trial Newsletter: Sign up here  to get the latest news and analysis  on the cases in New York, Florida, Georgia and Washington, D.C.