loading...
Cover image for Introducing DeckDeckGo: the web open source editor for presentations

Introducing DeckDeckGo: the web open source editor for presentations

daviddalbusco profile image David Dal Busco ・5 min read

We are very happy and excited to share with you today our web open source editor for presentations: DeckDeckGo

I still almost not believe that we managed to reach such a milestone. It took us a couple of months this year to develop it just for fun at nights and on weekends, but yes, we did it 🎉

Before going further we would like first to thank all our off- and online friends, communities, contributors and early testers which always gave us plenty of motivation to develop our, as I like to call it, “pet” project. You are truly awesome ❤️

But why yet again another editor for presentations?

Sure why? Seriously why?

We are fully aware that no one, absolutely no one, asked for yet again another editor for presentations and that even probably there is no such need. But you know what? We are fine with that. Of course we would love and hope that our editor and concept will be useful to some persons, but even if we might cry a bit if no one will use it, we are (kind of) ok with that.

We develop our project because we are, well, nerds and because we use this experience to improve our skills. Furthermore, we are engineers you know, we like to implement products from scratch until launch 😉

So what makes it different?

Everything.

Of course I’m joking, not everything is different, it’s even became a private joke between us. As soon as something is a bit new we say to each other “Mais mec, c’est le future” 😹

That being said and as I briefly introduced it above, we had some, I hope you will find too, interesting ideas.

Cloud solution

My mum better understood “a cloud solution” than “we developed it with the web”

DeckDeckGo is a cloud solution. It works everywhere on any devices, projectors, desktops, mobiles or tablets without any prior installation and without data save locally 🎥🖥️💻📱☁️

There is by the way even no “Save” button in our editor, it does the job for you and save your data when these have to be saved 😁

Use an app to share apps

Use an app to share other apps

No export to PDF (at least not yet), therefore you may ask your self: How my gosh David, how I’m going to share my presentation then?

Well, here’s a cool thing: DeckDeckGo package and publish every single presentation you would like to share as a standalone application. Most precisely as Progressive Web Apps. Basically you are not going to send a PDF to your friends a colleagues but you are going to send them a link to your app respectively to your presentation which is compatible with any device’s screen size and SEO friendly 🚀

Online feed

Discover and share presentations

DeckDeckGo isn’t “just” an editor. It was actually developed to be also an online feed. A place where presentations can be discovered, shared and ultimately, if we let our selves dream a bit about the future, are indexed according your interests and maybe even can be discussed.

Features

Moreover, more than being able to develop slides with our editor, we also thought that adding some handy features would make the user experience a bit more enjoyable.

Full screen edition

Are you constantly switching between full screen and normal mode while editing your deck for your next presentation? Or did it you had more than one to correct a typo a couple of seconds before your talk? With our editor, your presentation is editable even in full screen mode.

More than edition, per design all features are available in full screen mode too

Unsplash

We have integrated Unsplash to our tool to let your find and use stock photos easily. The editor keeps also track of the last 10 media you would have used for even a quicker access.


Unsplash is integrated

Tenor

Gifs are life (probably). Same as the stock photo, Tenor is integrated, to let you find and integrate Gifs easily. There is even a special template which takes care of fitting the animated content to the all screen.

Gifs are life

Youtube

I was a bit more lazy on the integration of Youtube videos, we didn’t interconnected any API, but still, it’s pretty damn easy to add any videos from that source to your deck. Cherry on top, you could start and pause the videos remotely with our app too.

Drop Youtube videos in your presentation

Remote control

Out of the box, without any special hardware, any presentations could be remote controlled with our “remote control” application. It handles currently actions like swiping slides, displaying notes, drawing on the presentation and even offers a countdown feature. We are also taking advantages of QR codes in order to establish easily the connection between the controller and the decks.

Hey, it’s me, David 👋

Technical fun facts

I won’t deep to dive too much in the technical facts, as I hope that we will find time in the future to share articles about them, but to summarize, our application is developed with StencilJS Web Components. On the other side, our publication engine is developed with Haskell, Nix and Terraform 🚀

We are using Google Firebase for the authentication and to store the data (data you are editing and as storage) and are using Amazon AWS to deploy online the publications you would share.

Open source

DeckDeckGo is open source, it’s in our DNA, sharing is caring. All our libraries are published under MIT license and our applications and infrastructure are published under AGPLv3 and above license.

Of course we are always looking for new contributors. We would love to hear from you, don’t hesitate to join us on our slack channel or on Github 🙏

Developer mindset

Something I particularly like in our project is that both the editor and our developer starter kit are using the exact same Web Components as engine 🤪 Any improvements in these libraries and applications are then automatically echoed to anyone regardless if you are using the graphical editor or are coding your own presentation using HTML or markdown, it’s kind of the cherry on the cake 🍒🎂

