Brian:
PodRocket is sponsored by LogRocket, a frontend monitoring and product analytics solution. Don't know what that is? Go to logrocket.com. Thanks.

Ben:
Hello and welcome to PodRocket. Today I'm here with Jonny Burger who's the creator of Remotion. How are you doing Jonny?

Jonny:
I'm doing well. Thank you for having me.

Ben:
Yeah. Happy, happy to have you and I'm excited to learn about Remotion because the project looks pretty cool. So maybe you could give us a quick intro to what you're building.

Jonny:
Yeah, for sure. So Remotion is like a JavaScript library and the goal of it is to allow you to write videos programmatically. So of course, traditionally used like a video editing program that you drag and drop all the things together and then you get the video out, but I want to do it developer style so of course. Just like I'm not satisfied with using Excel to get my data analysis solution, I want to code it, I also want to code my videos and that's why I ended up making a framework for making videos because this graphical user interface is better but not enough for me.

Ben:
And so what kind of videos can you make? I guess, any kind of video or is it more kind of like I guess like animated type videos or? Tell us a bit more about what's the intended type of project to do in Remotion.

Jonny:
So as many videos as possible, that's our goal. And everything is based of the VEP platform. So I would say you can make any videos that the VEP platform allows. So the biggest use case I would say is these motion graphics that you see or all videos that you would make with After Effects. Usually, but you can also import footage of a camera and then cut the video together. I would say that's maybe not the smoothest use case because it takes just so much longer to code it. And yeah, we are also now exploring 3D videos using Three JS and that's actually quite capable audio visualizations. So yeah, I would say a variety of use cases are supported.

Ben:
And so what's the advantage of using or of being able to write code to describe a video versus using something like After Effects where it's a bit more of like a visual timeline based video editor?

Jonny:
There are multiple aspects where I think there's limitations to traditional video editing programs. One is compatibility and reusability. If you know a bit, these programs like Photoshop or After Effects, if you want to reuse some elements that you have, then usually you just copy paste and then that's it. If you later decide that, oh, actually I wanted to change something before I copy paste it, you have to go through each layer and adjust it individually. Then also another aspect is version control. So you have undo and redo but that said maybe the program just crashes and it's like a fierce binary format that you cannot really have with Git or just the normal version control system that as developers are using, we can have a much more team speaking to have pull requests. We can undo a certain step and yeah, overall much more powerful.

Jonny:
And define land, I think the biggest advantage of it is that you can take in data from an API and make a video based off that and going even further, if you say, okay, I want to create 1000 videos for example. For each one of my user, I want to create for them a personalized video, you can programmatically trigger the video and take data from the API and create a bulk of videos, which I found was pretty hard using the traditional way.

Ben:
So I'm curious when I'm making a video with Remotion do, do people primarily render their video as DOM like HTML and CSS? Or can you also use like Canvas or WebGL or SVG can use any web technologies or what do you usually see people using?

Jonny:
We want to support any web technology and to be honest, the web technologies that we currently have, they are graphically so, so powerful. I mean, we fall [inaudible 00:05:31] in these demos of crazy CSS only drawings and then with SBG, you can go in even further. With WebGL, you enter the third dimension and completely eliminate any remaining boundaries. So yes, all web technologies are possible. And this is why I think it's a good fit. Sometimes though there is some friction. So if you would try to use a CSS animation, for example, then it would just play by itself and then you could scrap through the timeline back and forth and it wouldn't really work well together or the timing would be off. With Web GL, if you ran this to a canvas, then sometimes some sizing issues occur because the GPU is like doing weird stuff. And if that is the case, then we try to release helper libraries. So now we have for Remotion 3 and we should allow you to write a video snap with Three JS. But yeah, that's some additional work and sometimes it doesn't quite work out of the box.

Ben:
And so let's talk a bit more about how it works. So it looks like you kind of write React code more or less, and once you kind of code your video and we can talk in a minute more about what the actual code looks like, but once you code your video, does Remotion render it into like an MP4 and then you just have an MP4 video or is there an option to render it like live and in a canvas or something if you wanted it to be if you want to programmatically render it live on the client side, how does that work?

