Implementation:FlowiseAI Flowise CanvasStickyNote
| Knowledge Sources | |
|---|---|
| Domains | Canvas, UI Components |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
StickyNote is a memoized React canvas node component that renders a color-customizable sticky note with inline text editing, plus duplicate and delete actions accessible via a tooltip overlay.
Description
This component renders a NodeCardWrapper with dynamic background and border colors that adapt to the node's color property, selection state, and the application's dark mode setting using MUI's darken and lighten utilities. The default color is #FFE770 (yellow). A NodeTooltip on the right side provides duplicate and delete icon buttons that invoke duplicateNode and deleteNode from the flowContext. The note content is rendered via an Input component that reads from and writes to data.inputs, allowing users to type free-form text directly on the canvas.
Usage
Use this component as a custom node type in the React Flow canvas for adding annotations or notes to a chatflow or agentflow. It is registered as a node type and instantiated when users add a sticky note to the canvas.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/canvas/StickyNote.jsx
- Lines: 1-129
Signature
const StickyNote = ({ data }) => { ... }
export default memo(StickyNote)
Import
import StickyNote from '@/views/canvas/StickyNote'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| data | object | Yes | The node data object containing id, color, selected, inputParams (array with at least one item), and inputs map
|
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered JSX | React Element | A styled NodeCardWrapper with inline Input for text editing and a tooltip containing duplicate/delete buttons |
| Side effects | void | Modifies data.inputs[inputParam.name] on text change; calls deleteNode or duplicateNode from flowContext on button click
|
Usage Examples
Basic Usage
import StickyNote from '@/views/canvas/StickyNote'
// Register as custom node type in React Flow
const nodeTypes = { stickyNote: StickyNote }
<ReactFlow
nodeTypes={nodeTypes}
nodes={nodes}
edges={edges}
/>