Accepted parentWidget Values#

The only accepted values for parentWidget are defined as a TypeScript union type:

type ParentName = "left-pane" | "center-pane" | "note-detail-pane" | "right-pane"

Note: For Preact widgets (using defineWidget), the property is called parent instead of parentWidget:

⧉

export default defineWidget({
parent: "right-pane",
render: () => <span>...</span>
});

Additional Positioning Options#

While the four parentWidget values are the only way to place a widget into the app layout (areas like the ribbon, toolbar, or status bar are not extensible via custom widget scripts), you have flexibility in how your widget renders within its allocated space:

• position property — Controls the ordering of your widget within its parent container. Higher values push it lower/further right. Widgets without an explicit position auto-increment by 10.

  ⧉

  get position() { return 100; }
  get parentWidget() { return 'center-pane'; }
  

• CSS positioning within your widget — You can use CSS (position: absolute, position: fixed, etc.) inside doRender() to create floating, overlay, or popup-like behavior. Built-in components like floating buttons and backlinks popups use this pattern.

• Specialized base classes — Extending RightPanelWidget gives a card-based layout with a fixed header and scrollable body for right-pane widgets. Using NoteContextAwareWidget gives your widget awareness of the active note context.

• Child widget composition — You can nest widgets inside your widget using the child() method to build more complex layouts within your allocated space.