This video introduces the basics of writing and using scripts in Rive. You’ll learn how to create different types of scripts and how they connect to data bindings and artboards, and how you can create scripts with the AI Agent.
{"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":"6ae3760ff10d961089bb0a87","collectionId":"f2683a5d-94ce-4fa0-adf6-db85e19b4e9e","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ae3760ff10d961089bb0a87"},"feedback":{"edits":true,"issues":true,"thumbs":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"REMOVE_BRANDING":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ae3760ff10d961089bb0a87","clientVersion":"0.0.4021","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":"pause-universal-search-reconcile","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":"per-site-search-delta","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":"editor-private-page-search","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":"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":"workos-enabled","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":"scripting/getting-started","slug":"/scripting/getting-started","pageMetadata":{"title":"Getting Started","description":"Code, animation, and interaction all in one Editor.","href":"/scripting/getting-started"},"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: \"Code, animation, and interaction all in one Editor.\"\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})};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/29026-n-slicing/`}},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/`}}};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,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)}),riv\u0026\u0026!image\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 _components={a:`a`,li:`li`,p:`p`,ul:`ul`,..._provideComponents(),...props.components},{Heading,_MdxComponentBoundary}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!_MdxComponentBoundary)_missingMdxReference(`_MdxComponentBoundary`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`Scripting lets you iterate on code, design, and animation in one collaborative editor.`}),`\n`,_jsx(Heading,{level:`2`,id:`quick-start`,children:`Quick start`}),`\n`,_jsxs(_components.p,{children:[`This video introduces the basics of writing and using scripts in Rive. You’ll learn how to create different types of scripts and how they connect to data bindings and artboards, and how you can create scripts with the `,_jsx(_components.a,{href:`/editor/ai-agent`,children:`AI Agent`}),`.`]}),`\n`,_jsx(_MdxComponentBoundary,{name:`YouTube`,children:_jsx(YouTube,{id:`M6kGkR-7JTE`})}),`\n`,_jsx(Heading,{level:`2`,id:`fundamentals`,children:`Fundamentals`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`https://rive.app/blog/why-scripting-runs-on-luau?utm_source=docs\u0026utm_medium=content`,children:`Why Luau`}),` - Why Scripting runs on Luau`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/scripting/creating-scripts`,children:`Creating Scripts`}),` - Creating a new script`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/scripting/protocols`,children:`Protocols`}),` - The type of scripts you can create`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/scripting/script-inputs`,children:`Inputs`}),` - Connecting scripts to inputs and data`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/scripting/debugging/debug-panel`,children:`Debugging`}),` - Debugging your scripts`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.a,{href:`/editor/ai-agent`,children:`AI Agent`}),` - Using AI to create and modify scripts`]}),`\n`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{YouTube,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":"Getting Started","description":"Code, animation, and interaction all in one Editor.","href":"/scripting/getting-started"}}},"mdxSourceWithNoJs":null,"noJsSplices":[[143,19720,")=>null;const Demos=()=>null;function _c"]]},"mdxExtracts":{"tableOfContents":[{"title":"Quick start","slug":"quick-start","depth":2,"children":[]},{"title":"Fundamentals","slug":"fundamentals","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":["/docs/_mintlify/custom/rive/6157a238f0df2356/rive-init.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-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-\\[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":"Getting Started - Rive","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-22T17:29:00.618Z","originalFileLocation":"scripting/getting-started.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=\"Code, animation, and interaction all in one Editor.\">\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=\"Getting Started - Rive\">\u003cmeta data-mint-head property=\"og:description\" content=\"Code, animation, and interaction all in one Editor.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Rive\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://rive.app/docs/scripting/getting-started\">\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=+\u0026amp;title=Getting+Started\u0026amp;description=Code%2C+animation%2C+and+interaction+all+in+one+Editor.\u0026amp;theme=9d194ea41709afb0505e42e9\u0026amp;signature=136abb80ca29c74c1be4878a8e342ac7bf471591105133a33da65349c6ce1008\">\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=\"Getting Started - Rive\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Code, animation, and interaction all in one Editor.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://rive.mintlify.app/_mintlify/api/og/v2?division=+\u0026amp;title=Getting+Started\u0026amp;description=Code%2C+animation%2C+and+interaction+all+in+one+Editor.\u0026amp;theme=9d194ea41709afb0505e42e9\u0026amp;signature=136abb80ca29c74c1be4878a8e342ac7bf471591105133a33da65349c6ce1008\">\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/scripting/getting-started\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/docs/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/scripting/getting-started.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/scripting/getting-started#webpage\",\"url\":\"https://rive.app/docs/scripting/getting-started\",\"name\":\"Getting Started\",\"description\":\"Code, animation, and interaction all in one Editor.\",\"dateModified\":\"2026-10-22T17:29:00.618Z\",\"isPartOf\":{\"@id\":\"https://rive.app/docs#website\"},\"breadcrumb\":{\"@id\":\"https://rive.app/docs/scripting/getting-started#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://rive.app/docs/scripting/getting-started#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Rive\",\"item\":\"https://rive.app/docs\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started\",\"item\":\"https://rive.app/docs/scripting/getting-started\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://rive.app/docs/scripting/getting-started#article\",\"headline\":\"Getting Started\",\"name\":\"Getting Started\",\"description\":\"Code, animation, and interaction all in one Editor.\",\"url\":\"https://rive.app/docs/scripting/getting-started\",\"mainEntityOfPage\":{\"@id\":\"https://rive.app/docs/scripting/getting-started#webpage\"},\"dateModified\":\"2026-10-22T17:29:00.618Z\",\"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","pages":[{"title":"Editor","href":"/editor/get-rive"}]},{"tab":"Scripting","groups":[{"group":" ","pages":[{"title":"Getting Started","href":"/scripting/getting-started"},{"title":"Scripting Demos","sidebarTitle":"Demos","description":null,"mode":"wide","href":"/scripting/demos"},{"title":"Creating Scripts","href":"/scripting/creating-scripts"},{"group":"Protocols (Script Types)","pages":[{"title":"Protocols","sidebarTitle":"Overview","href":"/scripting/protocols/overview"},{"title":"Node Scripts","href":"/scripting/protocols/node-scripts"},{"title":"Layout Scripts","href":"/scripting/protocols/layout-scripts"},{"title":"Converter Scripts","href":"/scripting/protocols/converter-scripts"},{"title":"Path Effect Scripts","href":"/scripting/protocols/path-effect-scripts"},{"title":"Transition Condition Scripts","href":"/scripting/protocols/transition-condition-scripts"},{"title":"Listener Action Scripts","href":"/scripting/protocols/listener-action-scripts"},{"title":"WGSL Shaders","href":"/scripting/wgsl-shaders"},{"title":"Blank Scripts","href":"/scripting/protocols/util-scripts"},{"title":"Test Scripts","href":"/scripting/protocols/test-scripts"}]},{"title":"Script Inputs","sidebarTitle":"Script Inputs","href":"/scripting/script-inputs"},{"title":"Data Binding","href":"/scripting/data-binding"},{"title":"Pointer Events","href":"/scripting/pointer-events"},{"group":"Debugging","pages":[{"title":"Debug Panel","href":"/scripting/debugging/debug-panel"},{"title":"Unit Testing","href":"/scripting/debugging/unit-testing"}]},{"title":"Configuration","href":"/scripting/configuration"},{"title":"Keyboard Shortcuts","href":"/scripting/keyboard-shortcuts"}]},{"group":"Scripting API","pages":[{"group":"@luau","pages":[{"title":"DateTypeArg","href":"/scripting/api-reference/luau/date-type-arg"},{"title":"DateTypeResult","href":"/scripting/api-reference/luau/date-type-result"},{"title":"vector","href":"/scripting/api-reference/luau/vector"}]},{"group":"Artboards","pages":[{"title":"Animation","href":"/scripting/api-reference/artboards/animation"},{"title":"Artboard","href":"/scripting/api-reference/artboards/artboard"},{"title":"Drawable","href":"/scripting/api-reference/artboards/drawable"},{"title":"DrawableProperty","href":"/scripting/api-reference/artboards/drawable-property"},{"title":"DrawablePropertyKind","href":"/scripting/api-reference/artboards/drawable-property-kind"},{"title":"FocusEvent","href":"/scripting/api-reference/artboards/focus-event"},{"title":"GamepadConnected","href":"/scripting/api-reference/artboards/gamepad-connected"},{"title":"GamepadDisconnected","href":"/scripting/api-reference/artboards/gamepad-disconnected"},{"title":"GamepadEvent","href":"/scripting/api-reference/artboards/gamepad-event"},{"title":"GamepadMappingKind","href":"/scripting/api-reference/artboards/gamepad-mapping-kind"},{"title":"KeyPhase","href":"/scripting/api-reference/artboards/key-phase"},{"title":"KeyboardEvent","href":"/scripting/api-reference/artboards/keyboard-event"},{"title":"ListenerContext","href":"/scripting/api-reference/artboards/listener-context"},{"title":"NodeData","href":"/scripting/api-reference/artboards/node-data"},{"title":"NodeReadData","href":"/scripting/api-reference/artboards/node-read-data"},{"title":"NoneEvent","href":"/scripting/api-reference/artboards/none-event"},{"title":"PointerEvent","href":"/scripting/api-reference/artboards/pointer-event"},{"title":"PointerType","href":"/scripting/api-reference/artboards/pointer-type"},{"title":"PropertyKey","href":"/scripting/api-reference/artboards/property-key"},{"title":"ReportedEvent","href":"/scripting/api-reference/artboards/reported-event"},{"title":"ScrollEvent","href":"/scripting/api-reference/artboards/scroll-event"},{"title":"ScrollPhase","href":"/scripting/api-reference/artboards/scroll-phase"},{"title":"TextInput","href":"/scripting/api-reference/artboards/text-input"},{"title":"ViewModel","href":"/scripting/api-reference/artboards/view-model"},{"title":"ViewModelChange","href":"/scripting/api-reference/artboards/view-model-change"}]},{"group":"Color","pages":[{"title":"Color","href":"/scripting/api-reference/color/color"}]},{"group":"DataValue","pages":[{"title":"DataValue","href":"/scripting/api-reference/data-value/data-value"},{"title":"DataValueBoolean","href":"/scripting/api-reference/data-value/data-value-boolean"},{"title":"DataValueColor","href":"/scripting/api-reference/data-value/data-value-color"},{"title":"DataValueNumber","href":"/scripting/api-reference/data-value/data-value-number"},{"title":"DataValueString","href":"/scripting/api-reference/data-value/data-value-string"},{"title":"Listener","href":"/scripting/api-reference/data-value/listener"},{"title":"Property","href":"/scripting/api-reference/data-value/property"},{"title":"PropertyTrigger","href":"/scripting/api-reference/data-value/property-trigger"}]},{"group":"FileFormat","pages":[{"title":"FileFormat","href":"/scripting/api-reference/file-format/file-format"},{"title":"EditorContext","href":"/scripting/api-reference/file-format/editor-context"},{"title":"EditorScroll","href":"/scripting/api-reference/file-format/editor-scroll"},{"title":"EditorTheme","href":"/scripting/api-reference/file-format/editor-theme"},{"title":"EditorThemeStyle","href":"/scripting/api-reference/file-format/editor-theme-style"},{"title":"FormatCompletion","href":"/scripting/api-reference/file-format/format-completion"},{"title":"FormatDiagnostic","href":"/scripting/api-reference/file-format/format-diagnostic"},{"title":"FormatDocument","href":"/scripting/api-reference/file-format/format-document"},{"title":"FormatHover","href":"/scripting/api-reference/file-format/format-hover"},{"title":"FormatScope","href":"/scripting/api-reference/file-format/format-scope"},{"title":"FormatSurface","href":"/scripting/api-reference/file-format/format-surface"},{"title":"FormatToken","href":"/scripting/api-reference/file-format/format-token"},{"title":"FormatView","href":"/scripting/api-reference/file-format/format-view"},{"title":"TextFileFormat","href":"/scripting/api-reference/file-format/text-file-format"}]},{"group":"GPU","pages":[{"title":"BindGroupDesc","href":"/scripting/api-reference/gpu/bind-group-desc"},{"title":"BindGroupLayoutDesc","href":"/scripting/api-reference/gpu/bind-group-layout-desc"},{"title":"BlendFactor","href":"/scripting/api-reference/gpu/blend-factor"},{"title":"BlendOp","href":"/scripting/api-reference/gpu/blend-op"},{"title":"BlendState","href":"/scripting/api-reference/gpu/blend-state"},{"title":"BufferUsage","href":"/scripting/api-reference/gpu/buffer-usage"},{"title":"BufferUsageArg","href":"/scripting/api-reference/gpu/buffer-usage-arg"},{"title":"Canvas","href":"/scripting/api-reference/gpu/canvas"},{"title":"ColorAttachment","href":"/scripting/api-reference/gpu/color-attachment"},{"title":"ColorTarget","href":"/scripting/api-reference/gpu/color-target"},{"title":"CompareFunction","href":"/scripting/api-reference/gpu/compare-function"},{"title":"CullMode","href":"/scripting/api-reference/gpu/cull-mode"},{"title":"DepthStencilAttachment","href":"/scripting/api-reference/gpu/depth-stencil-attachment"},{"title":"DepthStencilState","href":"/scripting/api-reference/gpu/depth-stencil-state"},{"title":"FaceWinding","href":"/scripting/api-reference/gpu/face-winding"},{"title":"Filter","href":"/scripting/api-reference/gpu/filter"},{"title":"GPUBindGroup","href":"/scripting/api-reference/gpu/gpu-bind-group"},{"title":"GPUBindGroupLayout","href":"/scripting/api-reference/gpu/gpu-bind-group-layout"},{"title":"GPUBuffer","href":"/scripting/api-reference/gpu/gpu-buffer"},{"title":"GPUBufferDesc","href":"/scripting/api-reference/gpu/gpu-buffer-desc"},{"title":"GPUCanvas","href":"/scripting/api-reference/gpu/gpu-canvas"},{"title":"GPUColor","href":"/scripting/api-reference/gpu/gpu-color"},{"title":"GPUFeatures","href":"/scripting/api-reference/gpu/gpu-features"},{"title":"GPUPipeline","href":"/scripting/api-reference/gpu/gpu-pipeline"},{"title":"GPURenderPass","href":"/scripting/api-reference/gpu/gpu-render-pass"},{"title":"GPUSampler","href":"/scripting/api-reference/gpu/gpu-sampler"},{"title":"GPUTarget","href":"/scripting/api-reference/gpu/gpu-target"},{"title":"GPUTexture","href":"/scripting/api-reference/gpu/gpu-texture"},{"title":"LoadOp","href":"/scripting/api-reference/gpu/load-op"},{"title":"PipelineStage","href":"/scripting/api-reference/gpu/pipeline-stage"},{"title":"PrimitiveTopology","href":"/scripting/api-reference/gpu/primitive-topology"},{"title":"RenderPassDesc","href":"/scripting/api-reference/gpu/render-pass-desc"},{"title":"SamplerEntry","href":"/scripting/api-reference/gpu/sampler-entry"},{"title":"Shader","href":"/scripting/api-reference/gpu/shader"},{"title":"StencilFaceState","href":"/scripting/api-reference/gpu/stencil-face-state"},{"title":"StencilOp","href":"/scripting/api-reference/gpu/stencil-op"},{"title":"StoreOp","href":"/scripting/api-reference/gpu/store-op"},{"title":"TextureAspect","href":"/scripting/api-reference/gpu/texture-aspect"},{"title":"TextureEntry","href":"/scripting/api-reference/gpu/texture-entry"},{"title":"TextureType","href":"/scripting/api-reference/gpu/texture-type"},{"title":"UBOEntry","href":"/scripting/api-reference/gpu/ubo-entry"},{"title":"VertexAttribute","href":"/scripting/api-reference/gpu/vertex-attribute"},{"title":"VertexBufferLayout","href":"/scripting/api-reference/gpu/vertex-buffer-layout"},{"title":"VertexFormat","href":"/scripting/api-reference/gpu/vertex-format"},{"title":"WrapMode","href":"/scripting/api-reference/gpu/wrap-mode"}]},{"group":"GPU Types","pages":[{"title":"ColorFormat","href":"/scripting/api-reference/gpu_types/color-format"},{"title":"CompressedFormat","href":"/scripting/api-reference/gpu_types/compressed-format"},{"title":"DepthFormat","href":"/scripting/api-reference/gpu_types/depth-format"},{"title":"GPUTextureView","href":"/scripting/api-reference/gpu_types/gpu-texture-view"},{"title":"TextureFormat","href":"/scripting/api-reference/gpu_types/texture-format"}]},{"group":"Gradient","pages":[{"title":"Gradient","href":"/scripting/api-reference/gradient/gradient"},{"title":"GradientStop","href":"/scripting/api-reference/gradient/gradient-stop"}]},{"group":"Image","pages":[{"title":"Image","href":"/scripting/api-reference/image/image"},{"title":"ImageFilter","href":"/scripting/api-reference/image/image-filter"},{"title":"ImageSampler","href":"/scripting/api-reference/image/image-sampler"},{"title":"ImageWrap","href":"/scripting/api-reference/image/image-wrap"}]},{"group":"Interfaces","pages":[{"title":"AudioSound","href":"/scripting/api-reference/interfaces/audio-sound"},{"title":"AudioSource","href":"/scripting/api-reference/interfaces/audio-source"},{"title":"Blob","href":"/scripting/api-reference/interfaces/blob"},{"title":"Context","href":"/scripting/api-reference/interfaces/context"},{"title":"Converter","href":"/scripting/api-reference/interfaces/converter"},{"title":"Data","href":"/scripting/api-reference/interfaces/data"},{"title":"DataContext","href":"/scripting/api-reference/interfaces/data-context"},{"title":"DecodedImage","href":"/scripting/api-reference/interfaces/decoded-image"},{"title":"EnumValues","href":"/scripting/api-reference/interfaces/enum-values"},{"title":"Input","href":"/scripting/api-reference/interfaces/input"},{"title":"Interpolator","href":"/scripting/api-reference/interfaces/interpolator"},{"title":"Layout","href":"/scripting/api-reference/interfaces/layout"},{"title":"ListenerAction","href":"/scripting/api-reference/interfaces/listener-action"},{"title":"Node","href":"/scripting/api-reference/interfaces/node"},{"title":"Output","href":"/scripting/api-reference/interfaces/output"},{"title":"PathEffect","href":"/scripting/api-reference/interfaces/path-effect"},{"title":"PropertyEnum","href":"/scripting/api-reference/interfaces/property-enum"},{"title":"PropertyList","href":"/scripting/api-reference/interfaces/property-list"},{"title":"PropertyViewModel","href":"/scripting/api-reference/interfaces/property-view-model"},{"title":"Transition","href":"/scripting/api-reference/interfaces/transition"},{"title":"TransitionChild","href":"/scripting/api-reference/interfaces/transition-child"},{"title":"TransitionCondition","href":"/scripting/api-reference/interfaces/transition-condition"},{"title":"Trigger","href":"/scripting/api-reference/interfaces/trigger"},{"title":"ViewModel","href":"/scripting/api-reference/interfaces/view-model"}]},{"group":"Mat2d","pages":[{"title":"Mat2D","href":"/scripting/api-reference/mat2d/mat2d"}]},{"group":"Mat4","pages":[{"title":"Mat4","href":"/scripting/api-reference/mat4/mat4"}]},{"group":"Mesh","pages":[{"title":"MeshInstances","href":"/scripting/api-reference/mesh/mesh-instances"},{"title":"TriangleBuffer","href":"/scripting/api-reference/mesh/triangle-buffer"},{"title":"VertexBuffer","href":"/scripting/api-reference/mesh/vertex-buffer"}]},{"group":"Paint","pages":[{"title":"Paint","href":"/scripting/api-reference/paint/paint"},{"title":"BlendMode","href":"/scripting/api-reference/paint/blend-mode"},{"title":"PaintDefinition","href":"/scripting/api-reference/paint/paint-definition"},{"title":"PaintStyle","href":"/scripting/api-reference/paint/paint-style"},{"title":"StrokeCap","href":"/scripting/api-reference/paint/stroke-cap"},{"title":"StrokeJoin","href":"/scripting/api-reference/paint/stroke-join"}]},{"group":"Path","pages":[{"title":"Path","href":"/scripting/api-reference/path/path"},{"title":"CommandType","href":"/scripting/api-reference/path/command-type"},{"title":"ContourMeasure","href":"/scripting/api-reference/path/contour-measure"},{"title":"PathCommand","href":"/scripting/api-reference/path/path-command"},{"title":"PathData","href":"/scripting/api-reference/path/path-data"},{"title":"PathMeasure","href":"/scripting/api-reference/path/path-measure"}]},{"group":"Promise","pages":[{"title":"Promise","href":"/scripting/api-reference/promise/promise"}]},{"group":"Renderer","pages":[{"title":"Renderer","href":"/scripting/api-reference/renderer/renderer"}]},{"group":"Testing","pages":[{"title":"Expectation","href":"/scripting/api-reference/testing/expectation"},{"title":"Tester","href":"/scripting/api-reference/testing/tester"},{"title":"Tests","href":"/scripting/api-reference/testing/tests"}]},{"group":"Text","pages":[{"title":"Text","href":"/scripting/api-reference/text/text"},{"title":"Font","href":"/scripting/api-reference/text/font"},{"title":"FontAxis","href":"/scripting/api-reference/text/font-axis"},{"title":"Glyph","href":"/scripting/api-reference/text/glyph"},{"title":"TextAlign","href":"/scripting/api-reference/text/text-align"},{"title":"TextDirection","href":"/scripting/api-reference/text/text-direction"},{"title":"TextLine","href":"/scripting/api-reference/text/text-line"},{"title":"TextOrigin","href":"/scripting/api-reference/text/text-origin"},{"title":"TextOverflow","href":"/scripting/api-reference/text/text-overflow"},{"title":"TextRunStyle","href":"/scripting/api-reference/text/text-run-style"},{"title":"TextSizing","href":"/scripting/api-reference/text/text-sizing"},{"title":"TextWordBreak","href":"/scripting/api-reference/text/text-word-break"},{"title":"TextWrap","href":"/scripting/api-reference/text/text-wrap"}]},{"group":"Vector","pages":[{"title":"Vector","href":"/scripting/api-reference/vector/vector"}]}]}]},{"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"}]}]},"title":"Getting Started - Rive","buildId":"dpl_DGmhKsAzJdVqypJzon18vViniWRY","deploymentId":"dpl_DGmhKsAzJdVqypJzon18vViniWRY","dynamics":[],"chunks":[]}
