# Contact Support
Source: https://docs.symplr.io/Contact-Support



Contact Symplr support for assistance with application issues, configuration problems, integrations, or account-related concerns.

## When to Contact Support

Please contact support if you encounter any of the following:

* Errors or unexpected behavior within the application
* Features not functioning as expected
* Issues related to Figma import or Blueprint View
* Challenges with configuration, workflows, or integrations
* Account or access-related concerns

## Report Issues Directly from the Application

Symplr provides a built-in mechanism to report issues efficiently at the point of occurrence.

* When an error message appears, a **“Contact Support”** button is displayed
* Click the **“Contact Support”** button to submit the issue

The following example shows how the **“Contact Support”** option appears within an error message:

<Frame>
  <img alt="Image" />
</Frame>

In this example, the error message includes a **“Contact Support”** button to submit the issue directly within the application.

Upon submission, Symplr automatically captures and sends relevant technical details to the support team, including:

* **Application ID**
* **Error code**
* **Error information**
* **Customer details**

These details are automatically sent to the support team, enabling faster analysis and resolution.

## Before You Contact Support

Before contacting support, review available product documentation, FAQs, and product updates for known issues and guidance.

## How to Contact Support

### In-App Support

Access support directly from within the application:

1. Click the **Help** button
2. Initiate a chat with the support team
3. Provide details of your issue, including screenshots, steps, or error messages

### Email Support

For more detailed queries or when attachments are required, contact support via email:

[**support@101digital.io**](mailto:support@101digital.io)

## Provide Additional Details

When contacting support, include the following where applicable:

* Project or application name
* Description of the issue
* Steps to reproduce the issue
* Screenshots or recordings

💡 When using the **Contact Support** button, most technical details are captured automatically.

## Response Time

Support requests are typically reviewed within 24–48 hours. Critical issues such as application crashes, build failures, or blocking issues may receive priority responses.

<Note>
  For critical issues, use in-app support for faster assistance.
</Note>


# Blueprint View
Source: https://docs.symplr.io/blueprint-view



Blueprint View provides a visual representation of the application structure, screen relationships, navigation flows, and connected application logic generated within Symplr.

After creating an application using a Figma design, AI prompt, or template, Symplr automatically generates a blueprint that visually maps the application flow from the starting screen through connected screens, actions, and navigation paths.

Blueprint View acts as the central workspace for reviewing, extending, organizing, and managing the generated application structure.

## Before You Begin

Before working in Blueprint View, ensure:

* An application project has been created successfully
* The application structure has been generated
* You have access to the project workspace
* Screens and navigation flows are available within the blueprint

## Open Blueprint View

After generating or opening a project, Symplr loads the application directly in **Blueprint View**.

<Frame>
  <img alt="1 Full Blueprint View" />
</Frame>

The Blueprint workspace displays the application flow using connected screens and navigation paths.

## Understand Screens and Navigation Flows

Each rectangle within the blueprint represents an individual application screen.

Connections between screens represent navigation actions and user flow within the application.

Navigation connectors may also display interaction names such as `onPress`, helping identify the action that triggers the navigation flow.

<Frame>
  <img alt="2 Screen Navigation Flow" />
</Frame>

Navigation paths display how users move between connected screens based on configured interactions.

The blueprint structure helps visualize:

* Application navigation flow
* Connected screens
* User interaction paths
* Screen relationships
* Application structure from start to end

## Preview and Edit Screens

Each screen within Blueprint View can be previewed and edited individually.

To open a screen preview, click the **Preview** icon available on the screen card.

<Frame>
  <img alt="3 Preview Screen Option" />
</Frame>

Symplr opens the selected screen within the screen editor workspace.

<Frame>
  <img alt="4 Previewing Screen" />
</Frame>

From the screen editor, you can continue configuring layouts, widgets, screen properties, navigation, and screen content.

## Add Connections and Extend the Application

Blueprint View allows screens and application logic to be extended directly from existing screens.

To add a new connection, click the **Add (+)** button available on the screen card.

<Frame>
  <img alt="5 Add Option" />
</Frame>

Symplr displays the **Add to Storyboard** dialog.

<Frame>
  <img alt="6 Add To Story Board Popup" />
</Frame>

The storyboard options allow additional application elements to be connected directly to the selected screen.

Available connection types include:

* Screen
* Decision
* User Journey
* Workflow

### Add Screens

Use the **Screen** option to connect existing screens or create new application screens.

<Frame>
  <img alt="7 Add Screen Option" />
</Frame>

Additional screens extend the navigation structure and application flow.

### Add Decisions

Use the **Decision** option to create branching logic and conditional navigation paths within the application flow.

<Frame>
  <img alt="8 Add Decision Option" />
</Frame>

Decisions help define multiple flow outcomes based on user actions, validations, or application conditions.

### Add User Journeys

Use the **User Journey** option to connect reusable user flows and interaction sequences to the application.

<Frame>
  <img alt="9 Add User Journey" />
</Frame>

User Journeys help organize larger application flows and reusable interaction patterns.

### Add Workflows

Use the **Workflow** option to connect reusable workflows and backend-related processes to the application.

<Frame>
  <img alt="10 Add New Workflow" />
</Frame>

Workflows can be used to connect API operations, reusable business logic, external integrations, and backend processing steps.

The workflow catalogue allows available workflows to be searched and connected directly to the application flow.

## Manage Screens

Additional screen management options are available from the three-dot menu on each screen card.

<Frame>
  <img alt="11 Three Dots" />
</Frame>

Clicking the menu displays available screen management actions.

<Frame>
  <img alt="12 Three Dot Menu" />
</Frame>

Available actions include:

* Rename
* Duplicate
* Delete

These options help organize and maintain the application structure within Blueprint View.

## Access Workspace Features

Blueprint View also provides access to additional workspace capabilities from the top-right corner of the workspace.

<Frame>
  <img alt="13 Top Right Workspace Actions" />
</Frame>

Available workspace actions include:

* Download Application Definition
* Developer Tools
* Build & Run
* Share Projects

These capabilities support application generation, testing, collaboration, configuration, and export workflows.

## Navigate the Blueprint Workspace

Blueprint View includes workspace navigation and canvas controls to help manage large application structures.

<Frame>
  <img alt="14 Workspace Controls" />
</Frame>

Available workspace controls include:

* Zoom In
* Zoom Out
* Center Workspace
* Lock or Unlock Canvas Movement

These controls help improve navigation and organization while working with larger application flows.

## Next Steps

After reviewing and organizing the application structure in Blueprint View, continue by editing screens, configuring workflows, customizing themes, generating application previews, downloading code packages, configuring integrations, or sharing projects for collaboration.


# Build & Run Applications
Source: https://docs.symplr.io/build-and-run-applications



Symplr allows applications to be built and previewed directly within the platform before downloading or deploying the generated application package.

The Build & Run capability helps validate application screens, navigation flows, layouts, forms, interactions, and overall application behavior during preview.

## Before You Begin

Before building the application, ensure the project contains configured screens, workflows, and navigation within Blueprint View.

## Access the Build & Run Menu

Open your project in the **Blueprint View** and access the **Build & Run** dropdown from the top right corner of the workspace.

<Frame>
  <img alt="1 Blueprint View Before Build" />
</Frame>

The **Build & Run** option provides access to application preview and validation functions.

<Frame>
  <img alt="2 Build & Run Option" />
</Frame>

## Start a New Application Build

From the **Build & Run** menu, select **Build** under **Build & Run New App** to generate an interactive application preview.

<Frame>
  <img alt="3 Build & Run button" />
</Frame>

Symplr begins generating the application preview using the current application structure and configuration.

Build duration may vary based on application size and complexity.

## Preview the Running Application

Once the build completes successfully, the application preview opens directly within the browser.

<Frame>
  <img alt="6 Successful application preview running in browser" />
</Frame>

