html presentation software

5 of the Best Free HTML5 Presentation Systems

Share this article

Google Slides Template

Frequently asked questions (faqs) about html5 presentation systems.

I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. It doesn’t matter how you change the colors, backgrounds, fonts or transitions — everyone can spot a PPT from a mile away. Fortunately, we now have another option: HTML5. Or, more specifically, HTML5 templates powered by JavaScript with CSS3 2D/3D transitions and animations. The benefits include:

• it’s quicker to add a few HTML tags than use a WYSIWYG interface
• you can update a presentation using a basic text editor on any device
• files can be hosted on the web; you need never lose a PPT again
• you can easily distribute a presentation without viewing software
• it’s not PowerPoint and your audience will be amazed by your technical prowess.
• you require web coding skills
• positioning, effects and transitions are more limited
• few systems offer slide notes (it’s a little awkward to show them separately)
• it’s more difficult to print handouts
• S5 — A Simple Standards-Based Slide Show System ( download )
• CSSS — CSS-based SlideShow System ( download )
• Slides ( download )
• HTML5Rocks (no direct downloads, but you can copy the source)

What are the key features to look for in an HTML5 presentation system?

When choosing an HTML5 presentation system, consider features such as ease of use, customization options, and compatibility with various devices. The system should have an intuitive interface that allows you to create presentations without any coding knowledge. Customization options are important for personalizing your presentation to match your brand or style. Additionally, the system should be compatible with different devices, including desktops, laptops, tablets, and smartphones, to ensure your audience can view your presentation without any issues.

How does HTML5 improve the presentation experience compared to traditional methods?

HTML5 enhances the presentation experience by offering interactive and dynamic content. Unlike traditional methods, HTML5 allows for the integration of multimedia elements like videos, audio, and animations directly into the presentation. This makes the presentation more engaging and interactive for the audience. Additionally, HTML5 presentations are web-based, meaning they can be accessed from any device with an internet connection, providing convenience and flexibility for both the presenter and the audience.

Are HTML5 presentations compatible with all browsers?

HTML5 presentations are generally compatible with all modern web browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. However, there may be slight variations in how different browsers render HTML5 content. Therefore, it’s always a good idea to test your presentation on multiple browsers to ensure it displays correctly.

Can I use HTML5 presentation systems for professional purposes?

Yes, HTML5 presentation systems are suitable for a variety of professional purposes. They can be used for business presentations, educational lectures, product demonstrations, and more. The ability to incorporate multimedia elements and interactive features makes HTML5 presentations a powerful tool for conveying complex information in an engaging and understandable way.

How can I make my HTML5 presentation accessible to all users?

To make your HTML5 presentation accessible, ensure that all content is readable and navigable for users with different abilities. This includes providing alternative text for images, captions for videos, and using clear and simple language. Additionally, make sure your presentation is responsive, meaning it adjusts to fit different screen sizes and orientations.

Can I convert my existing PowerPoint presentations to HTML5?

Yes, many HTML5 presentation systems offer the ability to import and convert PowerPoint presentations. This allows you to leverage your existing content while benefiting from the enhanced features and capabilities of HTML5.

Do I need to know how to code to use HTML5 presentation systems?

While having some knowledge of HTML5 can be beneficial, many HTML5 presentation systems are designed to be user-friendly and do not require any coding skills. These systems often feature drag-and-drop interfaces and pre-designed templates to help you create professional-looking presentations with ease.

Can I share my HTML5 presentations online?

Yes, one of the major advantages of HTML5 presentations is that they can be easily shared online. You can publish your presentation on your website, share it via email, or even embed it in a blog post or social media update.

Are HTML5 presentations secure?

HTML5 presentations are as secure as any other web content. However, it’s important to follow best practices for web security, such as using secure hosting platforms and regularly updating your software to protect against potential vulnerabilities.

Can I track the performance of my HTML5 presentations?

Yes, many HTML5 presentation systems include analytics features that allow you to track viewer engagement and behavior. This can provide valuable insights into how your audience interacts with your presentation, helping you to improve and refine your content over time.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler .

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

Jan 14, 2022, 7 min read

Understanding the Container Component Pattern with React Hooks

{post.frontmatter.excerpt}

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 786k.

Contributors 323

• JavaScript 59.4%

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

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

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

