Skip to content
Open {re}Source
Articles

Coding LinkedIn Carousels

5 min read
Julien Déramond
Julien Déramond
Open {re}Source • Bootstrap • Orange

Coding LinkedIn carousels… yes, not using design tools but using developer tools! It’s now possible!

A few days ago, we shared a new article on LinkedIn and tried to make it more engaging by using a carousel. And creating a carousel on LinkedIn can take a bit of time, especially if you’re not that familiar with design tools such as Canva, Figma, or even Penpot, our open-source design tool friend. Even with the tons of templates available out there, customizing them is a lot of work.

In the open-source software world, we are mostly developers, we’re not going to lie. So, we thought: “Why not code the LinkedIn carousel?” And that’s what we did!

How LinkedIn carousels work

Just for those who are not familiar with LinkedIn carousels, they are a series of images or slides that you can swipe through. They are a great way to share information in a visually appealing format. You can use them to showcase your open-source project, share tips, or even tell a story.

There’s no really a creator tool for LinkedIn carousels, so you have to create them yourself.

Basically, a LinkedIn carousel is in fact a PDF file. You can create a PDF file with multiple pages, and each page will be a slide in your carousel. You can then upload this PDF file to LinkedIn, and it will automatically convert it into a carousel.

  1. On LinkedIn, click on the ”+ Create” button.
  2. Select “Start a post”.
  3. Click on the ”+” icon, and “Add a document”.
  4. Select your PDF file, choose a document title, and LinkedIn will convert it into a carousel.

The Idea

So, if it just a PDF file, why not code it? We can create a simple HTML file with multiple slides, and then convert it into a PDF file. And that’s what we did!

We already use this great tool for presentations, it’s called Slidev.

Slidev is a presentation tool based on Vue.js. It allows you to create beautiful slides with Markdown and code. And it has a feature to export your slides as a PDF file. It is an open-source project, under the MIT license.

slidevjs/
slidev Presentation Slides for Developers

How to Code LinkedIn Carousels

It’s really simple in fact.

The first step is to create a new Slidev project. You can do this by running the following command:

Terminal window
npm init slidev@latest

This will create a new Slidev project in the current directory. You can then open the project in your code editor and start customizing the slides.

Obviously, you’ll notice that the default Slidev theme is not really suitable for LinkedIn carousels as the slides are generally in landscape format, in 16:9 ratio. So, you’ll need to customize the theme to make it more suitable for LinkedIn carousels.

In the slides.md you just have to add the following properties in the frontmatter:

---
aspectRatio: "3/4"
canvasWidth: 800

Just install playwright-chromium as a dev dependency, and export your slides as a PDF file:

Terminal window
npm install -D playwright-chromium
npm run export

And voilà, you got a nice slides-export.pdf that could be used as a LinkedIn carousel!

We Created a Theme for LinkedIn Carousels

However, you’ll notice that you still have some design work to do in order to render your carousel more visually appealing.

So, we created a theme for LinkedIn carousels called slidev-theme-linkedin-carousel, that is an open-source project under the MIT license.

Open-reSource/
slidev-theme-linkedin-carousel Slidev theme to create LinkedIn carousels

Here’s how it looks like: https://slidev-theme-lk-carousel.netlify.app.

How to Use the Theme

To use the theme, you just have to install it as a dev dependency:

Terminal window
npm i -D slidev-theme-linkedin-carousel

and then add the following frontmatter to your slides:

---
theme: linkedin-carousel
---

For more information on how to use the theme, check out the README.

The example.md file in the repository is a good starting point to create your own LinkedIn carousels. And from there, you can customize the slides to your liking, and even use custom components to make them more impacting.

That’s how you can code LinkedIn carousels. It’s a great way to share information in a visually appealing format, and it’s also a fun way to learn new things. We hope you enjoyed this guide, and we can’t wait to see what you create!

Don’t hesitate to share your LinkedIn carousels with us, we’d love to see them! See ya on LinkedIn!

If you liked this theme, use it, please consider giving it a star on GitHub, or even sponsoring us. It helps us a lot!

Tags: