html presentation tool

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

Create Stunning Presentations on the Web

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 .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

Slides.com — the reveal.js presentation editor.

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

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

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 25, 2024, 4 min read

Implementing Lazy Loading in Angular

{post.frontmatter.excerpt}

Jul 31, 2023, 11 min read

Implementing Live Search Functionality in JavaScript

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

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

A Presentation Framework by @marcolago

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

What is it?

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

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

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

Press Down Key or Swipe Up to continue.

Compatibility and Support

Flowtime.js is fully compatible with real moderns browsers:

• Internet Explorer 10

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

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

Touch Devices Support

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

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

Mastering the Navigation

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

Navigation Keys and default behaviours:

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

Alternate Navigation Control

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

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

Some Other Keys

Because: the more, the better.

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

Overview Mode.

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

Try it out!

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

Navigating the Overview

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

Navigate via Links or Javascript API

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

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

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

Navigate With History

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

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

Progress Indicator

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

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

Clicking on a page thumb will navigate to that page.

Fragments Support

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

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

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

Fragments Unleashed

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

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

This is a .shy example!

And this is a .step one!

Default HTML Structures

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

1 st Level Heading

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

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

Ordered Lists

Definition lists, quotes and citations.

My favourite quotation: The bad craftsman blames his tools .

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

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

Theme and Styling

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

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

Fluid Layout

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

Image Management

Images are fluid like all the other content.

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

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

Stacked Images

Centered Stacked Images

About the Centered Stack

You can center anything, not only images!

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

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

Native Parallax Support

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

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

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

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

The Invaders from Audiogalaxy

This Page Is Just for Testing the Parallax

In the previous page, from left to right:

Code Snippets Highlight

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

Events and Custom Implementations

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

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

Some Examples

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

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

Continues …

More Examples

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

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

Use It! It’s Free

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

Feedbacks, suggestions and bug reports are welcomes.

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

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

You can find me on Twitter as @marcolago

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

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.

Presenteer.js

Source code at https://github.com/willemmulder/Presenteer.js

Check a screen-filling demo presentation ! (best in Chrome or Firefox)

Introduction

Presenteer.js a very flexible HTML5 presentation tool that works in one line of code, but is configurable with constructor options and many callbacks.

In its simplest form, it works like var presentation = new Presenteer("#presentation", $("#presentation > div"));

And then navigate through the presentation with presentation.start(); , presentation.next(); , presentation.prev(); and presentation.show(0-based-index);

Installation

Include jQuery and Presenteer.js (and possibly Sylvester.js, see below) in your page.

Create the HTML and style it with CSS

Then, on page load, create a Presenteer instances for every presentation on the page. For this example, we only have one presentation, so the below code suffices.

If followElementTransforms is to false, Presenteer will not follow element transforms. In that case, it is not required to include the Sylvester matrix library. If you do want Presenteer.js to follow element transforms (e.g. element rotations), also add the Sylvester library to your page

And set followElementTransforms: true . This is also the default

Constructor options

Apart from the followElementTransforms constructor argument, there's many more options and callbacks. A general Presenteer instantiation looks like this:

var presentation = new Presenteer(canvas, elements, options);

Where canvas is a selector or jQuery element of the canvas on which the presentation is placed. It is this canvas that will be repositioned with CSS3 transform to slide a certain element into view.

It is good practice to wrap the presentation in a containing div with overflow: hidden . This container will act as the viewport for the presentation.

The list of elements on the canvas is specified in the elements argument. It is a list of objects that are any of the following

