The File Browser is where you create, open, organize, and manage your Rive files. You can also browse recent files, open Marketplace examples, switch between workspaces, and manage projects.Read more on the File Browser page.
The Toolbar displays the tools you have available to create, rig, and manipulate items on the stage. In addition to these tools, the Toolbar houses a variety of options to allow you to customize the look of your file, set your main artboard, and export or share your file.Read more on the Toolbar page.
The sidebar is the left side of the editor. It contains panels for navigating your file, managing assets, working with data, editing animations, and using the AI Agent.Read more on the Sidebar page.
The Inspector is the right sidebar in the editor. It shows the available properties and options for the current selection.Read more on the Inspector page.
The Viewport is the central area between the Toolbar, Sidebar, and Inspector. It can display the Stage, scripts, and other panels.The Stage is where you create and edit artboards, which contain the designs and animations in your Rive file.Read more on the Viewport page.
The Timeline surfaces from the bottom of the screen upon entering animate mode. Here you can create new states, access playback controls, settings, and set keyframes for object parameters. Select a timeline from the left-hand list to switch between the respective timelines.Read more on the Timeline page.
When a state machine is selected, the Timeline is replaced by a graph. This is where you’ll be working on the state machine.Read more on the State Machine page.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Rive","colors":{"primary":"#ffa41c","light":"#ffa41c","dark":"#ffa41c"},"logo":{"light":"https://mintcdn.com/rive/tBktbqSaEr9ZwywZ/logo/rive_top_logo_black.svg?fit=max\u0026auto=format\u0026n=tBktbqSaEr9ZwywZ\u0026q=85\u0026s=e09b8659935986a837947ae7c3b104e0","dark":"https://mintcdn.com/rive/tBktbqSaEr9ZwywZ/logo/rive_top_logo_white.svg?fit=max\u0026auto=format\u0026n=tBktbqSaEr9ZwywZ\u0026q=85\u0026s=d2ccc2c4dec459d584f578475de89248","href":"https://rive.app?utm_source=docs\u0026utm_medium=header_nav"},"favicon":"https://mintcdn.com/rive/IGEy4oJSivuQmjey/favicon_black.png?fit=max\u0026auto=format\u0026n=IGEy4oJSivuQmjey\u0026q=85\u0026s=986c81e5b82e1138420d773296030a3a","appearance":{"default":"dark"},"background":{"decoration":"grid"},"navbar":{"links":[{"href":"/tutorials/learn-rive","label":"Learn"},{"href":"/community/support","label":"Support"}],"primary":{"type":"button","label":"Get Rive","href":"https://rive.app/downloads?utm_source=docs\u0026utm_medium=header_nav"}},"footer":{"socials":{"youtube":"https://www.youtube.com/channel/UCPal2R1FxwRTPylhP_7ofEg","x":"https://twitter.com/rive_app","instagram":"https://www.instagram.com/rive.app","github":"https://github.com/rive-app","discord":"https://discord.gg/rive-app"},"links":[{"header":"Resources","items":[{"label":"Community","href":"https://community.rive.app?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Blog","href":"https://rive.app/blog?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Case Studies","href":"https://rive.app/blog/case-studies?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Marketplace","href":"https://rive.app/marketplace?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Feature Requests","href":"https://community.rive.app/c/feature-requests"}]},{"header":"Company","items":[{"label":"Careers","href":"https://rive.app/careers?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Terms of Service","href":"/docs/legal/terms-of-service"},{"label":"Acceptable Use Policy","href":"/docs/legal/acceptable-use-policy"},{"label":"Privacy Policy","href":"/docs/legal/privacy-policy"}]}]},"fonts":{"heading":{"family":"Tomorrow Placeholder","weight":500,"source":"https://framerusercontent.com/assets/nCpxWS6DaPlPe0lHzStXAPCo3lw.woff2","format":"woff2"}},"integrations":{"amplitude":{"apiKey":"38803036884a752b104ee4bf501e0945"}},"contextual":{"options":["copy","view","chatgpt","claude"],"display":"header"},"variables":{"runtimeCurrentNameApple":"New Runtime","runtimeLegacyNameApple":"Legacy Runtime","monthlyCreditsVoyager":"$20","monthlyCreditsEnterprise":"$40","pricingCadetMonthly":"$17","pricingCadetYearly":"$108","pricingVoyagerMonthly":"$49","pricingVoyagerYearly":"$384","pricingEnterpriseYearly":"$1,440","versionWeb":"2.40.1","versionReact":"4.33.0","versionApple":"6.24.0","versionAndroid":"11.9.2","versionReactNative":"0.5.5","versionFlutter":"0.14.11","versionDevFlutter":"0.15.0-dev.4","versionUnity":"0.4.5","versionUnreal":"0.4.25","supportForm":"https://forms.rive.app/support?utm_medium=support_page","supportFormEducational":"https://forms.rive.app/education?utm_medium=support_page"},"styling":{"latex":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"rive","hasAudioNarration":false,"actualSubdomain":"rive","customDomains":["rive.app"],"gitSource":{"type":"github","owner":"rive-app","repo":"rive-docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ae503154729e0ad18e648ea","collectionId":"d95f753e-9146-4ba7-b126-d41950ec4d73","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ae503154729e0ad18e648ea"},"feedback":{"edits":true,"issues":true,"thumbs":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"REMOVE_BRANDING":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ae503154729e0ad18e648ea","clientVersion":"0.0.4044","searchFilterCounts":[{"language":"default","tag":"Runtimes","count":279},{"language":"default","tag":"Scripting","count":187},{"language":"default","tag":"Scripting API","count":167},{"language":"default","tag":"Editor","count":100},{"language":"default","tag":"Fundamentals","count":64},{"language":"default","tag":"GPU","count":45},{"language":"default","tag":"Design","count":32},{"language":"default","tag":"Artboards","count":25},{"language":"default","tag":"Interfaces","count":24},{"language":"default","tag":"Advanced Topics","count":22}]},"assistantConfig":{},"basePath":"/docs","hasChatPermissions":false,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"custom.css","content":"ol li,p,ul li{font-size:14px}.signature .code-block{border:0}.signature .code-block [data-floating-buttons=true]{display:none}.signature .code-block [data-component-part=code-block-root]{background:0 0;padding:0}.dark .card{background-color:var(--background-dark)!important;border-color:rgb(255 255 255/.1)!important}.dark .card:hover{border-color:var(--primary-light)!important}"}],"page":{"pagePath":"editor/interface-overview/overview","slug":"/editor/interface-overview/overview","pageMetadata":{"title":"Interface Overview","sidebarTitle":"Overview","description":"Rive's interface only shows what is needed when you need it. It is divided into a few main panels, which are described below.","href":"/editor/interface-overview/overview"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Rive’s interface only shows what is needed when you need it. It is divided into a few main panels, which are described below.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];const YouTube=({id,timestamp})=>{const videoSrc=timestamp?`https://www.youtube.com/embed/${id}?start=${timestamp}`:`https://www.youtube.com/embed/${id}`;return _jsx(`iframe`,{width:`100%`,height:`400`,src:videoSrc,title:`YouTube video player`,frameBorder:`0`,allow:`accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share`,referrerPolicy:`strict-origin-when-cross-origin`,allowFullScreen:true})};function _createMdxContent(props){const _components={a:`a`,p:`p`,..._provideComponents(),...props.components},{Heading,OptimizedImage,_MdxComponentBoundary}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!_MdxComponentBoundary)_missingMdxReference(`_MdxComponentBoundary`,true);return _jsxs(_Fragment,{children:[_jsx(_MdxComponentBoundary,{name:`YouTube`,children:_jsx(YouTube,{id:`-NumdcojOTs`})}),`\n`,_jsx(Heading,{level:`2`,id:`file-browser`,children:`File browser`}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/rive/ULGq_e0qXzI4ZK9X/images/editor/interface/file-browser.png?fit=max\u0026auto=format\u0026n=ULGq_e0qXzI4ZK9X\u0026q=85\u0026s=24a100c1051b1f7400255a350048ee75`,alt:`File Browser home`,\"data-og-width\":`2398`,width:`2398`,\"data-og-height\":`1347`,height:`1347`,\"data-path\":`images/editor/interface/file-browser.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/rive/ULGq_e0qXzI4ZK9X/images/editor/interface/file-browser.png?w=280\u0026fit=max\u0026auto=format\u0026n=ULGq_e0qXzI4ZK9X\u0026q=85\u0026s=0dee63985d89b31264195216f4a6c489 280w, https://mintcdn.com/rive/ULGq_e0qXzI4ZK9X/images/editor/interface/file-browser.png?w=560\u0026fit=max\u0026auto=format\u0026n=ULGq_e0qXzI4ZK9X\u0026q=85\u0026s=5e6d00aad96a15ec7d92b48cc3ec005a 560w, https://mintcdn.com/rive/ULGq_e0qXzI4ZK9X/images/editor/interface/file-browser.png?w=840\u0026fit=max\u0026auto=format\u0026n=ULGq_e0qXzI4ZK9X\u0026q=85\u0026s=bce32c84fb1b4b6ad539c543e8e5fca2 840w, https://mintcdn.com/rive/ULGq_e0qXzI4ZK9X/images/editor/interface/file-browser.png?w=1100\u0026fit=max\u0026auto=format\u0026n=ULGq_e0qXzI4ZK9X\u0026q=85\u0026s=eabb755df86c6e8a41825beb607ff6b7 1100w, https://mintcdn.com/rive/ULGq_e0qXzI4ZK9X/images/editor/interface/file-browser.png?w=1650\u0026fit=max\u0026auto=format\u0026n=ULGq_e0qXzI4ZK9X\u0026q=85\u0026s=d81b3d25e293817c9b389abc7fc79781 1650w, https://mintcdn.com/rive/ULGq_e0qXzI4ZK9X/images/editor/interface/file-browser.png?w=2500\u0026fit=max\u0026auto=format\u0026n=ULGq_e0qXzI4ZK9X\u0026q=85\u0026s=6b1c5bacfe037acee5137cab8e22a2e1 2500w`}),`\n`,_jsx(_components.p,{children:`The File Browser is where you create, open, organize, and manage your Rive files. You can also browse recent files, open Marketplace examples, switch between workspaces, and manage projects.`}),`\n`,_jsxs(_components.p,{children:[`Read more on the `,_jsx(_components.a,{href:`/editor/interface-overview/file-browser`,children:`File Browser page`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`toolbar`,children:`Toolbar`}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/rive/UizvjHP7hhSBQqPg/images/interface/toolbar.png?fit=max\u0026auto=format\u0026n=UizvjHP7hhSBQqPg\u0026q=85\u0026s=822c990c42cdf1c7c57ff2223f6187d3`,alt:`Toolbar`,\"data-og-width\":`3728`,width:`3728`,\"data-og-height\":`2438`,height:`2438`,\"data-path\":`images/interface/toolbar.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/rive/UizvjHP7hhSBQqPg/images/interface/toolbar.png?w=280\u0026fit=max\u0026auto=format\u0026n=UizvjHP7hhSBQqPg\u0026q=85\u0026s=894ad42a8c4152e15a94686e66aa721c 280w, https://mintcdn.com/rive/UizvjHP7hhSBQqPg/images/interface/toolbar.png?w=560\u0026fit=max\u0026auto=format\u0026n=UizvjHP7hhSBQqPg\u0026q=85\u0026s=bd496f88a6cc8016f530e299d770273c 560w, https://mintcdn.com/rive/UizvjHP7hhSBQqPg/images/interface/toolbar.png?w=840\u0026fit=max\u0026auto=format\u0026n=UizvjHP7hhSBQqPg\u0026q=85\u0026s=5a894d5ef0df76d876b1f1e3a2cf3575 840w, https://mintcdn.com/rive/UizvjHP7hhSBQqPg/images/interface/toolbar.png?w=1100\u0026fit=max\u0026auto=format\u0026n=UizvjHP7hhSBQqPg\u0026q=85\u0026s=f448f334388819df0c0a69af7637de1b 1100w, https://mintcdn.com/rive/UizvjHP7hhSBQqPg/images/interface/toolbar.png?w=1650\u0026fit=max\u0026auto=format\u0026n=UizvjHP7hhSBQqPg\u0026q=85\u0026s=b38b93c3a1fb993deaac9add41a5c640 1650w, https://mintcdn.com/rive/UizvjHP7hhSBQqPg/images/interface/toolbar.png?w=2500\u0026fit=max\u0026auto=format\u0026n=UizvjHP7hhSBQqPg\u0026q=85\u0026s=83763b069e89ccec76db017cabd150b4 2500w`}),`\n`,_jsx(_components.p,{children:`The Toolbar displays the tools you have available to create, rig, and manipulate items on the stage. In addition to these tools, the Toolbar houses a variety of options to allow you to customize the look of your file, set your main artboard, and export or share your file.`}),`\n`,_jsxs(_components.p,{children:[`Read more on the `,_jsx(_components.a,{href:`/editor/interface-overview/toolbar`,children:`Toolbar page`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`sidebar`,children:`Sidebar`}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/rive/tQ1k3dspHfLhjt1C/images/interface/sidebar.png?fit=max\u0026auto=format\u0026n=tQ1k3dspHfLhjt1C\u0026q=85\u0026s=d576c815b19db065d1c4b85ff0c475f3`,alt:`Hierarchy`,\"data-og-width\":`2478`,width:`2478`,\"data-og-height\":`1434`,height:`1434`,\"data-path\":`images/interface/sidebar.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/rive/tQ1k3dspHfLhjt1C/images/interface/sidebar.png?w=280\u0026fit=max\u0026auto=format\u0026n=tQ1k3dspHfLhjt1C\u0026q=85\u0026s=de21fc856226e5bb064c7ae49ca842be 280w, https://mintcdn.com/rive/tQ1k3dspHfLhjt1C/images/interface/sidebar.png?w=560\u0026fit=max\u0026auto=format\u0026n=tQ1k3dspHfLhjt1C\u0026q=85\u0026s=8715513620462d7eb63a5f8bdd8cddbc 560w, https://mintcdn.com/rive/tQ1k3dspHfLhjt1C/images/interface/sidebar.png?w=840\u0026fit=max\u0026auto=format\u0026n=tQ1k3dspHfLhjt1C\u0026q=85\u0026s=4ff48b79036e72b33f1e31768f008291 840w, https://mintcdn.com/rive/tQ1k3dspHfLhjt1C/images/interface/sidebar.png?w=1100\u0026fit=max\u0026auto=format\u0026n=tQ1k3dspHfLhjt1C\u0026q=85\u0026s=49b816cfff10460f98578f50bf4c3e1c 1100w, https://mintcdn.com/rive/tQ1k3dspHfLhjt1C/images/interface/sidebar.png?w=1650\u0026fit=max\u0026auto=format\u0026n=tQ1k3dspHfLhjt1C\u0026q=85\u0026s=f9a6ee5509052eba8b916d953a788793 1650w, https://mintcdn.com/rive/tQ1k3dspHfLhjt1C/images/interface/sidebar.png?w=2500\u0026fit=max\u0026auto=format\u0026n=tQ1k3dspHfLhjt1C\u0026q=85\u0026s=de0463ef4096041d7946b80dfb39a003 2500w`}),`\n`,_jsx(_components.p,{children:`The sidebar is the left side of the editor. It contains panels for navigating your file, managing assets, working with data, editing animations, and using the AI Agent.`}),`\n`,_jsxs(_components.p,{children:[`Read more on the `,_jsx(_components.a,{href:`/editor/interface-overview/sidebar`,children:`Sidebar page`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`inspector`,children:`Inspector`}),`\n`,_jsx(_components.p,{children:`The Inspector is the right sidebar in the editor. It shows the available properties and options for the current selection.`}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/rive/o_A9HtcP5qhQRorm/images/inspector.png?fit=max\u0026auto=format\u0026n=o_A9HtcP5qhQRorm\u0026q=85\u0026s=b6dd1b6ea58faa4776725f20bf388af8`,alt:`Inspector`,\"data-og-width\":`2402`,width:`2402`,\"data-og-height\":`1358`,height:`1358`,\"data-path\":`images/inspector.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/rive/o_A9HtcP5qhQRorm/images/inspector.png?w=280\u0026fit=max\u0026auto=format\u0026n=o_A9HtcP5qhQRorm\u0026q=85\u0026s=fd4ca246a70f6087b37a67ec3e69ef84 280w, https://mintcdn.com/rive/o_A9HtcP5qhQRorm/images/inspector.png?w=560\u0026fit=max\u0026auto=format\u0026n=o_A9HtcP5qhQRorm\u0026q=85\u0026s=32131ba5eefc93396ea3b14814ccc3db 560w, https://mintcdn.com/rive/o_A9HtcP5qhQRorm/images/inspector.png?w=840\u0026fit=max\u0026auto=format\u0026n=o_A9HtcP5qhQRorm\u0026q=85\u0026s=36975fee93e1b48fa03cfc919f012768 840w, https://mintcdn.com/rive/o_A9HtcP5qhQRorm/images/inspector.png?w=1100\u0026fit=max\u0026auto=format\u0026n=o_A9HtcP5qhQRorm\u0026q=85\u0026s=544e31b8cc56b901ee69072f7a60ff31 1100w, https://mintcdn.com/rive/o_A9HtcP5qhQRorm/images/inspector.png?w=1650\u0026fit=max\u0026auto=format\u0026n=o_A9HtcP5qhQRorm\u0026q=85\u0026s=33962b4a1459b70de38dccbad9ac940b 1650w, https://mintcdn.com/rive/o_A9HtcP5qhQRorm/images/inspector.png?w=2500\u0026fit=max\u0026auto=format\u0026n=o_A9HtcP5qhQRorm\u0026q=85\u0026s=875cba3a14f7172d0f763041def2d850 2500w`}),`\n`,_jsxs(_components.p,{children:[`Read more on the `,_jsx(_components.a,{href:`/editor/interface-overview/inspector`,children:`Inspector page`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`viewport`,children:`Viewport`}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/rive/pwk3GqUgisWbhN3v/images/editor/interface/viewport.png?fit=max\u0026auto=format\u0026n=pwk3GqUgisWbhN3v\u0026q=85\u0026s=25b95ce34876a682c1375ba36057da94`,alt:`Viewport`,\"data-og-width\":`3456`,width:`3456`,\"data-og-height\":`2088`,height:`2088`,\"data-path\":`images/editor/interface/viewport.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/rive/pwk3GqUgisWbhN3v/images/editor/interface/viewport.png?w=280\u0026fit=max\u0026auto=format\u0026n=pwk3GqUgisWbhN3v\u0026q=85\u0026s=6276a6ba51e0597d584b148bdde2c272 280w, https://mintcdn.com/rive/pwk3GqUgisWbhN3v/images/editor/interface/viewport.png?w=560\u0026fit=max\u0026auto=format\u0026n=pwk3GqUgisWbhN3v\u0026q=85\u0026s=01846449c393f39eb418c39a4f3babfb 560w, https://mintcdn.com/rive/pwk3GqUgisWbhN3v/images/editor/interface/viewport.png?w=840\u0026fit=max\u0026auto=format\u0026n=pwk3GqUgisWbhN3v\u0026q=85\u0026s=b950cc849d4536ce5fed979164da4cbc 840w, https://mintcdn.com/rive/pwk3GqUgisWbhN3v/images/editor/interface/viewport.png?w=1100\u0026fit=max\u0026auto=format\u0026n=pwk3GqUgisWbhN3v\u0026q=85\u0026s=2e170f4b52002959d0eb4a038a41611c 1100w, https://mintcdn.com/rive/pwk3GqUgisWbhN3v/images/editor/interface/viewport.png?w=1650\u0026fit=max\u0026auto=format\u0026n=pwk3GqUgisWbhN3v\u0026q=85\u0026s=c7865aef8ee130c9f9e66ebe729bc5a0 1650w, https://mintcdn.com/rive/pwk3GqUgisWbhN3v/images/editor/interface/viewport.png?w=2500\u0026fit=max\u0026auto=format\u0026n=pwk3GqUgisWbhN3v\u0026q=85\u0026s=e6d52241048bde62b080a943a4b4a502 2500w`}),`\n`,_jsx(_components.p,{children:`The Viewport is the central area between the Toolbar, Sidebar, and Inspector. It can display the Stage, scripts, and other panels.`}),`\n`,_jsx(_components.p,{children:`The Stage is where you create and edit artboards, which contain the designs and animations in your Rive file.`}),`\n`,_jsxs(_components.p,{children:[`Read more on the `,_jsx(_components.a,{href:`/editor/interface-overview/stage`,children:`Viewport page`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`timeline`,children:`Timeline`}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/timeline.png?fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=07b991dcf266887212dc11657ba4c636`,alt:`Timeline`,\"data-og-width\":`2816`,width:`2816`,\"data-og-height\":`1628`,height:`1628`,\"data-path\":`images/timeline.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/timeline.png?w=280\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=2412347d85b6088778a5ed7722812abb 280w, https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/timeline.png?w=560\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=e88d1e76746070b109f4b88cff10f95c 560w, https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/timeline.png?w=840\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=02fa7bea0e4edb6b468b6ff00c05680b 840w, https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/timeline.png?w=1100\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=5be00c255b3a01698890e1a2d2c410c1 1100w, https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/timeline.png?w=1650\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=0a75d9cf1b0a99b2936adc3dcc0ee3de 1650w, https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/timeline.png?w=2500\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=83b87f5cdd9f5c4ff839510700b96acd 2500w`}),`\n`,_jsxs(_components.p,{children:[`The Timeline surfaces from the bottom of the screen upon entering `,_jsx(_components.a,{href:`/editor/fundamentals/design-vs-animate-mode`,children:`animate mode`}),`. Here you can create new states, access playback controls, settings, and set keyframes for object parameters. Select a timeline from the left-hand list to switch between the respective timelines.`]}),`\n`,_jsxs(_components.p,{children:[`Read more on the `,_jsx(_components.a,{href:`/editor/fundamentals/design-vs-animate-mode`,children:`Timeline page`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`state-machine-graph`,children:`State Machine graph`}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/state-machine-graph.png?fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=ca725d9218428a240f8400de477b5d9e`,alt:`State machine graph`,\"data-og-width\":`2816`,width:`2816`,\"data-og-height\":`1628`,height:`1628`,\"data-path\":`images/state-machine-graph.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/state-machine-graph.png?w=280\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=39a313ca1f5628e156a4f703bcb603be 280w, https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/state-machine-graph.png?w=560\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=d4e75fee98c6a517c41b884ebb25bcca 560w, https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/state-machine-graph.png?w=840\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=648a703f81c18f23a17b30fdda0ac7df 840w, https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/state-machine-graph.png?w=1100\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=978e96fb37ff8fb7d95fdf8c02459211 1100w, https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/state-machine-graph.png?w=1650\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=fb34c8109d2fcf6ecd7ed8e9f7afc2be 1650w, https://mintcdn.com/rive/BNg-rw8GSAY54Vvz/images/state-machine-graph.png?w=2500\u0026fit=max\u0026auto=format\u0026n=BNg-rw8GSAY54Vvz\u0026q=85\u0026s=b721aa357ed407ac51825b8c87455254 2500w`}),`\n`,_jsx(_components.p,{children:`When a state machine is selected, the Timeline is replaced by a graph. This is where you’ll be working on the state machine.`}),`\n`,_jsxs(_components.p,{children:[`Read more on the `,_jsx(_components.a,{href:`/editor/state-machine/state-machine`,children:`State Machine page`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`debug-panel`,children:`Debug Panel`}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/rive/lfH6hCbIPfPtbKx4/images/editor/interface/debug-panel.png?fit=max\u0026auto=format\u0026n=lfH6hCbIPfPtbKx4\u0026q=85\u0026s=0c70c9639bd670ee27bf4c4bc7abe567`,alt:`Viewport`,\"data-og-width\":`2458`,width:`2458`,\"data-og-height\":`1422`,height:`1422`,\"data-path\":`images/editor/interface/debug-panel.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/rive/lfH6hCbIPfPtbKx4/images/editor/interface/debug-panel.png?w=280\u0026fit=max\u0026auto=format\u0026n=lfH6hCbIPfPtbKx4\u0026q=85\u0026s=dbea5a6006a573452694931fd7891a02 280w, https://mintcdn.com/rive/lfH6hCbIPfPtbKx4/images/editor/interface/debug-panel.png?w=560\u0026fit=max\u0026auto=format\u0026n=lfH6hCbIPfPtbKx4\u0026q=85\u0026s=32b3a6ba7e91b9dd4e69ddcf8d904ba8 560w, https://mintcdn.com/rive/lfH6hCbIPfPtbKx4/images/editor/interface/debug-panel.png?w=840\u0026fit=max\u0026auto=format\u0026n=lfH6hCbIPfPtbKx4\u0026q=85\u0026s=035df1b5683814aaaedf177588577592 840w, https://mintcdn.com/rive/lfH6hCbIPfPtbKx4/images/editor/interface/debug-panel.png?w=1100\u0026fit=max\u0026auto=format\u0026n=lfH6hCbIPfPtbKx4\u0026q=85\u0026s=394f3694db1ea27481a27b69841bf551 1100w, https://mintcdn.com/rive/lfH6hCbIPfPtbKx4/images/editor/interface/debug-panel.png?w=1650\u0026fit=max\u0026auto=format\u0026n=lfH6hCbIPfPtbKx4\u0026q=85\u0026s=8f69d61040efce24e1a4a46f41d5eda7 1650w, https://mintcdn.com/rive/lfH6hCbIPfPtbKx4/images/editor/interface/debug-panel.png?w=2500\u0026fit=max\u0026auto=format\u0026n=lfH6hCbIPfPtbKx4\u0026q=85\u0026s=3a36d86eddd16c7baa9bd499cc69eb6a 2500w`})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{YouTube,default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Interface Overview","sidebarTitle":"Overview","description":"Rive's interface only shows what is needed when you need it. It is divided into a few main panels, which are described below.","href":"/editor/interface-overview/overview"}}},"mdxSourceWithNoJs":null,"noJsSplices":[[143,580,")=>null;function _cr"]]},"mdxExtracts":{"tableOfContents":[{"title":"File browser","slug":"file-browser","depth":2,"children":[]},{"title":"Toolbar","slug":"toolbar","depth":2,"children":[]},{"title":"Sidebar","slug":"sidebar","depth":2,"children":[]},{"title":"Inspector","slug":"inspector","depth":2,"children":[]},{"title":"Viewport","slug":"viewport","depth":2,"children":[]},{"title":"Timeline","slug":"timeline","depth":2,"children":[]},{"title":"State Machine graph","slug":"state-machine-graph","depth":2,"children":[]},{"title":"Debug Panel","slug":"debug-panel","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":["/docs/_mintlify/custom/rive/6157a238f0df2356/rive-init.js"],"subdomain":"rive","siteName":"Rive","title":"Interface Overview - Rive","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-09-11T15:47:05.071Z","originalFileLocation":"editor/interface-overview/overview.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"dark\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Rive\u0026#x27;s interface only shows what is needed when you need it. It is divided into a few main panels, which are described below.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Rive\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Interface Overview - Rive\">\u003cmeta data-mint-head property=\"og:description\" content=\"Rive\u0026#x27;s interface only shows what is needed when you need it. It is divided into a few main panels, which are described below.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Rive\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://rive.app/docs/editor/interface-overview/overview\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://rive.mintlify.app/_mintlify/api/og/v2?division=Editor+Interface\u0026amp;title=Interface+Overview\u0026amp;description=Rive%27s+interface+only+shows+what+is+needed+when+you+need+it.+It+is+divided+into+a+few+main+panels%2C+which+are+described+below.\u0026amp;theme=9d194ea41709afb0505e42e9\u0026amp;signature=888d044198f8ef3901407d8eac7c1ea697856519beaeed22ed9e40ee2a98ee78\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Interface Overview - Rive\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Rive\u0026#x27;s interface only shows what is needed when you need it. It is divided into a few main panels, which are described below.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://rive.mintlify.app/_mintlify/api/og/v2?division=Editor+Interface\u0026amp;title=Interface+Overview\u0026amp;description=Rive%27s+interface+only+shows+what+is+needed+when+you+need+it.+It+is+divided+into+a+few+main+panels%2C+which+are+described+below.\u0026amp;theme=9d194ea41709afb0505e42e9\u0026amp;signature=888d044198f8ef3901407d8eac7c1ea697856519beaeed22ed9e40ee2a98ee78\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Rive\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#ffa41c\">\u003clink data-mint-head rel=\"canonical\" href=\"https://rive.app/docs/editor/interface-overview/overview\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/docs/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/editor/interface-overview/overview.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://rive.app/#organization\",\"name\":\"Rive\",\"url\":\"https://rive.app\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/rive/tBktbqSaEr9ZwywZ/logo/rive_top_logo_black.svg?fit=max\u0026auto=format\u0026n=tBktbqSaEr9ZwywZ\u0026q=85\u0026s=e09b8659935986a837947ae7c3b104e0\"}},{\"@type\":\"WebSite\",\"@id\":\"https://rive.app/docs#website\",\"name\":\"Rive\",\"url\":\"https://rive.app/docs\",\"publisher\":{\"@id\":\"https://rive.app/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://rive.app/docs/editor/interface-overview/overview#webpage\",\"url\":\"https://rive.app/docs/editor/interface-overview/overview\",\"name\":\"Interface Overview\",\"description\":\"Rive's interface only shows what is needed when you need it. It is divided into a few main panels, which are described below.\",\"dateModified\":\"2026-09-11T15:47:05.071Z\",\"isPartOf\":{\"@id\":\"https://rive.app/docs#website\"},\"breadcrumb\":{\"@id\":\"https://rive.app/docs/editor/interface-overview/overview#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://rive.app/docs/editor/interface-overview/overview#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\" \",\"item\":\"https://rive.app/docs/editor/get-rive\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Interface Overview\",\"item\":\"https://rive.app/docs/editor/interface-overview/overview\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://rive.app/docs/editor/interface-overview/overview#article\",\"headline\":\"Interface Overview\",\"name\":\"Interface Overview\",\"description\":\"Rive's interface only shows what is needed when you need it. It is divided into a few main panels, which are described below.\",\"url\":\"https://rive.app/docs/editor/interface-overview/overview\",\"mainEntityOfPage\":{\"@id\":\"https://rive.app/docs/editor/interface-overview/overview#webpage\"},\"dateModified\":\"2026-09-11T15:47:05.071Z\",\"publisher\":{\"@id\":\"https://rive.app/#organization\"},\"isPartOf\":{\"@id\":\"https://rive.app/docs#website\"}}]}\u003c/script>","siteName":"Rive","nav":{"global":null,"tabs":[{"tab":"Home","pages":[{"title":"Home","href":"/getting-started/introduction"}]},{"tab":"Editor","groups":[{"group":" ","pages":[{"title":"Using the Rive Editor","sidebarTitle":"Get Rive","description":"Choose how you want to use the Rive editor: in your browser or as a desktop app.","href":"/editor/get-rive"},{"group":"Editor Interface","pages":[{"title":"Interface Overview","sidebarTitle":"Overview","href":"/editor/interface-overview/overview"},{"title":"File Browser","description":"Create, organize, and manage files, projects, and workspaces.","href":"/editor/interface-overview/file-browser"},{"title":"Viewport","href":"/editor/interface-overview/stage"},{"title":"Toolbar","href":"/editor/interface-overview/toolbar"},{"title":"Sidebar","href":"/editor/interface-overview/sidebar"},{"title":"Inspector","href":"/editor/interface-overview/inspector"},{"title":"Debug Panel","href":"/editor/interface-overview/debug-panel"}]},{"group":"Workflows","pages":[{"title":"Selection and Navigation","href":"/editor/interface-overview/selection-and-navigation"},{"title":"Keyboard Shortcuts","href":"/editor/keyboard-shortcuts"},{"title":"Dependencies Graph","href":"/editor/workflows/dependency-graph"},{"title":"Tagging","href":"/editor/tagging"},{"title":"Revision History","href":"/editor/fundamentals/revision-history"},{"title":"Best Practices","href":"/getting-started/best-practices"}]}]},{"group":"Fundamentals","pages":[{"group":"Design","pages":[{"title":"Artboards","href":"/editor/fundamentals/artboards"},{"title":"Components","href":"/editor/fundamentals/components"},{"group":"Drawing","pages":[{"title":"Shapes and Paths Overview","href":"/editor/fundamentals/shapes-and-paths-overview"},{"title":"Shape Tools","href":"/editor/fundamentals/procedural-shapes"},{"title":"Shape Builder","href":"/editor/design/shape-builder"},{"title":"Pen Tool Overview","href":"/editor/fundamentals/pen-tool-overview"},{"title":"Freehand Drawing with Pencil, Brush, and Eraser","sidebarTitle":"Freehand Drawing","href":"/editor/design/freehand-drawing"},{"title":"Fill and Stroke","href":"/editor/fundamentals/fill-and-stroke"},{"title":"Edit Vertices","href":"/editor/fundamentals/edit-vertices"},{"title":"Bucket Tool","sidebarTitle":"Bucket","href":"/editor/design/bucket-tool"},{"title":"Shape Bend Tool","href":"/editor/design/shape-bend-tool"},{"title":"Trim Path","href":"/editor/manipulating-shapes/trim-path"},{"title":"Clipping","href":"/editor/manipulating-shapes/clipping"}]},{"title":"Align and Distribute","href":"/editor/fundamentals/align-and-distribute"},{"group":"Text","pages":[{"title":"Text","sidebarTitle":"Overview","href":"/editor/text/text-overview"},{"title":"Text Runs","href":"/editor/text/text-runs"},{"title":"Text Styles","href":"/editor/text/text-styles"},{"title":"Text Modifiers","href":"/editor/text/text-modifiers"},{"title":"Text Input","href":"/editor/text/text-input"}]},{"group":"Hierarchical Relationships","pages":[{"title":"Hierarchy","href":"/editor/interface-overview/hierarchy"},{"title":"Groups","href":"/editor/fundamentals/groups"},{"title":"Solos","href":"/editor/manipulating-shapes/solos"},{"title":"Transform Spaces","href":"/editor/fundamentals/transform-spaces"},{"title":"Freeze and Origin","href":"/editor/fundamentals/freeze-and-origin"},{"title":"Animating Draw Order","sidebarTitle":"Custom Draw Order","href":"/editor/animate-mode/animating-draw-order"}]},{"group":"Responsive Design","pages":[{"title":"Overview","sidebarTitle":"Layouts Overview","href":"/editor/layouts/layouts-overview"},{"title":"Tools","sidebarTitle":"Tools","href":"/editor/layouts/layout-tools"},{"title":"Parameters","href":"/editor/layouts/layout-parameters"},{"title":"Component Sizing","href":"/editor/layouts/component-sizing"},{"title":"Layout Animation","href":"/editor/layouts/layout-animation"},{"title":"N-Slicing","href":"/editor/layouts/n-slicing"}]},{"title":"Rulers \u0026 Guides","href":"/editor/design/rulers-and-guides"}]},{"group":"Assets","pages":[{"title":"Assets","sidebarTitle":"Overview","href":"/editor/fundamentals/assets-overview"},{"title":"SVG \u0026 Vector Assets","href":"/editor/assets/svg"},{"title":"Photoshop Files","href":"/editor/assets/psd"},{"title":"Font Assets","href":"/editor/text/fonts"},{"title":"Audio Assets","href":"/editor/assets/audio"},{"title":"Libraries","sidebarTitle":"Libraries","href":"/editor/libraries"}]},{"group":"Animation","pages":[{"title":"Animate Mode Overview","sidebarTitle":"Overview","href":"/editor/animate-mode/animate-mode-overview"},{"title":"Timeline","href":"/editor/animate-mode/timeline"},{"title":"Keys","href":"/editor/animate-mode/keys"},{"title":"Interpolation (Easing)","href":"/editor/animate-mode/interpolation-easing"}]},{"group":"Interaction","pages":[{"group":"State Machines","pages":[{"title":"State Machine Overview","sidebarTitle":"Overview","href":"/editor/state-machine/state-machine"},{"title":"States","href":"/editor/state-machine/states"},{"title":"Transitions","href":"/editor/state-machine/transitions"},{"title":"Layers","href":"/editor/state-machine/layers"}]},{"title":"Listeners","href":"/editor/state-machine/listeners"},{"group":"Events","pages":[{"title":"Events Overview","sidebarTitle":"Overview","href":"/editor/events/overview"},{"title":"Open URL Events","href":"/editor/events/open-url-events"},{"title":"Audio Events","href":"/editor/events/audio-events"}]}]},{"group":"Data","pages":[{"title":"Data Binding Overview","href":"/editor/data-binding/overview"},{"title":"View Models \u0026 Instances","href":"/editor/data-binding/view-models"},{"title":"View Model Properties","href":"/editor/data-binding/property-types"},{"title":"Binding Data","href":"/editor/data-binding/binding-data"},{"title":"Controlling Data","href":"/editor/data-binding/controlling-data"},{"group":"Advanced Data Binding","pages":[{"title":"Enums","href":"/editor/data-binding/enums"},{"title":"Lists","href":"/editor/data-binding/lists"},{"title":"Converters","href":"/editor/data-binding/converters"},{"title":"Stateful Components","href":"/editor/data-binding/stateful-components"},{"title":"Property Groups","href":"/editor/data-binding/property-groups"},{"title":"Migration Guide","href":"/editor/data-binding/migration-guide"}]}]},{"group":"Publishing","pages":[{"title":"Exporting for Runtime","href":"/editor/exporting/exporting-for-runtime"},{"title":"Sharing \u0026 Embedding","href":"/editor/embed-urls/overview"},{"title":"Exporting Videos \u0026 Images","href":"/editor/exporting/exporting-for-video-and-static-design"},{"title":"Exporting for Backup","href":"/editor/exporting/exporting-for-backup"}]}]},{"group":"Advanced Topics","pages":[{"group":"AI","pages":[{"title":"AI Agent","href":"/editor/ai-agent/ai-agent"},{"title":"Rive MCP Integration","sidebarTitle":"MCP Integration","href":"/editor/ai/mcp"}]},{"group":"Rigging \u0026 Control","pages":[{"title":"Manipulating Shapes Overview","sidebarTitle":"Overview","href":"/editor/manipulating-shapes/manipulating-shapes"},{"title":"Meshes","href":"/editor/manipulating-shapes/meshes"},{"title":"Bones","href":"/editor/manipulating-shapes/bones"},{"title":"Joysticks","href":"/editor/manipulating-shapes/joysticks"},{"group":"Constraints","pages":[{"title":"Constraints Overview","sidebarTitle":"Overview","href":"/editor/constraints/constraints-overview"},{"title":"IK Constraint","href":"/editor/constraints/ik-constraint"},{"title":"Distance Constraint","href":"/editor/constraints/distance-constraint"},{"title":"Scale Constraint","href":"/editor/constraints/scale-constraint"},{"title":"Rotation Constraint","href":"/editor/constraints/rotation-constraint"},{"title":"Transform Constraint","href":"/editor/constraints/transform-constraint"},{"title":"Translation Constraint","href":"/editor/constraints/translation-constraint"},{"title":"Follow Path Constraint","href":"/editor/constraints/follow-path-constraint"},{"title":"Scroll Constraints","href":"/editor/constraints/scroll-constraint"}]}]},{"group":"Accessibility","pages":[{"title":"Semantics","href":"/editor/accessibility/semantics"},{"title":"Focus","href":"/editor/accessibility/focus"},{"title":"Reduced Motion","href":"/editor/accessibility/reduced-motion"}]},{"group":"Admin \u0026 Workspaces","pages":[{"group":"Workspaces","pages":[{"title":"Workspaces","sidebarTitle":"Overview","href":"/account-admin/workspaces/workspaces-overview"},{"title":"Managing Workspaces","href":"/account-admin/workspaces/managing-workspaces"},{"title":"Managing Workspace Members","sidebarTitle":"Workspace Members","href":"/account-admin/workspaces/managing-workspace-members"}]},{"title":"Bring Your Own S3 Bucket","href":"/account-admin/bring-your-own-bucket"}]},{"group":"Legacy Features","pages":[{"title":"Inputs","href":"/editor/state-machine/inputs"},{"title":"Events at Runtime","href":"/editor/events/general-events"}]}]}]},{"tab":"Scripting","pages":[{"title":"Scripting","href":"/scripting/getting-started"}]},{"tab":"Runtimes","pages":[{"title":"Runtimes","href":"/runtimes/getting-started"}]},{"tab":"CLI","pages":[{"title":"CLI","href":"/cli/overview"}]},{"tab":" ","pages":[{"title":" ","href":"/tutorials/learn-rive"}]},{"tab":" ","pages":[{"title":" ","href":"/community/support"}]}]},"basePath":"","title":"Interface Overview - Rive","buildId":"dpl_6cCEiK8XNNvaLBBkWzcBhdE9QfLC","deploymentId":"dpl_6cCEiK8XNNvaLBBkWzcBhdE9QfLC","dynamics":["a74be98ba7"],"chunks":["zoom-image-lightbox-B-WKhCOL.js","lightbox-handle-r17bVUz3.js"]}