Write article about how to create a series of videos from a dataset

[JonnyBurger]

🎃 This issue is part of our Hacktoberfest campaign!
📚 Read more about Hacktoberfest here
⏲️ This issue is currently assigned to @ThePerfectSystem!
💰 Thanks to CodeChem for sponsoring this issue!

A common problem that users want to solve with Remotion is that they have a dataset (let's assume JSON for simplicity) and create a video for each one of the entries in their set.

How I would recommend to do it is to create a TypeScript script, and use renderMedia() to render a video for each data and parametrize the video based on input props. There is already https://remotion.dev/docs/ssr which is similar but does not specifically explain how to approach the problem if you have a dataset.

Acceptance criteria

• Write an article and add it to the website (take for example the Figma article as a reference: Exporting from Figma to Remotion  #1378)
• In that article, assume that you have a simple example video (it can for example be the example from https://www.remotion.dev/docs/player, source can be found at the bottom of the page) with few parameters (e.g. color and name)
• Explain step for step, how one would write and run a script that renders a video for each person in a dataset. Also create a small sample dataset, for example of 10 people who each have a name and favorite color.
• Include code snippets and screenshots where it makes sense.

---

IssueHunt Summary

theperfectsystem has been rewarded.

Backers (Total: $195.00)

• remotion-dev ($195.00)

Submitted pull Requests

• #1503 add documentation for rendering from dataset

---

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[issuehunt-oss]

@remotion-dev has funded $195.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[ThePerfectSystem]

Hello! Can I work on accomplishing this?

[JonnyBurger]

@ThePerfectSystem Yes, good luck 😊

[ThePerfectSystem]

thanks, @JonnyBurger! I wanted to ask, the dummy dataset should be fine as declared inside the TypeScript script or should I try to demonstrate that as say a .csv file?

[JonnyBurger]

@ThePerfectSystem A TypeScript array is totally fine, thanks for asking 😊 I think there are plenty of tutorials that show how to import CSV already.

[ThePerfectSystem]

yess thanks a lot, i'm having trouble taking out time these days since uni exams are approaching 😅 but i wanted to confirm that I should write the article as a .md file and store it as packages/docs/docs/videosFromDatasetOrSomeOtherName.md, right? (like how the markdown file for the figma article was stored)

[JonnyBurger]

@ThePerfectSystem That's correct! Good luck with uni and if you feel stressed, let us know and we totally understand if you don't want to do it anymore!

[ThePerfectSystem]

Thank you soo much for your concern! I would absolutely let you know in case I feel stressed. But for right now, this feels like a really fun task to take on. Would it be okay if I'm not able to finish it by october-end?

[JonnyBurger]

@ThePerfectSystem Fine for us :)

[ThePerfectSystem]

welp, looks like i wouldn't be able to complete this before october end after all. but i'm still on it!

[JonnyBurger]

@ThePerfectSystem No problem 😊

[ThePerfectSystem]

Hey @JonnyBurger I can't thank you enough for your patience, I managed my uni exams just fine and, in the meanwhile, got myself acquainted with react and remotion. However I'm having trouble pinpointing which componentID I will be rendering when rendering the output videos, could you maybe provide any pointers? 😅

[JonnyBurger]

@ThePerfectSystem Glad to hear the exams went well! 🥳 Congrats!

You would define one static composition ID (not of componentID, make sure you use the correct term in the docs) which can be anything, like MyComp for example. Some more info on what it is: https://www.remotion.dev/docs/terminology#composition-id

[ThePerfectSystem]

Hey @JonnyBurger thanks for your help, but I must admit that I was a rookie when I came to the issue, I've spent the past couple of days learning about react, remotion and node (and it has been a very informative experience, absolutely worth it!).

Apologies but a very much a newbie question ahead, I'm still unable to figure out what the example at https://remotion.dev/docs/ssr already assumes the user to have set up. I tried creating a folder, npm initialising it and then installing the remotion npm package. Is the code snippet just meant to go in a .js file and running it as node filename.js?

I've been stuck on this for a few days now, I tried looking for it but have been unable to do so partly because I find the problem hard to describe. Any help would be tremendously appreciated!

[JonnyBurger]

@ThePerfectSystem Very good question! We expect the user to have already installed a Remotion template with npm init video. Then they already have an entry point and the necessary packages. After that, indeed they can create a .js file and run it with node.

We want to promote TypeScript though, in that case it would be a .ts file and it would be executed with ts-node.

[RamiroMonte]

Hello @JonnyBurger. I know @ThePerfectSystem is already assigned this issue, but I wonder if I can work on it together? I found the idea very interesting and can think of several remotion applications with it :)

[ThePerfectSystem]

Hey @RamiroMonte! Really appreciate it but though it took me a while, I think I got it pretty much figured out now except for a few gaps here and there 😅. Should be done with it soon!

[JonnyBurger]

Nice, thank you @RamiroMonte!

How about you create a draft pull request soon @ThePerfectSystem and @RamiroMonte will then be able to add some feedback to it?

[ThePerfectSystem]

Sure @JonnyBurger, that sounds like a great idea! Will be doing that.

[ThePerfectSystem]

Hi, I'm terribly sorry for this delay but I have been unwell and had to take care of some other deadlines on top of that, will be opening the draft PR by today

[alexfernandez803]

@JonnyBurger From the description of the issue at hand. I have created a project in here.
https://github.com/alexfernandez803/remotion-dataset.

Looks like I am late on the party.

MR is located in here, #1502.

[ThePerfectSystem]

might as well share what i'd been working on ^

[issuehunt-oss]

@jonnyburger has rewarded $175.50 to @theperfectsystem. See it on IssueHunt

• 💰 Total deposit: $195.00
• 🎉 Repository reward(0%): $0.00
• 🔧 Service fee(10%): $19.50