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

# DittoSwiftTools

> DittoSwiftTools are diagnostic tools for Ditto. You can view connected peers, export debug logs, browse collections (documents), and monitor Ditto's disk usage.

For the source code, see the GitHub > getditto > <a href="https://github.com/getditto/DittoSwiftTools" target="_blank">DittoSwiftTools</a> repository.

## Requirements

* iOS 15.0+
* Swift 5.0+

## Installation

The recommended approach to using DittoSwiftTools in your project is using the Swift Package Manager.

<Steps>
  <Step>
    With your project open in Xcode go to File -> Add Packages, then search using "github.com/getditto/DittoSwiftTools" to find the DittoSwiftTools package.

    <Frame>
      <img src="https://mintcdn.com/ditto-248bc0d1/tCfSF1TTvWS_3XsC/images/best-practices/swift/dittoswifttools/ditto-tools-overview.png?fit=max&auto=format&n=tCfSF1TTvWS_3XsC&q=85&s=ea092d42fcf7734101dd169ac875f616" alt="" width="1037" height="607" data-path="images/best-practices/swift/dittoswifttools/ditto-tools-overview.png" />
    </Frame>
  </Step>

  <Step>
    Select "Add Package"
  </Step>

  <Step>
    Select which DittoSwiftTools products you would like, then select "Add Package"

    <Info>
      If you are looking for compatibility with Ditto v4, please target the <a href="https://github.com/getditto/DittoSwiftTools/tree/v4" target="_blank">v4 branch</a> in the Swift Package Manager.
    </Info>
  </Step>
</Steps>

## Usage

There are four targets in this package: Presence Viewer, Data Browser, Export Logs, Disk Usage.

