> ## Documentation Index
> Fetch the complete documentation index at: https://rive.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Input

> Add editable text fields that users can type into at runtime.

export const FeatureSupportGroup = ({feature, runtime, title, children}) => {
  const defaultOpen = false;
  const runtimeTitles = {
    webCanvas: "Web - Canvas",
    webWebGL: "Web - WebGL (Legacy)",
    webWebGL2: "Web - WebGL2",
    webCanvasLite: "Web - Canvas Lite",
    reactCanvas: "React - Canvas",
    reactCanvasLite: "React - Canvas Lite",
    reactWebGL: "React - WebGL (Legacy)",
    reactWebGL2: "React - WebGL2",
    reactNative: "React Native",
    reactNativeLegacy: "React Native (Legacy)",
    flutter: "Flutter",
    apple: "Apple",
    android: "Android",
    cpp: "C++",
    unity: "Unity",
    unreal: "Unreal"
  };
  const runtimesInOrder = ["webWebGL2", "webCanvas", "webCanvasLite", "reactWebGL2", "reactCanvas", "reactCanvasLite", "reactNative", "flutter", "apple", "android", "cpp", "unity", "unreal", "webWebGL", "reactWebGL", "reactNativeLegacy"];
  const legacyRuntimes = ["webWebGL", "reactWebGL", "reactNativeLegacy"];
  const featuresInOrder = ["gamepad", "textInput", "focus", "statefulComponents", "gpuCanvas", "globalViewModels", "dataBindingFonts", "semantics", "scripting", "dataBindingListsImagesArtboards", "rightToLeftLayoutsText", "textFollowPath", "dataBinding", "vectorFeathering", "nSlicing", "layouts", "fallbackFonts", "audio", "outOfBandAssets", "text", "cachingARiveFile", "events", "nestedText"];
  const features = {
    gamepad: {
      title: "Gamepad",
      runtimes: {
        webCanvas: {
          supported: false,
          description: "Coming soon"
        },
        webCanvasLite: {
          supported: false,
          description: "Coming soon"
        },
        webWebGL: {
          supported: false,
          description: "Coming soon"
        },
        webWebGL2: {
          supported: false,
          description: "Coming soon"
        },
        reactCanvas: {
          supported: false,
          description: "Coming soon"
        },
        reactCanvasLite: {
          supported: false,
          description: "Coming soon"
        },
        reactWebGL: {
          supported: false,
          description: "Coming soon"
        },
        reactWebGL2: {
          supported: false,
          description: "Coming soon"
        },
        reactNative: {
          supported: false,
          description: "Coming soon"
        },
        reactNativeLegacy: {
          supported: false,
          description: "Coming soon"
        },
        flutter: {
          supported: false,
          description: "Coming soon"
        },
        apple: {
          supported: false,
          description: "Coming soon"
        },
        android: {
          supported: false,
          description: "Coming soon"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: false,
          description: "Coming soon"
        },
        unreal: {
          supported: false,
          description: "Coming soon"
        }
      }
    },
    textInput: {
      title: "Text Input",
      runtimes: {
        webCanvas: {
          supported: false,
          description: "Coming soon"
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: false,
          description: "Coming soon"
        },
        webWebGL2: {
          supported: false,
          description: "Coming soon"
        },
        reactCanvas: {
          supported: false,
          description: "Coming soon"
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: false,
          description: "Coming soon"
        },
        reactWebGL2: {
          supported: false,
          description: "Coming soon"
        },
        reactNative: {
          supported: false,
          description: "Coming soon"
        },
        reactNativeLegacy: {
          supported: false,
          description: "Coming soon"
        },
        flutter: {
          supported: false,
          description: "Coming soon"
        },
        apple: {
          supported: false,
          description: "Coming soon"
        },
        android: {
          supported: false,
          description: "Coming soon"
        },
        cpp: {
          supported: false,
          description: "Coming soon"
        },
        unity: {
          supported: false,
          description: "Coming soon"
        },
        unreal: {
          supported: false,
          description: "Coming soon"
        }
      }
    },
    focus: {
      title: "Focus",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.43.1"
        },
        webCanvasLite: {
          supported: true,
          version: "2.43.1"
        },
        webWebGL: {
          supported: false,
          description: "Not supported"
        },
        webWebGL2: {
          supported: true,
          version: "2.43.1"
        },
        reactCanvas: {
          supported: true,
          version: "4.35.0"
        },
        reactCanvasLite: {
          supported: true,
          version: "4.35.0"
        },
        reactWebGL: {
          supported: false,
          description: "Not supported"
        },
        reactWebGL2: {
          supported: true,
          version: "4.35.0"
        },
        reactNative: {
          supported: false,
          description: "Coming soon"
        },
        reactNativeLegacy: {
          supported: false,
          description: "Coming soon"
        },
        flutter: {
          supported: false,
          description: "Coming soon"
        },
        apple: {
          supported: false,
          description: "Coming soon"
        },
        android: {
          supported: false,
          description: "Coming soon"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: false,
          description: "Coming soon"
        },
        unreal: {
          supported: false,
          description: "Coming soon"
        }
      }
    },
    statefulComponents: {
      title: "Stateful Components",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.33.0+"
        },
        webCanvasLite: {
          supported: true,
          version: "2.33.0+"
        },
        webWebGL: {
          supported: true,
          version: "2.33.0+"
        },
        webWebGL2: {
          supported: true,
          version: "2.33.0+"
        },
        reactCanvas: {
          supported: true,
          version: "4.25.0+"
        },
        reactCanvasLite: {
          supported: true,
          version: "4.25.0+"
        },
        reactWebGL: {
          supported: true,
          version: "4.25.0+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.25.0+"
        },
        reactNative: {
          supported: true,
          version: "0.3.1+"
        },
        reactNativeLegacy: {
          supported: false,
          description: "Not supported"
        },
        flutter: {
          supported: true,
          version: "0.14.1+"
        },
        apple: {
          supported: true,
          version: "6.16.0+"
        },
        android: {
          supported: true,
          version: "11.2.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          version: "0.4.5"
        },
        unreal: {
          supported: true,
          version: "0.4.25"
        }
      }
    },
    gpuCanvas: {
      title: "GPU Canvas",
      runtimes: {
        webCanvas: {
          supported: false,
          na: true
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: false,
          description: "Not supported"
        },
        webWebGL2: {
          supported: true,
          version: "2.42.0+"
        },
        reactCanvas: {
          supported: false,
          na: true
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: false,
          description: "Not supported"
        },
        reactWebGL2: {
          supported: true,
          version: "4.34.0+"
        },
        reactNative: {
          supported: true,
          version: "0.5.3+"
        },
        reactNativeLegacy: {
          supported: false,
          description: "Not supported"
        },
        flutter: {
          supported: true,
          version: "0.15.0-dev.1"
        },
        apple: {
          supported: true,
          version: "6.25.0"
        },
        android: {
          supported: true,
          version: "11.12.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: false,
          description: "Coming soon"
        },
        unreal: {
          supported: true,
          version: "0.4.26"
        }
      }
    },
    globalViewModels: {
      title: "Global View Models",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.39.2+"
        },
        webCanvasLite: {
          supported: true,
          version: "2.39.2+"
        },
        webWebGL: {
          supported: false,
          description: "Not supported"
        },
        webWebGL2: {
          supported: true,
          version: "2.39.2+"
        },
        reactCanvas: {
          supported: true,
          version: "4.31.0+"
        },
        reactCanvasLite: {
          supported: true,
          version: "4.31.0+"
        },
        reactWebGL: {
          supported: false,
          description: "Not supported"
        },
        reactWebGL2: {
          supported: true,
          version: "4.31.0+"
        },
        reactNative: {
          supported: false,
          description: "Coming soon"
        },
        reactNativeLegacy: {
          supported: false,
          description: "Not supported"
        },
        flutter: {
          supported: false,
          description: "Coming soon"
        },
        apple: {
          supported: true,
          version: "6.28.0+"
        },
        android: {
          supported: true,
          version: "11.11.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          version: "0.4.5-canary.34+"
        },
        unreal: {
          supported: false,
          description: "Coming soon"
        }
      }
    },
    dataBindingFonts: {
      title: "Data Binding Fonts",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.39.2+"
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: false,
          description: "Not supported"
        },
        webWebGL2: {
          supported: true,
          version: "2.39.2+"
        },
        reactCanvas: {
          supported: true,
          version: "4.31.0+"
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: false,
          description: "Not supported"
        },
        reactWebGL2: {
          supported: true,
          version: "4.31.0+"
        },
        reactNative: {
          supported: false,
          description: "Coming soon"
        },
        reactNativeLegacy: {
          supported: false,
          description: "Not supported"
        },
        flutter: {
          supported: false,
          description: "Coming soon"
        },
        apple: {
          supported: true,
          version: "6.28.0+"
        },
        android: {
          supported: true,
          version: "11.13.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          version: "0.4.5-canary.36+"
        },
        unreal: {
          supported: false,
          description: "Coming soon"
        }
      }
    },
    semantics: {
      title: "Semantics",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.39.0+"
        },
        webCanvasLite: {
          supported: true,
          version: "2.39.0+"
        },
        webWebGL: {
          supported: false,
          description: "Not supported"
        },
        webWebGL2: {
          supported: true,
          version: "2.39.0+"
        },
        reactCanvas: {
          supported: true,
          version: "4.30.0+"
        },
        reactCanvasLite: {
          supported: true,
          version: "4.30.0+"
        },
        reactWebGL: {
          supported: false,
          description: "Not supported"
        },
        reactWebGL2: {
          supported: true,
          version: "4.30.0+"
        },
        reactNative: {
          supported: true,
          version: "0.5.0+",
          description: "iOS only"
        },
        reactNativeLegacy: {
          supported: false,
          description: "Not supported"
        },
        flutter: {
          supported: true,
          version: "0.15.0"
        },
        apple: {
          supported: true,
          version: "6.21.0"
        },
        android: {
          supported: true,
          version: "11.10.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: false,
          description: "Not yet supported"
        },
        unreal: {
          supported: false,
          description: "Not yet supported"
        }
      }
    },
    scripting: {
      title: "Scripting",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.34.0+"
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: true,
          version: "2.34.0+"
        },
        webWebGL2: {
          supported: true,
          version: "2.34.0+"
        },
        reactCanvas: {
          supported: true,
          version: "4.26.0+"
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: true,
          version: "4.26.0+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.26.0+"
        },
        reactNative: {
          supported: true,
          version: "0.1.5+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "9.8.0+"
        },
        flutter: {
          supported: true,
          version: "0.14.1"
        },
        apple: {
          supported: true,
          version: "6.13.0+"
        },
        android: {
          supported: true,
          version: "11.1.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          version: "0.4.1-canary.33+"
        },
        unreal: {
          supported: true,
          version: "0.4.20+"
        }
      }
    },
    dataBindingListsImagesArtboards: {
      title: "Data Binding - Lists, Images, and Artboards",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.30.3+"
        },
        webCanvasLite: {
          supported: true,
          version: "2.30.3+"
        },
        webWebGL: {
          supported: true,
          version: "2.30.3+"
        },
        webWebGL2: {
          supported: true,
          version: "2.30.3+"
        },
        reactCanvas: {
          supported: true,
          version: "4.22.0+"
        },
        reactCanvasLite: {
          supported: true,
          version: "4.22.0+"
        },
        reactWebGL: {
          supported: true,
          version: "4.22.0+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.22.0+"
        },
        reactNative: {
          supported: true,
          version: "0.1.4+"
        },
        reactNativeLegacy: {
          supported: false,
          description: "Not supported"
        },
        flutter: {
          supported: true,
          version: "0.14.0-dev.1"
        },
        apple: {
          supported: true,
          version: "6.11.0+"
        },
        android: {
          supported: true,
          version: "10.4.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          version: "0.3.7-canary.142"
        },
        unreal: {
          supported: true,
          description: "Supported"
        }
      }
    },
    rightToLeftLayoutsText: {
      title: "Right to Left Layouts & Text",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.26.7+"
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: true,
          version: "2.26.7+"
        },
        webWebGL2: {
          supported: true,
          version: "2.26.7+"
        },
        reactCanvas: {
          supported: true,
          version: "4.18.6+"
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: true,
          version: "4.18.6+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.18.6+"
        },
        reactNative: {
          supported: true,
          version: "0.1.4+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "9.2.1+"
        },
        flutter: {
          supported: true,
          version: "0.14.0-dev.1"
        },
        apple: {
          supported: true,
          version: "6.7.4+"
        },
        android: {
          supported: true,
          version: "10.0.4"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          version: "0.3.5+"
        },
        unreal: {
          supported: true,
          version: "0.3.0a-gh"
        }
      }
    },
    textFollowPath: {
      title: "Text Follow Path",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.26.7+"
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: true,
          version: "2.26.7+"
        },
        webWebGL2: {
          supported: true,
          version: "2.26.7+"
        },
        reactCanvas: {
          supported: true,
          version: "4.18.6+"
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: true,
          version: "4.18.6+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.18.6+"
        },
        reactNative: {
          supported: true,
          version: "0.1.4+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "9.2.1+"
        },
        flutter: {
          supported: true,
          version: "0.14.0-dev.1"
        },
        apple: {
          supported: true,
          version: "6.7.4+"
        },
        android: {
          supported: true,
          version: "10.0.4"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          version: "0.3.5+"
        },
        unreal: {
          supported: true,
          version: "0.3.0a-gh"
        }
      }
    },
    dataBinding: {
      title: "Data Binding",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.26.6+"
        },
        webCanvasLite: {
          supported: true,
          version: "2.26.6+"
        },
        webWebGL: {
          supported: true,
          version: "2.26.6+"
        },
        webWebGL2: {
          supported: true,
          version: "2.26.6+"
        },
        reactCanvas: {
          supported: true,
          version: "4.20.0+"
        },
        reactCanvasLite: {
          supported: true,
          version: "4.20.0+"
        },
        reactWebGL: {
          supported: true,
          version: "4.20.0+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.20.0+"
        },
        reactNative: {
          supported: true,
          version: "0.1.4+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "9.3.0+"
        },
        flutter: {
          supported: true,
          version: "0.14.0-dev.1"
        },
        apple: {
          supported: true,
          version: "6.8.0+"
        },
        android: {
          supported: true,
          version: "10.1.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          version: "0.3.6-canary.27"
        },
        unreal: {
          supported: true,
          version: "0.3.0a-gh"
        }
      }
    },
    vectorFeathering: {
      title: "Vector Feathering",
      runtimes: {
        webWebGL2: {
          supported: true,
          version: "2.26.0+"
        },
        webCanvas: {
          supported: false,
          na: true
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: false,
          description: "Not supported"
        },
        reactWebGL2: {
          supported: true,
          version: "4.18.0+"
        },
        reactCanvas: {
          supported: false,
          na: true
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: false,
          description: "Not supported"
        },
        reactNative: {
          supported: true,
          version: "0.1.4+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "9.0.0+"
        },
        flutter: {
          supported: true,
          version: "0.14.0-dev.1"
        },
        apple: {
          supported: true,
          version: "6.6.0+"
        },
        android: {
          supported: true,
          version: "10.0.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          version: "0.3.3-canary.72+"
        },
        unreal: {
          supported: true,
          version: "0.3.0a-gh"
        }
      }
    },
    nSlicing: {
      title: "N-Slicing",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.23.11+"
        },
        webCanvasLite: {
          supported: true,
          version: "2.23.11+"
        },
        webWebGL: {
          supported: true,
          version: "2.23.11+"
        },
        webWebGL2: {
          supported: true,
          version: "2.23.11+"
        },
        reactCanvas: {
          supported: true,
          version: "4.16.7+"
        },
        reactCanvasLite: {
          supported: true,
          version: "4.16.7+"
        },
        reactWebGL: {
          supported: true,
          version: "4.16.7+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.16.7+"
        },
        reactNative: {
          supported: true,
          version: "0.1.4+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "8.2.0+"
        },
        flutter: {
          supported: true,
          version: "0.14.0-dev.1"
        },
        apple: {
          supported: true,
          version: "6.4.0+"
        },
        android: {
          supported: true,
          version: "9.12.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          version: "0.2.2-canary.22+"
        },
        unreal: {
          supported: true,
          version: "0.2.2+"
        }
      }
    },
    layouts: {
      title: "Layouts",
      runtimes: {
        webWebGL2: {
          supported: true,
          version: "2.23.3+"
        },
        webCanvas: {
          supported: true,
          version: "2.23.3+"
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: true,
          version: "2.23.3+"
        },
        reactCanvas: {
          supported: true,
          version: "4.16.0+"
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: true,
          version: "4.16.0+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.16.0+"
        },
        reactNative: {
          supported: true,
          version: "0.1.4+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "8.1.0+"
        },
        flutter: {
          supported: true,
          version: "0.14.0-dev.1"
        },
        apple: {
          supported: true,
          version: "6.3.0+"
        },
        android: {
          supported: true,
          version: "9.10.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          version: "0.2.1+"
        },
        unreal: {
          supported: true,
          version: "0.2.1+"
        }
      }
    },
    fallbackFonts: {
      title: "Fallback Fonts",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.37.1+"
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: false,
          description: "Not supported"
        },
        webWebGL2: {
          supported: true,
          version: "2.37.1+"
        },
        reactCanvas: {
          supported: true,
          version: "4.28.0+"
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: false,
          description: "Not supported"
        },
        reactWebGL2: {
          supported: true,
          version: "4.28.0+"
        },
        reactNative: {
          supported: true,
          version: "0.2.7+"
        },
        reactNativeLegacy: {
          supported: false,
          description: "Not supported"
        },
        flutter: {
          supported: false,
          description: "Not yet supported"
        },
        apple: {
          supported: true,
          version: "6.1.0+"
        },
        android: {
          supported: true,
          version: "9.7.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: false,
          description: "Not supported"
        },
        unreal: {
          supported: false,
          description: "Not Supported"
        }
      }
    },
    nestedText: {
      title: "Nested Text (deprecated)",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.21.0+"
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: true,
          version: "2.21.0+"
        },
        webWebGL2: {
          supported: true,
          version: "2.11.0+"
        },
        reactCanvas: {
          supported: true,
          version: "4.14.0+"
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: true,
          version: "4.14.0+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.14.0+"
        },
        reactNative: {
          supported: false,
          description: "Supported in 0.1.4–0.4.x; removed in 0.5.0+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "5.8.2+"
        },
        flutter: {
          supported: true,
          version: "0.13.7+"
        },
        apple: {
          supported: true,
          version: "6.1.0+"
        },
        android: {
          supported: true,
          version: "9.8.0+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          description: "Supported"
        },
        unreal: {
          supported: true,
          version: "0.1.14+"
        }
      }
    },
    audio: {
      title: "Audio",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.15.6+"
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: true,
          version: "2.15.6+"
        },
        webWebGL2: {
          supported: true,
          version: "2.15.6+"
        },
        reactCanvas: {
          supported: true,
          version: "4.9.5+"
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: true,
          version: "4.9.5+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.9.5+"
        },
        reactNative: {
          supported: true,
          version: "0.1.4+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "7.0.3+"
        },
        flutter: {
          supported: true,
          version: "0.13.4+"
        },
        apple: {
          supported: true,
          version: "5.11.5+"
        },
        android: {
          supported: true,
          version: "9.3.5+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          description: "Supported"
        },
        unreal: {
          supported: true,
          description: "Supported"
        }
      }
    },
    outOfBandAssets: {
      title: "Out-of-band Assets",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.7.0+"
        },
        webCanvasLite: {
          supported: true,
          version: "2.7.0+"
        },
        webWebGL: {
          supported: true,
          version: "2.7.0+"
        },
        webWebGL2: {
          supported: true,
          version: "2.11.0+"
        },
        reactCanvas: {
          supported: true,
          version: "4.5.0+"
        },
        reactCanvasLite: {
          supported: true,
          version: "4.5.0+"
        },
        reactWebGL: {
          supported: true,
          version: "4.5.0+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.5.0+"
        },
        reactNative: {
          supported: true,
          version: "0.1.4+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "8.4.0+"
        },
        flutter: {
          supported: true,
          version: "0.12.0+"
        },
        apple: {
          supported: true,
          version: "5.7.0+"
        },
        android: {
          supported: true,
          version: "8.6.1+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          description: "Supported"
        },
        unreal: {
          supported: false,
          description: "Not yet supported"
        }
      }
    },
    events: {
      title: "Events (deprecated)",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.4.3+"
        },
        webCanvasLite: {
          supported: true,
          version: "2.4.3+"
        },
        webWebGL: {
          supported: true,
          version: "2.4.3+"
        },
        webWebGL2: {
          supported: true,
          version: "2.11.0+"
        },
        reactCanvas: {
          supported: true,
          version: "4.3.3+"
        },
        reactCanvasLite: {
          supported: true,
          version: "4.3.3+"
        },
        reactWebGL: {
          supported: true,
          version: "4.3.3+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.3.3+"
        },
        reactNative: {
          supported: false,
          description: "Supported in 0.1.4–0.4.x; removed in 0.5.0+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "6.1.0+"
        },
        flutter: {
          supported: true,
          version: "0.11.17+"
        },
        apple: {
          supported: true,
          version: "5.3.1+"
        },
        android: {
          supported: false,
          description: "Deprecated and will be removed in future versions"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          description: "Supported"
        },
        unreal: {
          supported: true,
          description: "Supported"
        }
      }
    },
    text: {
      title: "Text",
      runtimes: {
        webCanvas: {
          supported: true,
          version: "2.1.3+"
        },
        webCanvasLite: {
          supported: false,
          na: true
        },
        webWebGL: {
          supported: true,
          version: "2.1.3+"
        },
        webWebGL2: {
          supported: true,
          version: "2.11.0+"
        },
        reactCanvas: {
          supported: true,
          version: "4.1.3+"
        },
        reactCanvasLite: {
          supported: false,
          na: true
        },
        reactWebGL: {
          supported: true,
          version: "4.1.3+"
        },
        reactWebGL2: {
          supported: true,
          version: "4.1.3+"
        },
        reactNative: {
          supported: true,
          version: "0.1.4+"
        },
        reactNativeLegacy: {
          supported: true,
          version: "6.0.3+"
        },
        flutter: {
          supported: true,
          version: "0.11.14+"
        },
        apple: {
          supported: true,
          version: "5.1.5+"
        },
        android: {
          supported: true,
          version: "8.1.3+"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          description: "Supported"
        },
        unreal: {
          supported: true,
          description: "Supported"
        }
      }
    },
    cachingARiveFile: {
      title: "Caching a Rive File",
      runtimes: {
        webCanvas: {
          supported: true,
          description: "Supported"
        },
        webCanvasLite: {
          supported: true,
          description: "Supported"
        },
        webWebGL: {
          supported: true,
          description: "Supported"
        },
        webWebGL2: {
          supported: true,
          version: "2.11.0+"
        },
        reactCanvas: {
          supported: true,
          description: "Supported"
        },
        reactCanvasLite: {
          supported: true,
          description: "Supported"
        },
        reactWebGL: {
          supported: true,
          description: "Supported"
        },
        reactWebGL2: {
          supported: true,
          description: "Supported"
        },
        reactNative: {
          supported: true,
          version: "0.1.4+"
        },
        reactNativeLegacy: {
          supported: false,
          description: "Not supported"
        },
        flutter: {
          supported: true,
          description: "Supported"
        },
        apple: {
          supported: true,
          description: "Supported"
        },
        android: {
          supported: true,
          description: "Supported"
        },
        cpp: {
          supported: true,
          description: "Supported"
        },
        unity: {
          supported: true,
          description: "Supported"
        },
        unreal: {
          supported: false,
          description: "Not yet supported"
        }
      }
    }
  };
  const renderSupportCell = support => {
    if (!support) {
      return <td>Unknown</td>;
    }
    const {supported, version, na} = support;
    const description = na ? "NA" : support.description;
    if (version) {
      return <td data-numeric="true">
                    {supported && '✅ '}
                    <code>{version.endsWith('+') ? version : `${version}+`}</code>
                    {description && ` (${description})`}
                </td>;
    }
    return <td>
                {supported && '✅ '}
                {description}
            </td>;
  };
  if (runtime) {
    const runtimeKeys = Array.isArray(runtime) ? runtime : [runtime];
    const isMultiRuntime = runtimeKeys.length > 1;
    const accordionTitle = title || runtimeTitles[runtimeKeys[0]];
    const columnTitle = runtimeKey => runtimeTitles[runtimeKey].split(' - ').pop();
    return <Accordion title={accordionTitle} defaultOpen={defaultOpen}>
                 {children}
                <div data-table-wrapper="true" className="[--page-padding:20px] overflow-x-auto flex my-[1em] py-[1em] max-w-none [contain:inline-size]">
                    <div className="px-[var(--page-padding)] grow max-w-none table">
                        <table className="m-0 min-w-full w-full max-w-none [&_td]:min-w-[150px] [&_th]:text-left [&_td[data-numeric]]:tabular-nums">
                            <thead className="w-full">
                                <tr>
                                    <th className={isMultiRuntime ? undefined : "w-2/3"}>
                                        <strong>Feature</strong>
                                    </th>
                                    {runtimeKeys.map(runtimeKey => <th className={isMultiRuntime ? undefined : "w-1/3"}>
                                                <strong>{isMultiRuntime ? columnTitle(runtimeKey) : 'Version'}</strong>
                                            </th>)}
                                </tr>
                            </thead>
                            <tbody>

                                {featuresInOrder.map(featureKey => {
      const currentFeature = features[featureKey];
      return <tr>
                                                <td>{currentFeature.title}</td>
                                                {runtimeKeys.map(runtimeKey => renderSupportCell(currentFeature.runtimes[runtimeKey]))}
                                            </tr>;
    })}

                            </tbody>
                        </table>
                    </div>
                </div>
            </Accordion>;
  }
  const currentFeature = features[feature];
  const allSupported = Object.entries(currentFeature.runtimes).filter(([runtimeKey, runtimeSupport]) => !legacyRuntimes.includes(runtimeKey) && !runtimeSupport.na).every(([, runtimeSupport]) => runtimeSupport.supported === true);
  const statusEmoji = allSupported ? '✅' : '🟡';
  const titleWithEmoji = `${statusEmoji} ${currentFeature.title}`;
  return <Accordion title={titleWithEmoji} defaultOpen={defaultOpen}>
            {children}
            <div data-table-wrapper="true" className="[--page-padding:20px] overflow-x-auto flex my-[1em] py-[1em] max-w-none [contain:inline-size]">
                <div className="px-[var(--page-padding)] grow max-w-none table">
                    <table className="m-0 min-w-full w-full max-w-none [&_td]:min-w-[150px] [&_th]:text-left [&_td[data-numeric]]:tabular-nums">
                        <thead className="w-full">
                            <tr>
                                <th className="w-2/3">
                                    <strong>Runtime</strong>
                                </th>
                                <th className="w-1/3">
                                    <strong>Version</strong>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {runtimesInOrder.map(runtimeKey => {
    return <tr>
                                            <td>{runtimeTitles[runtimeKey]}</td>
                                            {renderSupportCell(currentFeature.runtimes[runtimeKey])}
                                        </tr>;
  })}

                        </tbody>
                    </table>
                </div>
            </div>
        </Accordion>;
};