Use the running application preview to validate layouts, navigation flows, forms, workflows, and overall application behavior.

<Frame>
  <img alt="7 Validation example" />
</Frame>

## Load a Previously Generated Build

If a previous application build exists, Symplr allows the latest generated preview to be loaded directly without rebuilding the application.

From the **Build & Run** menu, click the **Load** button under **Load Latest App**.

<Frame>
  <img alt="5 Load Latest App" />
</Frame>

This opens the most recently generated application preview for continued validation and testing.

## Handle Build Failures

In some situations, unsupported configurations, widgets, workflows, or application states may prevent the application preview from building successfully.

When a build issue occurs, Symplr displays the build status together with the related error information.

<Frame>
  <img alt="8 Build failed message" />
</Frame>

The error details help identify issues that may require additional troubleshooting or application updates.

### Rebuild the Application

After correcting the identified issue, click the **Build Again** button to restart the application build process.

<Frame>
  <img alt="9 Build Again Button" />
</Frame>

Symplr generates a new application preview using the updated application configuration.

### Contact Support

If the issue persists after rebuilding the application, use the **Contact Support** option available within the build failure screen.

<Frame>
  <img alt="10 Contact Support Button" />
</Frame>

Use this option if additional troubleshooting assistance is required.

## Next Steps

After validating the application preview, continue by downloading the generated code, running the application locally, configuring authentication, database integrations, deployment settings, extending workflows, and preparing the application for external deployment.


# Create Application from a Figma Design
Source: https://docs.symplr.io/caffd



Transform Figma designs into structured applications directly within Symplr using a shareable Figma file URL.

Symplr analyzes screens, layouts, components, and navigation from your design to generate a Blueprint View application structure that can be reviewed, customized, validated, and extended within the platform.

## Why It Matters

* Transform designs into working applications efficiently
* Validate application flows early in the development process
* Maintain design accuracy and consistency across screens
* Test functionality and user flows within the platform or on a real device
* Support a smoother transition from design to deployment

## Overview

By importing a Figma file URL, Symplr generates screens, layouts, components, and navigation from your design, allowing you to move from design to Blueprint View without manually rebuilding screens.

Watch the short video below to see how Symplr transforms a Figma design into a working application.

<Frame>
  <iframe title="Create Application from a Figma Design" />
</Frame>

## What You Can Do with Symplr

* Import Figma designs using a shareable URL
* Generate screens and navigation from your design
* Preview, build, and run applications within the platform

From design to a deployment-ready application, Symplr streamlines the transition from design to application implementation.

## Quick Start

Convert your Figma design into a structured application workflow in a few steps.

**In under 2 minutes, you can:**

* Copy your Figma file URL
* Import it into Symplr
* Review generated screens
* Build and run the application

Symplr streamlines the process from design import to application generation.

### Expected Outcome

In just a few steps, Symplr converts your Figma design into a working application ready for testing and validation.

After completing this flow, you will have:

* A generated application structure created directly from your Figma design
* Screens and navigation generated with precision
* A working application ready for preview within Symplr or on your device

## What You'll Need

Before you get started, make sure you have:

* Access to a **Figma design file** with a valid shareable link
* A **Symplr account** with the necessary permissions
* A stable internet connection

## Prepare Your Figma File

Symplr works best when your design is structured for clarity and scalability. A well-prepared file ensures faster, more accurate generation.

**For optimal results:**

* Use **frames to define each screen**
* Maintain **clear and consistent screen names**
* Avoid **deeply nested groups** that may affect interpretation
* Leverage **reusable components** for consistency
* Apply **Auto Layout** to support responsive behavior

<Warning>
  **Important:** Ensure your Figma file is accessible (e.g., *“Anyone with the link can view”* or properly authorized), so Symplr can process it without interruptions.
</Warning>

## Import Your Figma Design

Using a Figma URL, Symplr accesses your design and prepares the application structure for generation.

### Import Process

#### Step 1: Copy Your Figma File URL

Open your Figma design and copy the shareable file link used to import your design into Symplr.

<Frame>
  <img alt="Image" />
</Frame>

#### Step 2: Launch Symplr

Log in to your Symplr account and navigate to the Home page. Click **“Import from Figma”** to start the process.

<Frame>
  <img alt="Screenshot 2026 08 07 At 13 16 16" />
</Frame>

#### Step 3: Connect Your Design

Paste your Figma URL into the input field and click **“Import”**. Symplr will validate and securely access your design.

<Frame>
  <img alt="Screenshot 2026 08 07 At 13 18 06" />
</Frame>

<Note>
  *First time connecting?* You’ll be prompted to authorize your Figma account. Follow the on-screen steps to enable access.
</Note>

#### Step 4: Generate the Application Structure

Symplr processes your design by analyzing layouts and components to generate the application structure.

The result is a ready-to-use **Blueprint View**, a visual representation of your application’s screens and navigation for review.

<Frame>
  <img alt="Image" />
</Frame>

#### Step 5: Validate the Import

Once the import is complete, Symplr displays the **Blueprint View**, showing your application’s screens and navigation.

##### **What You'll Get**

* Screens generated from the original Figma layouts
* Preserved screen structure and naming conventions
* Consistent rendering of supported components
* Automatically generated navigation flows
* A visual representation of the application structure for review and refinement

Symplr helps transform designs into structured application flows for review, validation, and customization.

##### **Not Seeing the Expected Result?**

If the result doesn’t match your expectations, a few quick adjustments can resolve it.

##### **What to Check**

* Ensure your **Figma file is well-structured using frames** for accurate screen recognition
* Use **clear and consistent screen names** to maintain alignment
* Avoid **deeply nested groups or unsupported components** that may affect rendering
* Verify that your **Figma file permissions** allow access for seamless import

##### **Refine and Regenerate**

* Make updates to your Figma design
* Re-import into Symplr to regenerate the **Blueprint View**

With a few adjustments, you can improve application structure alignment and maintain consistency across generated screens.

<Frame>
  <img alt="Image" />
</Frame>

## Figma Import Limitations

Symplr relies on Figma APIs to access design files and assets during the import process. Certain limitations imposed by Figma may affect imports, particularly when using Free or View-only Figma accounts.