Building a Better RAG: A Practical Guide to Two-Step Retrieval with LangChain

ahgsql - Apr 22

20+ DOM Projects: Your Frontend Breakthrough!

Jisan Mia - May 15

Official Nuxt Certification Arrives! Early Bird pre-orders are open.

Ana Marija Majkic - Apr 23

Survival prediction for Titanic passengers using logistic regression.

vaibhav - Apr 22

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

Make a Keynote presentation using HTML

WebSlides is an open source framework for building HTML presentations, landings, and portfolios.

HTML presentations can be easy

→ simple navigation, slide counter, 40 + beautiful components, vertical rhythm, 500 + svg icons, webslides was made to inspire people..

WebSlides is a wonderful way to showcase your company. All content is for demo purposes only. Images are property of their respective owners.

WebSlides help you build a culture of excellence.

The art of storytelling. Hypertext, clean code, and beauty as narrative elements. Just essential features and lovely CSS. All content is for demo purposes only.

• Founded 1976
• 524M Subscribers
• Revenue: $16M
• Monthly Growth 64%
• 14K Employees

iPhone 7 in first 24 hours

$48 billion, revenue in q4 2024, we're working to protect up to a million acres of sustainable forest..

3D Touch, 12MP photos, and 4K video.

Every iPhone they have made was built on the same belief. That a phone should be more than a collection of features. That, above all, a phone should be absolutely simple, beautiful, and magical to use.

We worked closely with the very talented people at Acme and created a new website. Content demo.

• Client: Apple (2016)
• Services: Web Design
• Website: apple.com/iphone

Ultra-Fast WiFi

Two cameras that shoot as one., lifetime warranty.

Redesigning Pay

We've been working with the Acme team over the last three months to build a new app.

Case study › Open site ›

Payments Made Simple

Apple Pay is so easy. Pay with your debit cards and credit cards with just a touch.

Your card is never stored. Apple Pay uses a device-specific number and unique transaction code.

Apple Pay works with most major credit and debit cards from nearly all banks.

Incredibly fast

Works with all major banks, the safer way to pay.

Use your iPhone to pay securely and easily at over a million store locations and within apps — with a single touch. See where you can use Apple Pay:

I'm an optimist in the sense that I believe humans are noble and honorable, and some of them are really smart. I have a very optimistic view of individuals. --> Steve Jobs.

“We see that privacy is a fundamental human right that people have. We are going to do everything that we can to help maintain that trust.” Tim Cook, CEO of Apple.

Header .alignright

Simple CSS Alignments

Put content wherever you want.

1/9 left top

Put content wherever you want. Have less. Do more. Create beautiful solutions.

.slide-top and .content-left

2/9 center top

Apple I was designed and hand-built by Steve Wozniak. Steve Jobs had the idea of selling the computer.

.slide-top and .content-center

3/9 right top

The Apple II is one of the first highly successful computers.

.slide-top and .content-right

4/9 left center

The Apple III is a business-oriented personal computer that was intended as the successor to the Apple II series.

.content-left

Apple Lisa was one of the first personal computers to offer a graphical user interface.

.content-center

6/9 right center

The Macintosh was the company's first mass-market personal computer featuring a GUI and mouse.

.content-right

7/9 left bottom

The iBook was a line of laptop computers designed and marketed by Apple Inc. from 1999 to 2006.

.slide-bottom and .content-left

8/9 center bottom

Apple introduced the first generation iPod on October 23, 2001, with the slogan "1,000 songs in your pocket".

.slide-bottom and .content-center

9/9 right bottom

The original iPhone was introduced by Steve Jobs on January 9, 2007. Jobs introduced the iPhone as a combination of three devices.

.slide-bottom and .content-right

CSS Animations

Fadein transition to all slides.

Just 5 basic animations: .fadeIn, .fadeInUp, .zoomIn, .slideInLeft, and .slideInRight.

Embedding Media

Youtube api.

Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.

.embed (responsive)

Think Different

Overlay: fullscreen.bg-black > .embed.dark or .light

One more thing...

San Francisco

The quick brown fox jumps over the lazy dog .

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890(,.;:?!$&*)

Start in seconds

120+ prebuilt slides ready to use.

Free Download Pay what you want.

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.

You might also like

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

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.

