0
# Core Rendering
1

2
The core rendering functionality provides the main entry point for rendering the Storybook UI into a DOM element. This is the primary function that consumers use to initialize and display the Storybook interface. It includes strict provider validation and React rendering setup.
3

4
## Capabilities
5

6
### renderStorybookUI Function
7

8
The main function that renders the complete Storybook UI into a specified DOM element with provider validation.
9

10
```typescript { .api }
11
/**
12
 * Renders the Storybook UI into a DOM node using the provided provider
13
 * @param domNode - Target DOM element where the UI will be rendered
14
 * @param provider - Provider instance that extends the base Provider class
15
 * @throws Error if provider is not an instance of the Provider class
16
 */
17
function renderStorybookUI(domNode: HTMLElement, provider: Provider): void;
18
```
19

20
**Implementation Details:**
21
- Validates that the provider is an actual instance of the Provider class (not just a duck-typed object)
22
- Uses ReactDOM.render to mount the Root component to the specified DOM node
23
- Sets up the complete Storybook UI wrapper with all necessary React providers
24

25
**Usage Examples:**
26

27
```typescript
28
import renderStorybookUI, { Provider } from "@storybook/ui";
29

30
// Basic usage with custom provider
31
class MyStorybookProvider extends Provider {
32
  getElements(type) {
33
    // Return appropriate UI elements for each type
34
    // This method will throw an error if not implemented
35
    return {
36
      sidebar: { component: MySidebar },
37
      preview: { component: MyPreview },
38
      panel: { component: MyPanel }
39
    };
40
  }
41
  
42
  handleAPI(api) {
43
    // Initialize and configure the Storybook API
44
    // This method will throw an error if not implemented
45
    console.log('API initialized:', api);
46
    api.setStories(this.stories);
47
  }
48
  
49
  getConfig() {
50
    // Optional method with default empty implementation
51
    return {
52
      theme: 'dark',
53
      showNav: true,
54
      showPanel: true
55
    };
56
  }
57
}
58

59
// Render to a specific DOM element
60
const container = document.getElementById('storybook-root');
61
const provider = new MyStorybookProvider();
62
renderStorybookUI(container, provider);
63
```
64

65
```typescript
66
// Example showing provider validation
67
class InvalidProvider {
68
  // This looks like a provider but doesn't extend Provider class
69
  getElements() { return {}; }
70
  handleAPI() {}
71
}
72

73
// This will throw an error: "provider is not extended from the base Provider"
74
try {
75
  renderStorybookUI(container, new InvalidProvider());
76
} catch (error) {
77
  console.error(error.message); // "provider is not extended from the base Provider"
78
}
79
```
80

81
### Integration Notes
82

83
- **Provider Validation**: The function performs strict instanceof checking - the provider must actually extend the Provider class
84
- **Synchronous Rendering**: The function is synchronous and returns `void`
85
- **DOM Replacement**: The function will replace the contents of the target DOM node
86
- **React Integration**: Uses ReactDOM.render (React 17 style) to mount the complete UI
87
- **Error Handling**: Throws clear error messages if the provider is invalid
88

89
### Error Scenarios
90

91
```typescript
92
// Will throw: "provider is not extended from the base Provider"
93
renderStorybookUI(domNode, {
94
  getElements: () => ({}),
95
  handleAPI: () => {},
96
  getConfig: () => ({})
97
});
98

99
// Will throw: "provider is not extended from the base Provider"  
100
renderStorybookUI(domNode, null);
101

102
// Will throw: "provider is not extended from the base Provider"
103
renderStorybookUI(domNode, undefined);
104
```
105

106
### Root Component Integration
107

108
The `renderStorybookUI` function internally creates and renders a Root component:
109

110
```typescript
111
// Internal implementation (for reference)
112
ReactDOM.render(<Root key="root" provider={provider} />, domNode);
113
```
114

115
This Root component wraps the entire Storybook UI with:
116
- HelmetProvider for document head management
117
- LocationProvider for routing
118
- Theme and emotion cache providers
119
- The main App component