create powerpoint presentation javascript

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

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

Create PowerPoint presentations with a powerful, concise JavaScript API.

gitbrent/PptxGenJS

Name already in use.

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more about the CLI .

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

3,269 commits

Create JavaScript PowerPoint Presentations

Table of Contents

Introduction

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

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

PptxGenJS Demos

Installation

PptxGenJS NPM Home

jsDelivr Home

Bundle: Modern Browsers and IE11

Min files: Modern Browsers

GitHub Latest Release

Bundle: Modern Browsers

Documentation

Quick start guide.

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

That's really all there is to it!

Full documentation and code examples are available

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

Learn more:

HTML-to-PowerPoint Docs/Demo

React: react-pptx - thanks to Joonas !

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

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

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

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

Special Thanks:

PowerPoint shape definitions and some XML code via Officegen Project

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

Releases 46

Used by 958.

Contributors 59

TypeScript 97.2%

Create add-ins for PowerPoint

Build engaging solutions for your users' presentations across platforms on Windows, Office on the web, iOS, and Mac.

Find everything you need to know to create PowerPoint add-ins

Explore powerpoint office js api using script lab, what's new in powerpoint development, create custom contextual tabs on the ribbon, save custom settings in your office add-in, techniques to access data from an office add-in when offline, office add-in that supports single sign-on to office, the add-in, and microsoft graph, get resources.

Documentation

Community calls

PowerPoint add-ins developer community

Microsoft 365 dev community.

Learn from others.

Microsoft Q&A forum

Ask the developer community questions about your code.

Feature suggestions

Submit an idea on the Microsoft 365 Developer Platform ideas forum.

Stack Overflow

Use the office-js tag for questions regarding PowerPoint add-ins.

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Manipulating PowerPoint with Javascript Add-in?

I am trying to make a PowerPoint Web Add-in. I have read the Office JavaScript API documentation but it wasn't very detailed.

Do you know functions that permit to:

Create a new slide programmatically by an Office Add-in

Add text areas inside a slide programmatically by an Office Add-in.

It isn't possible to insert a new slide into a PowerPoint presentation at the moment. You can only navigate between existing slides using Document.goToByIdAsync() .

It is possible to insert a text block or image into an existing slide however. This is done using the Document.setSelectedDataAsync() method.

For example:

PowerPoint has been notoriously behind the other Office applications in terms of Add-in API functionality. I would highly recommending visiting the UserVoice and adding your suggestions (and voting up others). This will be super helpful when it comes to making a case for future investment into PPT API functionality.

Your Answer

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct .

Not the answer you're looking for? Browse other questions tagged office-js or ask your own question .

Hot Network Questions

Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy .

DEV Community

Posted on Aug 19, 2020

How to: add PPT export to your JavaScript application

Today I am going to share something very interesting which caught my attention when my client asked me to add an interactive PPT export in our React application which can be fully customized even after download.

We have already seen image, excel and pdf export in many applications and these are very common nowadays. But at times users want to use the content of our applications in their presentations especially when charts and graphs involved, then it could be a pain for the user to gather all the required data and construct those charts and graphs in their Powerpoint presentation on their own.

So, is there an easy way to implement this. Luckily yes!

There is an awesome javascript library called PptxGenJS which provides powerful tools to create Powerpoint presentations using your JavaScript code.

I am going to explain the steps below but if you want to see a working example please check out this live DEMO and you can find a sample code HERE . Download and Play!

Let's get started!!

Installing PptxGenJS

Creating a presentation, adding master slide.

A master slide can be used to enforce/follow a certain design or corporate branding. Slides added using the Master Slide name inherits the design of the master slide automatically.

Using defineSlideMaster() method along with options object(to style the slide) Master Slides can be created. e.g.:

Adding a Slide to PPT

Slides can be added to the presentation using addSlide() method.

Slide Layout

The Library provides a few standard layout options. You can find them here . setLayout() method can be used to set the layout of the PPT.

Custom layouts can be defined using defineLayout() method.