Get started now 🔥

A picture speaks a thousand words, get started now to create your next presentation: https://deckdeckgo.com

To infinity and beyond 🚀

David

P.S.: Background photo of the cover by wisconsinpictures on Unsplash

Discussion

pic
Editor guide
Collapse
arandilopez profile image
Arandi López

Awesome project. I use Google drive for everything and now I'm giving a try to latex presentations just for code highlighting. I copied, pasted and highlighted manually code in Google slides. If you feature code blocks in DDG you'll buy me 😍

Collapse
learnbyexample profile image
Sundeep

Yeah, code blocks would be a great feature for programming presentations!

I just checked the demo, and it seems it is already there: beta.deckdeckgo.io/daviddalbusco/i...

Collapse
daviddalbusco profile image
David Dal Busco Author

Yes it is already there. We have built a Web Components around Prism therefore a lot of different type of codes are already recognized.

Moreover, if you want, you could display line numbers, highlight specific lines and style the content (color and basic font size).

You could also duplicate and move slides, so once you have styled one piece of code you could clone it and replace it with your other piece of codes (if you have many to display).

In the future we would like to improve the styling by supporting some "themes", specially for the colors, like palette of colors.

Collapse
davidjdavis profile image
David J. Davis

Awesome, a few tech questions just curious: why StencilJS and not litElement? While I'm building my presentation, you are saving and deploying the project constantly to AWS? How is that happening, and what platform on AWS allows for that?

Collapse
daviddalbusco profile image
David Dal Busco Author

I went with Stencil probably because I already had a small experience with it and with Ionic. And well, I love it: Typescript, its tooling, prerendering, polyfill etc. it has plenty of nice add-ons on the top of the Web Components themselves which makes the developer experience just super cool. Also how Prop() and State() are "working" in Stencil are a really good match with our editor (as we are saving HTML in the DB).

That being said, I never tried litElement but it does look super cool too.

While you are editing your presentation, we are saving it constantly in Firestore. To do so, we are deboucing some events and if changes are noticed, then saves are performed. If you are interested about this, you could for example have a look at this helper class.

On demand, when you decide to publish or update your publication, the data are send to AWS, notably to a S3. During that process we generate or update a Progressive Web App for your presentation.

We have listed the services we are using in a specific page of our tool (list of services), it gives a bit, I hope, of transparency about it for the users.

Let me know if you've got more questions!

Collapse
davidjdavis profile image
David J. Davis

Thanks very cool 👍

Collapse
daviddalbusco profile image
David Dal Busco Author

P.S.: About "debouncing", I published last week a blog entry about it, just in case dev.to/daviddalbusco/debounce-with...

Collapse
gmkumar08 profile image
Manoj Kumar

Noice :)

Hey, it looks like the duck's beak in the logo got mixed up with the background color or it could be me just being weird ;) No offense to David and team. Great Job with the app.

Collapse
daviddalbusco profile image
David Dal Busco Author

It was actually the choice of Anita which designed and offered the logo 😉

Collapse
darksmile92 profile image
Robin Kretzschmar

Great work! Gave it a try and it seems like you have a CORS error when trying to publish a presentation:

CORS error on deckdeckgo

Collapse
daviddalbusco profile image
David Dal Busco Author

I just tried out and it worked out 🤔

Was that a new presentation or a previous one you would have had created with the (closed) beta version?

If new one, could you try to refresh your browser/the app, double check that you are login in and try again?

Thx a lot for the help!

Collapse
darksmile92 profile image
Robin Kretzschmar

I created the presentation today right after I was done reading this post.
Clearing the cache and reloading the page did it, now it is published. Thanks for the help :)

Thread Thread
daviddalbusco profile image
David Dal Busco Author

And what a cool presentation 🤩

Happy to hear that and thx for trying out DeckDeckGo 🙏

P.S: We will keep the issue under the radar!

Collapse
joeberetta profile image
Joe Beretta

Not so long time ago I needed to make a presentation. That time I found that I'm tired to use PowerPoint and then save it to flash card and after show it in another pc. I think DeckDeckGo is really cool tool for presenting any Idea. Thank you and team. I ♥️ it)

Collapse
daviddalbusco profile image
David Dal Busco Author

I'm with you on the portability. I like the idea of being able to edit and review my presentations anywhere, on any devices, any time. Like being at home, editing my slides, then taking the tram to go to the event and reviewing it quickly on my phone to finally showcasing it on a projector.

Happy to hear you like the idea, thx for the feedback 🙏

Collapse
fluffynuts profile image
Davyd McColl

That remote app looks really, really useful -- a request though: I'd really like to use the annotations feature, but I think it would be a lot easier to use if the slide content was shown on the app too -- otherwise one has to kind of guess where the annotation will end up.

