---
title: "Web UI Guide"
description: "Complete guide to using the TraceRTM Web User Interface"
keywords: [web ui, browser, interface, gui, user interface]
---

# Web UI Guide

The TraceRTM Web UI provides a modern, browser-based interface for managing your traceability projects.

## Accessing the Web UI

### Cloud Instance

Access the hosted Web UI at:

```
https://app.tracertm.dev
```

### Self-Hosted Instance

Access your self-hosted instance at:

```
https://your-domain.com
```

## Getting Started

### 1. Sign In

1. Navigate to the Web UI
2. Click **Sign In**
3. Enter your credentials or use OAuth

### 2. Select Project

1. Click **Projects** in the sidebar
2. Select your project from the list
3. Or create a new project

### 3. Navigate the Interface

- **Sidebar**: Navigation menu
- **Main Area**: Content view
- **Toolbar**: Actions and filters

## Key Features

### Project Dashboard

View project overview:
- Item counts by view
- Recent activity
- Status distribution
- Quick actions

### Item Management

- **Create Items**: Click **+ New Item**
- **Edit Items**: Click on any item
- **Filter Items**: Use filters in toolbar
- **Search Items**: Use search bar

### Traceability Matrix

Visual matrix showing:
- Requirements vs Test Cases
- Link status
- Coverage indicators
- Quick link creation

### Graph View

Interactive graph showing:
- Item relationships
- Link types
- Dependency chains
- Impact visualization

## Navigation

### Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| `Ctrl/Cmd + K` | Command palette |
| `Ctrl/Cmd + N` | New item |
| `Ctrl/Cmd + F` | Search |
| `Esc` | Close dialog |

### Views

Switch between views:
- **Requirements**: System requirements
- **Test Cases**: Test plans and cases
- **Design**: Design documents
- **Code**: Code artifacts
- **Documentation**: Documentation

## Creating Items

1. Click **+ New Item** button
2. Fill in item details:
   - Title (required)
   - View (required)
   - Description
   - Status
   - Metadata
3. Click **Create**

## Creating Links

### Method 1: Drag and Drop

1. Select source item
2. Drag to target item
3. Choose link type
4. Confirm

### Method 2: Link Button

1. Select source item
2. Click **Create Link**
3. Select target item
4. Choose link type
5. Click **Create**

## Filtering and Search

### Filter Bar

Use filters to narrow results:
- **Status**: Active, Draft, Review, etc.
- **View**: Requirements, Tests, etc.
- **Metadata**: Custom fields

### Search

Use search bar for:
- Full-text search
- Item ID search
- Quick navigation

## Best Practices

### 1. Use Keyboard Shortcuts

Learn keyboard shortcuts for faster navigation.

### 2. Organize with Metadata

Add metadata to items for better organization:
- Priority
- Component
- Owner
- Tags

### 3. Use Views Effectively

Switch views to focus on specific item types.

## Related Documentation

- [TUI Guide](./tui-guide) - Terminal interface
- [CLI Guide](./cli-guide) - Command-line interface
- [Desktop Guide](./desktop) - Desktop application
