Tree Component for Retool

A Retool custom component that displays hierarchical tree data and automatically exports its HTML as a base64 image.

Features

• Display hierarchical tree structures with expandable/collapsible nodes
• Support for custom icons and node data
• Automatic base64 image generation when tree data changes
• Manual export button for on-demand image generation
• Clean, modern UI with hover effects

Installation

1. Navigate to the component directory:

cd tree_component

2. Install dependencies:

npm install

3. Run in development mode:

npm run dev

4. Deploy to Retool:

npm run deploy

Usage

Tree Data Format

The component expects tree data in the following format:

[
  {
    "id": "1",
    "label": "Root Node",
    "icon": "📁",
    "children": [
      {
        "id": "1-1",
        "label": "Child Node 1",
        "icon": "📄",
        "children": []
      },
      {
        "id": "1-2",
        "label": "Child Node 2",
        "icon": "📄"
      }
    ]
  }
]

Properties

• treeData (array): The hierarchical tree data structure

  • id (string, required): Unique identifier for the node
  • label (string, required): Display label for the node
  • icon (string, optional): Emoji or text icon to display
  • children (array, optional): Array of child nodes
  • data (object, optional): Additional custom data

• base64Image (string, readonly): The generated base64-encoded image of the tree

Events

• imageGenerated: Triggered when a new base64 image is generated (automatically or manually)

Example Usage in Retool

1. Add the Tree Component to your Retool app
2. Set the treeData property with your hierarchical data
3. Access the generated image via {{ treeComponent.base64Image }}
4. Use the imageGenerated event to trigger additional actions

Exporting Images

The component automatically generates a base64 image whenever the tree data changes. You can also manually trigger export using the "Export as Image" button.

The base64 image can be:

• Displayed in an Image component: {{ treeComponent.base64Image }}
• Downloaded as a file
• Sent to an API
• Stored in a database

Development

• npm run dev - Run in development mode with hot reload
• npm run deploy - Deploy to Retool

License

MIT