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:
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.
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.
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.
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.
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.
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.