Blueprint View

Documentation Index

Fetch the complete documentation index at: https://docs.symplr.io/llms.txt

Use this file to discover all available pages before exploring further.

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. 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. 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. Symplr opens the selected screen within the screen editor workspace. 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. Symplr displays the Add to Storyboard dialog. 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. 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. 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. 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. 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. Clicking the menu displays available screen management actions. 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. 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. 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.