1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["18476"],{94646(e,n,o){o.r(n),o.d(n,{metadata:()=>i,default:()=>u,frontMatter:()=>d,contentTitle:()=>t,toc:()=>l,assets:()=>a});var i=JSON.parse('{"id":"render","title":"Render your video","description":"There are various ways to render your video.","source":"@site/docs/render.mdx","sourceDirName":".","slug":"/render","permalink":"/docs/render","draft":false,"unlisted":false,"editUrl":"https://github.com/remotion-dev/remotion/edit/main/packages/docs/docs/render.mdx","tags":[],"version":"current","lastUpdatedAt":1790262572000,"frontMatter":{"image":"/generated/articles-docs-render.png","id":"render","title":"Render your video","crumb":"How To"},"sidebar":"mainSidebar","previous":{"title":"Exporting","permalink":"/docs/captions/exporting"},"next":{"title":"Encoding Guide","permalink":"/docs/encoding"}}'),r=o(57825),s=o(29721);let d={image:"/generated/articles-docs-render.png",id:"render",title:"Render your video",crumb:"How To"},t,a={},l=[{value:"Remotion Studio",id:"remotion-studio",level:2},{value:"Remotion Studio deployment",id:"remotion-studio-deployment",level:3},{value:"CLI",id:"cli",level:2},{value:"SSR",id:"ssr",level:2},{value:"AWS Lambda",id:"aws-lambda",level:2},{value:"GitHub Actions",id:"github-actions",level:2},{value:"Google Cloud Run",id:"google-cloud-run",level:2},{value:"Variants",id:"variants",level:2},{value:"Audio-only",id:"audio-only",level:3},{value:"Image Sequence",id:"image-sequence",level:3},{value:"Still images",id:"still-images",level:3},{value:"GIF",id:"gif",level:3},{value:"Transparent videos",id:"transparent-videos",level:3},{value:"See also",id:"see-also",level:3}];function c(e){let n={a:"a",br:"br",code:"code",div:"div",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,s.R)(),...e.components},{RawMarkdownCarrier:o}=n;return o||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("RawMarkdownCarrier",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(o,{raw:'---\nimage: /generated/articles-docs-render.png\nid: render\ntitle: Render your video\ncrumb: \'How To\'\n---\n\nThere are various ways to render your video.\n\n## Remotion Studio\n\nTo render a video, click the "<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style={{height: 16, verticalAlign: "text-bottom", fill: "currentColor"}}><path d="M117.8 128H207C286.9-3.7 409.5-8.5 483.9 5.3c11.6 2.2 20.7 11.2 22.8 22.8c13.8 74.4 9 197-122.7 276.9v89.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9l0-114.7c0-22.6-9-44.3-25-60.3s-37.7-25-60.3-25H24c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3zM424 128a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zM166.5 470C132.3 504.3 66 511 28.3 511.9c-16 .4-28.6-12.2-28.2-28.2C1 446 7.7 379.7 42 345.5c34.4-34.4 90.1-34.4 124.5 0s34.4 90.1 0 124.5zm-46.7-36.4c11.4-11.4 11.4-30 0-41.4s-30-11.4-41.4 0c-10.1 10.1-13 28.5-13.7 41.3c-.5 8 5.9 14.3 13.9 13.9c12.8-.7 31.2-3.7 41.3-13.7z"/></svg> Render" button. \nChoose your preferred settings, then confirm using the `Render video` button.\n\n### Remotion Studio deployment\n\nIt\u2019s possible to deploy the Remotion Studio onto a long-running server in the cloud, which can then be accessed by your non-technical team members using just a URL. Check out the [Deploy the Remotion Studio](/docs/studio/deploy-server) guide to learn how to do this.\n\n## CLI\n\nRender a video using [`render` CLI command](/docs/cli/render):\n\n```bash\nnpx remotion render HelloWorld\n```\n\nModify the composition ID to select a different video to render, or add an output path at the end if you want to override the default.\n\nYou can leave out the composition name and a picker will be shown:\n\n```bash\nnpx remotion render\n```\n\n## SSR\n\nRemotion has a full-featured server-side rendering API. Read more about it on the [server-side rendering API](/docs/ssr).\n\n## AWS Lambda\n\nCheck out [Remotion Lambda](/docs/lambda).\n\n## GitHub Actions\n\nYou can also render a [video using a GitHub Action.](/docs/ssr#render-using-github-actions)\n\n## Google Cloud Run\n\nAn alpha version of Remotion for Cloud Run is [available](/docs/cloudrun). \nWe plan to change it in the future so it shares a runtime with Remotion Lambda.\n\n## Variants\n\n### Audio-only\n\nInstead of rendering a video, [you can also just export the audio.](/docs/encoding#audio-only-export)\n\n### Image Sequence\n\nInstead of encoding as a video, you can use the [`--sequence`](/docs/cli/render#--sequence) command to output a series of image.\n\n### Still images\n\nIf you want a single image, you can do so using [the CLI or Node.JS API](/docs/stills).\n\n### GIF\n\nSee: [Render as GIF](/docs/render-as-gif)\n\n### Trans
1parent videos\n\nSee: [Creating overlays](/docs/overlay)\n\n### See also\n\n- [CLI options](/docs/cli)\n'}),"\n",(0,r.jsx)(n.p,{children:"There are various ways to render your video."}),"\n",(0,r.jsx)(n.h2,{id:"remotion-studio",children:"Remotion Studio"}),"\n",(0,r.jsxs)(n.p,{children:['To render a video, click the "',(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",style:{height:16,verticalAlign:"text-bottom",fill:"currentColor"},children:(0,r.jsx)("path",{d:"M117.8 128H207C286.9-3.7 409.5-8.5 483.9 5.3c11.6 2.2 20.7 11.2 22.8 22.8c13.8 74.4 9 197-122.7 276.9v89.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9l0-114.7c0-22.6-9-44.3-25-60.3s-37.7-25-60.3-25H24c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3zM424 128a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zM166.5 470C132.3 504.3 66 511 28.3 511.9c-16 .4-28.6-12.2-28.2-28.2C1 446 7.7 379.7 42 345.5c34.4-34.4 90.1-34.4 124.5 0s34.4 90.1 0 124.5zm-46.7-36.4c11.4-11.4 11.4-30 0-41.4s-30-11.4-41.4 0c-10.1 10.1-13 28.5-13.7 41.3c-.5 8 5.9 14.3 13.9 13.9c12.8-.7 31.2-3.7 41.3-13.7z"})}),' Render" button.',(0,r.jsx)(n.br,{}),"\n","Choose your preferred settings, then confirm using the ",(0,r.jsx)(n.code,{children:"Render video"})," button."]}),"\n",(0,r.jsx)(n.h3,{id:"remotion-studio-deployment",children:"Remotion Studio deployment"}),"\n",(0,r.jsxs)(n.p,{children:["It\u2019s possible to deploy the Remotion Studio onto a long-running server in the cloud, which can then be accessed by your non-technical team members using just a URL. Check out the ",(0,r.jsx)(n.a,{href:"/docs/studio/deploy-server",children:"Deploy the Remotion Studio"})," guide to learn how to do this."]}),"\n",(0,r.jsx)(n.h2,{id:"cli",children:"CLI"}),"\n",(0,r.jsxs)(n.p,{children:["Render a video using ",(0,r.jsxs)(n.a,{href:"/docs/cli/render",children:[(0,r.jsx)(n.code,{children:"render"})," CLI command"]}),":"]}),"\n",(0,r.jsx)(n.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">npx</span><span style="color:#9ECBFF"> remotion</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> HelloWorld</span></span></code><button class="copy-button" aria-label="Copy code to clipboard">Copy</button></pre>'}}),"\n",(0,r.jsx)(n.p,{children:"Modify the composition ID to select a different video to render, or add an output path at the end if you want to override the default."}),"\n",(0,r.jsx)(n.p,{children:"You can leave out the composition name and a picker will be shown:"}),"\n",(0,r.jsx)(n.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">npx</span><span style="color:#9ECBFF"> remotion</span><span style="color:#9ECBFF"> render</span></span></code><button class="copy-button" aria-label="Copy code to clipboard">Copy</button></pre>'}}),"\n",(0,r.jsx)(n.h2,{id:"ssr",children:"SSR"}),"\n",(0,r.jsxs)(n.p,{children:["Remotion has a full-featured server-side rendering API. Read more about it on the ",(0,r.jsx)(n.a,{href:"/docs/ssr",children:"server-side rendering API"}),"."]}),"\n",(0,r.jsx)(n.h2,{id:"aws-lambda",children:"AWS Lambda"}),"\n",(0,r.jsxs)(n.p,{children:["Check out ",(0,r.jsx)(n.a,{href:"/docs/lambda",children:"Remotion Lambda"}),"."]}),"\n",(0,r.jsx)(n.h2,{id:"github-actions",children:"GitHub Actions"}),"\n",(0,r.jsxs)(n.p,{children:["You can also render a ",(0,r.jsx)(n.a,{href:"/docs/ssr#render-using-github-actions",children:"video using a GitHub Action."})]}),"\n",(0,r.jsx)(n.h2,{id:"google-cloud-run",children:"Google Cloud Run"}),"\n",(0,r.jsxs)(n.p,{children:["An alpha version of Remotion for Cloud Run is ",(0,r.jsx)(n.a,{href:"/docs/cloudrun",children:"available"}),".",(0,r.jsx)(n.br,{}),"\n","We plan to change it in the future so it shares a runtime with Remotion Lambda."]}),"\n",(0,r.jsx)(n.h2,{id:"variants",children:"Variants"}),"\n",(0,r.jsx)(n.h3,{id:"audio-only",children:"Audio-only"}),"\n",(0,r.jsxs)(n.p,{children:["Instead of rendering a video, ",(0,r.jsx)(n.a,{href:"/docs/encoding#audio-only-export",children:"you can also just export the audio."})]}),"\n",(0,r.jsx)(n.h3,{id:"image-sequence",children:"Image Sequence"}),"\n",(0,r.jsxs)(n.p,{children:["Instead of encoding as a video, you can use the ",(0,r.jsx)(n.a,{href:"/docs/cli/render#--sequence",children:(0,r.jsx)(n.code,{children:"--sequence"})})," command to output a series of image."]}),"\n",(0,r.jsx)(n.h3,{id:"still-images",children:"Still images"}),"\n",(0,r.jsxs)(n.p,{children:["If you want a single image, you can do so using ",(0,r.jsx)(n.a,{href:"/docs/stills",children:"the CLI or Node.JS API"}),"."]}),"\n",(0,r.jsx)(n.h3,{id:"gif",children:"GIF"}),"\n",(0,r.jsxs)(n.p,{children:["See: ",(0,r.jsx)(n.a,{href:"/docs/render-as-gif",children:"Render as GIF"})]}),"\n",(0,r.jsx)(n.h3,{id:"transparent-videos",children:"Transparent videos"}),"\n",(0,r.jsxs)(n.p,{children:["See: ",(0,r.jsx)(n.a,{href:"/docs/overlay",children:"Creating overlays"})]}),"\n",(0,r.jsx)(n.h3,{id:"see-also",children:"See also"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/docs/cli",children:"CLI options"})}),"\n"]})]})}function u(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.