export const UseCase = ({title, children}) => {
  return <aside class="callout my-4 px-5 py-4 overflow-hidden rounded-2xl flex gap-3 border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-white/10" data-callout-type="info">
      <div class="mt-0.5 w-4" data-component-part="callout-icon">
        <svg width="11" height="14" viewBox="0 0 11 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="text-neutral-800 dark:text-neutral-300 w-3.5 h-auto" aria-label="Tip"><path d="M3.12794 12.4232C3.12794 12.5954 3.1776 12.7634 3.27244 12.907L3.74114 13.6095C3.88471 13.8248 4.21067 14 4.46964 14H6.15606C6.41415 14 6.74017 13.825 6.88373 13.6095L7.3508 12.9073C7.43114 12.7859 7.49705 12.569 7.49705 12.4232L7.50055 11.3513H3.12521L3.12794 12.4232ZM5.31288 0C2.52414 0.00875889 0.5 2.26889 0.5 4.78826C0.5 6.00188 0.949566 7.10829 1.69119 7.95492C2.14321 8.47011 2.84901 9.54727 3.11919 10.4557C3.12005 10.4625 3.12175 10.4698 3.12261 10.4771H7.50342C7.50427 10.4698 7.50598 10.463 7.50684 10.4557C7.77688 9.54727 8.48281 8.47011 8.93484 7.95492C9.67728 7.13181 10.1258 6.02703 10.1258 4.78826C10.1258 2.15486 7.9709 0.000106649 5.31288 0ZM7.94902 7.11267C7.52078 7.60079 6.99082 8.37878 6.6077 9.18794H4.02051C3.63739 8.37878 3.10743 7.60079 2.67947 7.11294C2.11997 6.47551 1.8126 5.63599 1.8126 4.78826C1.8126 3.09829 3.12794 1.31944 5.28827 1.3126C7.2435 1.3126 8.81315 2.88226 8.81315 4.78826C8.81315 5.63599 8.50688 6.47551 7.94902 7.11267ZM4.87534 2.18767C3.66939 2.18767 2.68767 3.16939 2.68767 4.37534C2.68767 4.61719 2.88336 4.81288 3.12521 4.81288C3.36705 4.81288 3.56274 4.61599 3.56274 4.37534C3.56274 3.6515 4.1515 3.06274 4.87534 3.06274C5.11719 3.06274 5.31288 2.86727 5.31288 2.62548C5.31288 2.38369 5.11599 2.18767 4.87534 2.18767Z"></path></svg>
      </div>
      <div class="text-sm prose dark:prose-invert min-w-0 w-full [&_kbd]:bg-background-light dark:[&_kbd]:bg-background-dark [&_code]:!text-current [&_kbd]:!text-current [&_a]:!text-current [&_a]:border-current [&_strong]:!text-current text-neutral-800 dark:text-neutral-300" data-component-part="callout-content">
        <strong>Example{title && ` - ${title}`}</strong>

        {children}
      </div>
    </aside>;
};

