Designer

The Designer is a visual tool that allows you to reorganize your status page layout using drag & drop. Easily change the order of categories and monitors without manually editing sort IDs.

Designer Interface

Overview

The Designer provides an intuitive interface to:

  • Reorder Categories - Drag categories up or down to change their display order
  • Reorder Monitors - Move monitors within a category
  • Move Monitors Between Categories - Drag monitors from one category to another
  • Search & Filter - Quickly find specific monitors

All changes are saved automatically in real-time.

How to Use

Access the Designer

Navigate to:

Settings → Designer

Reorder Categories

  1. Hover over a category header
  2. Click and drag the category to the desired position
  3. Release to save - changes apply immediately

Reorder Monitors

  1. Hover over a monitor within a category
  2. Click and drag the monitor up or down
  3. Release to save the new position

Move Monitors Between Categories

  1. Click and drag a monitor
  2. Drop it into a different category
  3. The monitor will move to the new category and appear at the dropped position

Search for Monitors

Use the search field in the sidebar to filter monitors by name. This is helpful when working with many monitors.

Use Cases

Prioritize Important Services

Place critical services at the top of your status page so visitors see them first.

Example:

  • Category: "Core Services" → Position 1
    • API Gateway → Position 1
    • Authentication → Position 2
    • Database → Position 3

Logical Grouping

Organize related services together for better clarity.

Example:

  • Category: "Infrastructure" → Contains all backend services
  • Category: "APIs" → Contains all API endpoints
  • Category: "Frontend" → Contains all user-facing services

Seasonal Adjustments

Quickly adapt your status page layout based on current priorities or events.

Visual Indicators

Category Visibility

  • ✓ Green Checkmark - Category is visible on status page
  • ✗ Red Cross - Category is hidden from status page

Empty Categories

When a category has no monitors, you'll see:

"Category is empty - Drag monitors here"

Drag States

  • Hover - Move icon (≡) appears
  • Dragging - Item becomes semi-transparent
  • Drop Zone - Highlighted area shows where item will be placed

Permissions

Access to the Designer requires the designer.use permission.

Default Access:

  • ✅ Super Admin
  • ✅ Team
  • ❌ Member (read-only)

See Permissions for managing access control.

Best Practices

Plan Your Layout

Before reorganizing, consider:

  1. What services are most critical to your users?
  2. How should services be grouped logically?
  3. What order makes the most sense for your audience?

Use Descriptive Category Names

Clear category names help users quickly find what they're looking for.

Good:

  • "Payment Processing"
  • "Core Infrastructure"
  • "Third-Party Integrations"

Avoid:

  • "Misc"
  • "Other Services"
  • "Category 1"

Regular Reviews

Review and adjust your status page layout periodically:

  • After adding new services
  • When deprecating old services
  • Based on user feedback

Troubleshooting

Drag & Drop Not Working

  1. Ensure you have designer.use permission
  2. Refresh the page
  3. Clear browser cache

Changes Not Saving

  1. Check that Demo Mode is not active
  2. Verify your permissions
  3. Check browser console for errors

Monitor Disappeared

If a monitor seems to have disappeared after moving:

  1. Use the search function to locate it
  2. Check if it was moved to a hidden category
  3. Scroll through all categories - it may have moved unexpectedly

Additional Resources