Layout Customization - HyperPlanner Docs

Flexible Panel System

HyperPlanner's layout system gives you complete control over your workspace. Every panel in your view is fully draggable and resizable, allowing you to create the perfect arrangement for your workflow.

Pro Tip

Hold Shift while dragging to snap panels to a grid, or hold Alt to resize proportionally from the center.

How It Works

Drag to Reposition: Click and drag any panel header to move it anywhere in your workspace
Resize from Edges: Hover over panel edges to reveal resize handles. Drag to adjust width and height
Snap to Grid: Panels automatically snap to a flexible grid system for clean alignment
Collapse & Expand: Double-click a panel header to collapse it to a minimal state
Stack Panels: Drag panels on top of each other to create tabbed groups

// Panel configuration is automatically saved
{
  "layout": "custom",
  "panels": [
    { "id": "calendar", "x": 0, "y": 0, "width": 2, "height": 2 },
    { "id": "kanban", "x": 2, "y": 0, "width": 1, "height": 1 },
    { "id": "focus", "x": 2, "y": 1, "width": 1, "height": 1 }
  ]
}
                

Available Views

HyperPlanner offers four primary view types, each optimized for different planning styles and workflows. Mix and match them to create your ideal workspace.

📅

Calendar View

Time-block your day with day, week, or month perspectives. Perfect for scheduling and time management.

📋

Kanban Lanes

Visual task flow with Inbox, In Progress, Done, and Archived columns. Drag tasks between stages.

🎯

Focus Duo

Split view showing today's priorities alongside your backlog. Stay focused while keeping context.

📊

Hero Summary

Dashboard with stats, focus load indicators, and next actions at a glance.

Calendar View

The Calendar View provides a traditional time-based interface with three display modes:

Day View: Detailed hourly breakdown of a single day. Ideal for time-blocking and scheduling focused work sessions
Week View: See your entire week at a glance. Great for planning ahead and identifying busy periods
Month View: Bird's-eye view of the month. Perfect for long-term planning and deadline tracking

Drag & Drop

Drag tasks from any view directly onto the calendar to schedule them. Events automatically inherit the time slot where you drop them.

Kanban Lanes

The Kanban view organizes tasks into four default lanes that represent your workflow stages:

Lane	Purpose	Keyboard Shortcut
Inbox	New tasks and ideas awaiting triage	1
In Progress	Tasks you're actively working on	2
Done	Completed tasks for review	3
Archived	Historical tasks, searchable but hidden by default	4

Focus Duo

Focus Duo is a split-screen view designed for deep work. It pairs two complementary panels:

Left Panel: Today's tasks and scheduled events, sorted by priority
Right Panel: Your backlog or a filtered view of upcoming work

This layout keeps you focused on immediate priorities while maintaining visibility into what's coming next.

Hero Summary

The Hero Summary is your productivity dashboard, displaying key metrics and insights:

Focus Load: Visual indicator of how packed your day is
Completion Rate: Tasks done vs. planned this week
Next Actions: Top 3 priority items requiring attention
Overdue Count: Tasks past their due date
Upcoming Events: Next 24 hours at a glance

Density Controls

Control how much information is displayed in your calendar view by adjusting time slot density. Choose the granularity that matches your planning style.

60

60-Minute Slots

Spacious view for high-level planning. Best for meetings and long focus blocks.

30

30-Minute Slots

Balanced density for most workflows. The default setting for HyperPlanner.

15

15-Minute Slots

Maximum granularity for detailed time-blocking and Pomodoro-style work.

Changing Density

Access density controls from the calendar toolbar or use keyboard shortcuts:

D 1 - Switch to 60-minute slots
D 2 - Switch to 30-minute slots
D 3 - Switch to 15-minute slots

Performance Note

15-minute density displays more elements on screen. On older devices, consider using 30 or 60-minute slots for smoother scrolling.

Component Variants

Every task and event card in HyperPlanner has four display modes. Switch between them to balance information density with visual clarity.

—

Minimal

Title only. Maximum density for scanning large lists quickly.

▪

Compact

Title + key metadata (due date, priority). The default view mode.

▣

Detailed

Full description, tags, and subtask progress. Great for complex tasks.

▭

Wide

Expanded horizontal layout for focus work and note-taking.

Setting Component Variants

Component variants can be set at three levels:

Global Default: Set in Settings to apply across all views
Per-View: Override the default for specific panels (e.g., Minimal in Kanban, Detailed in Focus Duo)
Per-Item: Right-click any task to set its individual display mode

// Component variant configuration
{
  "componentVariants": {
    "global": "compact",
    "views": {
      "kanban": "minimal",
      "calendar": "compact",
      "focusDuo": "detailed"
    }
  }
}
                

Device Presets

HyperPlanner remembers your preferred layout for each device. Your desktop can have a multi-panel power user setup while your tablet uses a simplified focus view.

How Device Detection Works

HyperPlanner automatically detects your device type based on screen size and capabilities:

Desktop: Screens wider than 1200px with mouse/trackpad
Tablet: Screens between 768px and 1200px, touch-capable
Mobile: Screens under 768px, primarily touch input

Managing Presets

Action	How To
Save current layout as preset	Settings → Layout → Save as Device Preset
Switch between presets	Cmd/Ctrl + Shift + L
Reset to default layout	Settings → Layout → Reset to Default
Copy layout to another device	Settings → Layout → Export/Import

Sync Across Devices

With a HyperPlanner account, your device presets sync automatically. Set up once on each device and your preferences follow you everywhere.

Design Tokens

Fine-tune the visual feel of your workspace with design tokens. These settings affect spacing, borders, and visual depth across all components.

Density Token

Controls overall spacing and padding throughout the interface:

Compact: Minimal padding, tight spacing. Fits more on screen
Comfortable: Balanced spacing for all-day use. The default setting
Spacious: Generous padding for a relaxed, airy feel

Radius Token

Defines the corner roundness of cards, buttons, and panels:

Sharp: 0-4px radius. Clean, professional aesthetic
Rounded: 8-12px radius. Friendly and modern. Default setting
Pill: 16-24px radius. Soft, playful appearance

Shadows Token

Controls the depth and elevation of interface elements:

Flat: No shadows. Clean, minimalist look
Subtle: Light shadows for gentle depth. Default setting
Elevated: Pronounced shadows for a layered, floating feel

// Design token configuration
{
  "designTokens": {
    "density": "comfortable",  // compact | comfortable | spacious
    "radius": "rounded",       // sharp | rounded | pill
    "shadows": "subtle"        // flat | subtle | elevated
  }
}
                

Theme Lab Integration

Design tokens work alongside Theme Lab color settings. Combine them to create a fully personalized visual experience that matches your aesthetic preferences.