A text input is an editable text field, like a search bar, login form, or chat box. Users can click or tab into it, type, select text, and paste, without you building any of that behavior yourself.

Each text input is a [Stateful Component](/docs/editor/data-binding/stateful-components) built from Rive's bundled Text Input library. Its appearance and value are view model properties. This means you can key them in [animate mode](/docs/editor/fundamentals/design-vs-animate-mode), bind them with [Data Binding](/docs/editor/data-binding/overview), and react to typing with [listeners](/docs/editor/state-machine/listeners#text-input).

<UseCase title="Personalized greeting">
  Let's say you're building a sign-up card that greets the user by name. Add a text input for the name and bind its **Value** to a `name` string property on your view model. Then bind a [Text Run](/docs/editor/text/text-runs) in the greeting to the same property. As the user types, the greeting updates, and your app can read `name` from the view model at runtime.
</UseCase>

## Creating a text input

<Steps>
  <Step>
    Open the text tools menu in the toolbar and select **Text Input**.
  </Step>

  <Step>
    Click the artboard to create a single-line input, or drag to create a multiline input at the size you drew.
  </Step>
</Steps>

A click creates a 200 × 40 single-line field with its text centered vertically. A drag creates a multiline field with its text aligned to the top and extra top and bottom padding.

Draw over an existing [Layout](/docs/editor/layouts/layouts-overview) to add the input to that layout. Draw over the bare artboard to place the input at that spot, inside its own absolutely positioned layout.

