Create a lightweight presentation using Web Components.
DeckDeckGo is build with Stencil and could be use in any modern framework or even without any.
-
✏️ 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
DeckDeckGo offers also a starter kit kit which lets you additionally:
-
🚀 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
Cherry on the cake 🍒🎂 DeckDeckGo comes with its Progressive Web App that allows you to remote control your presentation 🚀
DeckDeckGo provides a CLI and a starter kit.
To get started and to create your presentation, run the following command and follow the prompt:
npm init deckdeckgoOnce your presentation created, go to your new project's folder and start editing your slides and content for your talk 😉
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>
The 👉 extended documentation 👈 displays all templates and options available for each slides.
DeckDeckGo also offers a couple of components which could be used in almost every templates, these are documented in a separate chapter of the documentation.
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.
<img data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"/>
DeckDeckGo offers various theming options which could be set using CSS variables and which are described in their respective slides' templates documentation.
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 rtl.
<!DOCTYPE html>
<html dir="rtl">
<body>
<deckgo-deck>
</deckgo-deck>
</body>
</html>
If you would publish online a presentation or talk you would have built with DeckDeckGo, reach me out, I would be super duper happy to add it to the list of talks and presentations ❤️
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