Jonny:
So, yeah. So if you want to make a video like an MP4 video of course, there are other code decks like WebM, but all of them, they essentially, each video consists of a series of still images. So a common frame rate is 30 frames per second. So that means that one second of video just consists of 30 frames. So if we have 30 frames, we can encode it to a video. So essentially Remotion allows you to express for each of these 30 frames, it allows you to render an image. There's the hook called use current frame. And based on the current time, you basically render some React code and that is your image. And then we screenshot what you have coded using Puppeteer. And then you have a bunch of images, you encode these into FFmpeg. I would say that's a very simple technique actually that we are using. Not really rocket science.

Jonny:
Then there's also like audio coming into it where we write some custom audio mixing codes for FFmpeg to consume. But yeah, the basic idea is to just screenshot a bunch of web content and because of video consists of a lot of still images, turn it into a video.

Ben:
Got it. So you're using like a headless browser. You're running the code in a headless browser taking the screenshots, but could you also do that on the client side live for an end user? Let's say I have a website where I want to kind of show custom animation video to a user. Could I do that with Remotion?

Jonny:
So it's not possible to... there's no JavaScript API to take a screenshot directly in the browser, but you can. There's something called a Remotion player that's one thing that we are developing and essentially it's like a video player. It has a play button, has a volume control bar and you can jump to a certain portion of the video, but then you are not actually playing a video, but it's just like it is re-rendering like 30 times a second and then it's also in motion. So this is what we have and what we support. And the benefit of that is that you can preview and it's like a video. And then you can even change the text inside the video while it's playing, which is pretty cool. And although it's not a real video, you can then still send the request to the server and turn that later into a real video if you wanted to have it.

Ben:
Yeah. And you're kind of speaking our language here because LogRocket, our product, it has session replay and the way that works is you have an end user who... The LogRocket SDK is installed in your app, the end user captures what is the HTML and the CSS at the time of the end user session. And then when you, the developer, go to play back a session in LogRocket, we have an iframe we read, we kind of put the same HTML and CSS into that iframe. There's little player control so you can press play and pause, but you're looking at an iframe with HTML and CSS in it. So it sounds like kind of your player is kind of similar where it looks like a video to the end user, but it's really just has DOM contents in there.

Jonny:
Yeah, totally. I mean, this is pretty universal, just like anything that changes over time and you can visualize in a timeline, you can make a player out of it. I'm sure it also works pretty well for you.

Ben:
And I'm curious about the choice to kind of base Remotion on React. When I think of video or if I were to think, kind of my brain, how would I code a video, I feel like I'd go to kind of more of an imperative model first before reactive. But I'm curious why React? Why kind of base the process of creating videos on reactive programming and React?

Jonny:
So mainly because I'm a React developer, I start from here. I am open-minded for this. So I could imagine that. And I also want to design it that it will support other approaches as well. So like the Vue developer or an Angular developer could write their video in Angular or that you have an imperative API. That I could also imagine. Although this reactive stuff is nice because you can easily react to when the time changes, right? So this React hook that we have currently use current frame that tells you what the current time is and then you can rerender based off this. Yeah, so a reactive framework is nice because you actually have to do a lot of re-renders.

Ben:
And in addition to writing your... To create a video. So I'm writing my code and React. Is there a Remotion kind of like a IDE or some sort of Remotion development environment where I can create my videos or you simply open Sublime Text or whatever text editor and open web browser and that's how you're doing your videos.

Jonny:
Yeah. He would just code everything in VS Code. And then there's a command npm start. That's how you preview your video. So as you can see, we try to make very familiar for developers. So you started editing the video using npm start and that will kind of open a small preview environment in the browser. There you have a few settings. So there's a timeline that shows you what the content of your video kind of, and you can, like in a video editor, you can scrub around the timeline with your mouse cursor and you can play and pause the video or have some other controls like you want to have transparency. Do you want to resume into the video and stuff like that? The controls you have are pretty minimal and we were kind of so obsessed with the idea of doing everything in code that we want you to do as things as possible in code.

Jonny:
So to have a feature where you can trim a clip and it will save it back to the codes that we don't have. It's just like you do everything in code. And there's also this... I saw this, I think it's called unidirectional data flow of React. So you have to do everything code, almost everything.

Ben:
And so Remotion, it's open source. Right? Kind of anyone free to use it, but I'm curious on your site, you have some different pricing plans and some of that, so curious like what does the developer get for upgrading and kind of longer term, what's kind of the business model you plan to build around Remotion?