Saving the presentation

Adding text, adding images, chart legend position.

Chart legend position can be changed by passing legendPos option. b (bottom), tr (top-right), l (left), r (right), t (top) Default: r

Adding a Horizontal Bar Chart to slide

This library supports almost all types of charts. Do check the documentaion for more details.

The benefit of PptxGenJS is that this library provides the power of customizations and the exported PPT can be very different from what you are showing on your application. You can add/remove details as per your convenience or users' requirements.

See you next time!

Top comments (6)

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

Joined Jan 27, 2021

Hi Akash, Will you make your demo code available on github again please?

gitbrent.github.io/PptxGenJS/ - working addres.

Hi Akash, Is there a way to show a preview of the ppt as it is being done by the code? A preview before downloading for the user.

github.com/akashseth31/react-ppt-e... akashseth31.github.io/react-ppt-ex... - not working

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

React-tiny-virtual-list

Netsai - May 17

LeetCode 46. Permutations: Solution Explained

Daniil Polovinkin - May 6

Angular Budgets: Keeping Your Application Performant and Responsive

Ahmed Moustafa - May 17

The Navigator Clipboard API in JavaScript

Alessio Michelini - May 17

Once suspended, akashseth31 will not be able to comment or publish posts until their suspension is removed.

Once unsuspended, akashseth31 will be able to comment and publish posts again.

Once unpublished, all posts by akashseth31 will become hidden and only accessible to themselves.

If akashseth31 is not suspended, they can still re-publish their posts from their dashboard.

Once unpublished, this post will become invisible to the public and only accessible to Akash Seth.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag akashseth31:

akashseth31 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy.

Unflagging akashseth31 will restore default visibility to their posts.

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

Javascript PowerPoint Templates & Google Slides Themes

Related searches:

Javascript Code Lines PowerPoint Template

Can't find what you are looking for? Tell us what it is!

Download Free and Premium Javascript PowerPoint Templates

Choose and download Javascript PowerPoint templates , and Javascript PowerPoint Backgrounds in just a few minutes. And with amazing ease of use, you can transform your "sleep-inducing" PowerPoint presentation into an aggressive, energetic, jaw-dropping presentation in nearly no time at all. These from free or premium Javascript PowerPoint Templates and Backgrounds are a great choice for a wide variety of presentation needs.

Our Free and Premium PowerPoint Templates are "pre-made" presentation shells. All graphics, typefaces, and colors have been created and are pre-set by an expert graphic designer. You simply insert your text. That's it!

Free vs. Premium Javascript PowerPoint Presentation Templates

PoweredTemplate offers a wide range of free Javascript PowerPoint Presentation Templates. You can find them by filtering by “Free”, from the “Filters” option on the site, on the top left corner of the screen after you search. This content is completely free of charge.

If you download our free Javascript PowerPoint templates as a free user, remember that you need to credit the author by including a credits slide or add an attribution line “Designed by PoweredTemplate”, clearly and visibly, somewhere in your final presentation.

PoweredTemplate also offers premium PowerPoint templates, which are available only to Premium users. There is no difference in product quality between free and premium Javascript PowerPoint Presentation Templates.

Best Javascript PowerPoint Templates

Are you looking for professionally designed, pre-formatted Javascript PowerPoint templates so you can quickly create presentations? You've come to the right place - PoweredTemplate has created these templates with professionals in mind. At PoweredTemplates, we understand how busy you are and how you love to save time.

That's why we've created a set of PowerPoint design templates with a Javascript theme. These Javascript PowerPoint templates are a great choice for a wide variety of presentation needs. Spend your time wisely - download the Javascript PowerPoint Templates today.

Javascript PowerPoint Presentation Themes FAQ

What are javascript powerpoint templates.

A PowerPoint template is a pattern or blueprint for your slides that you save as a .pptx or .potx file.

All the Javascript PowerPoint templates are natively built in PowerPoint, using placeholders on the slide master, color palettes, and other features in PowerPoint, and can contain layouts, theme colors, theme fonts, theme effects, background styles, and even content (according to Microsoft Office).

