Support for other frameworks (e.g. Vue)

[43081j]

Hello,

cool little project, have had a read through the source and seems like a nice concept. good work on pulling it together nicely 👍

one question i have is about your architectural choice of opting for react lock-in.

given that your architecture/process is essentially the following:

• bundle "remotion" (a bunch of react components for rendering purposes at this point) and the user's components via webpack
• visit said bundle in a browser with the frame and "composition" as parameters
• render the specified frame of the chosen "composition"
• take a screenshot
• repeat
• ultimately join these screenshots together and ffmpeg it into a video

it seems what you bundle and how doesn't really matter. you made a decision to write your rendering components in react, but it could've just as easily been a regular JS library.

do you have plans or would you ever consider reworking that part of the project to be framework-agnostic?

in reality it is a library which has been wrapped in react for sake of gaining entry into the state/ecosystem. if you reworked the bundle to instead be a library which renders "something" to DOM (still via a structured API/event flow), all frameworks would work with remotion and you'd open the door to a lot larger audience.

a simpler way of achieving that would be to separate the react rendering into its own package and maintain a core renderer which is framework-agnostic.

the cool/new concept here is the rendering/video creation, not the browser components. that part doesn't really depend on react (already), which makes it so close to being usable by non-react consumers but not quite.

---

IssueHunt Summary

Backers (Total: $0.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

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

[JonnyBurger]

Hey @43081j!

Good idea, I think you are correct in that most parts of Remotion are independent of React.
It's not completely agnostic yet, for example the <Sequence> component uses React Context, the lazyComponent feature makes use of React Suspense, and all the hooks like useCurrentFrame also make use of context and they also hook directly into the editor that is written in React.

So it's not completely trivial but in the long-term I definitely see it happen that you can use other frameworks such as Vue for Remotion. These building blocks that I mentioned need to be rewritten for other frameworks to be supported, and could for example be shipped in a new package like @remotion/vue.

I try to keep everything as unopinionated and modular as possible, and will keep this in mind for future development. If somebody is really motivated and wants to do it, we can start a new channel in our Discord where we can talk specifically about how to achieve it. 😃

[JonnyBurger]

I am putting out a $100 bounty to whoever manages to demonstrate that Remotion can import a Vue 3 API! (Only targeting v3 because we mainly care about the future)

It would be nice to show that within Vue components you can access Remotions context (most obvious usecase is making useCurrentFrame() work).

[issuehunt-oss]

@jonnyburger has funded $100.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.

[giraffekey]

Hey. If you want framework-agnostic web components, I've heard the Stencil library is capable of this.

[tomByrer]

Hey. If you want framework-agnostic web components, I've heard the Stencil library is capable of this.

Mitosis is built to transpile into other frameworks.

I'm more interested in SolidJS: JSX without React headaches.

making useCurrentFrame() work [in other languages]

This is the key! I am considering using TheatreJS for SolidJS/Mitosis, but maybe I'll see if I can use useCurrentFrame()...

[JonnyBurger]

Made a small proof of concept (vue branch).

Pretty straightforward, but all the components (Sequence, Video, Series, etc.) need to be ported over.

Also this is a blocker: vuejs/core#1033

Installing Vue in a React project destroys the React types even if you don't use the Vue JSX feature.

[leap0x7b]

Any updates in this project? Is the Vue bindings finished? Does it support vanilla JS for easier bindings? I want to use Remotion (player) on Svelte so I don't have to deal with the pain of JSX

[JonnyBurger]

@leapofazzam123 No progress beyond the current state in the vue branch.

My concern at the moment is that all the components such as Video, Audio, Sequence, Series, Loop etc. also need to be rewritten for Vue and I don't see a good strategy for sharing the code between React and Vue implementation yet.

If we have to do this, I am not keen on supporting other frameworks as it will be a burden to maintain all of it.

Check out this tweet: https://twitter.com/TomFevrier/status/1516100552215732229

Which uses Remotion with Svelte! I don't know how exactly they made it work though!

[ansarizafar]

@JonnyBurger https://github.com/BuilderIO/mitosis can be used to write components once, and run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

[JonnyBurger]

@ansarizafar Thanks, I will give it a shot at least!

[Wulfheart]

@JonnyBurger How did this turn out?

[JonnyBurger]

@Wulfheart It's possible, but there will be a lot of code duplication. I'm afraid that it will multiply the maintenance burden, so I'll hold off for the moment.

[JonnyBurger]

Related: There is a framework called Svelte-in-Motion: https://github.com/novacbn/svelte-in-motion

[MehmetAdemi]

Hi there, we removed the bounty because it came out that implementing this feature is more complex than we initially thought. We don’t expect a contributor to implement it. Nevertheless, any help is appreciated. We will put the bounty on another issue.

[issuehunt-oss]

@mehmetademi has cancelled @jonnyburger's funding for this issue.(Cancelled amount: $100.00) See it on IssueHunt

[NyllRE]

as a vue developer this type of libraries is very much needed in other libraries since react has been the top library but has been seeing a decline with other frameworks such as vue or svelte or solidjs or quik etc roll up the list. since the bounty is off I feel like this idea of converting the project to other frameworks is going to die. I sure hope not and I believe that if this project somehow achieved it, it would be trully revolutionary for the other framework communities.

[JonnyBurger]

Ok, I wanna be realistic and say that we are probably not going to ship support for Vue or other frameworks anytime soon.

• Currently we can leverage all the strengths of React (and live with its weaknesses). If we support multiple frameworks, we need to constrain it to only use the strengths that each framework has.
• Maintaining and developing for React is already a lot of effort and supporting less popular frameworks will multiply it but not multiply the amount of people who can use it. I respect those who believe that React is declining, but I don't believe so personally and this project is betting on that React will further grow.
• I did not find a satisfying solution to share the (sometimes complex) component logic between all frameworks.
• We want to expand our scope by supporting more platforms rather than new frameworks. This is also a strength of React and supporting multiple frameworks on multiple platforms will be too much scope for our humble and agile development workflow.

I encourage others to create frameworks for other languages, and will support them in spirit! Check out for example Svelte-in-Motion: https://github.com/novacbn/svelte-in-motion

[leap0x7b]

svelte-in-motion doesn't seem to be active anymore, the last commit is from 6 months ago and there is no forks

[blqke]

Hi @JonnyBurger Would you be supportive if someone was building a "portage" library, replicating your code and feature but on an other frontend framework, or would it be unethical to you ?

As an example, I have in mind https://github.com/bcakmakoglu/vue-flow (cc @bcakmakoglu), which is primarly built on top of the code of https://github.com/wbkd/react-flow

Just asking, as it may give idea to some people here

[JonnyBurger]

@blqke
I'm supportive of it! As we have no plans to port it to Vue, I don't mind a Vuemotion that uses a lot of code from Remotion. I would like to see it have some other original ideas as well rather than just being 1:1 the same, except for using Vue.