You are using an outdated browser. Please upgrade your browser to improve your experience.

Ready to make impressive presentations?

Get Started

Learn About Strut

The Slide Editor

Learn how the Slide Editor is organized and what things are called.

The Transition Editor

Get an introduction to the transition editor. How to create simple transitions and use pre-made transitions.

Backgrounds

Learn a little more about the difference between backgrounds and surfaces as well as how to use background images.

Online/Offline

Store your presentations on Strut.io or use Strut in offline mode.

View details »

Present on any device

All you need is a web browser. Strut presentations work on desktops, laptops, mobile devices and tablets.

Export your presentations or host them on Strut.io to share with colleagues.

Multi-framework Support

Create beautiful stories

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

Why WebSlides?

Presentations , landings , portfolios , and longforms .

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 ›

Apple Keynote

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

• WebSlides Components .
• WebSlides Classes .
• 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 presentation 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.

Best, @jlantunez , @belelros , and @luissacristan .

Best presentation software of 2024

Make perfect slides for speeches and talks

Best overall

Best for branding, best for marketing, best for themes, best for media, best unique.

• How we test

The best presentation software makes it simple and easy to create, manage, and share slideshow presentations.

1. Best overall 2. Best for branding 3. Best for marketing 4. Best for themes 5. Best for media 6. Best unique 7. FAQs 8. How we test

Presentation software runs at the heart of business sales, management, and development, so it's important to ensure you have the best presentation software for your needs. This is especially when looking to share ideas, concepts, and workflows, and the ability to present these in a simple and understandable way is essential.

However, while presentation software has been traditionally limited to text and images, it has widened its ability to work with different media such as video and audio. 

Therefore it's important for the best presentation software to not simply be easy and simple to use, but also be able to support additional media so that presentations can be more engaging, lively, and ultimately serve their purpose in educating and updating their intended audience.

Below we've listed the best presentation software currently on the market.

We've also listed the best free presentation software .

The best office software in the world is: Microsoft 365 There are many different office software suites out there, but Microsoft Office remains the original and best, offering an unsurpassed range of features and functionality that rivals just can't match.

Even better, Microsoft 365 - previously branded as Office 365 - is a cloud-based solution which means you can use it on any computer, mobile device, or smartphone, without having to worry about compatibility. All your files are saved in the cloud and synced between devices, so you can begin work on a document at home or in the office, then continue working on it on the go.

You can sign up to Microsoft 365 here .

The best presentation software of 2024 in full:

Why you can trust TechRadar We spend hours testing every product or service we review, so you can be sure you’re buying the best. Find out more about how we test.

1. PowerPoint

Our expert review:

Reasons to buy

For most people, Microsoft 's PowerPoint remains the original and best of all the presentation software platforms out there. While other companies have managed to catch up and offer rival products worthy of consideration, the fact is that PowerPoint's familiar interface and ubiquitous availability means it remains a favorite for the majority of people.

On the one hand, it's long been a staple of the hugely popular Microsoft Office suite, meaning that for most users this is going to be the first - and last - presentation software they are going to need to use.

Additionally, Microsoft has made PowerPoint, along with their other office products, available as free apps (with limited functionality) on both iOS and Android for mobile use, meaning it's even harder to avoid them. And this is before we even consider the inclusion of PowerPoint in Microsoft's cloud-based Microsoft 365.

It does everything necessary that you'd expect of presentation software, allowing you to add text and media to a series of slides, to accompany a talk and other presentations. There are easy-to-use templates included to help spice things up a little, but even a general user with little experience of it is likely to find themselves able to use PowerPoint without much trouble at all.

Overall, it's hard to go wrong with PowerPoint, and although Microsoft 365 has a nominal cost, the apps are free to use even if they do have more limited functionality.

Read our full Microsoft PowerPoint review .

• ^ Back to the top

2. CustomShow

Reasons to avoid.

Branding says a lot about a business, and it’s something firms need to get right from day one – from a good logo to a suitable font. CustomShow is business presentation software that puts all these elements of branding first.

Using the system, you can design and present customized, branded presentations that reflect your company and the products you offer, featuring the aforementioned logo and custom fonts. As well as this, you get a slide library and analytics to ensure your presentations are a success.