How to choose Javascript PowerPoint templates for presentations?

Choose after carefully studying the template features and viewing the big preview images. All the product information is on the product page in the description and a list of the features can be found in the horizontal scrolling bar under the Download button. You may download a few free templates before making the final decision.

Who are Javascript PowerPoint templates suitable for?

Why do i need javascript powerpoint templates.

Recently Viewed

You have not viewed any products yet. Start browsing our template library and here will be stored your history of viewed products.

add all to Favorites

Use "Favorites" to save products you find interesting, to compare them and add to cart. To add products in favorites you must first register or login. Registration is Free! To add a product to "Favorites" simple click on near product's image.

Account Sign In

Create your Free Account

Forgot Password?

Remember me on this computer

Not Registered? Create Free Account

By creating an account I agree to PoweredTemplate’s Terms and Conditions .

Already have an account? Sign in

This browser is no longer supported.

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

Power Point. Presentation class

[ API set: PowerPointApi 1.0 ]

Property Details

The request context associated with the object. This connects the add-in's process to the Office host application's process.

Property Value

Slide masters.

Returns the collection of SlideMaster objects that are in the presentation.

[ API set: PowerPointApi 1.3 ]

Returns an ordered collection of slides in the presentation.

[ API set: PowerPointApi 1.2 ]

Returns a collection of tags attached to the presentation.

Method Details

Get selected shapes().

Returns the selected shapes in the current slide of the presentation. If no shapes are selected, an empty collection is returned.

[ API set: PowerPointApi 1.5 ]

get Selected Slides()

Returns the selected slides in the current view of the presentation. The first item in the collection is the active slide that is visible in the editing area. If no slides are selected, an empty collection is returned.

get Selected Text Range()

Returns the selected PowerPoint.TextRange in the current view of the presentation. Throws an exception if no text is selected.

get Selected Text Range OrNull Object()

Returns the selected PowerPoint.TextRange in the current view of the presentation. If no text is selected, an object with an isNullObject property set to true is returned.

insert Slides From Base64(base64File, options)

Inserts the specified slides from a presentation into the current presentation.

The base64-encoded string representing the source presentation file.

The options that define which slides will be inserted, where the new slides will go, and which presentation's formatting will be used.

load(options)

Queues up a command to load the specified properties of the object. You must call context.sync() before reading the properties.

Provides options for which properties of the object to load.

load(property Names)

string | string[]

A comma-delimited string or an array of strings that specify the properties to load.

load(property Names And Paths)

{ select?: string; expand?: string; }

propertyNamesAndPaths.select is a comma-delimited string that specifies the properties to load, and propertyNamesAndPaths.expand is a comma-delimited string that specifies the navigation properties to load.

set Selected Slides(slide Ids)

Selects the slides in the current view of the presentation. Existing slide selection is replaced with the new selection.

List of slide IDs to select in the presentation. If the list is empty, selection is cleared.

Overrides the JavaScript toJSON() method in order to provide more useful output when an API object is passed to JSON.stringify() . ( JSON.stringify , in turn, calls the toJSON method of the object that is passed to it.) Whereas the original PowerPoint.Presentation object is an API object, the toJSON method returns a plain JavaScript object (typed as PowerPoint.Interfaces.PresentationData ) that contains shallow copies of any loaded child properties from the original object.

Submit and view feedback for

Additional resources

How to Build a JavaScript SlideShow in 3 Easy Steps

Today I'll be showing you how to build a Javacript slideshow from scratch -- let's jump right in!

If you've read our guide on how to make a website , you may be wondering what to do next to improve your skills. Making a photo slideshow is a surprisingly easy task, and one that can teach you valuable skills needed to get a programming job .

Today I'll be showing you how to build a JavaScript slideshow from scratch. Let's jump right in!

Prerequisites

