Create a lightweight presentation using Web Components.
Table of contents
✏️Create without effort your presentation using Web Components
📰Use predefined templates
🌈Style your presentation quickly
🌅Create a lightweight presentation where images are lazy loaded
📱Ship your presentation as a Progressive Web App
🎁Free and open source
Starter kit extra features
🚀Publish your presentation as a Progressive Web App with a offline support
🦄Use Ionic components and icons to create the content or even add extra features
To get started and to create your presentation, run the following command and follow the prompt:
npm init deckdeckgo
Once your presentation created, go to your new project's folder and start editing your slides and content for your talk
Installing DeckDeckGo in any projects
The DeckDeckGo presentation tool could also be use without any tooling. If you wish import the component in your web project, have a look to the installation documentation to learn how to install and include it.
DeckDeckGo is a deck of slides where each slide has its own layout and behaviour. Their content could be edited and structured using the provided
slots and other attributes.
The deck should be declared using the tag
<deckgo-deck/> and each slide should be added to its children.
<deckgo-deck> <deckgo-slide-title> <h1 slot="title">The first slide</h1> <p slot="content"> Hello World 🚀 </p> </deckgo-slide-title> <deckgo-slide-content> <h1 slot="title">The second slide</h1> </deckgo-slide-content> </deckgo-deck>
Per default, DeckDeckGo's presentations are edited using HTML and are Web Components, that's why the documentation and examples are provided in HTML. But if you are using the starter kit and are editing your talk with Markdown, you could have a look to the Markdown documentation to get some examples.
Furthermore than the default swiping, the DeckDeckGo deck expose some asynchronous methods in case you would like to add navigation features to your presentation.
These features are described in the separate documentation about navigation.
Finally DeckDeckGo offers extra features, as for example a print feature or a full screen toggler, which could be added to your presentation too.
These features are described in the separate documentation about extra features.
In order to lazy load the images of your presentation, provide their url using the attribute
data-src instead of
src. DeckDeckGo will then take care of loading them only when needed.
Note: If you would miss or need further theming options, don't hesitate to open an issue and/or submit a PR, it would be my pleasure to add more theming flexibility and options
DeckDeckGo offers full LTR and RTL support. The deck inherits its parent text direction.
Commonly, if you wish to use RTL for your all page respectively presentation, you could set the attribute
dir of the root
html tag to
<!DOCTYPE html> <html dir="rtl"> <body> <deckgo-deck> </deckgo-deck> </body> </html>
Send me your slides
I had the opportunity to talk about Web Components and Ionic. While I was developing my presentation it came to my mind that I was not really following what I was about to present, that's why I wrapped up together DeckDeckGo, this new tool to create lightweight presentation using HTML, Web Components and Ionic.
MIT © David Dal Busco