What’s more, you can import presentations into the software, and use it to tweak them further. There’s also integration with SalesForce , and because the platform is cloud-based, you can access your presentations on computers, tablets, and smartphones. 

Considering the focus on branding, this offering could be good for marketing and sales teams, and it's used by major companies such as HBO and CBS Interactive.

3. ClearSlide

Just like CustomShow, ClearSlide has a niche focus for companies. The platform is targeted at firms looking to generate successful marketing campaigns, pushing sales via presentations (and more), not least through a range of analytics and metrics to work for sales and marketing.

With the product, you can upload a range of files, including PowerPoint, Keynote, PDF, and Excel. ClearSlide is integrated with other platforms, including Google Drive, Dropbox, and Salesforce.

This system is pretty complex and may offer too many irrelevant features for some businesses, but you can create customized content that reflects your company and the message you’re trying to get out to customers. There are also some good metrics and analysis features, and you can sign up for a free trial before making any decisions.

The real strength of ClearSlide comes from its focus on sales and marketing data, not least being able to track user engagement alongside other metrics.

4. Haiku Deck

Any presentation app will allow you to personalize your slides to at least some extent, but Haiku Deck goes one step further than the competition. It comes with a wide range of themes suited to different needs, and you also get access to 40 million free images from the Creative Commons collection.

When it comes to creating a presentation, you have the option to do so on the web, which means your presentation is accessible across a range of mobile devices as well as desktops. Regardless of the device used, you’re able to select from a variety of different fonts, layouts, and filters to make the perfect presentation.

The great thing about these various customization options is that they’re categorized into different industries and use cases. For instance, you’ll find themes for teaching, cooking, real estate, and startups. Most of the features require you to be online, but hopefully, you’ll have a sturdy net connection wherever you go.

5. SlideDog

It’s all too easy to end up creating a presentation that’s unappealing, and the last thing you want to do is make the audience fall asleep. SlideDog lets you combine almost any type of media to create a rich presentation that’s sure to keep the viewers’ peepers open, avoiding the ‘cookie cutter’ look that makes presentations seem dull.

Marketed as a web-based multimedia presentation tool, it gives you the ability to combine PowerPoint presentations, graphics, PDF files, Prezi presentations, web pages, pictures, videos, and movie clips. You can drag these into custom playlists and display them to your audience with ease.

You’re able to remotely control your presentations and playlists from your smartphone, the web, or a secondary computer, and there’s also the option to share slides in real-time. Audience members can even view your slide from their own devices by clicking a link. That’s a handy feature if you’re looking to create an immersive presentation experience.

SlideDog is probably the cheapest of the presentation software featured, with a free account that will cover the essential features. However, for live sharing and premium support, you need to upgrade.

Read our full SlideDog review .

Prezi is one of the more unique presentation tools. Instead of presenting your graphics and text in a slide-to-slide format, you can create highly visual and interactive presentation canvases with the goal of “emphasizing the relationship between the ideas”.

Presentations can also be tailored to the specific audience, as this is a flexible platform that’s capable of skipping ahead, or veering off into a side topic, without having to flip through all the slides to get to a particular bit.

For business users, there are a variety of handy tools available. By downloading Prezi , you can build and edit presentations with your colleagues in real-time, which is perfect for companies with teams based around the globe.

When you have created a presentation you’re happy with, you can present it live (in HD) and send a direct link to viewers. There are some analysis tools here, too – you can see who’s accessed your presentation, which parts of it, and for how long. The app is available for Mac and Windows devices.

Read our full Prezi review .

Other presentation software to consider

Google Slides  is part of the Google Workspace (formerly G Suite) office platform intended as an online alternative to Microsoft Office. It may seem a little limited by comparison to PowerPoint, but as it's browser-based that means cross-platform compatibility. Additionally, it allows for collaborative work, and Google Slides really works well here. On top of the fact that it integrates with the rest of the Google Workspace apps, not least Google Drive, and you have a contender. 

Zoho Show  is another of the many, many tools and apps that Zoho has made available for business use. It also operates in the cloud so it's accessible to any device with a browser, and it also allows for collaborative work. You can also easily share the link for users to download, or provide a live presentation online. The updated version has a simpler and easier to use interface and comes with a free version and a paid-for one with expanded features.

