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

# Leap Interface

> Navigate the Leap interface and understand the Code, Preview, Architecture, Infrastructure, and Service Catalog tabs

When you generate an app with Leap, you get a complete development interface with multiple views of your system. Here's how to navigate and understand what you're looking at.

## The main interface tabs

Your app opens with several tabs that give you different views of your system:

<Tabs>
  <Tab title="Code">
    **Your complete codebase structure**

    * File explorer showing your services and components
    * Real-time code editing with syntax highlighting
    * Git change tracking and diff viewing
    * Direct integration with your GitHub repository

    The file structure follows Encore's service-based architecture where each folder represents a microservice.
  </Tab>

  <Tab title="Preview">
    **Live running application**

    * Your frontend connected to real backend APIs
    * Live data from external services
    * Real user interactions and functionality
    * Instant updates when you make changes

    This isn't a mock—it's your actual app running in a preview environment.
  </Tab>

  <Tab title="Architecture">
    **System visualization**

    * Live diagrams showing how your services connect
    * Database relationships and schemas
    * External API integrations
    * Auto-updating as your system evolves

    Think of this as your system's blueprint that stays current with your code.
  </Tab>

  <Tab title="Infrastructure">
    **Cloud resources and configuration**

    * Secrets management for API keys
    * Database and compute provisioning
    * Environment configurations
    * Deployment status and health

    This is where you manage the infrastructure that powers your app.
  </Tab>

  <Tab title="Service Catalog">
    **API documentation and testing**

    * Interactive endpoint documentation
    * Test your APIs with real data
    * Request/response schemas
    * Authentication requirements

    Your APIs are automatically documented and ready to test.
  </Tab>
</Tabs>