Panels¶
Panels are independent, standalone components that can be used in any Panel application — with or without the Panelini framework. They’re designed for maximum reusability.
JSON-Schema driven form editor. Dynamic schemas, theming, bi-directional value sync.
Interactive physics-simulated graph with edit modes, drag-drop files, and event callbacks.
High-level workspace that composes VisNetwork + JsonEditor with a detail pane.
LangChain-powered chat panel with multi-provider support, tools, and live preview.
graph LR
subgraph panels [" Available Panels "]
je(["JsonEditor"])
vn(["VisNetwork"])
gdt(["GraphDetailTool"])
ai(["AiChat"])
end
panelini(["Panelini App"])
standalone(["Standalone Panel App"])
other(["Other Frameworks"])
panels --> panelini
panels --> standalone
panels --> other
classDef panelNode fill:#0d7377,stroke:#095c5f,color:#ffffff
classDef targetNode fill:#1e293b,stroke:#334155,color:#f8fafc
class je,vn,gdt,ai panelNode
class panelini,standalone,other targetNode
Available Panels¶
Panel |
Description |
Technology |
|---|---|---|
JSON Schema-based form editor with dynamic schema support |
json-editor + Vue.js |
|
Interactive network/graph visualization with manipulation |
vis-network + Vue.js |
|
Complete graph editing UI with node detail visualization |
Composes VisNetwork + JsonEditor |
|
LLM-powered chat interface with multi-provider support, tool execution, and live preview |
LangChain + Panel ChatInterface |
Design Principles¶
All panels follow these design principles:
No Panelini dependency: Panels only depend on
panelandparam(plus optional extras)AnyWidgetComponent base: Bridge Python and JavaScript via bi-directional property sync (for JS-based panels)
Vue.js frontend: JS-based panels have a Vue.js wrapper around their JavaScript library
Callback-driven: User interactions are communicated via event callbacks
Bundled assets: JavaScript and CSS are pre-built and shipped with the package