• CSS selector, like "#elm"
• jQuery element, like $("#elm")
• A Presenteer Object, that looks like { element : e, // CSS selector or jQuery object, // Direction-independent callbacks onBeforeEnter : function(), // Callback right before e is shown onAfterEnter : function(), // Callback right after e is shown onAfterLeave : function(), // Callback right before presentation moves from e to another element onBeforeLeave : function(), // Callback right after presentation moves from e to another element // Forward-navigating callbacks onBeforeLeaveToNext : function(), // Callback right before presentation moves from e to the next element onAfterLeaveToNext : function(), // Callback right after presentation moves from e to the next element onBeforeEnterFromPrev : function(), // Callback right before presentation moves from the previous element to e onAfterEnterFromPrev : function(), // Callback right after presentation moves from the previous element to e // Backward-navigating callbacks onBeforeLeaveToPrev : function(), // Callback right before presentation moves from e to the previous element onAfterLeaveToPrev : function(), // Callback right after presentation moves from e to the previous element onBeforeEnterFromNext : function(), // Callback right before presentation moves from the next element to e onAfterEnterFromNext : function(), // Callback right after presentation moves from the next element to e }

And options is an object with the following defaults

Once we have created a presentation with var presentation = new Presenteer("#presentation", $("#presentation > div")); we can call the following commands to navigate through the presentation

Go to the first element by doing presentation.start();

To go forward, call presentation.next(); . If the end of the presentation is reached, the first element will be shown again.

To go back, call presentation.prev(); or presentation.previous(); . If the start of the presentation is reached, the last element will be shown again.

To go to an arbitrary element, call presentation.show(index); where index is 0-based.

1. Two coupled presentations

Go fullscreen

2. Presentation with slide-indicator

Modern HTML Presentations

Download or → to learn more.

How Does It Work?

Slides are basic HTML.

The deck.core module keeps track of slide states and deck states , leaving CSS to define what each state look like…

…and how to transition between them.

Extensions use core events and methods to add goodies , giving presenters the freedom to add what they want and leave out what they don’t.

Great. Now What?

Only know html.

Use included premade themes and templates to start making your deck immediately.

Get Started

CSS+JS Badass?

Make custom decks with the API exposed by the core and extensions.

Something In-between?

Take a little from both worlds. Tweak a theme, hack an extension, or write some of your own.

WebSlides — HTML presentations made easy. Hypertext and beauty as narrative elements.

Everyone Stories

Why webslides.

"I feel guilty as a web designer when I have to use PowerPoint and Keynote. So I made #WebSlides ." @jlantunez .

WebSlides is really easy

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

Code is clean, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides , by Jenn Schiffer :)

WebSlides was made to inspire people.

There are excellent presentation tools out there. WebSlides is an open source solution for telling stories. Hypertext and beauty as narrative elements.

→ Keyboard navigation

Go to a specific slide, slide counter, 100 % customizable, 40 + beautiful components, flexible blocks, vertical rhythm, fade transition, 500 + svg icons.

Making a beautiful HTML presentation has never been so rewarding.

• Demos: Landings · Portfolios
• Docs: Components · Classes
• Tags: Dribbble · Instagram

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

• Animations: Animate.css .
• Images: Unsplash .
• Videos: Pixabay .

One more thing...

Make your keynote — .bg-apple

Instantly share code, notes, and snippets.

H5P – Create and Share Rich HTML5 Content and Applications

Create, share and reuse interactive html5 content in your browser.

• Create Richer HTML5 Content in Existing Publishing Platforms
• Share Content Seamlessly Across Any H5P Capable Site
• Reuse and modify Content in Your Browser at Any Time

Start creating rich interactive content on your own website. It's free and easy to get started.

Supercharge your website with H5P

H5P makes it easy to create, share and reuse HTML5 content and applications. H5P empowers everyone to create rich and interactive web experiences more efficiently - all you need is a web browser and a web site with an H5P plugin.

Mobile friendly content

H5P content is responsive and mobile friendly, which means that users will experience the same rich, interactive content on computers, smartphones and tablets alike.

Share rich content

H5P enables existing CMSs and LMSs to create richer content. With H5P, authors may create and edit interactive videos, presentations, games, advertisements and more. Content may be imported and exported. All that is needed to view or edit H5P content is a web browser. H5P content types and applications are shared here on H5P.org. H5P content may be created on any H5P enabled web site like H5P.com or your own Drupal or WordPress site with the H5P plugin installed.

Free to use

H5P is a completely free and open technology, licensed with the MIT license. Demos/downloads, tutorials and documentation are all available for users who want to join the community .

Check out the content types

There are several H5P content types and applications to suit various needs.

H5P Integrations

Through H5P.com , H5P content may be embedded in any platform that supports embedded content (iframes). H5P.com also provides integrations for LMSs like Canvas, Brightspace, Blackboard, Moodle and other systems that support the LTI standard. In addition H5P has plugins for WordPress, Moodle, Drupal and several other publishing systems.

H5P SaaS (Paid H5P service) is supported for any LMS that supports LTI integration, like Canvas, Brightspace, Blackboard and Moodle and many others.

• All H5P Integrations

Check out the Installation guide to get H5P up and running on your site.

Getting started

New to H5P? Check out the H5P Getting started guide .

If you are a developer, please see our Developer page or try to create your own H5P package in the Greeting card tutorial .

If you are a content designer, our content type tutorials can help you get started producing interactive content on your H5P enabled site.

Get a complete overview on the H5P Documentation pages .

Need help with H5P?

Take a look at the Documentation pages. If you can’t find an answer there, you can post a question to the H5P community in the Forum . Selected companies also provide H5P related services.

Roadmap update

Fri, 03/22/2024 - 18:03