Evernote  is normally thought of as just note-taking software, but it does provide the option to create a presentation you can share online or with an audience. In that regard, it's a little more limited than the other options in not being dedicated presentation software. However, as an easy and handy way to pull together a presentation quickly, it could serve as a backup or last-minute option, especially if Evernote is already being commonly used by you.

LibreOffice Impress  is part of the open-source suite offered as a free alternative to Microsoft Office, and comes with a powerful array of tools and editing options for your presentation, not least working with 3D images. It's supported by a large community, so it's easy to find an array of additional templates. If there is a limitation it's that it's software you download and install rather than web-based, but any presentations created should be easily portable to the web if needed.

Adobe Spark  does things a bit differently, as rather than just use images it's geared toward video as well. This makes for potentially more powerful multimedia presentations, especially as Adobe also has a big selection of photos and images available for its users. There is a free tier for core features but requires a subscription for custom branding, personalized themes, and support.

Slides  comes with a lot of features in an easy-to-use interface, and involves setting up presentations using drag and drop into an existing grid. It's also internet-based so there's no software to download, and it only requires a browser to use and access. 

Presentation software FAQs

Which presentation software is best for you.

When deciding which presentation software to download and use, first consider what your actual needs are, as sometimes free platforms may only provide basic options, so if you need to use advanced tools you may find a paid platform is much more worthwhile. Additionally, free and budget software options can sometimes prove limited when it comes to the variety of tools available, while higher-end software can really cater for every need, so do ensure you have a good idea of which features you think you may require for your presentation needs.

How we tested the best presentation software

To test for the best presentation software we first set up an account with the relevant software platform, whether as a download or as an online service. We then tested the service to see how the software could be used for different purposes and in different situations. The aim was to push each software platform to see how useful its basic tools were and also how easy it was to get to grips with any more advanced tools.

Read how we test, rate, and review products on TechRadar .

We've also featured the best alternatives to Microsoft Office .

Get in touch

• Want to find out about commercial or marketing opportunities? Click here
• Out of date info, errors, complaints or broken links? Give us a nudge
• Got a suggestion for a product or service provider? Message us directly
• You've reached the end of the page. Jump back up to the top ^

Are you a pro? Subscribe to our newsletter

Sign up to the TechRadar Pro newsletter to get all the top news, opinion, features and guidance your business needs to succeed!

Nicholas Fearn is a freelance technology journalist and copywriter from the Welsh valleys. His work has appeared in publications such as the FT, the Independent, the Daily Telegraph, The Next Web, T3, Android Central, Computer Weekly, and many others. He also happens to be a diehard Mariah Carey fan!

• Jonas P. DeMuro

Adobe Fresco (2024) review

Adobe Illustrator (2024) review

Shop the 19 best tech deals from Amazon's massive Memorial Day sale

Most Popular

• 2 I tried Samsung’s best OLED TV with its flagship Dolby Atmos soundbar, and the audio combo is out of this world
• 3 Scientists create memory technology capable of withstanding temperatures of up to 1,100°
• 4 10 million iSIM set to arrive by 2026, possibly spelling the end of SIM cards
• 5 As a fitness writer, I wouldn’t recommend following Zac Efron’s Iron Claw workout regime
• 2 Best Amazon Singapore deals May 2024: score big discounts on tech, appliances and more
• 3 I tried Samsung’s best OLED TV with its flagship Dolby Atmos soundbar, and the audio combo is out of this world
• 4 Pilates instructor recommends these 5 moves to undo the damage of sitting at a desk all day
• 5 This tiny motherboard plugs in a memory slot and barely bigger than a business card — LattePanda's minuscule MU packs an N100 CPU, 8GB RAM and can even run an Nvidia GPU

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

HTML: HyperText Markup Language

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation ( CSS ) or functionality/behavior ( JavaScript ).

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <head> , <title> , <body> , <header> , <footer> , <article> , <section> , <p> , <div> , <span> , <img> , <aside> , <audio> , <canvas> , <datalist> , <details> , <embed> , <nav> , <search> , <output> , <progress> , <video> , <ul> , <ol> , <li> and many others.

An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by " < " and " > ". The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <title> tag can be written as <Title> , <TITLE> , or in any other way. However, the convention and recommended practice is to write tags in lowercase.

The articles below can help you learn more about HTML.

