[SIP-200] Superset Page Builder #37613
Description
Motivation
Apache Superset provides powerful data visualization capabilities, but currently lacks a unified system for building custom page layouts.
Users who want to create tailored experiences; whether for dashboards, landing pages, or specialized views; are limited by the existing fixed structures.
The Opportunity
A Generic Page Builder would bring modularity to Superset's page creation:
- Custom Pages: Users can create pages tailored to specific use cases (executive summaries, operational dashboards, data portals, etc.)
- Flexible Layouts: Support for different layout modes (grid, free positioning, rows) to accommodate various design needs
- Reusable Infrastructure: The same drag-and-drop system can power multiple features across Superset
- Extensibility: Third-party components can be integrated through the Extensions SDK
Related Work
The concept of customizable pages in Superset has been explored in the context of Homepage customization:
- SIP-198: Homepage Layout Extensions - Proposes allowing users to customize their homepage
- Demo Implementation - Proof of concept for homepage customization
This SIP focuses on the underlying Page Builder infrastructure that could power such features. The Homepage customization use case is addressed separately in SIP-198.
Community Demand
Customizable pages are a frequently requested feature:
- Discussion #18571 - Customize Home Page option
- Discussion #33761 - Customizing the Welcome Page
Proposed Change
This SIP proposes a Generic Page Builder - a unified system for creating and editing page layouts in Superset through an intuitive drag-and-drop interface.
Core Architecture
┌─────────────────────────────────────────────────────────────────────────────┐
│ PAGE BUILDER INTERFACE │
├─────────────────┬───────────────────────────────────────────────────────────┤
│ │ │
│ TOOLS SIDEBAR │ CANVAS │
│ │ │
│ ┌───────────┐ │ Layout: [Grid ▼] [Columns: 12 ▼] │
│ │ 📊 Chart │ │ │
│ ├───────────┤ │ ┌─────────────────────────────────────────────────┐ │
│ │ 🔍 Filter │ │ │ │ │
│ ├───────────┤ │ │ USER-CREATED LAYOUT │ │
│ │ 📐 Row │ │ │ │ │
│ ├───────────┤ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ 📑 Tabs │ │ │ │ Chart │ │ Chart │ │ Filter │ │ │
│ ├───────────┤ │ │ │ │ │ │ │ Sidebar │ │ │
│ │ ▤ Sidebar │ │ │ └──────────┘ └──────────┘ │ (toggle) │ │ │
│ ├───────────┤ │ │ └──────────┘ │ │
│ │ 📝 Header │ │ │ ┌────────────────────────────────────────┐ │ │
│ ├───────────┤ │ │ │ Data Table │ │ │
│ │ 📄 Text │ │ │ └────────────────────────────────────────┘ │ │
│ ├───────────┤ │ │ │ │
│ │ ➖ Divider│ │ └─────────────────────────────────────────────────┘ │
│ ├───────────┤ │ │
│ │ ⬜ Spacer │ │ │
│ └───────────┘ │ │
│ │ │
└─────────────────┴───────────────────────────────────────────────────────────┘
Page Builder in view mode
Page Builder in edit mode
Key Design Principles
1. Configurable Layout System
The Page Builder supports multiple layout modes:
| Layout Mode | Description | Use Case |
|---|---|---|
| Grid | N-column responsive grid (configurable columns) | Traditional dashboards |
| X-Y | Free positioning anywhere on canvas | Precise custom layouts |
| Rows | Multiple horizontal rows | Simple stacked layouts |
LAYOUT SELECTOR
┌────────────────────────────────────────────────────────────────┐
│ Layout Mode: [Grid ▼] │
│ │
│ Grid Options (when Grid selected): │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Columns: 12 │ │ Gutter: 16px │ │
│ └──────────────┘ └──────────────┘ │
│ Components snap to columns automatically │
│ │
│ X-Y Options (when X-Y selected): │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Snap: ON/OFF │ │ Snap size:20 │ │
│ └──────────────┘ └──────────────┘ │
│ Snap size = invisible grid spacing (10px, 20px, 40px...) │
│ When ON, components align to nearest grid intersection │
└────────────────────────────────────────────────────────────────┘
2. Inline Editing Pattern
Instead of pre-configured chart types in the toolbar, the Page Builder uses generic tools with inline configuration:
WORKFLOW: Adding a Chart
1. TOOLBAR 2. DROP 3. CONFIGURE
┌───────────┐ ┌──────────────┐ ┌─────────────────┐
│ 📊 Chart │ ─── drag ───► │ 📊 │ ─ opens ─► │ Select Chart │
│ (generic) │ │ [Placeholder]│ │ │
└───────────┘ └──────────────┘ │ ○ Revenue Trend │
│ ○ Sales by... │
│ ○ Market Share │
│ [Select] │
└─────────────────┘
WORKFLOW: Adding a Filter
1. TOOLBAR 2. DROP 3. CONFIGURE
┌───────────┐ ┌──────────────┐ ┌─────────────────┐
│ 🔍 Filter │ ─── drag ───► │ 🔍 │ ─ opens ─► │ Filter Config │
│ (generic) │ │ [Placeholder]│ │ │
└───────────┘ └──────────────┘ │ Type: [Select▼] │
│ Column: [ ▼] │
│ Dataset:[ ▼] │
│ [Create] │
└─────────────────┘
Key behaviors:
- Tools show generic placeholders until configured (similar to empty chart state)
- Dropping a tool automatically opens its configuration modal
- Clicking "Edit" on any placed component opens the same modal
- This provides a consistent, streamlined editing experience
Benefits of Inline Editing:
- Cleaner, simpler toolbar (no need for "Existing Chart", "New Chart", "Big Number", etc.)
- Contextual configuration at the right moment
- Same pattern for new components and editing existing ones
3. Component Nesting
All layout components support nesting, enabling complex layouts:
┌─ Tabs ──────────────────────────────────────────────────────────┐
│ [Overview] [Details] [Analytics] │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ ┌─ Row ───────────────────────────────────────────────────┐ │ │
│ │ │ ┌─ Column ──────┐ ┌─ Column ──────┐ ┌─ Sidebar ────┐ │ │ │
│ │ │ │ │ │ │ │ (toggle) │ │ │ │
│ │ │ │ Chart │ │ Chart │ │ Filters │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ │ └───────────────┘ └───────────────┘ └──────────────┘ │ │ │
│ │ └─────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
Nesting hierarchy example:
📑 Tabs
└─ 📐 Row
├─ 📐 Column
│ └─ 📊 Chart A
├─ 📐 Column
│ └─ 📊 Chart B
└─ ▤ Sidebar (toggleable)
├─ 🔍 Filter 1
├─ 🔍 Filter 2
└─ 🔍 Filter 3
4. Internal Sidebar Component
Users can create a toggleable sidebar within their layout (separate from the Tools Sidebar):
PAGE WITH INTERNAL SIDEBAR
┌─────────────────────────────────────────────────────────────────┐
│ [≡ Toggle Sidebar] [Edit] │
├─────────────┬───────────────────────────────────────────────────┤
│ │ │
│ INTERNAL │ MAIN CONTENT │
│ SIDEBAR │ │
│ (toggle) │ ┌─────────────────────────────────────────┐ │
│ │ │ │ │
│ ┌────────┐ │ │ Chart │ │
│ │Region ▼│ │ │ │ │
│ ├────────┤ │ └─────────────────────────────────────────┘ │
│ │Date │ │ │
│ │[=====] │ │ ┌─────────────────────────────────────────┐ │
│ ├────────┤ │ │ │ │
│ │Category│ │ │ Table │ │
│ │☑ A ☑ B │ │ │ │ │
│ └────────┘ │ └─────────────────────────────────────────┘ │
│ │ │
│ [Hide ◄] │ │
└─────────────┴───────────────────────────────────────────────────┘
SIDEBAR HIDDEN (after toggle)
┌─────────────────────────────────────────────────────────────────┐
│ [► Show Sidebar] [Edit] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ MAIN CONTENT (expanded) │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Chart │ │
│ └─────────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Table │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
Features:
- Toggle button to show/hide
- Can contain any components (filters, widgets, etc.)
- Main content area expands when sidebar is hidden
- State persistence (remembers show/hide state)
Tools Sidebar Components
The Tools Sidebar contains draggable components:
Layout Components
| Component | Description | Supports Nesting |
|---|---|---|
| Row | Horizontal container | ✓ |
| Column | Vertical container | ✓ |
| Tabs | Tabbed container with multiple panels | ✓ |
| Sidebar | Toggleable side panel within the page | ✓ |
| Header | Title text (H1, H2, H3 sizes) | ✗ |
| Markdown | Rich text content | ✗ |
| Divider | Horizontal separator line | ✗ |
| Spacer | Empty space for layout purposes | ✗ |
Content Components
| Component | Inline Configuration |
|---|---|
| Chart | Opens chart selector modal on drop |
| Filter | Opens filter configuration modal on drop |
Note: Additional content components can be added via the Extensions SDK pattern.
Drag & Drop Behavior
Drop Zones
Components can be dropped in three locations:
| Drop Location | Behavior |
|---|---|
| Empty area | Component is added to the empty space |
| Between components | Component is inserted between existing components |
| Inside container | Component is added as child of the container (Tabs, Row, etc.) |
DROP ZONE TYPES
1. EMPTY AREA 2. BETWEEN COMPONENTS 3. INSIDE CONTAINER
┌─────────────────┐ ┌─────────────────┐ ┌─ Tabs ──────────┐
│ │ │ Chart A │ │ [Tab 1] [Tab 2] │
│ [Drop Here] │ ├─────────────────┤ │ ┌─────────────┐ │
│ │ │ ► [Drop Here] ◄ │◄── insert │ │ │ │
│ │ ├─────────────────┤ between │ │ [Drop Here] │ │
└─────────────────┘ │ Chart B │ │ │ │ │
└─────────────────┘ │ └─────────────┘ │
└─────────────────┘
Component Resizing
Components are resized by dragging their edges:
┌──────────────────────────────────┐
│ │
│ Chart │
│ │
│ ├─── drag to resize width
│ │
└──────────────────────────────────┘
│
└─── drag to resize height
Reordering
Existing components can be reordered by dragging to a new position.
Edit Mode vs View Mode
| Aspect | Edit Mode | View Mode |
|---|---|---|
| Tools Sidebar | Visible | Hidden |
| Component borders | Visible (dashed) | Hidden |
| Drag & drop | Enabled | Disabled |
| Resize handles | Visible | Hidden |
| Click behavior | Select component | Interact with component |
| "Edit" button | Visible on hover | Hidden |
| Internal sidebar | Always visible | Toggleable |
Undo/Redo
- 50 levels of undo/redo history
- Keyboard shortcuts:
Ctrl+Z(undo),Ctrl+Shift+ZorCtrl+Y(redo) - Actions tracked: add, remove, move, resize, configure components
Unsaved Changes Warning
When leaving with unsaved changes:
┌─────────────────────────────────────────────────────┐
│ ⚠️ Unsaved Changes │
│ │
│ You have unsaved changes. Do you want to save │
│ before leaving? │
│ │
│ [Don't Save] [Cancel] [Save] │
└─────────────────────────────────────────────────────┘
Scope
This SIP Covers (Page Builder Infrastructure)
- ✓ Page Builder interface (Tools Sidebar + Canvas)
- ✓ Layout system (Grid, X-Y, Rows)
- ✓ Drag & drop functionality
- ✓ Inline editing pattern
- ✓ Component nesting
- ✓ Edit mode / View mode
- ✓ Undo/Redo
- ✓ Extensions SDK integration
Out of Scope (Future SIPs)
- ✗ Homepage customization (addressed in SIP-198)
- ✗ Data model and storage (layout JSON format, database tables)
- ✗ REST API endpoints
- ✗ Event system / pub-sub
- ✗ Migration of existing dashboards
- ✗ Mobile/responsive behavior
- ✗ Permissions and access control
References
- SIP-151: Vision for new Superset Plugins Architecture
- SIP-177: SQL Lab Extensions
- SIP-198: Homepage Layout Extensions
- Homepage Builder Demo
- Discussion #18571: Customize Home Page option
- Discussion #33761: Customizing the Welcome Page
This SIP establishes the foundation for a unified page building experience in Apache Superset.