# Properties sidebar

**Category:** Interaction  
**Live demo:** https://xenolithengine.github.io/xenolith-graph/examples/properties-sidebar/  
**Frameworks shipped:** vanilla, react, vue, svelte, solid, angular

## Description

A "fat" node with 8 widgets opts into the docked properties panel via the per-widget `showInSidebar: true` flag. Edit live — the same widget renders inline AND in the panel; no separate sidebar component to author. Themed via --xeno-*. Open programmatically: `editor.openSidebar(nodeId)`.

## Source files

  - [vanilla] vanilla/properties-sidebar.ts
  - [vanilla] shared/properties-sidebar.ts
  - [react] demos/PropertiesSidebarDemo.tsx
  - [react] shared/properties-sidebar.ts
  - [vue] vue/PropertiesSidebarDemo.vue
  - [vue] vue/SidebarTogglePanel.vue
  - [vue] shared/properties-sidebar.ts
  - [svelte] vanilla/svelte-properties-sidebar.ts
  - [svelte] shared/properties-sidebar.ts
  - [solid] vanilla/solid-properties-sidebar.ts
  - [solid] shared/properties-sidebar.ts
  - [angular] angular/PropertiesSidebarDemo.component.ts
  - [angular] shared/properties-sidebar.ts

## How to use this example

Open the live demo at https://xenolithengine.github.io/xenolith-graph/examples/properties-sidebar/ to interact with it in the browser. The same source files are
reproduced verbatim in the page so you can copy-paste into your own project. Every example is
self-contained — pick one, copy the files, install `@xenolithengine/graph-editor` + the relevant framework
adapter, and it runs.

## See also

- Full project docs: https://xenolithengine.github.io/xenolith-graph/llms.txt
- All examples (raw): https://xenolithengine.github.io/xenolith-graph/api/graphs.jsonl
- MCP tool catalog: https://xenolithengine.github.io/xenolith-graph/api/mcp-tools.json
- Repository: https://github.com/XenolithEngine/xenolith-graph