Key resources

If you're new to web development, be sure to read our HTML Basics article to learn what HTML is and how to use it.

For articles about how to use HTML, as well as tutorials and complete examples, check out our HTML Learning Area .

In our extensive HTML reference section, you'll find the details about every element and attribute in HTML.

Beginner's tutorials

Our HTML Learning Area features multiple modules that teach HTML from the ground up — no previous knowledge required.

This module sets the stage, getting you used to important concepts and syntax such as looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a web page.

This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.

Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.

Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.

Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

Advanced topics

The crossorigin attribute, in combination with an appropriate CORS header, allows images defined by the <img> element to be loaded from foreign origins and used in a <canvas> element as if they were being loaded from the current origin.

Some HTML elements that provide support for CORS , such as <img> or <video> , have a crossorigin attribute ( crossOrigin property), which lets you configure the CORS requests for the element's fetched data.

The preload value of the <link> element's rel attribute allows you to write declarative fetch requests in your HTML <head> , specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how preload works.

HTML consists of elements , each of which may be modified by some number of attributes . HTML documents are connected to each other with links .

Browse a list of all HTML elements .

Elements in HTML have attributes . These are additional values that configure the elements or adjust their behavior in various ways.

Global attributes may be specified on all HTML elements , even those not specified in the standard . This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.

HTML elements are usually "inline-level" or "block-level" elements. An inline-level element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a "block box".

The <audio> and <video> elements allow you to play audio and video media natively within your content without the need for external software support.

HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each context has a set of other content categories it can contain and elements that can or can't be used in them. This is a guide to these categories.

Historical information on quirks mode and standards mode.

Related topics

This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so.

• Skip to main content
• Skip to search
• Skip to footer

Products and Services

Contact cisco.

To get global contact information, please make your selections in the drop-down menus. 

Country/region and language

Get in touch

Please reach out to sales for general inquiries or to chat with a live agent.

Sales inquiries

1 800 553 6387 , press 1

Order and billing

1 800 553 6387  , press 2-1

Monday to Friday 8 a.m. to 5 p.m. Eastern Time Chat is available to you 24/7.

Find technical support for products and licensing, access to support case manager, and chat with support assistant. Technical support is available 24/7.

Enterprise and service providers

1 800 553 2447  (U.S. and Canada) 

Small business

1 866 606 1866  (U.S. and Canada)

Training and certifications

1 800 553 6387 , press 4

Explore support

Explore certification support

Cisco partners

Become a partner, locate a partner, get updates, and partner support. 

Explore Cisco partners

Get partner support

Find a Cisco office

Find offices around the world. 

Locate offices

Corporate headquarters

300 East Tasman Drive San Jose, CA 95134

Microsoft Event 2024 live blog: All the Surface and Windows 11 AI announcements as they happen

Tune in on may 20 at 1pm et for the latest windows 11 and surface announcements from microsoft.

Microsoft is hosting a special press event on May 20 in Seattle, where the company is expected to unveil new Surface hardware powered by Qualcomm's upcoming Snapdragon X Series SoCs, as well as detail how it plans to add next-generation AI experiences to Windows 11 this year.

Unfortunately, the event is not being streamed live, but we will be on the ground to cover the announcements as they happen. So, to follow the event along with us, bookmark this page and return here on May 20 at 10 AM PT (1 PM ET) for our complete event coverage. We will be posting snippets, quotes, and images from the speakers.

There's been a lot to digest, here's a breakdown of some of the major announcements! 

• The new Surface Pro gets an OLED display and is the world's first Copilot+ PC
• There's a new Snapdragon X-powered Surface Laptop
• Copilot+ is the true next-gen of AI laptops
• Copilot is coming to the Xbox platform

And that's a wrap! To recap: New next-gen AI features, new Surface Pro, new Surface Laptop, all powered by Arm. Pretty exciting stuff.

This is the era of the Copilot+ PC. We'll have hands-on with the new Surface devices shortly.

Copilot+ PCs start at $999.

Lenovo, Dell, Acer, ASUS, Samsung are all shipping Copilot+ PCs. 

They all look like laptops...

Now getting a tour of some of the new OEM devices

All the major Windows hardware makers are on-board with Copilot+. Many shipping new hardware this summer with Qualcomm's Snapdragon X chips.

