# Conditional widgets

**Category:** Widgets  
**Live demo:** https://xenolithengine.github.io/xenolith-graph/examples/conditional-widgets/  
**Frameworks shipped:** vanilla, react

## Description

Declarative `displayOptions.show(state)` — n8n-style. One HTTP Request node hides `body` until the method needs one, and `token` until auth is `bearer`. Pure schema: no `setNodeWidgets` plumbing in the host. The node re-layouts and edges stay attached as widgets appear and disappear.

## Source files

  - [vanilla] vanilla/conditional-widgets.ts
  - [vanilla] shared/conditional-widgets.ts
  - [react] demos/ConditionalWidgetsDemo.tsx
  - [react] shared/conditional-widgets.ts

## How to use this example

Open the live demo at https://xenolithengine.github.io/xenolith-graph/examples/conditional-widgets/ 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