Tabbed Widgets

What Are Tabbed Widgets?

Tabbed widgets let you stack multiple widgets in one space with tabs to switch between them. Perfect for saving dashboard space!

Quick Examples

Example 1: Monitoring Hub (Docker + Home Lab)

Stack your monitoring widgets together:

{
  "id": "monitoring",
  "type": "Tabbed",
  "config": {
    "tabs": [
      {
        "id": "docker",
        "label": "Docker",
        "widgetType": "Docker"
      },
      {
        "id": "homelab",
        "label": "Services",
        "widgetType": "Home Lab"
      }
    ]
  },
  "position": { "x": 0, "y": 0, "w": 6, "h": 4 },
  "enabled": true
}

Example 2: Info Center (Time + Weather)

Quick glance information in one spot:

{
  "id": "info",
  "type": "Tabbed",
  "config": {
    "tabs": [
      {
        "id": "time",
        "label": "Clock",
        "widgetType": "Time"
      },
      {
        "id": "weather",
        "label": "Weather",
        "widgetType": "Weather"
      }
    ]
  },
  "position": { "x": 0, "y": 0, "w": 4, "h": 3 },
  "enabled": true
}

Example 3: Content Hub (Jellyfin + Reddit)

Entertainment and news together:

{
  "id": "content",
  "type": "Tabbed",
  "config": {
    "tabs": [
      {
        "id": "jellyfin",
        "label": "Now Playing",
        "widgetType": "Jellyfin"
      },
      {
        "id": "reddit",
        "label": "Reddit",
        "widgetType": "Reddit",
        "widgetConfig": {
          "subreddits": ["movies", "television", "entertainment"]
        }
      }
    ]
  },
  "position": { "x": 6, "y": 0, "w": 6, "h": 4 },
  "enabled": true
}

How to Add Tabbed Widgets

Method 1: Using SQLite (Recommended)

1. Access your database:

cd /path/to/homepage
sqlite3 ./data/homepage.db

2. Insert a tabbed widget:

INSERT INTO widgets (id, type, config, position, enabled) VALUES (
  'monitoring-tabs',
  'Tabbed',
  '{
    "tabs": [
      {"id": "docker", "label": "Docker", "widgetType": "Docker"},
      {"id": "homelab", "label": "Services", "widgetType": "Home Lab"}
    ]
  }',
  '{"x":0,"y":0,"w":6,"h":4}',
  1
);

3. Exit and restart:

.exit

docker-compose restart

Method 2: Using API

curl -X PUT http://localhost:3020/api/widgets/monitoring-tabs \
  -H "Content-Type: application/json" \
  -d '{
    "id": "monitoring-tabs",
    "type": "Tabbed",
    "config": {
      "tabs": [
        {"id": "docker", "label": "Docker", "widgetType": "Docker"},
        {"id": "homelab", "label": "Services", "widgetType": "Home Lab"}
      ]
    },
    "position": {"x": 0, "y": 0, "w": 6, "h": 4},
    "enabled": true
  }'

Available Widget Types

You can use any of these in your tabs:

• Time - Clock and date
• Weather - Current weather
• Bookmarks - Quick links
• Docker - Container monitoring
• Home Lab - Service status
• Jellyfin - Now playing
• Reddit - Subreddit feeds

Tab Configuration

Each tab needs:

Field	Required	Description
id	✅ Yes	Unique ID for the tab
label	✅ Yes	Text shown on the tab button
widgetType	✅ Yes	Type of widget to display
widgetConfig	❌ No	Config to pass to the widget (e.g., Reddit subreddits)

Widget Config Examples

Reddit with Custom Subreddits

{
  "id": "reddit-tab",
  "label": "Tech News",
  "widgetType": "Reddit",
  "widgetConfig": {
    "subreddits": ["programming", "technology", "linux"]
  }
}

Multiple Tabs with Configs

{
  "tabs": [
    {
      "id": "tech-reddit",
      "label": "Tech",
      "widgetType": "Reddit",
      "widgetConfig": {"subreddits": ["programming", "webdev"]}
    },
    {
      "id": "news-reddit",
      "label": "News",
      "widgetType": "Reddit",
      "widgetConfig": {"subreddits": ["worldnews", "technology"]}
    }
  ]
}

Complete Example — Add via SQL

WARNING

Editing the database directly is a last resort. Credentials are no longer stored in widgets.config — see the security guide — so hand-written rows must leave credential fields out and let the settings UI store them.

Here's a complete SQL command to add a tabbed widget:

-- Monitoring Hub with Docker and Home Lab
INSERT INTO widgets (id, type, config, position, enabled) VALUES (
  'monitoring-hub',
  'Tabbed',
  '{"tabs":[{"id":"docker","label":"Containers","widgetType":"Docker"},{"id":"services","label":"Services","widgetType":"Home Lab"}]}',
  '{"x":0,"y":0,"w":6,"h":4}',
  1
);

-- Media Center with Jellyfin and Reddit
INSERT INTO widgets (id, type, config, position, enabled) VALUES (
  'media-center',
  'Tabbed',
  '{"tabs":[{"id":"jellyfin","label":"Now Playing","widgetType":"Jellyfin"},{"id":"reddit-movies","label":"Movies","widgetType":"Reddit","widgetConfig":{"subreddits":["movies","television"]}}]}',
  '{"x":6,"y":0,"w":6,"h":4}',
  1
);

-- Quick Info with Time and Weather
INSERT INTO widgets (id, type, config, position, enabled) VALUES (
  'quick-info',
  'Tabbed',
  '{"tabs":[{"id":"time","label":"Clock","widgetType":"Time"},{"id":"weather","label":"Weather","widgetType":"Weather"}]}',
  '{"x":0,"y":4,"w":4,"h":3}',
  1
);

Tips

1. Keep tab labels short - They should fit nicely in the tab bar
2. Related widgets together - Group similar content (monitoring, media, etc.)
3. 2-4 tabs works best - Too many tabs get cramped
4. Size matters - Make sure the container is big enough for the content
5. Test after adding - Refresh the page to see your new tabbed widget

Troubleshooting

Widget shows "No Tabs Configured":

• Check your JSON syntax in the config
• Make sure tabs is an array with at least one tab

Widget shows "Widget type not found":

• Check the widgetType matches exactly (case-sensitive)
• Available types: Time, Weather, Bookmarks, Docker, Home Lab, Jellyfin, Reddit

Tabs don't show content:

• Verify the widget config is valid JSON
• Check browser console for errors
• Make sure the widget has required config (e.g., Reddit needs subreddits)

Can't see the new widget:

• Refresh your browser
• Check Settings → Widgets to ensure it's enabled
• Verify the position doesn't overlap with other widgets

Deleting Tabbed Widgets

DELETE FROM widgets WHERE id = 'your-widget-id';

Or disable in Settings → Widgets

---

Enjoy stacking your widgets! 📚