MadoHub Docs

File Tree

Browse and interact with project files.

The file tree appears as a navigator panel embedded in a frame and optionally as a standalone tile on the canvas.

Frame navigator

Each frame can show a navigator panel with that frame's file structure. Toggle it per frame; when enabled, its width is clamped to between 160px and 240px (12.5% of the frame's width).

Interactions

  • Click a folder to expand or collapse it.
  • Drag a file onto the canvas to create a tile:
    • Image files (PNG, JPG, GIF, WebP, SVG, BMP, ICO, TIFF) → Image tile
    • All other files → Code tile
  • Files are shown with relative paths from the frame's root directory.

Filtering

Hidden (dot-prefixed) files and directories are hidden automatically, along with a fixed set of common build/dependency noise (node_modules, .git, dist, target, .next, .cache, .turbo, __pycache__, .svn, .DS_Store). This is a static list, not .gitignore parsing — anything your project's .gitignore excludes but that isn't on this list will still appear.

File tree tile

You can also create a standalone file tree tile on the canvas (440×540px default). This is useful for having a persistent file browser alongside your terminals.

Create one via Cmd+Shift+P → Open File, or when creating a frame with file tree enabled.

On this page