Skip to main content
The View class is the abstract base class for all views in Obsidian. Views are the content displayed within workspace leaves.

​
Properties

​
app
App
The app instance.Since: 0.9.7
​
icon
IconName
The icon for this view.Since: 1.1.0
​
navigation
boolean
Whether or not the view is intended for navigation.
  • Set to false for static views that are not intended to be navigated away (e.g., File explorer, calendar)
  • Set to true for views that open files or can be otherwise navigated (e.g., Markdown editor, Kanban view, PDF view)
Since: 0.15.1
​
leaf
WorkspaceLeaf
The leaf containing this view.Since: 0.9.7
​
containerEl
HTMLElement
The container element for this view.Since: 0.9.7
​
scope
Scope | null
An optional scope to register hotkeys for when the view is in focus.Default: nullSince: 1.5.7

​
Constructor

constructor(leaf: WorkspaceLeaf)
​
leaf
WorkspaceLeaf
required
The workspace leaf this view will be attached to
Since: 0.9.7

​
Methods

​
onOpen()

Called when the view is opened. Override this to perform initialization. 
protected onOpen(): Promise<void>
​
return
Promise<void>
Promise that resolves when the view is ready
Since: 0.9.7

​
Example

class MyCustomView extends ItemView {
  async onOpen() {
    const container = this.containerEl.children[1];
    container.empty();
    container.createEl('h4', { text: 'My Custom View' });
  }
}

​
onClose()

Called when the view is closed. Override this to perform cleanup. 
protected onClose(): Promise<void>
​
return
Promise<void>
Promise that resolves when cleanup is complete
Since: 0.9.7

​
Example

class MyCustomView extends ItemView {
  async onClose() {
    // Cleanup resources
    this.data = null;
  }
}

​
getViewType()

Returns the unique type identifier for this view. This must be implemented by all views. 
abstract getViewType(): string
​
return
string
The unique view type identifier
Since: 0.9.7

​
Example

class MyCustomView extends ItemView {
  getViewType() {
    return 'my-custom-view';
  }
}

​
getState()

Gets the current state of this view. Override this to save view state. 
getState(): Record<string, unknown>
​
return
Record<string, unknown>
The current view state
Since: 0.9.7

​
setState()

Sets the state of this view. Override this to restore view state. 
setState(state: unknown, result: ViewStateResult): Promise<void>
​
state
unknown
required
The state to set
​
result
ViewStateResult
required
Result object to indicate if state change should be recorded in history
​
return
Promise<void>
Promise that resolves when state is set
Since: 0.9.7

​
getEphemeralState()

Gets ephemeral state (temporary state not saved to disk). 
getEphemeralState(): Record<string, unknown>
​
return
Record<string, unknown>
The ephemeral state
Since: 0.9.7

​
setEphemeralState()

Sets ephemeral state (temporary state not saved to disk). 
setEphemeralState(state: unknown): void
​
state
unknown
required
The ephemeral state to set
Since: 0.9.7

​
getIcon()

Gets the icon for this view. 
getIcon(): IconName
​
return
IconName
The icon name for this view
Since: 1.1.0

​
onResize()

Called when the size of this view is changed. Override this to handle resize events. 
onResize(): void
Since: 0.9.7

​
getDisplayText()

Gets the display text for this view (shown in the tab). This must be implemented by all views. 
abstract getDisplayText(): string
​
return
string
The display text for this view
Since: 0.9.7

​
Example

class MyCustomView extends ItemView {
  getDisplayText() {
    return 'My Custom View';
  }
}

​
onPaneMenu()

Populates the pane menu. Override this to add custom menu items. 
onPaneMenu(menu: Menu, source: 'more-options' | 'tab-header' | string): void
​
menu
Menu
required
The menu to populate
​
source
'more-options' | 'tab-header' | string
required
The source of the menu request
Since: 0.15.3

​
Example

class MyCustomView extends ItemView {
  onPaneMenu(menu: Menu, source: string) {
    menu.addItem((item) => {
      item
        .setTitle('Export view')
        .setIcon('download')
        .onClick(() => {
          this.exportData();
        });
    });
    
    super.onPaneMenu(menu, source);
  }
}

​
Lifecycle

Views follow this lifecycle:
  1. Construction - The view is created with new YourView(leaf)
  2. Loading - load() is called (inherited from Component)
  3. Opening - onOpen() is called
  4. Active - The view is active and responsive
  5. Closing - onClose() is called
  6. Unloading - unload() is called (inherited from Component)

​
Creating a Custom View

Here’s a complete example of creating a custom view: 
import { ItemView, WorkspaceLeaf } from 'obsidian';

const VIEW_TYPE = 'my-custom-view';

class MyCustomView extends ItemView {
  constructor(leaf: WorkspaceLeaf) {
    super(leaf);
  }

  getViewType() {
    return VIEW_TYPE;
  }

  getDisplayText() {
    return 'My Custom View';
  }

  async onOpen() {
    const container = this.containerEl.children[1];
    container.empty();
    container.createEl('h4', { text: 'Custom View Content' });
    container.createEl('p', { text: 'This is my custom view!' });
  }

  async onClose() {
    // Cleanup if needed
  }
}

// Register the view
this.registerView(
  VIEW_TYPE,
  (leaf) => new MyCustomView(leaf)
);

// Open the view
const leaf = this.app.workspace.getLeaf('tab');
await leaf.setViewState({
  type: VIEW_TYPE,
  active: true
});

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us