1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["1194"],{49477(t,e,r){r.r(e),r.d(e,{metadata:()=>d,default:()=>h,frontMatter:()=>n,contentTitle:()=>o,toc:()=>c,assets:()=>a});var d=JSON.parse('{"id":"editor-starter/vs-studio","title":"Editor Starter vs. Remotion Studio","description":"The Remotion Studio and the Editor Starter are different products for different purposes.","source":"@site/docs/editor-starter/vs-studio.mdx","sourceDirName":"editor-starter","slug":"/editor-starter/vs-studio","permalink":"/docs/editor-starter/vs-studio","draft":false,"unlisted":false,"editUrl":"https://github.com/remotion-dev/remotion/edit/main/packages/docs/docs/editor-starter/vs-studio.mdx","tags":[],"version":"current","lastUpdatedAt":1790778889000,"frontMatter":{"image":"/generated/articles-docs-editor-starter-vs-studio.png","title":"Editor Starter vs. Remotion Studio","sidebar_label":"vs. Remotion Studio","id":"vs-studio","crumb":"Editor Starter"},"sidebar":"editorStarterSidebar","previous":{"title":"FAQ","permalink":"/docs/editor-starter/faq"}}'),i=r(57825),s=r(29721);let n={image:"/generated/articles-docs-editor-starter-vs-studio.png",title:"Editor Starter vs. Remotion Studio",sidebar_label:"vs. Remotion Studio",id:"vs-studio",crumb:"Editor Starter"},o,a={},c=[{value:"See also",id:"see-also",level:2}];function l(t){let e={a:"a",h2:"h2",li:"li",p:"p",ul:"ul",...(0,s.R)(),...t.components},{RawMarkdownCarrier:r}=e;return r||function(t,e){throw Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}("RawMarkdownCarrier",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r,{raw:"---\nimage: /generated/articles-docs-editor-starter-vs-studio.png\ntitle: Editor Starter vs. Remotion Studio\nsidebar_label: vs. Remotion Studio\nid: vs-studio\ncrumb: Editor Starter\n---\n\nThe Remotion Studio and the Editor Starter are different products for different purposes.\n\n<table>\n <thead>\n <tr>\n <th></th>\n <th style={{width: '40%'}}>Remotion Studio</th>\n <th style={{width: '40%'}}>Editor Starter</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><strong>Screenshot</strong></td>\n <td><img src=\"/img/timeline.png\" style={{width: '100%', borderRadius: 4}} /></td>\n <td><img src=\"https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/demo-editor-starter.png\" style={{width: '100%', borderRadius: 4}} /></td>\n </tr>\n <tr>\n <td><strong>What is it?</strong></td>\n <td>A preview tool for Remotion compositions.</td>\n <td>A boilerplate for building your own video editor.</td>\n </tr>\n <tr>\n <td><strong>How to start</strong></td>\n <td><code>npx remotion studio</code></td>\n <td><code>npx react-router dev</code></td>\n </tr>\n <tr>\n <td><strong>Target audience</strong></td>\n <td>Developers wanting to make videos</td>\n <td>Developers wanting to build a video editor</td>\n </tr>\n <tr>\n <td><strong>What are you coding?</strong></td>\n <td>The video itself</td>\n <td>The video editor</td>\n </tr>\n <tr>\n <td><strong>What is the format of the video?</strong></td>\n <td>React code</td>\n <td><a href=\"/docs/editor-starter/state-management\">JSON-serializable state</a></td>\n </tr>\n <tr>\n <td><strong>Who edits the video?</strong></td>\n <td>The developer writes code that defines the video</td>\n <td>An end user edits the video visually.</td>\n </tr>\n <tr>\n <td><strong>One-time price</strong></td>\n <td>Free</td>\n <td>$600</td>\n </tr>\n <tr>\n <td><strong>Licensing fee</strong></td>\n <td colSpan={2}>Free for individuals and small companies.<br/> Companies need a <a href=\"/docs/license/pricing\">Company License</a> to use Remotion.</td>\n </tr>\n </tbody>\n</table>\n\n## See also\n\n- [Editor Starter features](/docs/editor-starter/features)\n- [Features not included](/docs/editor-starter/features-not-included)\n"}),"\n",(0,i.jsx)(e.p,{children:"The Remotion Studio and the Editor Starter are different products for different purposes."}),"\n",(0,i.jsxs)("table",{children:[(0,i.jsx)("thead",{children:(0,i.jsxs)("tr",{children:[(0,i.jsx)("th",{}),(0,i.jsx)("th",{style:{width:"40%"},children:"Remotion Studio"}),(0,i.jsx)("th",{style:{width:"40%"},children:"Editor Starter"})]})}),(0,i.jsxs)("tbody",{children:[(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"Screenshot"})}),(0,i.jsx)("td",{children:(0,i.jsx)("img",{src:"/img/timeline.png",style:{width:"100%",borderRadius:4}})}),(0,i.jsx)("td",{children:(0,i.jsx)("img",{src:"https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/demo-editor-starter.png",style:{width:"100%",borderRadius:4}})})]}),(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"What is it?"})}),(0,i.jsx)("td",{children:"A preview tool for Remotion compositions."}),(0,i.jsx)("td",{children:"A boilerplate for building your own video editor."})]}),(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"How to start"})}),(0,i.jsx)("td",{children:(0,i.jsx)("code",{children:"npx remotion studio"})}),(0,i.jsx)("td",{children:(0,i.jsx)("code",{children:"npx react-router dev"})})]}),(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"Target audience"})}),(0,i.jsx)("td",{children:"Developers wanting to make videos"}),(0,i.jsx)("td",{children:"Developers wanting to build a video editor"})]}),(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"What are you coding?"})}),(0,i.jsx)("td",{children:"The video itself"}),(0,i.jsx)("td",{children:"The video editor"})]}),(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"What is the format of the video?"})}),(0,i.jsx)("td",{children:"React code"}),(0,i.jsx)("td",{children:(0,i.jsx)("a",{href:"/docs/editor-starter/state-management",children:"JSON-serializable state"})})]}),(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"Who edits the video?"})}),(0,i.jsx)("td",{children:"The developer writes code that defines the video"}),(0,i.jsx)("td",{children:"An end user edits the video visually."})]}),(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"One-time price"})}),(0,i.jsx)("td",{children:"Free"}),(0,i.jsx)("td",{children:"$600"})]}),(0,i.jsxs)("tr",{children:[(0,i.jsx)("td",{children:(0,i.jsx)("strong",{children:"Licensing fee"})}),(0,i.jsxs)("td",{colSpan:2,children:["Free for individuals and small companies.",(0,i.jsx)("br",{})," Companies need a ",(0,i.jsx)("a",{href:"/docs/license/pricing",children:"Company License"})," to use Remotion."]})]})]})]}),"\n",(0,i.jsx)(e.h2,{id:"see-also",children:"See also"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"/docs/editor-starter/features",children:"Editor Starter features"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"/docs/editor-starter/features-not-included",children:"Features not included"})}),"\n"]})]})}function h(t={}){let{wrapper:e}={...(0,s.R)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(l,{...t})}):l(t)}}}]);
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.