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

# Introduction

> Overview of the Stitch SDKs for embedding Fasten Connect experiences in Web, React, React Native, and future runtimes.

<Note>
  This documentation is for [Stitch.js (v4) SDK](/stitch/v4/), which is now the recommended version for integrating Fasten Connect into your application.
  If you need access to the previous versions, please see [v1 documentation](/stitch/v1/) or [v3 documentation](/stitch/v3/).

  This version includes compatibility with additional runtime environments (Web, React Native, React etc), improved performance, and additional features.

  v4 is backwards compatible with v3 -- there are no breaking changes to the public API, but we have made significant improvements to the underlying codebase and architecture. If you are currently using v3, you can upgrade to v4 without making any changes to your code.

  The [v1 Web Component](/stitch/v1/) and [v3 Web Component](/stitch/v3) are in maintenance mode and will no longer receive updates (outside of security fixes).
  Please update your code to use the new version.
</Note>

## Welcome

Fasten Stitch is the client-side component that your users will interact with in order to link their accounts to Fasten Connect and
allow you to access their medical records via the Fasten Connect API.

Stitch handles patient consent, credential validation, multi-factor authentication, and error handling for each institution that
Fasten Connect supports. Stitch v4 ships as multiple SDKs so you can embed the same experience across browsers, React apps, and native shells.
To try Stitch, see Fasten Connect [Acme Demo](https://www.acmelabsdemo.com/v4/).

## SDK catalog

Choose the SDK that best matches your runtime. Each SDK exposes the same events and configuration surface, so once you understand the
core concepts you can reuse them everywhere.

* [Web Component SDK](/stitch/v4/sdks/web-component/quickstart) — Embed `<fasten-stitch-element>` inside any web page or web view.
* [React SDK](/stitch/v4/sdks/react/quickstart) <Badge color="yellow">Beta</Badge> — Render Stitch with typed React props, refs, and component-level styling.
* [React Native SDK](/stitch/v4/sdks/react-native/quickstart) — Present Stitch as a native modal powered by the same event bus.

We will continue to add additional SDKs underneath `/stitch/v4/sdks/` as new platforms become available.

Stitch is the recommended method for collecting medical records via Fasten Connect.

<Columns cols={3}>
  <Tile href="/stitch/v4/sdks/web-component/quickstart" title="Web Component" description="Any web page or web view.">
    <img src="https://mintcdn.com/fastenhealth/PEL-7CStqGIZSylF/images/stitch-html.png?fit=max&auto=format&n=PEL-7CStqGIZSylF&q=85&s=c97cdf49bb3723266cd15b015fd1c06b" alt="Web/HTML Component" className="block" width="500" height="500" data-path="images/stitch-html.png" />
  </Tile>

  <Tile href="/stitch/v4/sdks/react/quickstart" title="React" description="React web applications.">
    <img src="https://mintcdn.com/fastenhealth/5l7VkQcvfFcrkvwx/images/stitch-react.png?fit=max&auto=format&n=5l7VkQcvfFcrkvwx&q=85&s=a8ff8a218a6fd7b666b582239f238463" alt="React Component" className="block" width="2400" height="2400" data-path="images/stitch-react.png" />
  </Tile>

  <Tile href="/stitch/v4/sdks/react-native/quickstart" title="React Native" description="Any React Native application.">
    <img src="https://mintcdn.com/fastenhealth/vTHiANe912yH2wcH/images/stitch-react-native.svg?fit=max&auto=format&n=vTHiANe912yH2wcH&q=85&s=5e98e34190b8bd723fc0ab566c2113cd" alt="React Native Component" className="block" width="2500" height="2005" data-path="images/stitch-react-native.svg" />
  </Tile>
</Columns>

<RequestExample>
  ```html Web Component theme={null}
  <html>
  <head>
      <link href="https://cdn.fastenhealth.com/connect/v4/fasten-stitch-element.css" rel="stylesheet">
      <script src="https://cdn.fastenhealth.com/connect/v4/fasten-stitch-element.js" type="module"></script>
  </head>
  <body>
      <fasten-stitch-element public-id="pub_live_123456324234234"></fasten-stitch-element>

      <script type="application/javascript">
          const el = document.querySelector('fasten-stitch-element');
          el.addEventListener('eventBus', (event) => console.log(JSON.parse(event.detail.data)));
      </script>
  </body>
  </html>
  ```

  ```tsx React Native theme={null}
  import React, { useCallback } from 'react';
  import { StyleSheet, View } from 'react-native';
  import {FastenStitchElement} from '@fastenhealth/fasten-stitch-element-react-native';

  export default function App() {
      const CUSTOMER_PUBLIC_ID = "public_test_xxxxxxxx";

      const handleEventBus = useCallback((message: unknown) => {
          console.debug('[FastenStitchElement onEventBus] message', message);
      }, []);

      return (
          <View style={styles.root}>
              <FastenStitchElement
                  publicId={CUSTOMER_PUBLIC_ID}
                  email="patient@example.com"
                  debugModeEnabled
                  onEventBus={handleEventBus}
              />
          </View>
      );
  }
  ```

  ```tsx React theme={null}
  import { FastenStitchElement } from '@fastenhealth/fasten-stitch-element-react';

  export default function App() {
      const CUSTOMER_PUBLIC_ID = "public_test_xxxxxxxx";

      return (
          <FastenStitchElement
              publicId={CUSTOMER_PUBLIC_ID}
              onEventBus={(event) => {
                  const payload = JSON.parse(event.data);
                  console.debug('[FastenStitchElement onEventBus] payload', payload);
              }}
          />
      );
  }
  ```
</RequestExample>
