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

# Quick Start

> Start translating your app into every language in under 5 minutes.

This quick start guide will get you up and running with Lexicon.

<Steps titleSize="h3">
  <Step title="Create a Lexicon account">
    Go to [app.lexiconjs.com](https://app.lexiconjs.com) and create a free account.
  </Step>

  <Step title="Get your publishable key">
    Grab your publishable key from your dashboard's [API Keys](https://app.lexiconjs.com/keys) tab and save it for later.

    <img src="https://mintcdn.com/lexicon/DTw6CgjSRs6zlNfu/images/publishable-key-location.png?fit=max&auto=format&n=DTw6CgjSRs6zlNfu&q=85&s=27d18913da4cdcc93a1ac6efd416f54c" alt="Publishable Key Location" width="1467" height="1091" data-path="images/publishable-key-location.png" />
  </Step>

  <Step title="Install the @lexiconjs/react module">
    Add the **@lexiconjs/react** package to your existing project.

    In a terminal window run:

    <CodeGroup>
      ```bash npm theme={null}
      npm install @lexiconjs/react --save
      ```

      ```bash pnpm theme={null}
      pnpm install @lexiconjs/react --save
      ```

      ```bash yarn theme={null}
      yarn add @lexiconjs/react
      ```
    </CodeGroup>
  </Step>

  <Step title="Install and configure the react-native-mmkv module (only for React Native)">
    If your app is using React Native, you will also need to add the **react-native-mmkv** package to your existing project and ensure it's properly linked using one of the instruction sets below (Expo or React Native).

    *We use this package to ensure caching is as fast as possible on mobile devices. You can review their [docs](https://github.com/mrousavy/react-native-mmkv) for more details.*

    #### React Native

    In a terminal window run:

    <CodeGroup>
      ```bash npm theme={null}
      npm install react-native-mmkv --save
      cd ios && pod install
      ```

      ```bash pnpm theme={null}
      pnpm install react-native-mmkv --save
      cd ios && pod install
      ```

      ```bash yarn theme={null}
      yarn add react-native-mmkv
      cd ios && pod install
      ```
    </CodeGroup>

    #### Expo

    In a terminal window run:

    ```bash theme={null}
    npx expo install react-native-mmkv
    npx expo prebuild
    ```

    <Tip>
      Note: If you are using **expo**, you will need to use the [expo-dev-client](https://docs.expo.dev/guides/local-app-development/#local-builds-with-expo-dev-client) in order to run **@lexiconjs/react** locally.
    </Tip>
  </Step>

  <Step title="Wrap your app in <TranslationProvider />">
    The `<TranslationProvider />` component enables the automatic translation of your app's text inside of other components. Import it into your codebase by adding `import { TranslationProvider } from "@lexiconjs/react"` at the top of your entry file and then wrap your app with it.

    ```tsx theme={null}
    import { TranslationProvider } from "@lexiconjs/react"
    import React from "react"
    import App from "./component/App"

    export const TranslatedApp = () => {
      return (
        <TranslationProvider 
          defaultLanguage="en-US" 
          token={PUBLISHABLE_KEY}
        >
          <App />
        </TranslationProvider>
      )
    }
    ```

    *Make sure to replace the `PUBLISHABLE_KEY` with the key you found in your dashboard.*
  </Step>

  <Step title="Use Lexicon components to translate your app">
    The simplest way to translate text is to simply wrap some text with the `<TranslatedText />` component. It will detect the user's locale via their device settings and generate a translation in real time. Afterward, it stores the translation in a local cache to ensure everything stays as fast as possible.

    ```tsx theme={null}
    import React from "react"
    import { Text } from "react-native"

    export const Example = () => {
      return (
        <Text>
          <TranslatedText>
            This text will be translated!
          </TranslatedText>
        </Text>
      )
    }
    ```

    <Tip>
      We recommend extending the `<Text />` component from whatever component library you're using into a custom component so that you don't need to include `<TranslatedText />` everywhere.

      See the [TranslatedText documentation](/docs/usage/components/translated-text#creating-a-custom-text-component) for more details.
    </Tip>
  </Step>
</Steps>