Although it doesn't appear we're getting any more Surface hardware today.

Surface Pro and Surface Laptop are just the start, says Brett Ostrum.

Quick demo of CapCut, using the NPU to remove the background in a video. This is now three times faster on the new Pro compared to Pro 9.

Just as an aside, the new Surface Pro still has that venting gap around the chassis. That means it's using the same chassis as the Surface Pro 9, and not the thinner Surface Pro X chassis.

You can use Cocreator to bring to life a sketch. 

Now talking about image generation on Windows. Cocreator, lets you "explore the full range of your imagination."

The keybord is now called Surface Pro Flex Keyboard. It can be used attached or detached.

And a quad-HD camera!

Confirmed: The new Surface Pro has an OLED display with HDR.

Surface Pro is 90% faster than Surface Pro 9. Crazy.

Now it's time for Surface Pro!

Now talking about Live Captions, which is now able to translate languages in real-time from live or pre-recorded audio.

Curiously, no time spent with Surface Pro yet.

Adobe is bringing more of the creative cloud to Windows on Arm soom, including Premiere Pro.

Now getting a demo showing how the Surface Laptop beats the MacBook Air in pretty much all tasks. 

The new Surface Laptop beats the MacBook Air in battery life benchmarks. Incredible!

It's 80% faster than Surface Laptop 5. 

As expected, the new Laptop has a new design. Thinner bezels, haptic touchpad.

New Surface Laptop and Surface Pro announced.

Brett Ostrum now on stage. It's Surface time.

Announcing Prism, a new emulation layer for Windows on Arm that is 20% faster.

Microsoft is highlighting how most of the apps you probably use are now natively compiled for Windows on Arm.

Now touting incredible performance, beating the MacBook Air M3.

Microsoft says it's rebuilt Windows 11 inside out for Arm.

Notably, only Qualcomm is ready with a Copilot+ chip right now. Intel and AMD's Copilot+ chips seemingly won't be here until later.

16GB RAM minimum on these Copilot+ PCs. 

"Intel, Qualcomm, and AMD are all in."

We're now hearing from Intel, AMD, and Qualcomm about how everyone is coming together for Copilot+ PCs.

Now getting a demo of Copilot being able to help during gaming. You can ask it for tips and, based on what it can see, will suggest things.

The Windows Photos app can now understand what it's seeing. It will suggest things to edit based on the photo you have open.

There are more than 40 AI models here that bring Recall and the Windows Copilot Runtime together.

There's an incredibly robust approach to privacy. You can pause, stop and delete captured content. You can even filter out specific apps or websites so Recall can't see it.

There are a number of different models built into Windows 11 to make this happen. These are deeply integrated, not bolted on, Pavan Davuluri says.

We're now getting another Recall demo, this time with a break down of how the technology works.

"We're weaving AI through every layer, from chip, to system, to cloud."

Pavan Davluluri now coming on stage, likely to talk about Surface.

Everything Recall does is handled locally on the device. Microsoft will not use any of the data it's captured to train its AI models. It's all yours, and nobody elses.

Recall includes a timeline interface that lets you scroll back in time depending on whether your search criteria has multiple results.

Recall is able to bring up snapshots based on your specific search criteria. If you're trying to find a dress you were looking at a few days ago in Edge, you can just describe the dress to Recall and it will bring you back to the moment when that dress was on-screen.

Windows watches everything you do, but it's all handled on device. Nothing is sent to the cloud.

Windows Recall is exclusive to Copilot+ PCs.

Recall leverages the power of AI to make it possible to access anything you've seen on your PC.

Microsoft announces Windows Recall. It's a feature that uses AI to help you find everything you've done on your computer, using natural language.

Copilot here is contextually and visually aware. You can ask it to help with whatever is on-screen.

Microsoft is now demoing a "phone call" between you and Copilot. You can ask Copilot to help you out in a task. In this example, the user is playing Minecraft and is asking how to create a sword. Copilot is able to see what's in his inventory.

Copilot is being integrated across Windows. In File Explorer, Edge, Notifications, Settings, and more.

Copilot PCs have batteries that can last "all day."

58% faster than MacBook Air M3!

Copilot PCs have an NPU that can run 40 trillion operations per second. 