Jonny:
Yeah. So my thinking behind it was that I want Remotion to be open for the community that anybody can can build on it. Not something that, yeah, it's proprietary that you have to you have to buy the cat in the bag. Yeah. Because this was my approach as someone who put out a lot of open source repositories already on GitHub. But for this project, I felt like, yeah, it's something special and maybe it's almost too good to just put out there and then so many people will use it. I also see a lot of maintainers getting burned out, getting so many issues. Now this big company is like taking advantage of this open source project and using it. And although the maintainer is creating so much value for them, they don't get anything out of it except trouble having to maintain it responds to everybody.

Jonny:
So this pricing that I put for Remotion, it's basically a class that if a company of a certain size, I put the threshold at three people, wants to use Remotion, then I assume okay, they are really serious about it and they can probably make some money out of it. And I probably assume they also have some money, then they'd have to pay for Remotion. So basically it's a safeguard for me to ensure that I will not burn out because it will blow up, which it's actually did a little bit in the end and that I will just get flooded in issues and will get nothing back out of it. And now I am happy because there are a few customers and the money also allows me to spend much more time on it and keep it clean, keep it maintained.

Ben:
So what does it the future of Remotion look like? What kind of features are you most excited about on the roadmap?

Jonny:
So the goal is really to.. So of course we have this vision that people can create videos in React and also programmatically render them in bulk, use this APIs. And this vision is already partially fulfilled, which I am really happy about. You can do a lot of love stuff. So in the car of Remotion, I feel like we don't have to change so much and optimize. The rendering part, this one is still not very good and this is where I am in the future going to spend my time on building better tools for developers. So video rendering, it takes a lot of time to do so. If you are rendering a video, it will take like two or three seconds to just render one second of video because you have to render all these images. And you need to have really good hardware. Like you should have quad core or eight core processors, which is I'm still not happy about that.

Jonny:
So actually I'm going to create a distributed rendering system using AWS Lambda, which will render the videos really fast. So my idea is to split up a long video into 100 parts or more and then launch 100 small computers in the cloud using AWS Lambda, let them each render 1% of the video and that it will be really fast and then like put it back together into one long video. And by that creates the world's fastest video renderer. That's the next plan.

Ben:
So tell me a bit about the kind of community that started to form around remotion. I know you started the project, but are there other folks that are working on it with you now and for anyone that's interested in contributing or kind of just interested in this idea of creating videos with React and JavaScript, what do you recommend in terms of helping contribute?

Jonny:
Yeah. So indeed there have been a few dozen people who have now contributed and it's a really good, because then it's we move much faster and it's not just like there's just not one brain out of it, which kind of has a tunnel vision. So yeah. Different people have different views and that makes the project overall better. And since I have also mentioned that I charge companies for Remotion, so it's a business, I also want to give back to these contributors. So the top contributors, they can not now just work on Remotion and I will pay them. That really makes the project flourish and we fix all the bugs and do all the tasks much faster. And there's also a lot of other contributors who, some of them really just also want to join me on this vision to make it happen that we write videos in React. They think it's a cool project or they are already using it or facing a hurdle, that's one reason why someone would want to become a contributor.

Jonny:
And so yeah, if community has faster I would say, and one of the best decisions I would say I have made was to create a Discord server. Of course, you start small. But it has really paid off. I think now we are approaching 500 people in the Discord and it's just so convenient to just quickly ask a quick question in the DMs, debug a problem, have some channels where we can coordinate what should we build next and are you interested in this feature to just show other people the videos that you have made, for example. Many use cases for it. And just for this GitHub is not enough. So I'm happy we also made a chat server. And I would say that it's working pretty well. Then of course, people file GitHub issues and every day I wake up and there's something somebody has discovered. Surprised what people find sometimes. And yeah, just trying to do it as good as possible, encourage other people to also help me fix it. That I would say describes my life of maintaining Remotion.

Ben:
Well, Johnny, thank you so much for joining us today. It's been awesome to learn about Remotion. For anyone out there that's interested, the website is remotion.dev. So definitely go check it out, but yeah, thanks again.

Jonny:
Yeah. Thanks a lot. It was a lot of fun to tell you about Remotion. Thanks again for having me and also best of luck with LogRocket.

Brian:
Hi. Thanks for listening. Please remember to like, subscribe, email me if you want, even though none of you do. Go to logrocket.com and try it out. It's free to try then it costs money, but yeah, we'll see you next time. Thanks.