JavaScriptHTML工具站

GitHubTree — JavaScript 工具站模板

作者 mgks

GitHubTree 将任意 GitHub 仓库目录结构转化为可浏览的树状视图，支持 Web 与 CLI 两种方式。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

无需克隆即可可视化任意公共仓库的目录树

提供 Web 应用、CLI 工具和 NPM 包三种使用方式

支持多种树样式（经典、斜线、极简、ASCII、项目符号）

内置媒体预览和仓库统计信息展示

支持私有仓库访问（通过 PAT）和深链接分享

CLI 支持 JSON 输出，便于脚本处理

模板详细介绍

GitHubTree 是一个面向开发者的仓库可视化工具，核心功能是将任意 GitHub 仓库的目录结构转换为可交互的树状视图，无需克隆即可浏览。它提供在线 Web 应用和命令行工具（gh-tree）两种使用方式，前者适合快速查看和分享，后者适合在终端中生成目录树或集成到脚本中。项目采用 monorepo 结构，包含核心逻辑、Web 应用和 CLI 三个部分，技术栈为 JavaScript 和 HTML，风格偏向代码目录可视化。

Web 应用支持实时搜索与过滤文件，并保留父文件夹上下文；提供多种视觉样式（如经典、斜线、极简、ASCII、项目符号）；内置媒体预览功能，可预览代码、图片和音频；同时显示仓库大小、星标、分支数等统计信息。CLI 工具支持指定分支、限制深度、忽略模式、输出 JSON 等，适合自动化场景。此外，项目还提供 NPM 包，允许开发者将树生成功能集成到自己的 Node.js 应用中。

需要注意的是，GitHubTree 的 Web 应用访问私有仓库需要用户提供 GitHub PAT，且令牌仅存储在浏览器中，但 README 未说明其安全细节。对于生产环境使用，建议先核对许可证状态（当前标记为 review）以及依赖的稳定性。整体而言，该工具适合文档编写、代码审查和项目概览，尤其适合需要频繁展示仓库结构的开发者。

仓库可视化目录树CLIWeb App

适合你的项目吗？

适用场景

快速查看他人仓库的结构，辅助代码阅读
在文档或 README 中嵌入仓库目录树徽章
在终端中生成目录树用于项目文档
集成树生成功能到 Node.js 工具中

适合人群

开发者个人使用
技术文档编写者
开源项目维护者
需要仓库结构概览的团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
Web 应用可直接访问在线版本
2
CLI 可通过 npx gh-tree user/repo 临时使用，或全局安装。
3
NPM 包需提供 GitHub Token 以获取仓库数据。
4
本地开发需克隆仓库并执行 npm install。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

MIT许可证允许免费使用、复制、修改、合并、发布、分发、再许可和销售软件，仅需保留版权与许可声明。

使用时需要遵守

保留原作者版权声明和 MIT 许可证声明。
在软件的所有副本或实质性部分中包含上述版权声明和本许可声明

额外费用与待核对事项

README未明确说明预览图片等素材的授权范围

查看原文依据

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software
许可证原文