First Annual H5P Academy Awards

Fri, 03/22/2024 - 12:39

March 2024 release note

Thu, 03/21/2024 - 23:51

Want to help us spread the word?

• Examples & Downloads
• Documentation
• Goals & Roadmap

Connect with H5P

• Contact Form
• H5P is an open source community driven project. Join the Community and help us create richer online experiences!
• Project Licensing Information
• About the Project

H5P is a registered trademark of H5P Group Privacy policy | Copyright © 2024

• Case Studies
•   Contact Us
•   FAQ
•   Help Document
•   Knowledge Base
• Help Document
• Knowledge Base

Top 6 HTML5 Presentation Software to Engage Audiences on Mobile Devices

To really engage audiences and make them feel participating in your presentation, you should make sure your presentation is interactive. There are 6 fantastic HTML5 presentation software to turn your presentation into visual experience, helping you to impress audiences on all mobile devices.   > Part 1: Top 6 HTML5 Presentation Software to Engage Audiences > Part 2: Fascinating HTML5 Presentation by Focusky  

Part 1: Top 6 HTML5 Presentation Software to Engage Audiences

1. focusky (strongly recommended).

Focusky is an amazing tool to make killer HTML5 presentations and provides awesome visual experience for audiences. You are able to liven up details in open-wide canvas, then utilize mind-mapping to showcase creative ideas on audiences’ devices in real time.   This feature-rich HTML5 presentation software will never let you down. High performing cloud hosting delivers your HTML5 presentation around the world, giving wonderful mobile-friendly experience to audiences. At the same time, amazing subscription feature is helpful for you to connect closely with audiences    

Start Designing HTML5 Presentation with Focusky

2. Google Slides

3. Genial.ly

    Professional 6 HTML5 presentation software introduced will be beneficial for engaging audiences easier. You will not present the boring static presentation anymore, instead, to resonate audiences vividly and professionally. Apart from the multimedia contents, dynamic animations in presentation, new presenting style with amazing transitions will wow audiences on their mobile devices. Focusky, an advanced presentation tool to make HTML5 presentation and video presentation in minutes, will offer you unique creation journey.    

Part 2: Fascinating HTML5 Presentation by Focusky

Video Tutorial

Get started, create a project, add multi media, publish and share, learn focusky in minutes.

Related article

7 Best Video Presentation Maker for Mac: Make Amazing Video Presentation on Mac Devices

What is the Best Alternative Presentation Software to PowerPoint and Prezi

6 Best Interactive Presentation Software for Mac Presenters

6 online animated presentation creator - distribute your content every where

Try Focusky free and enjoy a brand new experience of presentation

• Terms of Service

• Español – América Latina
• Português – Brasil
• Tiếng Việt
• Modern Android
• Android Developers

Build better apps faster with Jetpack Compose

Accelerate development.

New to Android Development?

Want to learn Compose?

Material You is available for Compose

Now in Android App Sample

Quick Tutorial

Sample apps

Building across devices using Compose

Compose for large screens

Compose for Wear OS

Featured resources, view interop, state and data, more resources, what’s next for jetpack compose, apps built with compose.

Latest news and videos

Join the compose community, stack overflow, bug tracker, slack group.

When to see the eclipse in Alabama: Search by ZIP code for viewing guide of April 8 solar eclipse

The day of the 2024 solar eclipse is nearing and while Alabama won't be in the path of totality, residents will be able to see a partial eclipse on April 8.

Those in the northern parts of the state will see the moon block more of the sun than those farther south.

It's important to emphasize: Do not look directly at the sun, even during an eclipse. You can seriously damage your eyes. In Montgomery, people can buy solar-safe glasses at the W.A. Gayle Planetarium's gift shop with a limit of four glasses per person. Be sure to watch out for fake eclipse glasses . They're dangerous.

Want to have some fun while viewing the eclipse? Wear red or green during the eclipse for a fun science lesson.

See when the eclipse will occur and what it'll look like from Alabama.

When is the solar eclipse?

The solar eclipse will take place April 8.

What will the solar eclipse look like in Alabama?

Can't see our graphics? Click here to reload the page.

Countdown clock to 2024 solar eclipse

Path of 2024 total solar eclipse.

The path of totality for April's solar eclipse stretches from northern Mexico to southeastern Canada before moving over the Atlantic Ocean.

In the United States, April's total solar eclipse will cross 13 states.

Texas, Oklahoma, Arkansas, Missouri, Illinois, Kentucky, Indiana, Ohio, Pennsylvania, New York, Vermont, New Hampshire and Maine, plus parts of Tennessee and Michigan, are all in the 115-mile-wide path of totality.

