{"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"},{"label":"Your Privacy Choices","href":"https://rive.app/?cookie-settings"}]}]},"fonts":{"heading":{"family":"Tomorrow Placeholder","weight":500,"source":"https://framerusercontent.com/assets/nCpxWS6DaPlPe0lHzStXAPCo3lw.woff2","format":"woff2"}},"integrations":{"amplitude":{"apiKey":"38803036884a752b104ee4bf501e0945"},"cookies":{"key":"rive_analytics","value":"granted"}},"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","cliAllowanceFree":"50","cliAllowanceCadet":"500","cliAllowanceVoyager":"5,000","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":false},"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":""},"feedback":{"edits":true,"issues":true,"thumbs":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"REMOVE_BRANDING":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6af765935ce7abc2bc2c79b3","clientVersion":"0.0.4143","searchFilterCounts":[{"language":"default","tag":"Runtimes","count":289},{"language":"default","tag":"Scripting","count":190},{"language":"default","tag":"Scripting API","count":169},{"language":"default","tag":"Editor","count":104},{"language":"default","tag":"Fundamentals","count":90},{"language":"default","tag":"GPU","count":45},{"language":"default","tag":"Design","count":37},{"language":"default","tag":"Interfaces","count":26},{"language":"default","tag":"Artboards","count":25},{"language":"default","tag":"React Native","count":20}]},"assistantConfig":{},"basePath":"/docs","hasChatPermissions":false,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-rbac-roles","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":"rbac-expansion","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":"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":"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":"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":"editor-metadata","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},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","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}],"googleFontsInlined":false},"customCss":[{"filePath":"custom.css","content":"p{font-size:14px}ul li{font-size:14px}ol li{font-size:14px}.signature .code-block{border:none}.signature .code-block [data-floating-buttons=\"true\"]{display:none}.signature .code-block [data-component-part=\"code-block-root\"]{background:none;padding:0}.dark .card{background-color:var(--background-dark)!important;border-color:rgb(255 255 255 / 0.1)!important}.dark .card:hover{border-color:var(--primary-light)!important}"}],"page":{"pagePath":"runtimes/demos","slug":"/runtimes/demos","pageMetadata":{"title":"Rive Runtime Demos \u0026 Starters","sidebarTitle":"Demos","description":"Quick examples to get you up and running.","mode":"wide","href":"/runtimes/demos"},"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: \"Quick examples to get you up and running.\"\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 ExampleEyeFollow=()=>{const[riveReady,setRiveReady]=useState(false);useEffect(()=>{if(window.rive){setRiveReady(true);return}const checkRive=()=>{if(window.rive){setRiveReady(true);window.removeEventListener(`rive-loaded`,checkRive)}};window.addEventListener(`rive-loaded`,checkRive);return()=>{window.removeEventListener(`rive-loaded`,checkRive)}},[]);useEffect(()=>{if(riveReady){const rive=window.rive;const mapCursorToRange=(position,dimension)=>{const clampedPosition=Math.max(0,Math.min(position,dimension));return clampedPosition/dimension*100};let handleMouseMove=()=>{};let handleMouseLeave=()=>{};const r=new rive.Rive({src:`https://static.rive.app/rivs/cat_follow_cursor_demo.riv`,stateMachines:`State Machine 1`,canvas:document.getElementById(`riveCanvas`),autoplay:true,autoBind:true,Layout:new rive.Layout({fit:rive.Fit.Contain}),onLoad:()=>{r.resizeDrawingSurfaceToCanvas();const vmi=r.viewModelInstance;if(!vmi)return;const xProperty=vmi.number(`xPos`);const yProperty=vmi.number(`yPos`);if(xProperty){xProperty.value=50}if(yProperty){yProperty.value=50}const updatePosition=(clientX,clientY)=>{const rect=riveCanvas.getBoundingClientRect();const canvasX=clientX-rect.left;const canvasY=clientY-rect.top;const xValue=mapCursorToRange(canvasX,rect.width);const yValue=mapCursorToRange(canvasY,rect.height);if(xProperty){xProperty.value=xValue}if(yProperty){yProperty.value=yValue}};const handleMouseMove=event=>{updatePosition(event.clientX,event.clientY)};const handleTouchMove=event=>{if(event.touches.length>0){const touch=event.touches[0];updatePosition(touch.clientX,touch.clientY)}};const handleTouchEnd=()=>{if(xProperty)xProperty.value=50;if(yProperty)yProperty.value=50};window.addEventListener(`mousemove`,handleMouseMove);window.addEventListener(`touchmove`,handleTouchMove,{passive:true});window.addEventListener(`touchend`,handleTouchEnd);document.addEventListener(`mouseleave`,()=>{if(xProperty)xProperty.value=50;if(yProperty)yProperty.value=50})}});window.addEventListener(`resize`,()=>{r.resizeDrawingSurfaceToCanvas()});return()=>{window.removeEventListener(`resize`,()=>{r.resizeDrawingSurfaceToCanvas()});window.removeEventListener(`mousemove`,handleMouseMove);window.removeEventListener(`mouseleave`,handleMouseLeave)}}},[riveReady]);return _jsx(`canvas`,{id:`riveCanvas`,style:{width:`100%`,height:`100%`,backgroundColor:`#ADBCC6`}})};const RiveCard=({title,description,links,children,source,aspect3by2})=>{const _components={a:`a`,..._provideComponents()};const runtimesInOrder=[`web`,`react`,`reactNative`,`flutter`,`apple`,`android`,`unity`,`unreal`];const runtimeTitles={web:`Web`,react:`React`,reactNative:`React Native`,flutter:`Flutter`,apple:`Apple`,android:`Android`,unity:`Unity`,unreal:`Unreal`};const hasContent=title||description||links;const RuntimeLink=({link,runtime})=>{if(!link)return null;return _jsx(_components.a,{href:link,target:`_blank`,className:`mint-cursor-pointer mint-border mint-border-neutral-600 hover:mint-border-white mint-rounded-[4px] text-14 mint-py-1 mint-px-5 mint-mr-[10px] mint-mb-[10px]`,children:runtimeTitles[runtime]})};return _jsxs(`div`,{className:`mint-flex mint-flex-col card mint-block mint-font-normal group mint-relative mint-my-2 mint-ring-2 mint-ring-transparent mint-rounded-2xl mint-bg-white dark:bg-background-dark mint-border mint-border-gray-950/10 dark:mint-border-white/10 mint-overflow-hidden mint-w-full`,children:[aspect3by2?_jsx(`div`,{className:`mint-w-full mint-h-0 mint-relative mint-pb-[66%]`,children:_jsx(`div`,{className:`mint-absolute mint-inset-0`,children})}):_jsx(`div`,{className:`mint-w-full mint-h-0 mint-relative mint-pb-[75%]`,children:_jsx(`div`,{className:`mint-absolute mint-inset-0`,children})}),hasContent\u0026\u0026_jsx(`div`,{className:`mint-flex mint-flex-grow mint-flex-col mint-px-6 mint-py-5 mint-relative`,\"data-component-part\":`card-content-container`,children:_jsxs(`div`,{className:`mint-flex mint-flex-col mint-grow`,children:[_jsx(`h2`,{className:`not-prose mint-font-semibold mint-text-base mint-text-gray-800 dark:mint-text-white`,\"data-component-part\":`card-title`,children:title}),_jsxs(`div`,{className:`mint-flex mint-flex-col mint-grow prose mint-mt-1 mint-font-normal mint-text-sm mint-leading-6 mint-text-gray-600 dark:mint-text-gray-400`,\"data-component-part\":`card-content`,children:[_jsxs(`div`,{className:`mint-grow mint-flex mint-flex-col`,children:[_jsx(`p`,{children:description}),source\u0026\u0026source.length>0\u0026\u0026_jsx(`p`,{className:`mint-mt-3`,children:source.map((item,index)=>{if(source.length==1){return _jsxs(_Fragment,{children:[`Open the `,_jsx(_components.a,{href:item,children:`Rive file`}),`.`]})}if(index==0){return _jsxs(_Fragment,{children:[`Open `,_jsx(_components.a,{href:item,children:`Rive file 1`})]})}return _jsxs(_Fragment,{children:[`, `,_jsxs(_components.a,{href:item,children:[`file `,index+1]})]})})})]}),_jsx(`div`,{className:`mint-mt-6 mint-flex mint-flex-wrap`,children:links\u0026\u0026runtimesInOrder.map(currentRuntime=>{return _jsx(RuntimeLink,{runtime:currentRuntime,link:links[currentRuntime]},currentRuntime)})})]})]})})]})};const Demos=({examples,runtime,columns=2,children,childrenIndex=0,learnByExample=false})=>{const _components={a:`a`,..._provideComponents()};const examplesData={accessibilityReducedMotion:{title:`Reduced Motion Example`,description:`Strategies for respecting a user's reduced motion preferences.`,riv:`https://static.rive.app/rivs/accessibility_reduced_motion.riv`,stateMachines:`State Machine 1`,links:{editor:`https://rive.app/community/files/28077-accessibility-reduced-motion`}},randomizeExit:{title:`Randomize Exit`,description:`Randomize Exit lets a state choose from its outgoing transition paths at random.`,riv:`https://static.rive.app/rivs/randomize_exit.riv`,stateMachines:`State Machine 1`,links:{editor:`https://rive.app/community/files/28147-randomize-exit/`}},gamepadListeners:{title:`Gamepad Listeners`,description:`Minimal demo that controls shapes with a gamepad's joystick and buttons.`,image:`https://static.rive.app/docs/gamepad.png`,links:{editor:`https://rive.app/community/files/28995-54925-gamepad-listeners`}},gamepadRadialMenu:{title:`Gamepad Radial Menu`,description:`Pick items from a 3D radial menu with a gamepad's joystick and buttons.`,image:`https://static.rive.app/docs/gamepad-radial-menu.png`,links:{editor:`https://rive.app/community/files/29015-gamepad-radial-demo/`}},gamepadGame:{title:`Gamepad Game`,description:`A playable game you control entirely with a gamepad.`,image:`https://static.rive.app/docs/gamepad-game-demo.png`,links:{editor:`https://rive.app/community/files/29016-gamepad-game/`}},ikConstraint:{title:`IK Constraints`,description:`Check out this example to see IK constraints in action.`,image:`https://static.rive.app/docs/ik-constraint.gif`,stateMachines:`State Machine 1`,links:{editor:`https://rive.app/community/files/28080-ik-constraint/`}},textFollowPath:{title:`Text Follow Path`,description:`Use the Follow Path text modifier to make text follow a vector path.`,riv:`https://static.rive.app/rivs/text_follow_path.riv`,stateMachines:`State Machine 1`,links:{editor:`https://rive.app/community/files/29023-text-follow-path`}},accessibilityReducedMotion:{title:`Reduced Motion Example`,description:`Strategies for respecting a user's reduced motion preferences.`,riv:`https://static.rive.app/rivs/accessibility_reduced_motion.riv`,stateMachines:`State Machine 1`,links:{editor:`https://rive.app/community/files/28077-accessibility-reduced-motion`}},nSlicing:{title:`N-Slicing `,description:`N-Slice a group that includes vector and raster artwork to build a panel that resizes without distorting.`,riv:`https://static.rive.app/rivs/n-slicing.riv`,stateMachines:`State Machine 1`,links:{editor:`https://rive.app/community/files/29038-tutorial-n-slicing/`}},meshAndBones:{title:`Mesh and Bones`,description:`Deform raster images with meshes controlled by bones.`,video:`https://static.rive.app/docs/mesh.mp4`,links:{editor:`https://rive.app/community/files/28327-mesh-and-bones/`}},componentMesh:{title:`Component Mesh`,description:`Add a mesh deformation to a nested component.`,riv:`https://static.rive.app/rivs/component_mesh.riv`,stateMachines:`State Machine 1`,links:{editor:`https://rive.app/community/files/29045-component-mesh/`}},listenerExamples:{title:`Listener Pointer Events`,description:`See each Listen To condition in action.`,riv:`https://static.rive.app/rivs/listen_to.riv `,stateMachines:`State Machine 1`,artboard:`Artboard 1`,layout:true,layoutScaleFactor:.8,links:{},source:[`https://rive.app/community/files/28817-listener-pointer-events/`]},cachingARiveFile:{title:`Caching a Rive File`,description:`Load the .riv into memory once, use it multiple times.`,riv:`https://static.rive.app/rivs/rives_animated_emojis.riv`,stateMachines:`State Machine 1`,artboard:`Emoji_package`,links:{web:`https://codesandbox.io/p/sandbox/rive-js-caching-a-rive-file-g675my?file=%2Fsrc%2Findex.ts%3A9%2C1`,react:`https://codesandbox.io/p/sandbox/rive-react-caching-a-rive-file-53gmdf?file=%2Fsrc%2FApp.tsx`},source:[`https://rive.app/marketplace/24644-caching-a-rive-file-at-runtime/`]},dataBindingFonts:{title:`Data Binding Fonts`,description:`Swap an font at runtime.`,image:`https://static.rive.app/docs/data-binding-fonts.png`,links:{web:`https://codesandbox.io/p/sandbox/cjt2tl?file=%2Findex.ts%3A37%2C41`,react:`https://codesandbox.io/p/sandbox/rive-data-binding-fonts-glpm49?file=%2Fsrc%2FApp.tsx`},source:[`https://rive.app/community/files/28431-data-binding-fonts/`]},dataBindingArtboards:{title:`Data Binding Artboards`,description:`Swap an artboard with another artboard from the same .riv or one loaded at runtime.`,image:`/images/runtimes/rive-data-bind-components.webp`,links:{web:`https://codesandbox.io/p/sandbox/rive-js-data-binding-artboards-jx3pf9?file=%2Fsrc%2Findex.mjs%3A5%2C19`,react:`https://codesandbox.io/p/sandbox/rive-react-data-binding-artboards-kmvzh8?file=%2Fsrc%2FApp.tsx`,flutter:`https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding_artboards.dart`,reactNative:`https://github.com/rive-app/rive-nitro-react-native/blob/main/example/src/demos/DataBindingArtboardsExample.tsx`,android:`https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeArtboardBindingActivity.kt`},source:[`https://rive.app/marketplace/24641-data-binding-artboards/`,`https://rive.app/marketplace/24642-data-binding-artboards/`]},dataBindingImages:{title:`Data Binding Images`,description:`Replace images at runtime using data binding images with javascript.`,image:`/images/runtimes/rive-db-images.webp`,links:{web:`https://codesandbox.io/p/sandbox/objective-cohen-sqwh9q?file=%2Fsrc%2Findex.ts`,flutter:`https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding_images.dart`,android:`https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeImageBindingActivity.kt`},source:[`https://rive.app/marketplace/25472-data-binding-images/`]},dataBindingLists:{title:`Data Binding Lists`,description:`Add, remove, edit, and swap items in your data binding list.`,image:`/images/runtimes/rive-db-lists.webp`,links:{web:`https://codesandbox.io/p/sandbox/suspicious-hertz-2lg4m8?file=%2Fsrc%2Findex.ts`,react:`https://codesandbox.io/p/sandbox/rive-react-data-binding-lists-4msh9z?file=%2Fsrc%2FApp.tsx`,flutter:`https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding_lists.dart`,android:`https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeListActivity.kt`},source:[`https://rive.app/marketplace/25474-data-binding-lists/`]},dataBindingQuickStart:{title:`Data Binding`,description:`Get started with Data Binding at runtime.`,image:`/images/runtimes/rewards.gif`,links:{flutter:`https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/databinding.dart`,reactNative:`https://github.com/rive-app/rive-react-native/blob/main/example/app/(examples)/DataBinding.tsx`,unity:`https://github.com/rive-app/rive-unity-examples/blob/main/getting-started/Assets/RewardsController.cs`,apple:`https://github.com/rive-app/rive-ios/blob/main/Example-iOS/Source/Examples/SwiftUI/RewardsView.swift`,android:`https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeDataBindingActivity.kt`},source:[`https://rive.app/marketplace/25475-data-binding-demo/`]},dataBindingSolos:{title:`Data Binding Solos`,description:`Control solos at runtime using strings, numbers, or enums.`,image:`/images/runtimes/data-binding-solos.gif`,links:{react:`https://codesandbox.io/p/sandbox/rive-react-controlling-solos-at-runtime-ctcnlx?file=%2Fsrc%2FApp.tsx`},source:[`https://rive.app/marketplace/24643-data-binding-solos/`]},googleAppAds:{title:`Google App Ads`,description:`How to make an interactive Google App with Rive.`,image:`/images/runtimes/google-app-ads.png`,links:{mobile:`https://github.com/rive-app/rive-use-cases/tree/main/rive-google-ads`}},layouts:{title:`Responsive Layouts`,description:`Create responsive layouts that adapt to different screen sizes.`,riv:`https://static.rive.app/rivs/layouts_demo.riv`,stateMachines:`State Machine 1`,artboard:`Demo`,links:{web:`https://codesandbox.io/p/devbox/rive-responsive-layout-js-forked-m77nlw`,react:`https://codesandbox.io/p/devbox/rive-responsive-layouts-react-forked-nmpv39?file=%2Fsrc%2FApp.tsx`,flutter:`https://github.com/rive-app/rive-flutter/blob/master/example/lib/examples/responsive_layouts.dart`,reactNative:`https://github.com/rive-app/rive-react-native/blob/main/example/app/(examples)/ResponsiveLayout.tsx`,android:`https://github.com/rive-app/rive-android/blob/master/app/src/main/java/app/rive/runtime/example/ComposeLayoutActivity.kt`},source:[`https://rive.app/marketplace/24638-layouts-demo/`]},fontsHostedCompressed:{title:`Load a Compressed Font for Web`,description:`Dynamically load a font asset from a hosted location with compression.`,image:`/images/runtimes/brotli-compressed-fonts.webp`,links:{react:`https://codesandbox.io/p/sandbox/prod-sound-6yc5xl?file=%2Fsrc%2FApp.tsx%3A19%2C1`},source:[`https://rive.app/marketplace/25473-loading-compressed-fonts-web/`]},quickStart:{title:`Data Binding Quick Start`,image:`/images/runtimes/quick-start.gif`,description:`Load and control your Rive (.riv) file.`,links:{web:`https://codesandbox.io/p/sandbox/rive-quick-start-js-xmwcm6?file=%2Fsrc%2Findex.ts`,react:`https://codesandbox.io/p/sandbox/rive-react-quick-start-4xy76h?file=%2Fsrc%2FApp.tsx%3A77%2C14`,reactJs:`https://codesandbox.io/p/devbox/rive-react-vanilla-js-quick-start-kz66t4?file=%2Fsrc%2FApp.tsx%3A53%2C7`,reactNative:`https://github.com/rive-app/rive-nitro-react-native/blob/main/example/src/demos/QuickStart.tsx`,unity:`/game-runtimes/unity/tutorials/health-bar`},source:[`https://rive.app/marketplace/24637-health-bar-data-binding-quick-start/`]},quickStartReact:{title:`Data Binding Quick Start`,image:`/images/runtimes/quick-start.gif`,description:`Load and control your Rive (.riv) file.`,links:{react:`https://codesandbox.io/p/sandbox/rive-react-quick-start-4xy76h?file=%2Fsrc%2FApp.tsx%3A77%2C14`,reactJs:`https://codesandbox.io/p/devbox/rive-react-vanilla-js-quick-start-kz66t4?file=%2Fsrc%2FApp.tsx%3A53%2C7`},source:[`https://rive.app/marketplace/24637-health-bar-data-binding-quick-start/`]},reactHome:{title:`See a Working Demo`,image:`/images/runtimes/quick-start.gif`,description:`Load your Rive (.riv) file into a React component.`,links:{react:`https://codesandbox.io/p/sandbox/rive-react-quick-start-4xy76h?file=%2Fsrc%2FApp.tsx%3A77%2C14`,reactJs:`https://codesandbox.io/p/devbox/rive-react-vanilla-js-quick-start-kz66t4?file=%2Fsrc%2FApp.tsx%3A53%2C7`,reactComponent:`https://codesandbox.io/p/sandbox/rive-react-component-quick-start-hl87kh?file=%2Fsrc%2FApp.tsx%3A23%2C1`}},scriptingDrawingShapes:{title:`Drawing with Scripting`,image:`https://static.rive.app/docs/drawing-demo.png`,description:`Draw a squirkle, a star, and an animated wave with scripting.`,links:{editor:`https://rive.app/community/files/25751-drawing-shapes-with-scripting`}},scriptingMasonry:{title:`Masonry Layout`,image:`https://static.rive.app/docs/masonry.png`,description:`Create a masonry layout using a Layout script.`,links:{editor:`https://rive.app/community/files/25826-masonry-layout/`}},scriptingParticleEmitter:{title:`Particle Emitter`,riv:`https://static.rive.app/rivs/particle-demo.riv`,artboard:`Demo`,description:`A small, self contained particle system for Rive node and layout scripts.`,links:{editor:`https://rive.app/community/files/28062-particle-librar/`}},scriptingTippingConverter:{title:`Custom Converter`,image:`https://static.rive.app/docs/tipping-scripting-converter.gif`,description:`Calculate the bill total using the converter's input value added to data binding values.`,links:{editor:`https://uat.rive.app/community/files/610-custom-converter-with-scripting`}},scriptingUnitTesting:{title:`Unit Testing`,image:`https://static.rive.app/docs/scripting-default-thumb.png`,description:`This hands-on example demonstrates unit testing rgbToHex and hexToRgb color utilities.`,links:{editor:`https://rive.app/community/files/25752-test-script`}},scriptingSnakeGame:{title:`Snake - Complete Game`,image:`https://static.rive.app/docs/snake-game.png`,description:`Check out this complete game built entirely with Rive using scripting.`,links:{editor:`https://rive.app/community/files/25748-snake-game/`}},scriptingMultiTouch:{title:`Tracking Multi-touch`,image:`https://static.rive.app/docs/scripting-default-thumb.png`,description:`Keep track of every finger.`,links:{editor:`https://rive.app/community/files/25754-multi-touch-with-scripting`}},scriptingNestedPointers:{title:`Nested Pointer Events`,image:`https://static.rive.app/docs/scripting-default-thumb.png`,description:`Pass pointer events from the parent component to the instantiated children.`,links:{editor:`https://rive.app/community/files/25750-scripting-nested-pointer-events/`}},scriptingBoilPathEffect:{title:`Boiling Path Effect`,image:`https://static.rive.app/docs/boiling-effect.gif`,description:`Apply a boiling effect to any path using scripting.`,links:{editor:`https://rive.app/community/files/25767-scripting-path-effect-boil`}},scriptingTextPathEffect:{title:`Text Path Effect`,image:`https://static.rive.app/docs/text-path-effect.gif`,description:`Control a text path using scripting.`,links:{editor:`https://rive.app/community/files/25823-text-path-effects/`}},scriptingDrawImages:{title:`Render an Image with Scripting`,image:`https://static.rive.app/docs/render-image-with-scripting.jpg`,description:`Draw an image, give it transforms, control its mesh, and add clipping all through scripting.`,links:{editor:`https://rive.app/community/files/26406-draw-an-image-with-scripting`}},scriptingSlotMachine:{title:`Slot Machine - Complete Game`,image:`https://static.rive.app/docs/slot-machine.png`,description:`Build a complete casino game using scripting.`,links:{editor:`https://rive.app/community/files/25759-slot-machine-game-with-scripting/`}},scriptingLists:{title:`Scripting Lists`,image:`/images/runtimes/rive-db-lists.webp`,description:`Add, remove, edit, and swap items in your data binding list using Rive scripting.`,links:{editor:`https://rive.app/community/files/27098-scripting-lists`}},scriptingPlinko:{title:`Plinko - Complete Game`,image:`https://static.rive.app/docs/scripting-plinko-game.png`,description:`Build a complete Plinko game using Layout, Node, and Path Effect scripts.`,links:{editor:`https://rive.app/marketplace/25772-blinko-scripted-game/`}},constraints:{title:`Constraints`,image:`https://static.rive.app/docs/constraints.gif`,description:`Transform, Translate, Scale, and Rotation Constraints.`,links:{editor:`https://rive.app/community/files/28081-constraints/`}},clipping:{title:`Clipping`,image:`/images/editor/manipulating-shapes/clipping-demo.png`,description:`Clipping, multiple clips, inverse clipping, and fill rules.`,links:{editor:`https://rive.app/community/files/29092-clipping/`}},effectGroups:{title:`Effect Groups`,image:`/images/editor/manipulating-shapes/effect-groups-demo.png`,description:`Share path effects across shapes with Effect Groups, and combine effects in a stack.`,links:{editor:`https://rive.app/community/files/29094-effect-groups/`}}};const runtimesInOrder=[`web`,`react`,`reactJs`,`reactComponent`,`reactNative`,`flutter`,`apple`,`android`,`unity`,`unreal`,`mobile`,`editor`];const runtimeTitles={web:`Web`,reactJs:`React (Imperative)`,reactComponent:`React (Component)`,react:`React`,reactNative:`React Native`,flutter:`Flutter`,apple:`Apple`,android:`Android`,unity:`Unity`,unreal:`Unreal`,mobile:`Mobile`,editor:`Try in Rive`};const riveInstances=useRef([]);const initRives=()=>{const rive=window.rive;examples.forEach(example=>{const{riv,stateMachines=`State Machine 1`,artboard,layout,layoutScaleFactor}=examplesData[example];if(riv){const canvasId=`rive-canvas-${example}`;const canvas=document.getElementById(canvasId);if(canvas){const r=new rive.Rive({src:riv,stateMachines,canvas,artboard,autoBind:true,autoplay:true,layout:new rive.Layout({fit:layout?rive.Fit.Layout:rive.Fit.Contain,...layoutScaleFactor!==undefined\u0026\u0026{layoutScaleFactor}}),onLoad:()=>{r.resizeDrawingSurfaceToCanvas();riveInstances.current.push(r)}})}}})};useEffect(()=>{if(window.rive){initRives();return}const checkRive=()=>{if(window.rive){initRives();window.removeEventListener(`rive-loaded`,checkRive)}};const handleResize=()=>{riveInstances.current.forEach(instance=>{instance.resizeDrawingSurfaceToCanvas()})};window.addEventListener(`rive-loaded`,checkRive);window.addEventListener(`resize`,handleResize);return()=>{window.removeEventListener(`rive-loaded`,checkRive);window.removeEventListener(`resize`,handleResize);riveInstances.current.forEach(instance=>{instance.cleanup()})}},[]);const RuntimeLink=({link,runtime})=>{if(!link)return null;if(runtime===`editor`){link=`${link}?utm_source=docs\u0026utm_medium=docs_demo_card`}return _jsx(_components.a,{href:link,target:`_blank`,className:`mint-cursor-pointer mint-border mint-border-neutral-600 hover:mint-border-white mint-rounded-[4px] text-14 mint-py-1 mint-px-5 mint-mr-[10px] mint-mb-[10px]`,children:runtimeTitles[runtime]})};const CardContainer=({children:content})=>{return _jsx(`div`,{className:`mint-flex mint-flex-col card mint-block mint-font-normal group mint-relative mint-my-2 mint-ring-2 mint-ring-transparent mint-rounded-2xl mint-bg-white dark:bg-background-dark mint-border mint-border-gray-950/10 dark:mint-border-white/10 mint-overflow-hidden mint-w-full`,children:content})};const getSrc=imageSrc=>{if(location.hostname===`localhost`\u0026\u0026imageSrc.startsWith(`/images/`)){return imageSrc}else if(imageSrc.startsWith(`https:`)){return imageSrc}return`https://rive.app/docs${imageSrc}`};return _jsx(`div`,{className:`\n card-group not-prose mint-grid mint-gap-x-4 mint-grid-cols-1\n ${columns>=2?`md:mint-grid-cols-2`:``}\n ${columns>=3?`xl:mint-grid-cols-3 xl:mint-w-[67rem] xl:mint-max-w-[calc(100vw-25rem)]`:``}\n `,children:examples.map((example,index)=>{const{title,image,video,links,description,source,riv}=examplesData[example];const canvasId=`rive-canvas-${example}`;return _jsxs(_Fragment,{children:[index===childrenIndex\u0026\u0026children,_jsxs(CardContainer,{children:[_jsx(`div`,{className:`mint-w-full mint-h-0 mint-relative mint-pb-[75%]`,children:_jsxs(`div`,{className:`mint-absolute mint-inset-0`,children:[image\u0026\u0026_jsx(`img`,{alt:title,className:`mint-w-full mint-object-cover mint-object-center`,src:getSrc(image)}),video\u0026\u0026!image\u0026\u0026_jsx(`video`,{src:getSrc(video),autoPlay:true,loop:true,muted:true,playsInline:true,className:`mint-w-full mint-h-full mint-object-cover mint-object-center`}),riv\u0026\u0026!image\u0026\u0026!video\u0026\u0026_jsx(`canvas`,{id:canvasId,style:{width:`100%`,height:`100%`}})]})}),_jsx(`div`,{className:`mint-flex mint-flex-grow mint-flex-col mint-px-6 mint-py-5 mint-relative`,\"data-component-part\":`card-content-container`,children:_jsxs(`div`,{className:`mint-flex mint-flex-col mint-grow`,children:[_jsx(`h2`,{className:`not-prose mint-font-semibold mint-text-base mint-text-gray-800 dark:mint-text-white`,\"data-component-part\":`card-title`,children:learnByExample?`Learn by Example`:title}),_jsxs(`div`,{className:`mint-flex mint-flex-col mint-grow prose mint-mt-1 mint-font-normal mint-text-sm mint-leading-6 mint-text-gray-600 dark:mint-text-gray-400`,\"data-component-part\":`card-content`,children:[_jsxs(`div`,{className:`mint-grow mint-flex mint-flex-col`,children:[description\u0026\u0026!learnByExample\u0026\u0026_jsx(`p`,{children:description}),source\u0026\u0026source.length>0\u0026\u0026_jsx(`p`,{className:`mint-mt-3`,children:source.map((item,index)=>{if(source.length==1){return _jsxs(_Fragment,{children:[`Open the `,_jsx(_components.a,{href:item,children:`Rive file`}),`.`]})}if(index==0){return _jsxs(_Fragment,{children:[`Open `,_jsx(_components.a,{href:item,children:`Rive file 1`})]})}return _jsxs(_Fragment,{children:[`, `,_jsxs(_components.a,{href:item,children:[`file `,index+1]})]})})})]}),_jsx(`div`,{className:`mint-mt-6 mint-flex mint-flex-wrap`,children:runtimesInOrder.map(currentRuntime=>{if(runtime\u0026\u0026currentRuntime!==runtime)return;return _jsx(RuntimeLink,{runtime:currentRuntime,link:links[currentRuntime]},currentRuntime)})})]})]})})]},canvasId)]})})})};function _createMdxContent(props){const{_MdxComponentBoundary}={..._provideComponents(),...props.components};if(!_MdxComponentBoundary)_missingMdxReference(`_MdxComponentBoundary`,true);return _jsx(_MdxComponentBoundary,{name:`Demos`,children:_jsx(Demos,{examples:[`quickStart`,`dataBindingQuickStart`,`layouts`,`fontsHostedCompressed`,`dataBindingArtboards`,`cachingARiveFile`,`dataBindingImages`,`dataBindingFonts`,`dataBindingLists`,`dataBindingSolos`,`googleAppAds`],columns:3,childrenIndex:4,children:_jsx(_MdxComponentBoundary,{name:`RiveCard`,children:_jsx(RiveCard,{title:`Follow the Cursor`,description:`Track the cursor, even if it's outside the bounds of the Rive instance.`,links:{web:`https://codesandbox.io/p/sandbox/rive-web-track-your-mouse-n38gdd`},source:[`https://rive.app/marketplace/24639-cat-follow-cursor-demo?utm_source=docs\u0026utm_medium=docs_card_demo`],children:_jsx(_MdxComponentBoundary,{name:`ExampleEyeFollow`,children:_jsx(ExampleEyeFollow,{})})})})})})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{ExampleEyeFollow,RiveCard,Demos,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":"Rive Runtime Demos \u0026 Starters","sidebarTitle":"Demos","description":"Quick examples to get you up and running.","mode":"wide","href":"/runtimes/demos"}}},"mdxSourceWithNoJs":null,"noJsSplices":[[19,69,"jsx:_jsx}=arguments["],[155,25549,"null;const RiveCard=()=>null;const Demos=()=>null;function _"]]},"mdxExtracts":{"tableOfContents":[],"codeExamples":{}},"jsLinks":["/docs/_mintlify/custom/rive/6157a238f0df2356/rive-init.js","/docs/_mintlify/custom/rive/f98a4b1fb6965efa/rive-consent.js"],"dynamicCss":".mint-absolute {\n position: absolute\n}\n.mint-relative {\n position: relative\n}\n.mint-inset-0 {\n inset: 0px\n}\n.mint-my-2 {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem\n}\n.mint-mb-\\[10px\\] {\n margin-bottom: 10px\n}\n.mint-mr-\\[10px\\] {\n margin-right: 10px\n}\n.mint-mt-1 {\n margin-top: 0.25rem\n}\n.mint-mt-3 {\n margin-top: 0.75rem\n}\n.mint-mt-6 {\n margin-top: 1.5rem\n}\n.mint-block {\n display: block\n}\n.mint-flex {\n display: flex\n}\n.mint-grid {\n display: grid\n}\n.mint-h-0 {\n height: 0px\n}\n.mint-h-full {\n height: 100%\n}\n.mint-w-full {\n width: 100%\n}\n.mint-flex-grow {\n flex-grow: 1\n}\n.mint-grow {\n flex-grow: 1\n}\n.mint-cursor-pointer {\n cursor: pointer\n}\n.mint-grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr))\n}\n.mint-flex-col {\n flex-direction: column\n}\n.mint-flex-wrap {\n flex-wrap: wrap\n}\n.mint-gap-x-4 {\n column-gap: 1rem\n}\n.mint-overflow-hidden {\n overflow: hidden\n}\n.mint-rounded-2xl {\n border-radius: 1rem\n}\n.mint-rounded-\\[4px\\] {\n border-radius: 4px\n}\n.mint-border {\n border-width: 1px\n}\n.mint-border-gray-950\\/10 {\n border-color: rgb(3 7 18 / 0.1)\n}\n.mint-border-neutral-600 {\n --tw-border-opacity: 1;\n border-color: rgb(82 82 82 / var(--tw-border-opacity, 1))\n}\n.mint-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))\n}\n.mint-object-cover {\n object-fit: cover\n}\n.mint-object-center {\n object-position: center\n}\n.mint-px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem\n}\n.mint-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n.mint-py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem\n}\n.mint-py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem\n}\n.mint-pb-\\[66\\%\\] {\n padding-bottom: 66%\n}\n.mint-pb-\\[75\\%\\] {\n padding-bottom: 75%\n}\n.mint-text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n.mint-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n.mint-font-normal {\n font-weight: 400\n}\n.mint-font-semibold {\n font-weight: 600\n}\n.mint-leading-6 {\n line-height: 1.5rem\n}\n.mint-text-gray-600 {\n --tw-text-opacity: 1;\n color: rgb(75 85 99 / var(--tw-text-opacity, 1))\n}\n.mint-text-gray-800 {\n --tw-text-opacity: 1;\n color: rgb(31 41 55 / var(--tw-text-opacity, 1))\n}\n.mint-ring-2 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)\n}\n.mint-ring-transparent {\n --tw-ring-color: transparent\n}\n.hover\\:mint-border-white:hover {\n --tw-border-opacity: 1;\n border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))\n}\n.dark\\:mint-border-white\\/10:is(.dark *) {\n border-color: rgb(255 255 255 / 0.1)\n}\n.dark\\:mint-text-gray-400:is(.dark *) {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity, 1))\n}\n.dark\\:mint-text-white:is(.dark *) {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1))\n}\n@media (min-width: 768px) {\n .md\\:mint-grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr))\n }\n}\n@media (min-width: 1280px) {\n .xl\\:mint-w-\\[67rem\\] {\n width: 67rem\n }\n .xl\\:mint-max-w-\\[calc\\(100vw-25rem\\)\\] {\n max-width: calc(100vw - 25rem)\n }\n .xl\\:mint-grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr))\n }\n}","subdomain":"rive","siteName":"Rive","title":"Rive Runtime Demos \u0026 Starters - Rive","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-11-09T21:27:22.978Z","originalFileLocation":"runtimes/demos.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=\"Quick examples to get you up and running.\">\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=\"Rive Runtime Demos \u0026amp; Starters - Rive\">\u003cmeta data-mint-head property=\"og:description\" content=\"Quick examples to get you up and running.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Rive\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://rive.app/docs/runtimes/demos\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://rive.mintlify.site/docs/_mintlify/api/og/v2?division=+\u0026amp;title=Rive+Runtime+Demos+%26+Starters\u0026amp;description=Quick+examples+to+get+you+up+and+running.\u0026amp;theme=2e225578d6f0bf137ea455bc\u0026amp;signature=c77d13ef3ed0e82ef4c1e1bd41ff0b50cd74eec88327e94149b30e22f258d334\">\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=\"Rive Runtime Demos \u0026amp; Starters - Rive\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Quick examples to get you up and running.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://rive.mintlify.site/docs/_mintlify/api/og/v2?division=+\u0026amp;title=Rive+Runtime+Demos+%26+Starters\u0026amp;description=Quick+examples+to+get+you+up+and+running.\u0026amp;theme=2e225578d6f0bf137ea455bc\u0026amp;signature=c77d13ef3ed0e82ef4c1e1bd41ff0b50cd74eec88327e94149b30e22f258d334\">\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/runtimes/demos\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/docs/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/runtimes/demos.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/runtimes/demos#webpage\",\"url\":\"https://rive.app/docs/runtimes/demos\",\"name\":\"Rive Runtime Demos \u0026 Starters\",\"description\":\"Quick examples to get you up and running.\",\"dateModified\":\"2026-11-09T21:27:22.978Z\",\"isPartOf\":{\"@id\":\"https://rive.app/docs#website\"},\"breadcrumb\":{\"@id\":\"https://rive.app/docs/runtimes/demos#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://rive.app/docs/runtimes/demos#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\" \",\"item\":\"https://rive.app/docs/runtimes/getting-started\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Rive Runtime Demos \u0026 Starters\",\"item\":\"https://rive.app/docs/runtimes/demos\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://rive.app/docs/runtimes/demos#article\",\"headline\":\"Rive Runtime Demos \u0026 Starters\",\"name\":\"Rive Runtime Demos \u0026 Starters\",\"description\":\"Quick examples to get you up and running.\",\"url\":\"https://rive.app/docs/runtimes/demos\",\"mainEntityOfPage\":{\"@id\":\"https://rive.app/docs/runtimes/demos#webpage\"},\"dateModified\":\"2026-11-09T21:27:22.978Z\",\"publisher\":{\"@id\":\"https://rive.app/#organization\"},\"isPartOf\":{\"@id\":\"https://rive.app/docs#website\"}}]}\u003c/script>","agentPointerHref":"/docs/runtimes/demos.md","siteName":"Rive","nav":{"global":null,"tabs":[{"tab":"Home","pages":[{"title":"Home","href":"/getting-started/introduction"}]},{"tab":"Editor","pages":[{"title":"Editor","href":"/editor/get-rive"}]},{"tab":"Scripting","pages":[{"title":"Scripting","href":"/scripting/getting-started"}]},{"tab":"Runtimes","groups":[{"group":" ","pages":[{"title":"Getting Started with the Rive Runtimes","sidebarTitle":"Getting Started","description":"Run Rive on your platform of choice.","href":"/runtimes/getting-started"},{"title":"Rive Runtime Demos \u0026 Starters","sidebarTitle":"Demos","mode":"wide","href":"/runtimes/demos"},{"title":"Feature Support","description":null,"href":"/feature-support"},{"title":"Runtime Sizes","href":"/runtimes/runtime-sizes"},{"title":"Choosing a Renderer","href":"/runtimes/choose-a-renderer/overview"},{"group":"File formats","pages":[{"title":".riv File Format","href":"/runtimes/advanced-topic/format"},{"title":"Rive Markup Language (RML)","sidebarTitle":"RML","href":"/runtimes/advanced-topic/rml"}]}]},{"group":"Runtimes","pages":[{"group":"Web (JS)","pages":[{"title":"Getting Started","href":"/runtimes/web/web-js"},{"title":"Canvas vs WebGL2","href":"/runtimes/web/canvas-vs-webgl"},{"title":"Rive Parameters","href":"/runtimes/web/rive-parameters"},{"title":"Artboards","href":"/runtimes/web/artboards"},{"title":"Layout","href":"/runtimes/web/layouts"},{"title":"State Machine Playback","href":"/runtimes/web/state-machines"},{"title":"Data Binding","href":"/runtimes/web/data-binding"},{"title":"Loading Assets","href":"/runtimes/web/loading-assets"},{"title":"Fonts","href":"/runtimes/web/fonts"},{"title":"Semantics","href":"/runtimes/web/semantics"},{"title":"Focus","href":"/runtimes/web/focus"},{"title":"Text and key input","sidebarTitle":"Text and Key Input","href":"/runtimes/web/text-and-key-input"},{"title":"Gamepad Input","href":"/runtimes/web/gamepad"},{"title":"GPU Canvas","href":"/runtimes/web/gpu-canvas"},{"title":"Preloading WASM","href":"/runtimes/web/preloading-wasm"},{"title":"Caching a Rive File","href":"/runtimes/web/caching-a-rive-file"},{"title":"Playing Audio","href":"/runtimes/web/playing-audio"},{"title":"Low-level API Usage","href":"/runtimes/web/low-level-api-usage"},{"group":"Legacy Features","pages":[{"title":"Animation Playback","href":"/runtimes/web/animation-playback"},{"title":"Inputs","href":"/runtimes/web/inputs"},{"title":"Text","href":"/runtimes/web/text"},{"title":"Rive Events","href":"/runtimes/web/rive-events"}]},{"title":"Migration Guides","href":"/runtimes/web/migration-guides"},{"title":"FAQ","href":"/runtimes/web/faq"}]},{"group":"React","pages":[{"title":"React","sidebarTitle":"Getting Started","href":"/runtimes/react/react"},{"title":"Parameters and Return Values","href":"/runtimes/react/parameters-and-return-values"},{"title":"Artboards","href":"/runtimes/react/artboards"},{"title":"Layout","href":"/runtimes/react/layouts"},{"title":"State Machine Playback","href":"/runtimes/react/state-machines"},{"title":"Data Binding","href":"/runtimes/react/data-binding"},{"title":"Loading Assets","href":"/runtimes/react/loading-assets"},{"title":"Fonts","href":"/runtimes/react/fonts"},{"title":"Semantics","href":"/runtimes/react/semantics"},{"title":"Focus","href":"/runtimes/react/focus"},{"title":"Text and key input","sidebarTitle":"Text and Key Input","href":"/runtimes/react/text-and-key-input"},{"title":"GPU Canvas","href":"/runtimes/react/gpu-canvas"},{"title":"Preloading WASM","href":"/runtimes/react/preloading-wasm"},{"title":"Caching a Rive File","href":"/runtimes/react/caching-a-rive-file"},{"title":"Playing Audio","href":"/runtimes/react/playing-audio"},{"title":"Rendering to a Bitmap","href":"/runtimes/react/rendering-to-a-bitmap"},{"title":"Best Practices","href":"/runtimes/react/best-practices"},{"group":"Legacy Features","pages":[{"title":"Animation Playback","href":"/runtimes/react/animation-playback"},{"title":"Inputs","href":"/runtimes/react/inputs"},{"title":"Text","href":"/runtimes/react/text"},{"title":"Rive Events","href":"/runtimes/react/rive-events"}]},{"title":"Migration Guides","href":"/runtimes/react/migration-guides"}]},{"group":"React Native","pages":[{"title":"React Native","href":"/runtimes/react-native/react-native"},{"title":"GPU Canvas","href":"/runtimes/react-native/gpu-canvas"},{"title":"Loading Rive Files","href":"/runtimes/react-native/loading-rive-files"},{"title":"Props","href":"/runtimes/react-native/props"},{"title":"Rive Ref Methods","href":"/runtimes/react-native/rive-ref-methods"},{"title":"Error Handling","href":"/runtimes/react-native/error-handling"},{"title":"Adding Rive to Expo","href":"/runtimes/react-native/adding-rive-to-expo"},{"title":"Native SDK Version Customization","sidebarTitle":"Custom SDK Version","href":"/runtimes/react-native/native-version-customization"},{"title":"Artboards","href":"/runtimes/react-native/artboards"},{"title":"Layout","href":"/runtimes/react-native/layouts"},{"title":"State Machine Playback","href":"/runtimes/react-native/state-machines"},{"title":"Data Binding","href":"/runtimes/react-native/data-binding"},{"title":"TypeScript Schemas","href":"/runtimes/react-native/typescript-schemas"},{"title":"Loading Assets","href":"/runtimes/react-native/loading-assets"},{"title":"Fonts","href":"/runtimes/react-native/fonts"},{"title":"Caching a Rive File","href":"/runtimes/react-native/caching-a-rive-file"},{"title":"Semantics","href":"/runtimes/react-native/semantics"},{"title":"Playing Audio","href":"/runtimes/react-native/playing-audio"},{"title":"Logging","href":"/runtimes/react-native/logging"},{"group":"Legacy Features","pages":[{"title":"Animation Playback","href":"/runtimes/react-native/animation-playback"},{"title":"Inputs","href":"/runtimes/react-native/inputs"},{"title":"Text","href":"/runtimes/react-native/text"},{"title":"Rive Events","href":"/runtimes/react-native/rive-events"}]},{"title":"Migration Guide","href":"/runtimes/react-native/migration-guide"}]},{"group":"Flutter","pages":[{"title":"Flutter","href":"/runtimes/flutter/flutter"},{"title":"Rive Native for Flutter","href":"/runtimes/flutter/rive-native"},{"title":"Artboards","href":"/runtimes/flutter/artboards"},{"title":"Layout","href":"/runtimes/flutter/layouts"},{"title":"State Machine Playback","href":"/runtimes/flutter/state-machines"},{"title":"Data Binding","href":"/runtimes/flutter/data-binding"},{"title":"Loading Assets","href":"/runtimes/flutter/loading-assets"},{"title":"Fonts","href":"/runtimes/flutter/fonts"},{"title":"Semantics","href":"/runtimes/flutter/semantics"},{"title":"Caching a Rive File","href":"/runtimes/flutter/caching-a-rive-file"},{"title":"Playing Audio","href":"/runtimes/flutter/playing-audio"},{"group":"Legacy Features","pages":[{"title":"Animation Playback","href":"/runtimes/flutter/animation-playback"},{"title":"Inputs","href":"/runtimes/flutter/inputs"},{"title":"Text","href":"/runtimes/flutter/text"},{"title":"Rive Events","href":"/runtimes/flutter/rive-events"}]},{"title":"Migration Guide","href":"/runtimes/flutter/migration-guide"},{"title":"FAQ","href":"/runtimes/flutter/faq"},{"title":"Flutter API Reference","sidebarTitle":"API Reference","href":"/runtimes/flutter/api-reference"}]},{"group":"Apple","pages":[{"title":"Apple","href":"/runtimes/apple/apple"},{"title":"GPU Canvas","href":"/runtimes/apple/gpu-canvas"},{"title":"FAQ","href":"/runtimes/apple/faq"},{"title":"Resource Usage","href":"/runtimes/apple/resource-usage"},{"title":"Artboards","href":"/runtimes/apple/artboards"},{"title":"Layout","href":"/runtimes/apple/layouts"},{"title":"State Machine Playback","href":"/runtimes/apple/state-machines"},{"title":"Data Binding","href":"/runtimes/apple/data-binding"},{"title":"Loading Assets","href":"/runtimes/apple/loading-assets"},{"title":"Fonts","href":"/runtimes/apple/fonts"},{"title":"Caching a Rive File","href":"/runtimes/apple/caching-a-rive-file"},{"title":"Semantics","href":"/runtimes/apple/semantics"},{"title":"Focus","href":"/runtimes/apple/focus"},{"title":"Playing Audio","href":"/runtimes/apple/playing-audio"},{"title":"Logging","href":"/runtimes/apple/logging"},{"group":"Legacy Features","pages":[{"title":"Animation Playback","href":"/runtimes/apple/animation-playback"},{"title":"Inputs","href":"/runtimes/apple/inputs"},{"title":"Text","href":"/runtimes/apple/text"},{"title":"Rive Events","href":"/runtimes/apple/rive-events"}]},{"title":"Migration Guides","href":"/runtimes/apple/migration-guides"},{"title":"Migrating from the Legacy Rive Apple Runtime","sidebarTitle":"Migrating from Legacy","href":"/runtimes/apple/migrating-from-legacy"}]},{"group":"Android","pages":[{"title":"Android","href":"/runtimes/android/android"},{"title":"Artboards","href":"/runtimes/android/artboards"},{"title":"Layout","href":"/runtimes/android/layouts"},{"title":"State Machine Playback","href":"/runtimes/android/state-machines"},{"title":"Data Binding","href":"/runtimes/android/data-binding"},{"title":"Loading Assets","href":"/runtimes/android/loading-assets"},{"title":"Fonts","href":"/runtimes/android/fonts"},{"title":"Caching a Rive File","href":"/runtimes/android/caching-a-rive-file"},{"title":"Playing Audio","href":"/runtimes/android/playing-audio"},{"title":"Logging","href":"/runtimes/android/logging"},{"title":"Handling a lost render context","sidebarTitle":"Render Context Loss","href":"/runtimes/android/handling-render-context-loss"},{"title":"Rendering to a Bitmap","href":"/runtimes/android/rendering-to-a-bitmap"},{"group":"Legacy Features","pages":[{"title":"Getting Started (Legacy API)","href":"/runtimes/android/legacy-getting-started"},{"title":"Animation Playback","href":"/runtimes/android/animation-playback"},{"title":"Inputs","href":"/runtimes/android/inputs"},{"title":"Text","href":"/runtimes/android/text"},{"title":"Rive Events","href":"/runtimes/android/rive-events"}]},{"title":"Migrating from the Legacy Rive Android Runtime","sidebarTitle":"Migrating from Legacy","href":"/runtimes/android/migrating-from-legacy"},{"title":"API Reference","url":"https://api-docs.rive.app/android/latest/","href":"/runtimes/android/api-reference"}]},{"group":"Unity","pages":[{"title":"Unity","href":"/game-runtimes/unity/unity"},{"title":"Getting Started","href":"/game-runtimes/unity/getting-started"},{"title":"Fundamentals","href":"/game-runtimes/unity/fundamentals"},{"title":"Components","href":"/game-runtimes/unity/components"},{"title":"Best Practices","href":"/game-runtimes/unity/best-practices"},{"title":"Layouts","href":"/game-runtimes/unity/layouts"},{"title":"Listeners","href":"/game-runtimes/unity/listeners"},{"title":"State Machines","href":"/game-runtimes/unity/state-machines"},{"title":"Data Binding","href":"/game-runtimes/unity/data-binding"},{"title":"Loading Assets","href":"/game-runtimes/unity/loading-assets"},{"title":"Audio","href":"/game-runtimes/unity/audio"},{"group":"Tutorials","pages":[{"title":"Control a health bar with data binding in Unity","href":"/game-runtimes/unity/tutorials/health-bar"}]},{"title":"Procedural Rendering","href":"/game-runtimes/unity/procedural-rendering"},{"title":"Runtime Asset Swapping","href":"/game-runtimes/unity/runtime-asset-swapping"},{"title":"FAQ","href":"/game-runtimes/unity/faq"},{"group":"Legacy Features","pages":[{"title":"Inputs","href":"/game-runtimes/unity/inputs"},{"title":"Text","href":"/game-runtimes/unity/text"},{"title":"Rive Events","href":"/game-runtimes/unity/rive-events"}]}]},{"group":"Unreal","pages":[{"title":"Unreal Engine","href":"/game-runtimes/unreal/unreal"},{"title":"Getting Started","href":"/game-runtimes/unreal/getting-started"},{"title":"Observing ViewModel Changes","href":"/game-runtimes/unreal/observing-viewmodel-changes"},{"title":"Using Triggers","href":"/game-runtimes/unreal/using-triggers"},{"title":"Runtime Asset Swapping","href":"/game-runtimes/unreal/runtime-asset-swapping"},{"title":"World-Space RenderTargets","href":"/game-runtimes/unreal/in-world-textures"}]},{"group":"C++","pages":[{"title":"C++ Runtime","sidebarTitle":"Overview","href":"/runtimes/cpp/overview"},{"title":"Getting Started","href":"/runtimes/cpp/getting-started"},{"title":"File \u0026 Artboard","href":"/runtimes/cpp/file-and-artboard"},{"title":"State Machines","href":"/runtimes/cpp/state-machines"},{"title":"Data Binding","href":"/runtimes/cpp/data-binding"},{"title":"Asset Loading","href":"/runtimes/cpp/asset-loading"},{"title":"Rendering Loop","href":"/runtimes/cpp/rendering-loop"},{"title":"Command Queue","href":"/runtimes/cpp/command-queue"},{"title":"Renderers","href":"/runtimes/cpp/renderers"},{"title":"External Renderer","href":"/runtimes/cpp/external-renderer"}]},{"title":"Defold","href":"/game-runtimes/defold"},{"group":"Community Runtimes","pages":[{"title":"Angular","href":"/runtimes/community-runtimes/angular"},{"title":"C# (UWP)","href":"/runtimes/community-runtimes/c-sharp"},{"title":"Qt / QtQuick","href":"/runtimes/community-runtimes/qt-quick"},{"title":"RiveCMP","href":"/runtimes/community-runtimes/rive-cmp"}]}]},{"group":"Integrations","pages":[{"title":"3rd Party Integrations","href":"/integrations/overview"},{"title":"HTML Embed","href":"/integrations/html-embed"}]}]},{"tab":"CLI","pages":[{"title":"CLI","href":"/cli/overview"}]},{"tab":" ","pages":[{"title":" ","href":"/tutorials/learn-rive"}]},{"tab":" ","pages":[{"title":" ","href":"/community/support"}]}]},"basePath":"","title":"Rive Runtime Demos \u0026 Starters - Rive","buildId":"dpl_Aw98ji4XvBsgtZwL1VrkUF9ehFqz","deploymentId":"dpl_Aw98ji4XvBsgtZwL1VrkUF9ehFqz","dynamics":[],"chunks":[]}