All-in-all, this looks like a serious competitor to Google Slides, and, tbh, I find the editing experience in Google Slides to be rather 💩, so I'm looking forward to taking this for a good spin the next time I have to do a presentation!

Collapse
daviddalbusco profile image
David Dal Busco Author

Thx Davyd for the cool feedback 👍

Agree with you. I've got the idea since a while now to be able to synchronize the content in the remote too (github.com/deckgo/deckdeckgo/issue...). I never went too far forward with that idea, mostly because we developed many other features, the editor and also because I didn't had the inspiration on how to present the content in a correct way (in terms of format, projector is probably landscape, remote is portrait). But this could be solved soon in the future as we are currently discussing a rework of the UX and design of the remote to make it more user and presenter friendly (github.com/deckgo/deckdeckgo/issue...).

Collapse
ymdahi profile image
Yasin Dahi

Well done, very useful and well designed app - congrats on the launch!

Collapse
daviddalbusco profile image
David Dal Busco Author

Thx for the nice words Yasin 😃

Collapse
crissxross profile image
Christine Wilks

I was reading your article with interest until I got to the animated gif for ‘Use an app to share other apps’. I find the way the gif turns a real living obese baby of colour into a comic spectacle very disturbing and exploitative. I am sure you intended no harm or offence but imagine how that child might feel as they grow older if they saw that image of themselves being used as a joke.

Collapse
abhinav1217 profile image
Abhinav Kulshreshtha

Looks amazing.. something to move away from google slides. A question, how well is it's offline tolerance. Only benefit of google slides is that it's extremely functional even when it's offline.

Collapse
daviddalbusco profile image
David Dal Busco Author

The published presentations should work offline (PWA and service worker).

The editor itself is not yet offline ready but it's of course on our agenda/mind.

Collapse
abhinav1217 profile image
Abhinav Kulshreshtha

Nice to know that editor's offline capabilities are on your agenda. Then it would be truly google slides replacement. Thanks for open sourcing this. Nice to see you using Haskell. I learned it in college days as a hobby, but never got around actually using it. Everyone just want to use JS these days.

Thread Thread
daviddalbusco profile image
David Dal Busco Author

Thanks for the warm feedback! I think it's cool to try to mix technologies and Nicolas is, at least in my eyes, a true Haskell wizard 😉

Collapse
fultonbrowne profile image
Fulton Browne

That's a great tool. I will definitely be using it

Collapse
daviddalbusco profile image
Collapse
christophervistal25 profile image
Christopher Vistal

This project is awesome :)

Collapse
daviddalbusco profile image
David Dal Busco Author

So happy to hear that, thx Christopher 👍

Collapse
larisho profile image
Gab

Bravo les gars. Ça à l'air d'être le future!

Collapse
daviddalbusco profile image
David Dal Busco Author

Haha excellent! C'est le premier message de la journée que je lis, elle commence de bonne humeur du coup, merci 😃

Collapse
bhupesh profile image
Bhupesh Varshney 👾

Hey That's a very nice product
Is it opensource ? I guess I could contribute something

Collapse
daviddalbusco profile image
Collapse
vbarzana profile image
Victor A. Barzana

Lol, wanted to implement this project since 2010 and never got the chance to do it, very cool, thank you for posting it!

Collapse
mostafiz93 profile image
Mostafiz Rahman

Great initiative! All the best! :)

Collapse
cescquintero profile image
Francisco Quintero 🇨🇴

This looks really nice and promising. I've always chosen Google Slides to create my presentations but I'm giving DDG a try for one in October 😁✌🏽

Collapse
daviddalbusco profile image
David Dal Busco Author

Yeah awesome 👍 Ping me for any feedbacks, questions or support, I'm happy to help!

Collapse
twitmyreview profile image
Priyab Dash

Now it sounds interesting but I will surely want a HTML or PDF export

Collapse
daviddalbusco profile image
David Dal Busco Author

The export of the source is for sure somewhere in our mind 😉

Collapse
johnnywell profile image
Johnny Wellington

Is it some sort of coincidence or do you have some DuckDuckGo background history to tell us?

Collapse
presidenten profile image
Johan Hernefeldt

What about private presentations?

Collapse
daviddalbusco profile image
David Dal Busco Author

Currently, you are right, assets and presentations you would publish are made public on the internet.

In the other hand, presentations you are editing and you would not share are private.

But we aware that this concern might be a need for some, we should think about it for the future.

Collapse
geeksesi profile image
Mohammad Javad Ghasemy

why duck toy for logo?
is it because duckduckgo ? :)))

cool project. but need more design for UI.

Collapse
estellechvl profile image
Estelle Chevallier

"mec c'est le futur" hahahah
looks like a really cool project ! good job !

Collapse
daviddalbusco profile image