To see the exact path of totality, check out  an interactive map  created by French eclipse expert Xavier Jubier.

How much of the solar eclipse will be visible in Alabama?

Alabama is not in the path of totality for April's solar eclipse. That means the moon won't totally block the sun.

In Alabama, the moon will cover about 84% of the sun.

➤ See exact times to go outside to see the eclipse across Alabama

Can you damage your eyes if you look at the sun during an eclipse?

Yes. The only time you can look directly at the sun is when the moon totally blocks it, which will not happen anywhere in Alabama.

Looking directly at the  sun can cause permanent damage  to your eyes, including blindness.

To look at the sun to see the eclipse, you'll need solar eclipse glasses or some sort of projector.

Next eclipse

The next total solar eclipse in the United States won't arrive until Aug. 12, 2045, and will hit totality for about six minutes.

Contributors: Ramon Padilla, Katrina Zaiets, USA TODA Y and Alex Gladden, Montgomery Advertiser

Advertisement

Supported by

OpenAI Unveils A.I. Technology That Recreates Human Voices

The start-up is sharing the technology, Voice Engine, with a small group of early testers as it tries to understand the potential dangers.

• Share full article

By Cade Metz

Reporting from San Francisco

First, OpenAI offered a tool that allowed people to create digital images simply by describing what they wanted to see. Then, it built similar technology that generated full-motion video like something from a Hollywood movie.

Now, it has unveiled technology that can recreate someone’s voice.

The high-profile A.I. start-up said on Friday that a small group of businesses was testing a new OpenAI system, Voice Engine, that can recreate a person’s voice from a 15-second recording. If you upload a recording of yourself and a paragraph of text, it can read the text using a synthetic voice that sounds like yours.

The text does not have to be in your native language. If you are an English speaker, for example, it can recreate your voice in Spanish, French, Chinese or many other languages.

OpenAI is not sharing the technology more widely because it is still trying to understand its potential dangers. Like image and video generators, a voice generator could help spread disinformation across social media. It could also allow criminals to impersonate people online or during phone calls.

The company said it was particularly worried that this kind of technology could be used to break voice authenticators that control access to online banking accounts and other personal applications.

“This is a sensitive thing, and it is important to get it right,” an OpenAI product manager, Jeff Harris, said in an interview.

The company is exploring ways of watermarking synthetic voices or adding controls that prevent people from using the technology with the voices of politicians or other prominent figures.

Last month, OpenAI took a similar approach when it unveiled its video generator, Sora. It showed off the technology but did not publicly release it.

OpenAI is among the many companies that have developed a new breed of A.I. technology that can quickly and easily generate synthetic voices. They include tech giants like Google as well as start-ups like the New York-based ElevenLabs. (The New York Times has sued OpenAI and its partner, Microsoft, on claims of copyright infringement involving artificial intelligence systems that generate text.)

Businesses can use these technologies to generate audiobooks, give voice to online chatbots or even build an automated radio station DJ. Since last year, OpenAI has used its technology to power a version of ChatGPT that speaks . And it has long offered businesses an array of voices that can be used for similar applications. All of them were built from clips provided by voice actors.

But the company has not yet offered a public tool that would allow individuals and businesses to recreate voices from a short clip as Voice Engine does. The ability to recreate any voice in this way, Mr. Harris said, is what makes the technology dangerous. The technology could be particularly dangerous in an election year, he said.

In January, New Hampshire residents received robocall messages that dissuaded them from voting in the state primary in a voice that was most likely artificially generated to sound like President Biden . The Federal Communications Commission later outlawed such calls .

Mr. Harris said OpenAI had no immediate plans to make money from the technology. He said the tool could be particularly useful to people who lost their voices through illness or accident.

He demonstrated how the technology had been used to recreate a woman’s voice after brain cancer damaged it. She could now speak, he said, after providing a brief recording of a presentation she had once made as a high schooler.

Cade Metz writes about artificial intelligence, driverless cars, robotics, virtual reality and other emerging areas of technology. More about Cade Metz

Explore Our Coverage of Artificial Intelligence

News  and Analysis

OpenAI unveiled Voice Engine , an A.I. technology that can recreate a person’s voice from a 15-second recording.

Amazon said it had added $2.75 billion to its investment in Anthropic , an A.I. start-up that competes with companies like OpenAI and Google.

Gov. Bill Lee of Tennessee signed a bill  to prevent the use of A.I. to copy a performer’s voice. It is the first such measure in the United States.

French regulators said Google failed to notify news publishers  that it was using their articles to train its A.I. algorithms, part of a wider ruling against the company for its negotiating practices with media outlets.