<Steps>
  <Step title="Presence Viewer">
    The Presence Viewer displays a mesh graph that allows you to see all connected peers within the mesh and the transport that each peer is using to make a connection.

    <Frame>
      <img src="https://mintcdn.com/ditto-248bc0d1/tCfSF1TTvWS_3XsC/images/best-practices/swift/dittoswifttools/ditto-tools-usage.png?fit=max&auto=format&n=tCfSF1TTvWS_3XsC&q=85&s=17c739bf036a0b42d819001bf1329902" width="303" height="516" data-path="images/best-practices/swift/dittoswifttools/ditto-tools-usage.png" />
    </Frame>

    First, make sure the `DittoPresenceViewer` was added to your Target. Then, use `import DittoPresenceViewer` to import the `PresenceViewer`.

    You can use the Presence Viewer in SiwftUI or UIKit.

    **SwiftUI**

    Use `PresenceView(ditto: Ditto)` and pass in your Ditto instance to display the mesh graph.

    ```swift Swift theme={null}
    import DittoPresenceViewer

    struct PresenceViewer: View{

        var body: some View {
            PresenceView(ditto: DittoManager.shared.ditto)
        }
    }
    ```

    **UIKit**

    Call `present`, pass the following as a parameter, and then set `animated` to `true`:

    `DittoPresenceView(ditto:DittoManager.shared.ditto).viewController`

    ```swift Swift theme={null}
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        present(DittoPresenceView(ditto: DittoManager.shared.ditto).viewController, animated: true) {
            if let selected = tableView.indexPathForSelectedRow {
                tableView.deselectRow(at: selected, animated: true)
            }
        }
    }
    ```
  </Step>

  <Step title="Data Browser">
    The Ditto Data Browser allows you to view all your documents within each collection, including each document's fields. With the Data Browser, you can observe any changes that are made to your collections and documents in realtime.

    <Frame>
      <img src="https://mintcdn.com/ditto-248bc0d1/tCfSF1TTvWS_3XsC/images/best-practices/swift/dittoswifttools/ditto-tools-config.png?fit=max&auto=format&n=tCfSF1TTvWS_3XsC&q=85&s=7da84c7d1ed64541fd25a68b97b047d0" width="347" height="450" data-path="images/best-practices/swift/dittoswifttools/ditto-tools-config.png" />
    </Frame>

    **Standalone App** 

    If you are using the Data Browser as a standalone app, there is a button, `Start Subscriptions`, you must press in order to start syncing data.

    If you are embedding the Data Browser into another application then you do not need to press `Start Subscriptions` as you should already have your subscriptions running.

    First, make sure the "DittoDataBrowser" was added to your Target. Then, use `import DittoDataBrowser` to import the Data Browser.

    **SwiftUI**

    Use `DataBrowser(ditto: Ditto)` and pass in your Ditto instance to display the Data Browser.

    ```swift Swift theme={null}
    import DittoDataBrowser

    struct DataBrowserView: View {
        var body: some View {
           DataBrowser(ditto: DittoManager.shared.ditto)
        }
    }
    ```

    **UIKit**

    Pass `DataBrowser(ditto: Ditto)` to a <a href="https://sarunw.com/posts/swiftui-in-uikit/" target="_blank">UIHostingController</a> which will return a view controller that you can use to present.

    ```swift Swift theme={null}
    let vc = UIHostingController(rootView: DataBrowser(ditto: DittoManager.shared.ditto))

    present(vc, animated: true)
    ```
  </Step>

  <Step title="Export Logs">
    Export Logs allows you to export a file of the logs from your app.

    <Frame>
      <img src="https://mintcdn.com/ditto-248bc0d1/tCfSF1TTvWS_3XsC/images/best-practices/swift/dittoswifttools/ditto-tools-settings.png?fit=max&auto=format&n=tCfSF1TTvWS_3XsC&q=85&s=c8be4c901914b9cbf46c850d8d81e85a" width="403" height="346" data-path="images/best-practices/swift/dittoswifttools/ditto-tools-settings.png" />
    </Frame>

    First, make sure the "DittoExportLogs" was added to your Target. Then, use `import DittoExportLogs` to import the export logs.

    **SwiftUI**

    Use `ExportLogs()` to export the logs. It is recommended to call `ExportLogs` from within a <a href="https://developer.apple.com/documentation/swiftui/view/sheet(ispresented:ondismiss:content:)" target="_blank">sheet</a>.

    ```swift Swift theme={null}
    .sheet(isPresented: $exportLogs) {
        ExportLogs()
    }
    ```

    **UIKit**

    Pass `ExportLogs()` to a <a href="https://sarunw.com/posts/swiftui-in-uikit/" target="_blank">UIHostingController</a> which will return a view controller that you can use to present.

    ```swift Swift theme={null}
    let vc = UIHostingController(rootView: ExportLogs())

    present(vc, animated: true)
    ```
  </Step>

  <Step title="Disk Usage">
    Disk Usage allows you to see Ditto's file space usage.

    <Frame>
      <img src="https://mintcdn.com/ditto-248bc0d1/tCfSF1TTvWS_3XsC/images/best-practices/swift/dittoswifttools/ditto-tools-advanced.png?fit=max&auto=format&n=tCfSF1TTvWS_3XsC&q=85&s=b93d8d2eef7d13501308b71d8931ed55" width="328" height="552" data-path="images/best-practices/swift/dittoswifttools/ditto-tools-advanced.png" />
    </Frame>

    First, make sure the "DittoDiskUsage" was added to your Target. Then, use `import DittoDiskUsage` to import the Disk Usage.

    <Frame>
      <img src="https://mintcdn.com/ditto-248bc0d1/tCfSF1TTvWS_3XsC/images/best-practices/swift/dittoswifttools/ditto-tools-advanced.png?fit=max&auto=format&n=tCfSF1TTvWS_3XsC&q=85&s=b93d8d2eef7d13501308b71d8931ed55" width="328" height="552" data-path="images/best-practices/swift/dittoswifttools/ditto-tools-advanced.png" />
    </Frame>

    First, make sure the "DittoDiskUsage" was added to your Target. Then, use `import DittoDiskUsage` to import the Disk Usage.

    **SwiftUI**

    Use `DittoDiskUsageView(ditto: Ditto)` and pass in your Ditto instance.

    ```swift Swift theme={null}
    import DittoDiskUsage

    struct DiskUsageViewer: View {
        var body: some View {
            DittoDiskUsageView(ditto: DittoManager.shared.ditto)
        }
    }
    ```

    **UIKit**

    Pass `DittoDiskUsageView(ditto: Ditto)` to a <a href="https://sarunw.com/posts/swiftui-in-uikit/" target="_blank">UIHostingController</a> which will return a view controller that you can use to present.

    ```swift Swift theme={null}
    let vc = UIHostingController(rootView: DittoDiskUsageView(ditto: DittoManager.shared.ditto))

    present(vc, animated: true)
    ```
  </Step>
</Steps>