To try the input, switch to [animate mode](/docs/editor/fundamentals/design-vs-animate-mode), select a state machine, and play it. Click the field to focus it, then type.

<Tip>
  Press `Esc` while placing an input to cancel it.
</Tip>

## Configuring a text input

Select a text input to edit its properties in the **Text Input** section of the Inspector.

### Alignment

Use the alignment toggles at the top of the section to set the horizontal and vertical alignment of the text inside the field.

### Value

* **Value:** The text in the field. Set it to give the field a starting value, or bind it to read and write the text at runtime.
* **Font:** The font, size, and weight.
* **Text color:** The color of the typed text.
* **Multiline:** Allows the text to wrap onto multiple lines and the user to enter line breaks. Turn it off for single-line fields like search bars.
* **Obscure:** Masks the text as bullets. Use it for password fields.

### Placeholder

* **Placeholder:** Text shown when the field is empty, such as "Search" or "Email address."
* **Placeholder color:** The color of the placeholder text.

### Selection

* **Cursor color:** The color of the text cursor.
* **Selection color:** The highlight color behind selected text.
* **Selection radius:** The corner radius of the selection highlight.

### Container

* **Background color:** The fill color of the field.
* **Stroke color:** The border color and width.
* **Padding:** Space between the border and the text. Set horizontal and vertical padding, or switch to individual edges.
* **Corner radius:** Rounds the corners of the field. Corners are linked by default; unlink them to set each corner separately.

### Focus

Click **Focus** at the bottom of the section to fire the input's focus trigger. While the state machine plays, this focuses the field. Bind the trigger to focus the field from your own logic, such as when a form opens.

<Note>
  Every property in the section can be keyed and bound like any other view model property. Hover a property and click the bind button to [bind it](/docs/editor/data-binding/binding-data).
</Note>

## Responding to text input

Add a listener to react when the user interacts with a text input:

* **Text Input:** Fires when text is entered while the field has focus.
* **Focus** and **Blur:** Fire when the field gains or loses focus. Use them to animate a focus ring or show a hint.

See [Listeners](/docs/editor/state-machine/listeners) for setting up listeners and their actions. In scripts, use [`ListenerContext`](/docs/scripting/api-reference/artboards/listener-context) to check for a text input event and read its [`TextInput`](/docs/scripting/api-reference/artboards/text-input) data.

<Tip>
  To read the field's text in your app, bind **Value** to a string property on your view model rather than handling each keystroke.
</Tip>

## Runtime support

Text input needs keyboard and text input from the host app, so it's only available in runtimes that pass that input to Rive.

<FeatureSupportGroup feature="textInput" />

See [Feature Support](/docs/feature-support) for the full list of features by runtime.