You'll need to know a few things before you can get started coding. Alongside an appropriate web browser and text editor of your choice (I recommend Sublime Text ), you'll need some experience with HTML , CSS , JavaScript , and jQuery .

If you're not so confident in your skills, make sure you read our guide to using the Document Object Model and these tips to learn CSS . If you're confident with JavaScript but have never used jQuery before, then check out our basic guide to jQuery .

1. Getting Started

This slideshow requires several features:

It seems a simple list of features. Automatic mode will automatically advance images to the next one in the sequence. Here's the rough sketch I did before writing any code:

If you're wondering why bother planning, then take a look at these worst programming mistakes in history . This project won't get anybody killed, but it's crucial to have a solid understanding of code and planning procedures before working on bigger code -- even if it's only a rough sketch.

Here's the initial HTML you need to get started. Save this in a file with an appropriate name, such as index.html :

Here's what the code looks like:

It's a bit rubbish isn't it? Let's break it down before we improve it.

This code contains "standard" HTML , head , style , script , and body tags. These parts are essential components of any website. JQuery is included via the Google CDN -- nothing unique or special so far.

Inside the body is a div with an id of showContainer . This is a wrapper or outer container to store the slideshow. You'll improve this later on with CSS. Inside this container, there are three blocks of code, each with a similar purpose.

A parent class is defined with a class name of imageContainer :

This is used to store a single slide -- an image and caption is stored inside this container. Each container has a unique id, consisting of the characters im_ and a number. Each container has a different number, from one to three.

As a final step, an image is referenced, and the caption is stored inside a div with the caption class:

I've created my images with numeric file names, and stored them inside a folder called Images . You can call yours anything you like, provided you update the HTML to match.

If you'd like to have more or less images in your slideshow, simply copy and paste or delete the blocks of code with the imageContainer class, remembering to update the file names and ids as required.

Finally, the navigation buttons are created. These allow the user to navigate through the images:

These HTML entity codes are used to display the forwards and backwards arrows, in a similar way to how icon fonts work .

Now that the core structure is in place, it's time to make it look pretty . Here's what it will look like after this new code:

Add this CSS between your style tags:

That looks much better now right? Let's take a look at the code.

I'm using sample images that are all 670 x 503 pixels , so this slideshow has mostly been designed around images of that size. You'll need to adjust the CSS appropriately if you'd like to use images of a different size. I recommend you resize your images to matching sizes -- different images of different dimensions will cause styling problems.

Most of this CSS is self explanatory. There's code to define the size of the container to store the images, center align everything, specify the font, along with button and text color. There's a few styles you may not have come across before:

You can see the result of most of this code in the buttons:

The most complex part here is this strange looking line:

It may look quite unusual, however it is fairly self explanatory.

First, it targets any elements with the imageContainer class. The :not() syntax states that any elements inside the brackets should be excluded from this style. Finally, the :first-child syntax states that this CSS should target any element matching the name but ignore the first element. The reason for this is simple. As this is a slideshow, only one image at a time is required. This CSS hides all of the images apart from the first one.

3. The JavaScript

The final piece of the puzzle is the JavaScript. This is the logic to actually make the slideshow function correctly.

Add this code to your script tag:

It may seem counter-intuitive, but I'm going to skip over the initial blocks of code, and jump straight to explaining the code from half way through -- don't worry, I explain all of the code!