"We've made a huge leap forward in technology with these PCs. They are the most powerful PCs ever built."

Yusef Mehdi now on stage to talk more about what makes a PC a "Copilot+" PC.

Copilot+ PCs are the combination of Windows, Systems, and Silicon coming together to deliver unique AI experiences.

Microsoft announces "a new category" of devices. An entirely new class of Windows Pcs, engineered to unleash the power of AI: Copilot+ PCs!

Today, we're going beyond the cloud, to the device. AI functionality on your PC is happening. 

"It's pretty early still on this platform shift. The fundamental driving force behind this AI wave are these scaling laws."

Satya is setting the stage. Telling us that PCs will soon be able to anticipate what we want, and our intent. And it starts with Copilot.

Looks like we're about to begin! Satya Nadella now on stage

We're also expecting to hear more about AI. Microsoft is expected to unveil some next-gen AI features for Windows 11 today, which will be exclusive to new PCs launching with Qualcomm's Snapdragon X chip, at least at first. 

30 minutes until kick off. We're expecting a new Surface Pro and Surface Laptop, both powered by Qualcomm's Snapdragon X chips. The Surface Laptop is expected to feature a new design, the first design refresh the Surface Laptop line has ever seen...

Where the magic happens...

We're in. Just getting seated in the venue. Looks fancy! 

Want to catch up on what Microsoft should be announcing today? We first saw leaks of a new Snapdragon powered Surface Pro back in April. Today's the big Microsoft event, so, you know, we'll soon know how accurate this was. 

Windows on ARM is going to become a huge deal, finally, but there will be folks that are worried about making the switch. Especially when it comes to using their regular applications. Will they work OK? Will you need to make any changes to how you work? The good news is that you don't need to worry. Even Google Chrome is native for ARM now. We've got an explainer that'll tell you everything you need to know . 

Windows on ARM is going to be a big focus today. It's been around for a while, but with the arrival of the Qualcomm Snapdragon X Elite platform, it's finally getting a real kick in the pants. But what the heck does it all mean anyway? We've got a full explainer on Windows on ARM for you to catch up with all the backstory to this point.

Microsoft isn't the only company we're expecting to see new Qualcomm-powered hardware from today. The leaks started pretty early, and one of those laptops we're hoping to get a closer look at is the Snapdragon X-powered Lenovo Yoga Slim 7 . Fingers crossed!

We're just one day away from Microsoft's big event. Tomorrow, we're expecting Microsoft to unveil its vision for a new era of the Windows PC. Microsoft and Qualcomm have worked together over the last three years to bring to market an experience that hasn't been possible in the Windows space before.

We will see hardware and software come together to enable incredible new AI experiences, and Windows on Arm will be the foundation of this new generation of Windows devices. The Windows PC is about to get good , and Windows on Arm is about to have its moment in the spotlight. 

Looking for an in-depth write-up about what to expect from Microsoft's event on May 20? Be sure to check out our expectations post . Spoilers ahead!

We will be on the ground bright and early on May 20 at Microsoft's headquarters in Seattle to bring you all the announcements. The event will begin at 10 am PT (1 pm ET) and last about an hour.

What are we expecting to see? New Surface hardware is a Surface Pro and Surface Laptop powered by Qualcomm's new Snapdragon X Series chips. Both devices should have updated displays and, on the laptop side, a new keyboard deck with a haptic touchpad.

We're also expecting to see new Windows 11 features, many of which will be tied to Microsoft's AI efforts. A new "AI Explorer" feature will enable several next-generation AI experiences, such as Recall and Snapshots, which will record everything you do on your computer and store it as a memory for you to recall later using natural language.

AI Explorer will also be able to see what's currently on screen and provide contextual prompts and suggestions based on what it can see with a feature called Screen Understanding. You can learn more about AI Explorer and its planned feature set in my in-depth write-up.

• 2 Lenovo's new ThinkPad T14s (Gen 6) is a Copilot+ PC built for mobile professionals
• 3 Acer's new Swift 14 AI laptop is a budget-friendly Copilot+ PC powered by Snapdragon X
• 4 The new Dell XPS 13 revision is significantly different from its predecessors — it's an AI PC laptop with an ARM-based chip.
• 5 HP's latest business-focused laptop blows every competitor out of the water with Qualcomm's latest chips