<Warning>
  **Figma API Limitations**

  * Free and View-only Figma accounts are subject to Figma API rate limits. As a result, the same Figma project can only be imported a limited number of times within a given period.
  * If the rate limit is exceeded, imports may fail or return incomplete results until the limit resets.
  * When importing projects that contain a large number of images, Free and View-only Figma accounts may experience missing images during import.
  * This issue is more likely to occur during repeated imports of the same project due to Figma API throttling and asset retrieval limits.
  * If images are missing after import, wait before reattempting the import or consider using a Figma account with higher API limits.
  * For additional information about Figma API rate limits, see the official Figma Rate Limits documentation. [Rate limits](https://developers.figma.com/docs/rest-api/rate-limits/)
</Warning>

### Example Rate Limit Error

If a Figma rate limit is reached, Symplr may display an error similar to the following:

<Frame>
  <img alt="Image 63" />
</Frame>

This message indicates that a Figma API rate limit has been reached and additional imports may need to be delayed until the limit resets. In some cases, creating a copy of the Figma file and importing the copy may help avoid the restriction.

## Review Generated Screens

Once the import is complete, Symplr displays the generated screens and navigation structure within Blueprint View.

You can view each screen individually to verify that all elements are accurately translated.

### Screen Review Process

#### Step 1: Access the Blueprint View

As soon as your import is complete, Symplr presents a fully structured **Blueprint View**, providing a visual overview of the generated application structure.

#### Step 2: Navigate to the “Pages” Tab

Easily switch to the **Pages** tab to explore how your design is organized into pages and screens.

<Frame>
  <img alt="Image" />
</Frame>

#### Step 3: Preview Generated Screens

The default screen is displayed for review within the main preview area.

<Frame>
  <img alt="Image" />
</Frame>

#### Step 4: Explore All Screens

Browse through the **Screens panel** to see every screen associated with your selected page clearly listed and organized.

<Frame>
  <img alt="Image" />
</Frame>

#### Step 5: Dive Into Any Screen

Select any screen to load it in the main view for detailed inspection of layouts, components, and structure.

From overview to deep inspection, Symplr provides detailed visibility for reviewing and validating layouts, components, and navigation.

## Build & Run Your Application

Once the application is generated, use Build & Run workflows to compile and preview the application directly within Symplr without local environment setup.

Test functionality, validate user flows, and experience your application in action all within the platform.

### Run in Symplr

Compile and run the generated application directly within Symplr without requiring additional local environment configuration.

### Build Process

#### Step 1: Access Build & Run

From the top-right corner of the interface, click **“Build & Run App”** icon to open the execution panel.

#### Step 2: Start the Build

Click **“Build”** to begin compiling your application. Symplr processes the generated application package and prepares it for execution.

<Frame>
  <img alt="Image" />
</Frame>

#### Step 3: Track Progress in Real Time

Monitor the build process through live progress indicators, providing visibility into build progress and execution status.

<Frame>
  <img alt="Image" />
</Frame>

#### Step 4: Run Your Application

Once the build is complete, the application launches within the Symplr environment ready for testing and validation.

<Frame>
  <img alt="Image" />
</Frame>

Symplr simplifies application preview and validation workflows directly within the platform.

### Run on a Real Device

Run the application on a physical device for testing and validation.

Symplr supports running applications on physical mobile devices to help validate interactions, layouts, and user flows before deployment.

### Device Testing Process

#### Step 1: Generate Your QR Code

Click **“Run App on Your Device”** from the top-right corner. Symplr generates a QR code for device access.

<Frame>
  <img alt="Image" />
</Frame>

#### Step 2: Install Expo Go

Follow the on-screen instructions to install Expo Go (a mobile app used to run your application).

<Frame>
  <img alt="Image" />
</Frame>

#### Step 3: Scan and Connect

Open Expo Go and scan the QR code. Your application connects through Expo Go without additional setup.

<Frame>
  <img alt="Image" />
</Frame>

<Info>
  Scan the QR code using your mobile device:

  * On **iOS**, use the Camera or Code Scanner. After scanning, you will be prompted to open the application in the **Expo Go** application
  * On **Android**, open the **Expo Go** application and use its built-in QR scanner

  Make sure to keep this screen open while running the application, as closing it may stop the application.
</Info>

#### Step 4: Launch Your Application

Once connected, the application loads directly on your device for testing and validation.

#### Step 5: Validate the Application

Once the application is running, review the following areas:

* **Review every screen** to ensure layouts and UI elements render correctly
* **Interact with buttons and controls** to confirm responsiveness
* **Navigate between screens** to validate flow and user journeys
* Ensure the overall experience is **responsive and aligned with the original design**

<Frame>
  <img alt="Image" />
</Frame>

### Need Help?

If the generated result does not match expectations, a few quick checks can get you back on track:

* Ensure your **Figma file is accessible** (e.g., *“Anyone with the link can view”*)
* Verify your design structure if screens are missing
* Check for unsupported components or large file sizes

If the issue persists, reach out to the **Symplr Support Team** for assistance.

💡 Sharing screenshots, error messages, or configuration details helps us resolve issues faster.

These workflows help validate application behavior, layouts, and user flows before deployment.

## Next Steps

Continue building your application:

* Explore **Blueprint View**
* Configure **Workflows & APIs**
* Build and test your application


# Code Generation Settings
Source: https://docs.symplr.io/code-generation-settings



Developer Tools allow you to configure additional capabilities before generating and downloading application code from Symplr.

These capabilities support testing, security-related protections, code export, and continued development workflows.

## Before You Begin

Before using Code Generation Settings, ensure:

* The project has been created or opened successfully
* Application structure is ready in Blueprint View
* You have access to Developer Tools
* Application is ready for code generation

## Open Developer Tools

Access code generation features through the **Developer Tools** menu.

From the top-right corner of the Blueprint View, click the **Developer Tools** dropdown icon.

<Frame>
  <img alt="Image" />
</Frame>

The Developer Tools menu provides access to code generation, testing, security, and code export features.

## Configure Code Generation Options

Use Developer Tools to configure testing resources, security-related protections, code export options, and GitHub integration before generating the application package.

<Frame>
  <img alt="Developer Tools" />
</Frame>

Within Developer Tools, the following capabilities are available:

* **Generate Test Cases** — Includes generated test resources within the exported application package
* **Add Security Features** — Includes additional security-related protections during application generation
* **Download Code** — Generates and exports the application source code package
* **Connect GitHub** — Connects the project to GitHub for version control and collaboration workflows

## Generate and Download Code

After selecting the required generation options, proceed with downloading the application code package using the **Download** button available within Developer Tools.

Symplr generates the source package using the selected configuration options and prepares it for delivery.

The generated code package is delivered to your registered email address, allowing continued local development and customization.

For additional details about downloading generated application packages, see [Download Code](https://docs.101studio.co/download-code).

## Next Steps

After downloading the code package, you can continue by validating generated test resources, running the application locally, integrating external services, configuring authentication, or extending application functionality and workflows.


# Download Application Definition
Source: https://docs.symplr.io/download-application-definition



Download the Application Definition file to access the structural representation of your application in JSON format.

The downloaded file contains the application structure and configuration used during application generation.

## Before You Begin

Before downloading the Application Definition file, ensure:

* Application structure is available in Blueprint View
* The project is ready for export

## Download the Application Definition

Open Blueprint View, then click **Download App Definition** to export the application structure as a JSON file.

<Frame>
  <img alt="Image" />
</Frame>

Symplr generates and downloads the Application Definition file in JSON format.

Once the download completes successfully, Symplr displays a download confirmation message.

<Frame>
  <img alt="Image" />
</Frame>

## Access the Downloaded File

After the download completes, the file becomes available in your local downloads directory.

<Frame>
  <img alt="Image" />
</Frame>

The downloaded file is provided in `.json` format and typically includes the application name in the file name.

## Application Definition Contents

The downloaded Application Definition file contains the application structure and configuration in JSON format.

This includes:

* Screens and navigation
* Widgets and widget properties
* Workflows and application logic
* Application-level settings and configurations

## Next Steps

After downloading the Application Definition file, you can continue by generating application code, extending workflows, configuring integrations, or continuing local development and integration workflows.


# Download Code
Source: https://docs.symplr.io/download-code



Symplr allows you to generate and download the application source package for continued development, testing, customization, and deployment workflows outside the platform.

The generated package contains the application source files based on the screens, workflows, widgets, and configurations defined within your project.

## Before You Begin

Before downloading application code, ensure:

* Application structure is finalized in Blueprint View
* Required generation options are configured in Developer Tools
* The application is ready for code generation

For additional configuration options, see [Code Generation Settings](https://docs.101studio.co/code-generation-settings).

## Generate the Code Package

Open the **Developer Tools** menu from the top-right corner of the Blueprint View and click **Download Code**.

<Frame>
  <img alt="1 Optional Developer Tools Access Screenshot" />
</Frame>

Symplr begins generating the application source package using the current project structure and selected generation settings.

<Frame>
  <img alt="3 Download In Progress Confirmation" />
</Frame>

Once the generation process starts successfully, Symplr displays a confirmation message confirming that the package is being prepared.

## Receive the Generated Package

After the generation process completes successfully, Symplr delivers the generated application package to your registered email address.

The email includes a **Download Code** button that allows the compressed source package to be downloaded.

<Frame>
  <img alt="4 Email Content" />
</Frame>

## Download the Package

From the email notification, click **Download code** to download the generated package to your local machine.

<Frame>
  <img alt="5 Downloaded Code" />
</Frame>

Once downloaded, the package can be extracted locally for continued development, testing, customization, and deployment workflows.

## Next Steps

After downloading the generated application package, continue by setting up local development environments, extending application functionality, integrating external services, configuring deployment workflows, or preparing the application for external environments.


# FAQ
Source: https://docs.symplr.io/frequently-asked-questions



Find answers to commonly encountered questions and issues when using Symplr. Use this page to quickly troubleshoot problems and find guidance before contacting support.

## Quick Start

<AccordionGroup>
  <Accordion title="What is Symplr used for?">
    Symplr is an AI-powered no-code platform that allows users to generate mobile and web applications using Figma designs, AI prompts, and reusable templates.
  </Accordion>

  <Accordion title="Do I need coding experience to use Symplr?">
    No. Symplr is designed for users without coding experience. The platform automatically generates application screens, navigation, and structure based on your input.
  </Accordion>

  <Accordion title="What type of applications can I build with Symplr?">
    Symplr allows you to generate mobile and web applications based on UI designs or AI prompts, including multi-screen apps with navigation and interactive components.
  </Accordion>

  <Accordion title="Is there a limit to the number of screens I can generate?">
    No. The number of screens depends on the complexity of your design or prompt. Larger designs may take longer to process.
  </Accordion>

  <Accordion title="Can I search for a project in Symplr?">
    Yes, Symplr allows you to quickly search for your projects using the search functionality available on the Home page.

    **Steps:**

    1. Navigate to the **Home** page after logging into the application
    2. Locate the **search bar** at the top of the **“Your Apps”** section
    3. Enter the name of the project you want to find
    4. Review the filtered results displayed below
    5. Click on the project to open it.

    Using the search feature helps you quickly locate specific projects, especially when you have multiple applications.
  </Accordion>

  <Accordion title="Can I delete a project?">
    Yes, you can delete a project directly from the **Home** page in Symplr.

    **Steps:**

    1. Navigate to the **Home** page after logging into the application
    2. Locate the project you want to delete in the **“Your Apps”** section
    3. Click on the **three-dot menu (⋮)** on the project card
    4. Select the **“Delete”** option from the menu
    5. Confirm the deletion if prompted.

    Once deleted, the project will be permanently removed from your workspace.
  </Accordion>
</AccordionGroup>

## Figma & AI Generation

<AccordionGroup>
  <Accordion title="How can I generate an application in Symplr?">
    You can generate an application in Symplr using either a Figma design or AI prompts, depending on your preference.

    * **Import a Figma File URL** - Provide a Figma file link to automatically convert your design into application screens and navigation.
    * **Use AI Prompts** - Describe your application using natural language prompts, and Symplr will generate the screens and structure based on your input.
    * **Use Templates** - Select from pre-built templates to quickly create an application, then customize it to match your requirements.

    All three approaches enable you to generate a fully functional application in minutes—giving you the flexibility to start from a design, an idea, or a ready-made foundation.
  </Accordion>

  <Accordion title="What happens after I import a Figma file or use AI prompts?">
    Symplr generates a **Blueprint View** that displays all screens, their structure, and navigation flow—allowing you to review and validate your application before proceeding further.
  </Accordion>

  <Accordion title="Can I update my design after importing it?">
    Yes. You can modify your Figma file and re-import it to regenerate an updated **Blueprint View**. See [Importing Figma Files](https://docs.101studio.co/untitled-page#importing-figma-files-into-symplr) for step-by-step instructions.
  </Accordion>

  <Accordion title="Can I modify my application after generating it using AI prompts?">
    You can modify your application after generating it using AI prompts.

    * Update your AI prompt and regenerate the application to reflect design or structural changes
    * Edit screens, navigation, and flows directly in the **Blueprint View**
    * Add new screens or update existing ones based on your requirements

    This flexibility allows you to iteratively refine your application without starting from scratch.
  </Accordion>

  <Accordion title="Which method should I use — Figma import or AI prompt?">
    The best method depends on whether you already have a design or want to create an application from scratch.

    * **Use Figma import** If you already have a Figma design, this option allows you to convert your existing UI screens into a functional application.
    * **Use AI prompts** If you do not have a design, you can describe your application using prompts, and Symplr will generate the screens and structure for you.
  </Accordion>

  <Accordion title="What happens if my Figma design is complex?">
    Complex designs may take longer to process, and some components may require adjustments to ensure accurate screen generation.
  </Accordion>
</AccordionGroup>

## Screens, Navigation & Workflows

<AccordionGroup>
  <Accordion title="What is the Blueprint View?">
    The **Blueprint View** is a visual representation of your application, showing all screens and their navigation connections.
  </Accordion>

  <Accordion title="Can I view individual screens in detail?">
    Yes, Symplr allows you to view and inspect each screen individually after the import process.

    **Steps:**

    1. Navigate to the **Blueprint View** after importing your design
    2. Click on the **Pages** tab from the main interface
    3. Locate the **Screens** panel, which lists all available screens
    4. Select a screen to view it in detail in the main display area
  </Accordion>

  <Accordion title="Can I edit screens directly in Symplr?">
    Yes. You can open individual screens in Symplr and make adjustments directly within the platform.

    **Steps:**

    1. Navigate to the **Blueprint View** after importing your design
    2. Click on the **Pages** tab from the main interface
    3. Locate the **Screens** panel, which lists all available screens
    4. Select the screen you want to edit
    5. Make the required modifications

    For more significant design changes, you can update your Figma file or AI prompt and regenerate the application to reflect those updates.
  </Accordion>

  <Accordion title="How is navigation between screens created?">
    Navigation is automatically generated based on the structure and relationships defined in your Figma design or AI prompt.

    You can also manually add or update navigation between screens directly from the **Blueprint View**, giving you full control over the application flow.
  </Accordion>

  <Accordion title="What should I do if navigation is incorrect?">
    If the navigation between screens is incorrect, you can update it directly from the **Blueprint View** or modify your source and regenerate the application.

    **Option 1: Update navigation in the Blueprint View**

    1. Navigate to the **Blueprint View** of your application
    2. Identify the screen where the navigation needs to be updated
    3. Click on the **(+) icon** on the screen card to add a new connection
    4. In the **“Add to Storyboard”** dialog, select **“Screen”**
    5. Choose the target screen from the list or create a new one
    6. Select the appropriate **event** (e.g., onPress, onLoad) to define when the navigation should trigger
    7. Save and verify the updated navigation flow

    **Option 2: Update the source and regenerate**

    If the issue is due to your design or prompt:

    * Update your **Figma file** (e.g., screen structure or navigation logic), or
    * Refine your **AI prompt** to better define the navigation flow

    After making changes:

    1. Re-import the Figma file or regenerate the application. See [Importing Figma Files](https://docs.101studio.co/untitled-page#importing-figma-files-into-symplr) for step-by-step instructions.
    2. Review the **Blueprint View** to confirm the navigation is correct
  </Accordion>

  <Accordion title="Can I add new screens to my application?">
    Yes, you can add new screens to your application directly from the **Blueprint View** and connect them to your existing flow.

    **Steps:**

    1. Navigate to the **Blueprint View** of your application
    2. Click on the **(+) icon** on the screen where you want to add a new connection
    3. In the **“Add to Storyboard”** dialog, select **“Screen”**
    4. Choose an existing screen or select **“Add Blank Screen”** to create a new one
    5. Select the appropriate **event** (e.g., onPress, onLoad) to define when the screen should be triggered
    6. Save and verify the updated flow.

    This allows you to extend your application by adding new screens and connecting them seamlessly.
  </Accordion>

  <Accordion title="Can I connect APIs to my application?">
    Yes. You can connect APIs to individual screens, enabling dynamic data handling and interactions within your application.
  </Accordion>

  <Accordion title="Can I configure workflows for screens?">
    Yes, you can configure workflows for screens directly from the **Blueprint View** to define actions such as API calls and backend logic.

    **Steps:**

    1. Navigate to the **Blueprint View** of your application
    2. Click on the **(+) icon** on the screen where you want to add a workflow
    3. In the **“Add to Storyboard”** dialog, select **“Workflow”**
    4. In the **Add Workflow** screen, switch to the **“Workflow Catalogue”** tab
    5. Search for an existing workflow or choose one from the list
    6. Select the workflow and add it to your screen.

    Once added, the workflow will be connected to the screen and can be used to handle actions such as API calls and data processing.
  </Accordion>

  <Accordion title="Can I manage APIs and workflows for each screen separately?">
    Yes. Symplr allows you to configure APIs and workflows at the screen level, giving you flexibility to manage functionality for each screen independently.
  </Accordion>

  <Accordion title="What do the rectangles in Blueprint View represent?">
    Each rectangle within Blueprint View represents an individual application screen.

    Screens are connected using navigation paths that represent how users move through the application during runtime.
  </Accordion>

  <Accordion title="What do the navigation connectors mean?">
    Navigation connectors represent the flow between screens and interactions within the application.

    Connector labels such as `onPress` help identify the interaction or action that triggers the navigation flow between connected screens.
  </Accordion>

  <Accordion title="Can I duplicate screens in Blueprint View?">
    Yes. Screen management options are available from the three-dot menu on each screen card.

    Available actions include:

    * Rename
    * Duplicate
    * Delete
      These options help organize and maintain the application structure within Blueprint View.
  </Accordion>

  <Accordion title="What are Decisions in Blueprint View?">
    Decisions are used to create conditional or branching navigation paths within the application flow.

    They help define multiple outcomes based on user actions, validations, or application conditions.
  </Accordion>

  <Accordion title="What are User Journeys in Blueprint View?">
    User Journeys represent reusable interaction flows and connected application experiences within the blueprint structure.

    They help organize larger navigation patterns and reusable user interaction sequences across the application.
  </Accordion>

  <Accordion title="Can I rename screens in Blueprint View?">
    Yes. Screen names can be updated directly from the three-dot menu available on each screen card within Blueprint View.

    Renaming screens helps improve organization and readability within larger application structures.
  </Accordion>

  <Accordion title="Can I delete screens from Blueprint View?">
    Yes. Screens can be removed from the application structure using the **Delete** option available from the three-dot menu on the screen card.

    Deleting unused screens helps maintain a cleaner and more organized application flow.
  </Accordion>
</AccordionGroup>

## Build, Run & Test

<AccordionGroup>
  <Accordion title="Can I build and run the application within Symplr?">
    Yes, you can build and run your application directly within Symplr without needing a local setup.

    **Steps:**

    1. Navigate to the **Blueprint View** of your application
    2. Click on the **Build & Run App** icon in the top-right corner
    3. In the panel, click **Build** under **Build & Run New App** to start the build process
    4. Wait for the build to complete

    Once the build is successful, the application will run within the Symplr environment.

    You can also use the **Load** option under **Load Latest App** to quickly run the most recent build.
  </Accordion>

  <Accordion title="Can I run the application on my mobile device?">
    Yes, you can run your application on a mobile device using the **Expo Go** (a mobile app used to run your application).

    **Steps:**

    1. Navigate to the **Blueprint View** of your application
    2. Click on the **“Run App on Your Device”** icon in the top-right corner
    3. A **QR code** will be generated for your application
    4. Install the **Expo Go** on your mobile device (if not already installed)
    5. Open Expo Go and scan the QR code
    6. The application will load and run on your device. This allows you to test your application on a real device and verify its behavior before deployment.
  </Accordion>

  <Accordion title="What happens if the build fails?">
    An error message will be displayed indicating the cause of the failure. Build failures may occur due to configuration issues or unsupported elements. Review your setup and try rebuilding the application.
  </Accordion>

  <Accordion title="Can I download the generated code?">
    Yes, Symplr allows you to download the generated application code for use in your local development environment.

    **Steps:**

    1. Navigate to the **Blueprint View** of your application
    2. Click on **Developer Tools** icon in the top-right corner
    3. Enable the **“Generate Test Cases”** toggle (optional, if you want to include automated tests)
    4. Locate the **“Download Code”** section in the panel
    5. Click **“Download”** to request the generated code
    6. The generated code will be sent to your registered email address
    7. Open the email and download the code package. Once downloaded, you can extract the files and run the application locally using your preferred development setup.
  </Accordion>

  <Accordion title="Where do I receive the generated code package?">
    After the code generation process completes successfully, Symplr delivers the generated application package to your registered email address.

    The email includes a **Download Code** button used to download the compressed source package to your local machine.
  </Accordion>

  <Accordion title="What is included in the generated code package?">
    The generated application package contains the application source files based on the configured screens, workflows, widgets, navigation, and application settings defined within the project.

    Depending on the selected generation options, the package may also include:

    * Generated test resources
    * Security-related configurations
    * Workflow implementations
    * Application assets and configurations
  </Accordion>

  <Accordion title="Does Symplr support automated testing?">
    Yes. Symplr can generate automated test cases for your application, allowing you to validate functionality and ensure the application works as expected.
  </Accordion>

  <Accordion title="How can I test my application?">
    You can test your application in Symplr using multiple methods, depending on your testing needs.

    * **Run within Symplr** - Build and run the application directly in the platform to quickly verify screens, navigation, and functionality.
    * **Run on a mobile device** - Use the **Expo Go** to scan the QR code and test the application on a real device.
    * **Run locally using downloaded code** - Download the generated code, run it in an emulator, and execute automated test cases for more advanced testing. Choose the method that best fits your testing scenario—from quick validation to full testing with automation.
  </Accordion>

  <Accordion title="Can I modify the downloaded code?">
    Yes. The generated code can be edited and customized in your local development environment.
  </Accordion>

  <Accordion title="What is included in the downloaded code package?">
    The downloaded package includes the complete application source code along with generated test cases, allowing you to run, modify, and extend the application in your local development environment.
  </Accordion>

  <Accordion title="Can I run the application without downloading the code?">
    Yes. You can run the application directly within Symplr or on your device using Expo Go.

    **Options:**

    * **Run within Symplr** - Build and run your application directly inside the platform to quickly test functionality and user flows.
    * **Run on your device using Expo Go** - Launch the application on your mobile device by scanning the QR code using the **Expo Go**.

    These options allow you to validate your application quickly before downloading or deploying the code. For step-by-step instructions, see [Build & Run the Application](https://docs.101studio.co/caffd#build-&-run-your-application-instantly).
  </Accordion>

  <Accordion title="Can I rebuild my application after making changes?">
    Yes. After updating screens, workflows, layouts, or application configurations, you can rebuild the application from the **Build & Run** menu.

    To rebuild the application:

    1. Open the **Build & Run** menu
    2. Click **Build**
    3. Wait for the updated preview to generate

    Symplr generates a new application preview using the latest project configuration.
  </Accordion>

  <Accordion title="Do I need to download the code to test my application?">
    No. Symplr allows applications to be built, previewed, and tested directly within the platform without downloading the generated source code.

    You can:

    * Preview the application in the browser
    * Validate screens and workflows
    * Test layouts and interactions
    * Run the application on a physical device using Expo Go

    Downloading the code is only required for external development or deployment workflows.
  </Accordion>
</AccordionGroup>

## Customization & Performance

<AccordionGroup>
  <Accordion title="Can I apply themes to my application?">
    Yes, Symplr allows you to apply and customize themes to control the look and feel of your application.

    **Steps:**

    1. Navigate to the **Theme** section from the left-hand menu
    2. Select **“Tokens”** or another category (e.g., Color, Typography, Shadow)
    3. View or edit existing theme values such as colors, borders, etc.
    4. Click the **“+ Add”** button to create new theme tokens if needed
    5. Choose the appropriate type (e.g., Color, Number, String, Boolean)
    6. Update the values to match your desired design. Once configured, the theme settings will be applied across your application to ensure a consistent visual style.
  </Accordion>

  <Accordion title="Can I change the theme after creating the project?">
    Yes. You can update the theme at any time, and the changes will be applied across your application.
  </Accordion>

  <Accordion title="How long does it take to generate an application?">
    It typically takes a few minutes, depending on the complexity of the design, number of screens, and application structure.
  </Accordion>

  <Accordion title="Does Symplr support large or complex projects?">
    Yes, but complex designs may require additional time and proper structuring for best results.
  </Accordion>

  <Accordion title="Can I customize application themes and styles?">
    Yes. Symplr allows application-wide themes and reusable design settings to be configured from the **Theme** section.

    You can customize:

    * Colors
    * Typography
    * Spacing
    * Borders
    * Radius values
    * Shadow settings
    * Reusable design tokens

    These settings help maintain visual consistency across the application.
  </Accordion>
</AccordionGroup>

## Account & Projects

<AccordionGroup>
  <Accordion title="Do I need to log in to use Symplr?">
    Yes. A valid Symplr account is required to import designs and generate applications.
  </Accordion>

  <Accordion title="Can I access my projects later?">
    Yes. Your projects are saved and can be accessed from your Symplr dashboard.

    **Steps:**

    1. Navigate to the **Home** page after logging into the application
    2. Locate the **“Your Apps”** section, where all your created projects are listed
    3. Browse through the list to find your project
    4. Click on the project name or the **Open** button to continue working on it. You can also use the **search bar** to quickly find a specific project by entering its name.
  </Accordion>

  <Accordion title="Can I share my project with other users?">
    Yes. Symplr allows you to share projects directly from the **Blueprint View** for collaborative editing and review.

    **Steps:**

    1. Open the project in **Blueprint View**
    2. Click the **Share** button in the top-right corner
    3. Enter the recipient’s email address
    4. Click **Invite**

    The invited user will receive an email invitation with access to the shared project.
  </Accordion>

  <Accordion title="What happens after I share a project?">
    After a project is shared, the invited user receives an email invitation containing access to the project.

    Once the invitation is accepted and the user signs in to Symplr, the shared project opens directly in **Blueprint View** for continued collaboration and application development.
  </Accordion>

  <Accordion title="Why can’t the invited user see the shared project?">
    If the shared project is not visible after accepting the invitation:

    * Verify the correct email account was used
    * Refresh the dashboard
    * Confirm the invitation was accepted successfully
    * Ask the project owner to resend the invitation if required

    Shared projects are available from the **Your Apps** section in the Symplr dashboard.
  </Accordion>

  <Accordion title="Can I reopen previously shared projects?">
    Yes. Shared projects remain available from the **Your Apps** section in the Symplr dashboard.

    To reopen a shared project:

    1. Sign in to Symplr
    2. Open the dashboard
    3. Locate the shared project card
    4. Click **Open**

    The project opens directly in **Blueprint View** for continued collaboration and editing.
  </Accordion>
</AccordionGroup>

## Troubleshooting & Support

<AccordionGroup>
  <Accordion title="Why are some screens missing after import?">
    This may occur if certain parts of your Figma design are not structured in a way that Symplr can recognize as screens.

    Common reasons include:

    * Screens are not defined using **frames**
    * Frames are nested incorrectly or grouped instead of structured as screens
    * Inconsistent or unclear naming of screens
    * Screens placed outside the main page structure

    To ensure all screens are imported correctly:

    * Use **frames** to represent each screen
    * Ensure each screen is clearly named and organized
    * Avoid grouping screens inside other frames unnecessarily
    * Keep screens structured at a consistent hierarchy level

    After making these updates:

    * Update your Figma file
    * Re-import it into Symplr to regenerate the Blueprint View. See [Importing Figma Files](https://docs.101studio.co/untitled-page#importing-figma-files-into-symplr) for step-by-step instructions.
  </Accordion>

  <Accordion title="Why is my application not running on my device?">
    If your application is not running on your mobile device, it is usually due to connectivity or setup issues.

    **Ensure the following:**

    * Your **mobile device and system are connected to the same network**
    * The **Expo Go** is installed and up to date
    * The **QR code is scanned correctly** using Expo Go
    * The application has been successfully built before attempting to run it. If the issue persists, try regenerating the QR code and scanning it again.
  </Accordion>

  <Accordion title="Why does my design look different in Symplr?">
    Differences may occur if certain design elements in your Figma file are not fully supported or are structured in a way that affects how they are interpreted by Symplr.

    Common reasons include:

    * Use of unsupported or complex components
    * Deeply nested groups or layers
    * Missing or inconsistent Auto Layout configurations
    * Differences in spacing, alignment, or constraints

    To improve design accuracy:

    * Structure screens using clear **frames**
    * Simplify deeply nested groups and layers
    * Use standard and reusable components where possible
  </Accordion>

  <Accordion title="Why are some components not generated correctly?">
    This may occur if the components in your Figma design are not structured in a way that can be accurately interpreted by Symplr.

    Common causes include:

    * Deeply nested layers or groups
    * Use of unsupported or complex components
    * Inconsistent or unclear structure within frames

    To improve accuracy:

    * Simplify your design by reducing deeply nested groups
    * Use **frames** to clearly define screens
    * Ensure components are properly organized and reusable
    * Avoid unsupported or overly complex elements where possible

    After making these updates:

    * Update your Figma file
    * Re-import it into Symplr to regenerate the application. See [Importing Figma Files](https://docs.101studio.co/untitled-page#importing-figma-files-into-symplr) for step-by-step instructions.
  </Accordion>

  <Accordion title="Why is my QR code not working?">
    If the QR code is not working, it is usually due to connectivity or session-related issues.

    **Ensure the following:**

    * Your **mobile device and system are connected to the same network**
    * The **Expo Go** application is installed and up to date
    * The **QR code is active and has not expired**
    * The QR code is scanned correctly using the **Expo Go**.

    **If the issue persists:**

    * Regenerate the QR code and try scanning again
    * Refresh the application in Symplr and reopen the QR code
  </Accordion>

  <Accordion title="How do I contact support?">
    You can contact the Symplr support team using the following options:

    * **Report issues directly from the application (Contact Support)** When an error occurs, click the **“Contact Support”** button displayed with the error message to submit the issue instantly.
    * **Use the Help button** Click the **Help** button within the application to start a chat for general questions or guidance.
    * **Email support** Send an email to [**support@101digital.io**](mailto:support@101digital.io) for detailed issues or when you need to share attachments. Choose the option that best fits your situation for faster assistance.
  </Accordion>

  <Accordion title="What information should I provide when contacting support?">
    To help the support team investigate and resolve your issue efficiently, include the following details:

    * Project / App Name
    * Description of the issue
    * Steps to reproduce
    * Screenshots or recordings (if applicable).

    Providing complete and accurate information helps speed up the troubleshooting process and ensures a quicker response.
  </Accordion>
</AccordionGroup>

## **Need More Help?**

If your question isn’t covered here, you can:

* Visit the **Contact Support** page
* Explore product documentation for detailed guides


# How Symplr Works
Source: https://docs.symplr.io/how-symplr-works



<Frame>
  <img alt="Image" />
</Frame>

Symplr transforms ideas, designs, and existing applications into a unified application blueprint that accelerates design, development, and delivery.

Symplr supports multiple starting points for application creation:

* A prompt or idea
* A Figma design
* An existing application

Based on the provided input, Symplr AI analyzes the application requirements and generates a structured application blueprint, including:

* Screens and navigation
* Workflows and logic
* Data structures
* Integrations and application behavior

This blueprint becomes the single source of truth for the application, enabling teams to visually refine, extend, and collaborate throughout the application lifecycle.

With AI-assisted editing and automated application generation, Symplr helps teams reduce repetitive development tasks, maintain application consistency, and accelerate delivery from concept to production.


# Manage Projects
Source: https://docs.symplr.io/manage-projects



Projects in Symplr are managed from the Projects Dashboard, where you can create, search, organize, open, and delete application projects.

## Before You Begin

Before managing projects in Symplr, ensure you have access to the workspace and the required permissions.

## Access the Projects Dashboard

After signing in to Symplr, the Projects Dashboard displays all available application projects within your workspace.

Projects are displayed as cards containing project details, recent updates, and available management actions.

<Frame>
  <img alt="1 Projects dashboard" />
</Frame>

The Projects Dashboard provides access to project creation, organization, search, and management functions.

## Create a New Project

Symplr supports multiple workflows for creating projects using different application sources.

### Create a Project from Figma

To generate a project using an existing Figma design, select the **Import from Figma** option from the project creation section.

<Frame>
  <img alt="2 Import From Figma" />
</Frame>

Symplr generates application structures and screens from the imported Figma design.

### Create a Project from a Template

To begin using a predefined application structure, select the **Create from Template** option.

<Frame>
  <img alt="3 Create From Template" />
</Frame>

Templates provide predefined application structures that can be customized and extended after project creation.

### Create a Project from an AI Prompt

To generate a project using an application description or prompt, enter the application description and click **Start Building**.

<Frame>
  <img alt="4 Start Building from AI Prompt" />
</Frame>

Symplr generates the initial application structure based on the provided prompt.

## Search Projects

To quickly locate a specific project, use the search field available above the project list.

<Frame>
  <img alt="6 Search bar" />
</Frame>

Projects are filtered based on matching project names.

## Sort Projects

Projects can be organized using the sorting options available within the dashboard.

<Frame>
  <img alt="7 Sort dropdown" />
</Frame>

Projects can be sorted by:

* Newest
* Oldest

## Open an Existing Project

To continue working on an existing application, select the required project card from the Projects Dashboard.

Opening a project loads the application in **Blueprint View**, where screens, workflows, and application configurations can continue to be edited.

<Frame>
  <img alt="8 Open project button" />
</Frame>

## Delete a Project

Project management options are available from the three-dot menu displayed on each project card.

<Frame>
  <img alt="9 Three-dot menu" />
</Frame>

To permanently remove a project, select the **Delete** option from the project menu.

Symplr then displays a confirmation dialog before removing the selected project.

<Frame>
  <img alt="10 Delete confirmation dialog" />
</Frame>

Project deletion is permanent and cannot be reversed after confirmation.

## Next Steps

After opening or creating a project, continue by configuring screens, workflows, authentication, data models, and application settings.


# React Native Software Tools & Version Compatibility
Source: https://docs.symplr.io/react-native-software-tools-and-version-compatibility



Applications generated by Symplr are built using React Native and require specific versions of supporting development tools to build and run successfully.

This page provides the approved software toolchain versions for each supported React Native release. Before building or running a generated application, ensure that the required versions of Node.js, Java, Android SDK components, Xcode, Ruby, and CocoaPods are installed.

Using unsupported tool versions may result in dependency installation failures, Android build failures, iOS build failures, simulator or emulator launch issues, and runtime compatibility issues.

## When to Use This Page

Use this page when:

* Setting up a local development environment
* Running a generated application locally
* Troubleshooting Android build failures
* Troubleshooting iOS build failures
* Verifying software compatibility requirements
* Preparing a development workstation for Symplr-generated applications

## Currently Supported React Native Versions

Symplr currently generates applications using the following React Native versions:

| React Native Version | Status                              |
| :------------------- | :---------------------------------- |
| 0.81.4               | Default for new applications        |
| 0.79.1               | Supported for existing applications |

Any other React Native version is currently outside the supported scope.

## Determine the React Native Version

To determine which React Native version your application uses:

1. Open the downloaded application package.
2. Locate the `package.json` file.
3. Find the `react-native` dependency.

Example:

```json theme={null}
{
  "react-native": "0.81.4"
}
```

Use the matching compatibility information listed below for your application's React Native version.

## Software Tool Compatibility Matrix

| Software Tool         | React Native 0.81.4 | React Native 0.79.1 | Notes                                    |
| :-------------------- | :------------------ | :------------------ | :--------------------------------------- |
| Node.js               | ≥ 22.22.2           | 20.19.5             | Use a version manager such as fnm or nvm |
| React                 | 19.1.0              | 19.0.0              | Managed by project dependencies          |
| Yarn                  | 1.22.x              | 1.22.x              | Required for dependency management       |
| JDK                   | 17                  | 17                  | Configure JAVA\_HOME                     |
| Android Studio        | Latest              | Latest              | Required for Android development         |
| Android Gradle Plugin | 8.8.x               | 8.7.x               | Defined by project configuration         |
| Compile SDK           | 36                  | 35                  | Android SDK Platform                     |
| Target SDK            | 35                  | 35                  | Android API target level                 |
| Minimum SDK           | 24                  | 24                  | Minimum supported Android version        |
| Xcode                 | 26.1.1              | 26.1.1              | Required for iOS development             |
| iOS Target            | 15.1                | 15.1                | Defined by project configuration         |
| Ruby                  | ≥ 3.2               | ≥ 3.2               | Do not use the system Ruby installation  |
| CocoaPods             | ≥ 1.15              | ≥ 1.15              | Use an approved CocoaPods version        |
| Watchman              | Latest              | Latest              | Recommended for Metro bundler            |

## Recommended Installation Methods

The following installation methods are recommended when preparing a local development environment.

| Tool           | Recommended Installation Method |
| :------------- | :------------------------------ |
| Node.js        | fnm or nvm                      |
| JDK            | Zulu OpenJDK 17                 |
| Android Studio | Android Studio                  |
| Ruby           | rbenv                           |
| CocoaPods      | Ruby Gems                       |
| Watchman       | Homebrew                        |
| Xcode          | Mac App Store                   |

## Android Development Requirements

For Android application development, ensure that:

* Android Studio is installed
* Android SDK Platform is installed for the required API level
* JDK 17 is configured correctly
* Android SDK Build Tools are available
* Android Emulator images are installed when emulator testing is required

## iOS Development Requirements

For iOS application development, ensure that:

* Xcode 26.1.1 is installed
* CocoaPods is installed
* Ruby 3.2 or later is installed
* iOS Simulator components are available
* Apple development requirements are satisfied

## Common Compatibility Issues

Using unsupported software versions may result in:

* Dependency installation failures
* Android build failures
* iOS build failures
* Android Emulator launch issues
* iOS Simulator launch issues
* CocoaPods installation failures
* Gradle synchronization failures
* Runtime compatibility issues

If build failures occur, verify that all installed tools match the versions listed in the compatibility matrix.

## Related Documentation

For additional setup and execution guidance, see:

* Download Code
* Run Application Locally
* GitHub Integration
* Code Generation Settings


# Run on Device with Expo Go
Source: https://docs.symplr.io/run-on-device-with-expo-go



Run applications directly on a physical mobile device using Expo Go to validate layouts, navigation, responsiveness, and overall application behavior.

## Before You Begin

Before running the application on a physical device, ensure the project has been built successfully in Blueprint View and Expo Go is installed on the mobile device.

## Run the Application on Your Device

Open your project in Blueprint View and ensure the latest build is complete. From the preview screen, select **Run App on Your Device**.

A QR code will be generated for mobile access.

<Frame>
  <img alt="Image" />
</Frame>

## Install Expo Go

Symplr displays a QR code together with connection instructions for the mobile device.

<Frame>
  <img alt="Image" />
</Frame>

If not already installed, download Expo Go from the device app store:

* iOS: App Store
* Android: Google Play Store

<Frame>
  <img alt="Image" />
</Frame>

<Note>
  Keep this screen open while running the application on your device. Closing the screen may stop the application from running.
</Note>

## Scan the QR Code

Open Expo Go on your mobile device and scan the QR code.

### iOS Devices

* Open the Camera or Code Scanner
* Scan the QR code displayed in Symplr
* Tap the prompt to open the application in Expo Go

<Frame>
  <img alt="Image" />
</Frame>

### Android Devices

* Open the Expo Go application
* Use the built-in QR scanner
* Scan the QR code displayed in Symplr

<Frame>
  <img alt="Image" />
</Frame>

## Launch and Validate Your Application

Once connected, the application loads directly on the mobile device and becomes available for validation and testing.

Validate layouts, navigation flows, responsiveness, and user interactions directly on the physical device.

### iOS Example

<Frame>
  <img alt="IMG 8779" />
</Frame>

### Android Example

<Frame>
  <img alt="Image" />
</Frame>

Once the application is running, validate the following areas:

* Review layouts and responsiveness
* Validate navigation flows
* Test forms, buttons, and interactions
* Verify overall usability and application behavior

## Troubleshooting

### QR Code Does Not Scan

* Ensure your mobile device camera permissions are enabled
* Make sure the QR code is fully visible on screen
* Verify that your mobile device has internet connectivity

### Application Stops Running

If the application stops unexpectedly:

* Ensure the Symplr preview session remains open
* Rebuild the application if required
* Re-scan the QR code using Expo Go

## Next Steps

After validating your application on a physical device, you can continue by extending features, downloading the generated code, running the project locally, or configuring integrations such as authentication, APIs, and external services.


# Share Projects
Source: https://docs.symplr.io/share-projects



Share Projects allows application projects to be shared with other users directly from Blueprint View for collaborative editing, review, and application development workflows.

Invited users receive an email invitation with access to the shared project. After accepting the invitation and signing in to Symplr, the shared project opens directly in Blueprint View for continued development and collaboration.

## Before You Begin

Before sharing a project in Symplr, ensure:

* The project is available in Blueprint View
* You have access to the Share option
* The recipient has a valid email address
* The project is ready for collaboration or review

## Open the Share Option

Open the required project in **Blueprint View** and click the **Share** button from the top-right corner of the workspace.

<Frame>
  <img alt="1 Share Button" />
</Frame>

The Share option allows additional users to be invited for collaborative access to the project.

## Invite Collaborators

After clicking **Share**, Symplr displays the project sharing dialog.

Enter the email address of the user you want to invite and click **Invite**.

<Frame>
  <img alt="2 Invite User" />
</Frame>

Symplr sends a project invitation to the specified email address.

Once the invitation is sent successfully, Symplr displays a confirmation notification.

<Frame>
  <img alt="3 Success Notification" />
</Frame>

The invited user then receives an email invitation with access details for the shared project.

<Frame>
  <img alt="4 Invitation Email" />
</Frame>

## Accept the Invitation

To access the shared project, the invited user must click **Accept Invitation** from the email notification.

<Frame>
  <img alt="5 Accept Invitation" />
</Frame>

The user is redirected to Symplr to complete the sign-in process.

If the invited user is accessing Symplr for the first time, onboarding screens and introductory guidance may appear before accessing the shared project workspace.

<Frame>
  <img alt="6 Logging in First Time" />
</Frame>

After completing sign-in and onboarding, Symplr redirects the user directly to the shared project in **Blueprint View**.

<Frame>
  <img alt="11 Shared Blueprint" />
</Frame>

The shared project is then available for screen editing, workflow configuration, validation, and continued application development.

## Reopen the Shared Project from the Dashboard

Shared projects are also available from the Symplr dashboard under the **Your Apps** section.

<Frame>
  <img alt="7 Dashboard Screen After Login" />
</Frame>

Scroll through the **Your Apps** section to locate the shared project card.

<Frame>
  <img alt="8 Shared Project" />
</Frame>

To reopen the shared project later, click **Open** on the project card.

<Frame>
  <img alt="9 Open Shared Project" />
</Frame>

## Troubleshooting

### Invitation Email Not Received

If the invited user does not receive the invitation email:

* Verify the email address entered during sharing
* Ask the user to check spam or junk folders
* Resend the invitation if required
* Contact Symplr Support if the issue persists

### Shared Project Not Visible

If the shared project does not appear after login:

* Refresh the dashboard
* Verify the correct email account was used
* Confirm the invitation was accepted successfully
* Ask the project owner to resend the invitation if necessary

## Next Steps

After accessing the shared project, continue by editing screens, configuring workflows, validating application behavior, generating previews, downloading application code, or collaborating with additional users.


# Themes & Customization
Source: https://docs.symplr.io/themes-and-customization



Themes & Customization allows application-wide visual styles and reusable design settings to be configured from the Theme section.

These settings help maintain consistent layouts, spacing, typography, colors, borders, and shadow styles across the application.

## Before You Begin

Before configuring themes and customization settings, ensure:

* Project is available in Blueprint View
* Application structure is configured
* You have access to Theme settings

## Open Theme Settings

From the application workspace, open the **Theme** section from the left navigation panel.

<Frame>
  <img alt="1 Open Theme Section" />
</Frame>

The Theme panel provides access to Tokens, Typography, and Shadow settings.

<Frame>
  <img alt="2 Theme Panel Overview" />
</Frame>

## Configure Theme Tokens

The **Tokens** section contains reusable visual properties used across the application.

Available token categories include:

* Border
* Color
* Component
* Radius
* Space

<Frame>
  <img alt="3 Tokens Dropdown" />
</Frame>

Each token category contains reusable values used throughout the application.

## Edit Token Configurations

Existing token values can be updated directly within the Tokens view.

<Frame>
  <img alt="4 Token Configuration" />
</Frame>

Token configurations help maintain consistent styling across application screens and components.

## Add New Tokens

To create additional token configurations, use the **Add** option available within the Theme panel.

<Frame>
  <img alt="5 Adding New Token" />
</Frame>

New tokens can be added for different value types, including colors, numeric values, text values, and boolean settings.

## Configure Typography Settings

The Typography section displays reusable text styles and formatting settings used across the application.

<Frame>
  <img alt="6 Typography Settings" />
</Frame>

Typography settings include:

* Font size
* Letter spacing
* Font color
* Font family
* Text styles and variants

These settings help maintain consistent text presentation throughout the application.

## Configure Shadow Settings

The Shadow section displays reusable shadow settings for application components and layouts.

<Frame>
  <img alt="7 Shadow Settings" />
</Frame>

## Add New Shadow Configurations

Use the configuration panel to define custom shadow styles and related visual properties.

<Frame>
  <img alt="8 Adding New Shadow" />
</Frame>

Shadow configurations can include properties such as:

* Shadow color
* Blur
* Spread
* Horizontal offset
* Vertical offset

## Next Steps

After configuring themes and customization settings, continue by editing screens, configuring workflows, validating layouts, or previewing the application using Build & Run workflows.


# What is Symplr.io
Source: https://docs.symplr.io/what-is-symplr-io



[Symplr.io](https://101studio.co/) is an **AI-powered platform** that enables a new way to bring ideas to life, where AI helps shape your vision into a working web or mobile application.

Symplr accelerates the journey from idea to application, helping you move faster, validate early, and deliver with confidence. You work in a unified environment where your application takes shape in real time. You define what to create, and Symplr translates that intent into a working application.

With Symplr, you can:

* Import Figma designs and convert them into application screens and navigation
* Generate applications using AI prompts
* Start with pre-built templates
* Build, test, and run applications directly within the platform
* Download and extend your code

At the center of the experience is the **Blueprint**, a visual representation of your application. It captures your screens, navigation, and logic, acting as a single source of truth from which your application is built. As your Blueprint evolves, your application evolves with it.

**Simple to start. Transparent to understand. Powerful to evolve.**

With Symplr, you’re not just building. You’re guiding your application as it comes to life.

**Explore the documentation to learn how to turn your ideas or designs into a fully functional application.**