[SIP-200] Superset Page Builder
- Dominant language
- Python
- Stars
- 74.8k
- Forks
- 18.3k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 685
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.
Page Types and Tool Collections
Core Concept
The Page Builder introduces a typed page system where each page type has associated Tool Collections that define which tools are available for that page.
PAGE CREATION FLOW
ADD A DIAGRAM HERE
Page Types
Page Type | Description | Default Tool Collections
-- | -- | --
Dashboard | Data visualization focused | Charts, Filters, Containers, Text
Custom Page | Flexible layout for any purpose | Containers, Text
Homepage | User's landing page | Widgets, Containers, Text
Future types... | Extensible system | Configurable
Additional Features
Undo/Redo
50 levels of undo/redo history
Keyboard shortcuts: Ctrl+Z (undo), Ctrl+Shift+Z or Ctrl+Y (redo)
Actions tracked: add, remove, move, resize, configure extension
Unsaved Changes Warning
┌─────────────────────────────────────────────────────┐
│ ⚠️ Unsaved Changes
│ You have unsaved changes. Do you want to save
│ before leaving?
│
│ [Don't Save] [Cancel] [Save]
└─────────────────────────────────────────────────────┘
Extensions Resizing
Extensions are resized by dragging their edges.
Extensions Reordering
Existing Extensions can be reordered by dragging to a new position.
Extensions SDK Integration
Tool Collections and custom extensions can be registered via the Extensions SDK:
import { extensionsManager } from '@apache-superset/core';
// Register a custom Tool Collection
extensionsManager.register({
id: 'my-custom-collection',
type: 'pagebuilder.toolCollection',
name: t('My Custom Tools'),
tools: [
{ id: 'custom-widget', component: CustomWidget, icon: CustomIcon },
],
});
// Register a custom extension type
extensionsManager.register({
id: 'my-custom-extension',
type: 'pagebuilder.extension',
component: MyCustomExtension,
name: t('My Custom extension'),
icon: CustomIcon,
configModal: MyExtensionConfigModal,
events: {
emits: ['onCustomEvent'],
listens: ['onFilterChange', 'onRefresh'],
},
});
Scope
This SIP Covers (Current Focus)
✓ Page Types system and type selection flow
✓ Tool Collections associated with page types
✓ Extension insertion and configuration modal flow
✓ Container-based main area structure
✓ Events system for intercommunication
✓ 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
✗ Migration of existing dashboards
✗ Mobile/responsive behavior
✗ Permissions and access control
References
This SIP establishes the foundation for a unified page building experience in Apache Superset.
Contributor guide
Assessment
This issue has not been assessed yet.