You need to define two variables. (Here's how to define variables in JavaScript .) These variables can be thought of as the main configuration variables for the slideshow:

These store the total number of images in the slideshow, and the number of the image to start on. If you have more images, simply change the totalImages variable to the total number of images you have.

The two functions increaseImage and decreaseImage advance or retreat the currentImage variable. Should this variable go lower than one, or higher than totalImages , it gets reset to one or totalImages . This ensures the slideshow will loop once it reaches the end.

Back to the code at the beginning. This code "targets" the next and previous buttons. When you click on each button, it calls the appropriate increase or decrease methods. Once complete, it simply fades out the image on the screen, and fades in the new image (as defined by the currentImage variable).

The stop() method is built into jQuery. This cancels any pending events. This ensures each button press is smooth, and means you don't have 100 buttons presses all waiting to execute if you go a bit crazy on the mouse. The fadeIn(1) and fadeOut(1) methods fade in or out the images as required. The number specifies the duration of the fade in milliseconds. Try changing this to a larger number such as 500. A larger number results in a longer transition time. Go too far, however, and you may start to see strange events or "flickers" between the image changes. Here's the slideshow in action:

Automatic Advancement

This slideshow looks pretty good now, but there's one last finishing touch needed. Automatic advancement is a feature that will really make this slideshow shine. After a set period of time, each image will automatically advance on to the next one. The user can still navigate forwards or backwards, however.

This is an easy job with jQuery. A timer needs to be created to execute your code every X seconds. Rather than writing new code, however, the easiest thing to do is to emulate a "click" on the next image button, and let the existing code do all the work.

Here's the new JavaScript you need -- add this after the decreaseImage function:

There's not a lot going on here. The window.setInterval method will run a piece of code regularly, as defined by the time specified at the end. The time 2500 (in milliseconds) means this slideshow will advance every 2.5 seconds. A smaller number means each image will advance at a quicker pace. The click method triggers the buttons to run the code as if a user had clicked the button with their mouse.

If you're ready for your next JavaScript challenge, try building a website with a static website builder like GatsbyJS, or a front-end framework like Vue . If you're a Ruby learner, Jekyll is also an option. Here's how Jekyll and GatsbyJS fare against each other .

Image Credit: Tharanat Sardsri via Shutterstock.com

JavaScript API to Generate PPTX Presentation

Open source javascript powerpoint library to create, edit & convert pptx files, add charts, slides & images..

JS-PPTX is an Open Source pure JavaScript library that provides functionality for reading, writing and editing PowerPoint PPTX presentations inside their own JavaScript applications. Developers require Node.js or a web browser for running it smoothly. The API is very user-friendly and gives developers the power to create a presentation with just a couple of JavaScript commands.

The API allows reading, writing and editing presentations on all popular web browsers such as Chrome, Firefox, and IE. It includes support for several important features such as read an existing presentation, add slide, shape, and charts, insert tables as well as Text to slides and much more.

At a Glance

Platform Independence

Supported File Formats

At A Glance

An overview of JS-PPTX features.

JS-PPTX supports important compression file formats listed below.

JS-PPTX only requires Java runtime

JavaScript

Getting Started with JS-PPTX

Please use the following command to install JS-PPTX.

Install via npm command

You can also install it via browser but it is not recommended

Install via Browser

Generate new powerpoint pptx presentation using javascript api.

JS-PPTX library enables software professionals to create a new PowerPoint PPTX presentation. You can provide the location and name of the new file. After the presentation creation developers can create a new worksheet with the desired number of rows and columns. The API also provides the ability to add a new slides, charts, tables, shapes, images, etc.

Add Slides & images to a PPTX Presentation

The open source API fully supports slides and images addition to PowerPoint PPTX presentations. Software programmers can easily add slides to an existing presentation at the required location. Same like slides it is also possible to add images to an existing presentation to display data in a user-friendly manner and a better way.

Adding Charts to a PowerPoint Presentation

The JS-PPTX API gives software developers the ability to add a chart to a PowerPoint PPTX Presentation inside their own JavaScript applications. First, you need to generate a temporary excel file for storing the chart's data. After that, you can write the header using the series name and can write the category column in the first column. Now you can write the data in the desired columns and rows to complete the task.

Cloud Storage

Custom Business Email

Video and voice conferencing

An integrated suit of secure, cloud-native collaboration and productivity apps powered by Google AI.

Tell impactful stories, with Google Slides

Create, present, and collaborate on online presentations in real-time and from any device.

Jeffery Clark

T h i s c h a r t h e l p s b r i d g i n g t h e s t o r y !

E s t i m a t e d b u d g e t

Make beautiful presentations, together

Stay in sync in your slides, with easy sharing and real-time editing. Use comments and assign action items to build your ideas together.

Present slideshows with confidence

With easy-to-use presenter view, speaker notes, and live captions, Slides makes presenting your ideas a breeze. You can even present to Google Meet video calls directly from Slides.

Seamlessly connect to your other Google apps

Slides is thoughtfully connected to other Google apps you love, saving you time. Embed charts from Google Sheets or reply to comments directly from Gmail. You can even search the web and Google Drive for relevant content and images directly from Slides.

Extend collaboration and intelligence to PowerPoint files

Easily edit Microsoft PowerPoint presentations online without converting them, and layer on Slides’ enhanced collaborative and assistive features like comments, action items, and Smart Compose.

Work on fresh content

With Slides, everyone’s working on the latest version of a presentation. And with edits automatically saved in version history, it’s easy to track or undo changes.

Design slides faster, with built-in intelligence

Make slides faster, with built-in intelligence

Assistive features like Smart Compose and autocorrect help you build slides faster with fewer errors.

Stay productive, even offline

You can access, create, and edit Slides even without an internet connection, helping you stay productive from anywhere.

Security, compliance, and privacy

Secure by default

We use industry-leading security measures to keep your data safe, including advanced malware protections. Slides is also cloud-native, eliminating the need for local files and minimizing risk to your devices.

Encryption in transit and at rest

All files uploaded to Google Drive or created in Slides are encrypted in transit and at rest.

Compliance to support regulatory requirements

Our products, including Slides, regularly undergo independent verification of their security, privacy, and compliance controls .

Private by design

Slides adheres to the same robust privacy commitments and data protections as the rest of Google Cloud’s enterprise services .

You control your data.

We never use your slides content for ad purposes., we never sell your personal information to third parties., find the plan that’s right for you, google slides is a part of google workspace.

Every plan includes

Collaborate from anywhere, on any device

Access, create, and edit your presentations wherever you are — from any mobile device, tablet, or computer — even when offline.

Get a head start with templates

Choose from a variety of presentations, reports, and other professionally-designed templates to kick things off quickly..

Photo Album

Book Report

Visit the Slides Template Gallery for more.

Ready to get started?

Create a presentation

Create a presentation in PowerPoint

Your browser does not support video. Install Microsoft Silverlight, Adobe Flash Player, or Internet Explorer 9.

Create presentations from scratch or start with a professionally designed, fully customizable template from Microsoft Create .

Open PowerPoint.

In the left pane, select New .

Select an option:

To create a presentation from scratch, select Blank Presentation .

To use a prepared design, select one of the templates.

To see tips for using PowerPoint, select Take a Tour , and then select Create , .

Add a slide

In the thumbnails on the left pane, select the slide you want your new slide to follow.

In the Home tab, in the Slides section, select New Slide .

In the Slides section, select Layout , and then select the layout you want from the menu.

Add and format text

Place the cursor inside a text box, and then type something.

Select the text, and then select one or more options from the Font section of the Home tab, such as Font , Increase Font Size , Decrease Font Size , Bold , Italic , Underline , etc.

To create bulleted or numbered lists, select the text, and then select Bullets or Numbering .

Add a picture, shape, and more

Go to the Insert tab.

To add a picture:

In the Images section, select Pictures .

In the Insert Picture From menu, select the source you want.

Browse for the picture you want, select it, and then select Insert .

To add illustrations:

In the Illustrations section, select Shapes , Icons , 3D Models , SmartArt , or Chart .

In the dialog box that opens when you click one of the illustration types, select the item you want and follow the prompts to insert it.

Need more help?

Want more options.

Explore subscription benefits, browse training courses, learn how to secure your device, and more.

Microsoft 365 subscription benefits

Microsoft 365 training

Microsoft security

Accessibility center

Communities help you ask and answer questions, give feedback, and hear from experts with rich knowledge.

Ask the Microsoft Community

Microsoft Tech Community

Windows Insiders

Microsoft 365 Insiders

Find solutions to common problems or get help from a support agent.

Online support

Was this information helpful?

Thank you for your feedback.

Home » Website Building » Web Designing » How to Create a Slideshow with JavaScript?

How to Create a Slideshow with JavaScript?

Whether you are using a website builder or content management system, it is very easy to create a slideshow for your site. For example, WordPress has hundreds of slideshow and gallery plugins to create stunning sliders in minutes. Similarly, site builders like Weebly offers a slideshow element and even a framework like Bootstrap offers a carousel element . However, when you create plain static HTML site there are no options other than inserting your own custom slideshow code. If you are looking for such a standalone slideshow block, here is a complete slideshow code with JavaScript.

Why to Use Slideshow?

Adding a slideshow on your site helps in the followings:

JavaScript Slideshow

Though there are plenty of plugins available to create a readymade slideshow, here is the source code for creating a simple slideshow using JavaScript. You can follow the below two step process to add this slideshow to your website.

1. Script for Slideshow

Copy and paste the below script in the footer section of your web page to insert the slideshow. You can paste the code after the body section of your web page to avoid render blocking resources in Google PageSpeed and improve the page loading speed.

2. HTML for Slideshow

The next step is to copy and paste the below HTML code in <body> section of your page. You can paste this code when you want the slideshow to appear.

Customizing Options for Slideshow

You can customize the appearance of the JavaScript slideshow using the below options.

How It Looks?

The slideshow will look like below and we recommend to use full width images for your layout so that it will look beautiful.

About Editorial Staff

Editorial Staff at WebNots are team members who love to build websites, find tech hacks and share the learning with community.

You also might be interested in

How to Optimize the Performance of a Website?

Website optimization is an important aspect for any site owner[...]

6 Ways to Add Table in Weebly Site

Table is a simple and precise way to express the[...]

Last Widget Fixed in GeneratePress Sidebar

How to Show Last Widget Fixed in GeneratePress Theme Sidebar?

In our earlier article, we have explained how to use[...]

DOWNLOAD EBOOKS

FREE SEO TOOLS

Type and press Enter to search

Home » Can ChatGPT Create PowerPoint Presentations?

Can ChatGPT Create PowerPoint Presentations?

Creating a visually appealing PowerPoint presentation requires a combination of well-written text and thoughtful design.

If you are wondering whether ChatGPT can create presentations? the short answer is no. However, there are workarounds that can help you use ChatGPT to generate text and ideas for layout and design for PowerPoint presentations.

ChatGPT can be used to generate talking points and ideas based on the topic and data you provide. In this article, we will explore the features and drawbacks of using ChatGPT to help you create an engaging PowerPoint presentation collaboratively.

How to Create PowerPoint Presentation with ChatGPT

If you want to use ChatGPT to help you make a PowerPoint presentation, there are a few simple steps to follow:

First, you’ll need to find a tool that works with ChatGPT to create the presentation. One such tool is DesignerBot, which integrates with Beautiful.ai to help you build engaging presentations.

Once you have the right tool, you can input some text describing the general aim of the presentation, and go into more detail if you wish. This will give ChatGPT an idea of what you’re looking for, and it will generate a detailed plan for the layout of your PowerPoint presentation.

You’ll then receive a slide-by-slide description of your presentation, along with bullet-point topics to cover, recommended color schemes, and design styles. You can use this information to create your presentation quickly and easily, without worrying about the design and content choices. With ChatGPT’s help, you’ll have a comprehensive and engaging PowerPoint presentation in no time.

Microsoft Copilot for PowerPoint presentation

Microsoft recently announced the development of their own AI technology, Copilot, which is integrated into Microsoft 365 – including PowerPoint. Copilot assist users with document creation using the same technology that powers ChatGPT, but with a focus on the Microsoft suite of programs.

At this time, Microsoft has not announced pricing or a release date for Copilot to general public, but it’s exciting to see how AI technology is being utilized to help users create engaging and informative presentations.

Copilot will also be available for other Microsoft Office apps, such as Word, OneNote, and Outlook when released. To create these AI-powered features, Microsoft will combine its 365 apps, a large language model, and Microsoft Graph.

Final Thoughts

As now we know ChatGPT can only generate text, it can still be used collaboratively to generate ideas for the layout and design of a PowerPoint presentation.

Another option is using a third-party tool like DesignerBot to create presentations.

DesignerBot offers a vast selection of design templates and layouts with monthly subscriptions starting at $12.

Silent PC Review is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More

Share this article

Maya hutchinson.

Silent PC Review has been providing expert advice and detailed reviews of PCs and peripherals since 2002. Our technical advice has been featured on publications such as: New York Times, O’Reilly, PCMag, Popular Mechanics, Forbes, etc. plus countless trade shows and industry articles. We’re dedicated to providing top-notch advice and reviews for choosing your next PC build.

Information

Try Microsoft Designer, a new AI-powered graphic design app for creating stunning designs in a flash.

A PowerPoint deck showing a photography portfolio.

How to use PowerPoint to create a portfolio

march 30, 2023

by Microsoft Create team

A portfolio is an opportunity to put your best foot forward. Whether you’re applying to a creative role, beginning a new chapter in your education, or are looking to showcase your talents, it is important to present your experiences in an eye-catching way that will attract notice. Microsoft PowerPoint is a robust tool that emphasizes the visual, so it makes for a fitting platform to showcase your finest work. Think of your portfolio like a visual resume, and with dozens of professionally designed PowerPoint templates to choose from and personalize, you can find the perfect way to present what you’ve done.

Tell your story

Every portfolio tells a story—whether it’s chronological and starting from your earliest work, or thematic and illustrating the myriad projects you may have worked on over the course of many years. Depending on the roles you’re applying for, you might need a different template to convey your career’s path.

For example, if you’re applying to an art school, you can show the trajectory of how you have grown as an artist and gained experience from your various roles. If you are creating an image-heavy portfolio, you can denote your experiences with filler slides, in order to separate the different eras in your history. When choosing images, it’s better to lean on larger-sized images, which you can then crop or resize within PowerPoint.

Example of a PowerPoint portfolio that incorporates large images.

Conversely, if you are applying for a technical role, you can outline the different roles you have held, and expand on your specific parts in detail. Here, your PowerPoint portfolio adheres closely to the format of a resume, where your portfolio can be broken up into education, experience, skills, training, and other common resume sections. Screenshots of your online work also make for tangible examples of your work that elevate an otherwise staid list of titles and links.

Present a visual narrative

PowerPoint templates make for an attractive, easily customizable starting point to build a portfolio. Different templates emphasize images over text or bullet points—one of the ways that PowerPoint portfolios are versatile enough to be tailored to your creativity. Because PowerPoint can hold plenty of slides, you won’t be limited by page lengths such as in a traditional resume.

Most people are visual learners, and a portfolio is a way for people to learn about you and your work. Therefore, the principles of good design come into play: where your audience will draw their visual attention, and what they see first, will matter when creating slides with biographical details or slides that prominently feature images.

Include a compelling biography

Starting with your title page, place your name in a large, eye-catching font. Then, add a profile picture—especially one that shows you in your best light. This will go alongside your biographical details, which can be at the front of a portfolio, to serve as an introduction, or near the end, if you want to introduce your work first and let it speak for itself.

Example of a biography page in a PowerPoint portfolio.

Here are key elements in writing a bio that is clear, concise, and easy to read by your audience:

The key to a successful portfolio is careful consideration of the details that comprise your personal and professional life. Staying organized can save you a lot of time or confusion when creating your portfolio. Lastly, a portfolio offers more room and opportunities to let your personality shine through, especially compared to a resume or job board posting. By starting with the right PowerPoint portfolio template , you can begin to put your passions on display and find your ideal audience.

create powerpoint presentation javascript

IMAGES

VIDEO

COMMENTS