tree-export
Version:
Export your folder structure as a tree in various formats
402 lines (354 loc) • 17.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="shortcut icon" href="https://i.hizliresim.com/278ij38.png"
type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link
href="https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap"
rel="stylesheet">
<title>Tree Export</title>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css"
rel="stylesheet">
<link
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css"
rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<script>
tailwind.config = {
darkMode: 'class'
};
</script>
<style>
body {
font-family: "Afacad", serif;
}
</style>
<script>
if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in
localStorage) && window.matchMedia("(prefers-color-scheme: dark)")
.matches)) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>
</head>
<body class="bg-white text-black dark:bg-gray-900 dark:text-white">
<div id="app"
class="w-[95%] lg:max-w-[1140px] mx-auto bg-white dark:bg-black rounded-md shadow-xl p-5 mt-[12vh]">
<h1 id="tree-export"
class="text-3xl font-bold my-1 !text-gray-600 dark:!text-gray-100">
<a href="#tree-export">tree-export</a>
</h1>
<blockquote class="border-l-4 border-gray-500 pl-4 italic">Export your
project folder structure as a tree in multiple formats (md, txt, mdx, png,
jpg, svg).</blockquote>
<hr class="border-gray-300 my-4">
<h2 id="-features"
class="text-2xl font-bold my-1 !text-gray-600 dark:!text-gray-100">
<a href="#-features">🚀 Features</a>
</h2>
<ul class="list-disc pl-5">
<li>Generate a visual tree of your folder structure easily.</li>
<li>Export output in Markdown (<code
class="bg-gray-200 px-1 rounded">.md</code>), plain text (<code
class="bg-gray-200 px-1 rounded">.txt</code>), MDX (<code
class="bg-gray-200 px-1 rounded">.mdx</code>), and image formats
(<code class="bg-gray-200 px-1 rounded">png</code>, <code
class="bg-gray-200 px-1 rounded">jpg</code>, <code
class="bg-gray-200 px-1 rounded">svg</code>).</li>
<li>Supports excluding files and folders based on <code
class="bg-gray-200 px-1 rounded">.gitignore</code>.</li>
<li>Simple and user-friendly CLI interface.</li>
</ul>
<hr class="border-gray-300 my-4">
<h2 id="-installation"
class="text-2xl font-bold my-1 !text-gray-600 dark:!text-gray-100">
<a href="#-installation">📦 Installation</a>
</h2>
Install globally via npm:
<div class="code-container relative rounded-lg p-4 overflow-auto mt-2">
<button
class="copy-btn absolute top-3 right-3 bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-3 py-1 text-sm rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition m-[25px] z-[10]"><i
id="copyBtn" class="bi bi-clipboard"></i></button>
<pre class="line-numbers"><code class="language-bash">npm install -g tree-export
</code></pre>
</div>`
Or run directly using npx without installing:
<div class="code-container relative rounded-lg p-4 overflow-auto mt-2">
<button
class="copy-btn absolute top-3 right-3 bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-3 py-1 text-sm rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition m-[25px] z-[10]"><i
id="copyBtn" class="bi bi-clipboard"></i></button>
<pre class="line-numbers"><code class="language-bash">npx tree-export -d ./target-folder -o output.md -f md
</code></pre>
</div>
<hr class="border-gray-300 my-4">
<h2 id="-usage"
class="text-2xl font-bold my-1 !text-gray-600 dark:!text-gray-100">
<a href="#-usage">⚙️ Usage</a>
</h2>
<div class="code-container relative rounded-lg p-4 overflow-auto mt-2">
<button
class="copy-btn absolute top-3 right-3 bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-3 py-1 text-sm rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition m-[25px] z-[10]"><i
id="copyBtn" class="bi bi-clipboard"></i></button>
<pre class="line-numbers"><code class="language-bash">tree-export [options]
</code></pre>
</div>
<h3 id="options"
class="text-xl font-semibold my-1 !text-gray-600 dark:!text-gray-100">
<a href="#options">Options</a>
</h3>
<div class="overflow-x-auto my-4">
<table class="table-auto w-full border border-gray-700">
<thead>
<tr>
<th class="p-2 border border-gray-700 bg-gray-800 text-white">
Parameter</th>
<th class="p-2 border border-gray-700 bg-gray-800 text-white">
Description</th>
<th class="p-2 border border-gray-700 bg-gray-800 text-white">
Default</th>
</tr>
</thead>
<tbody>
<tr class="bg-gray-100 bg-gray-100 dark:bg-gray-900">
<td
class="p-2 border border-gray-700 text-center text-black dark:text-white">
<code class="bg-gray-200 px-1 rounded">-d, --dir <path></path>
</code></td>
<td
class="p-2 border border-gray-700 text-center text-black dark:text-white">
Target directory to generate the tree from</td>
<td
class="p-2 border border-gray-700 text-center text-black dark:text-white">
Current directory (<code
class="bg-gray-200 px-1 rounded">.</code>)</td>
</tr>
<tr class="bg-gray-200 dark:bg-gray-800">
<td
class="p-2 border border-gray-700 text-center text-black dark:text-white">
<code class="bg-gray-200 px-1 rounded">-o, --output <file></file>
</code></td>
<td
class="p-2 border border-gray-700 text-center text-black dark:text-white">
Output file path including filename</td>
<td
class="p-2 border border-gray-700 text-center text-black dark:text-white">
<code class="bg-gray-200 px-1 rounded">tree-output.md</code></td>
</tr>
<tr class="bg-gray-100 bg-gray-100 dark:bg-gray-900">
<td
class="p-2 border border-gray-700 text-center text-black dark:text-white">
<code class="bg-gray-200 px-1 rounded">-f, --format <type></type>
</code></td>
<td
class="p-2 border border-gray-700 text-center text-black dark:text-white">
Output format: <code class="bg-gray-200 px-1 rounded">txt</code>,
<code class="bg-gray-200 px-1 rounded">md</code>, <code
class="bg-gray-200 px-1 rounded">mdx</code>, <code
class="bg-gray-200 px-1 rounded">png</code>, <code
class="bg-gray-200 px-1 rounded">jpg</code>, <code
class="bg-gray-200 px-1 rounded">svg</code></td>
<td
class="p-2 border border-gray-700 text-center text-black dark:text-white">
<code class="bg-gray-200 px-1 rounded">md</code></td>
</tr>
</tbody>
</table>
</div>
<hr class="border-gray-300 my-4">
<h2 id="-examples"
class="text-2xl font-bold my-1 !text-gray-600 dark:!text-gray-100">
<a href="#-examples">💡 Examples</a>
</h2>
<ul class="list-disc pl-5">
<li>Export current folder structure as a Markdown file:</li>
</ul>
<div class="code-container relative rounded-lg p-4 overflow-auto mt-2">
<button
class="copy-btn absolute top-3 right-3 bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-3 py-1 text-sm rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition m-[25px] z-[10]"><i
id="copyBtn" class="bi bi-clipboard"></i></button>
<pre class="line-numbers"><code class="language-bash">npx tree-export -d . -o structure.md -f md
</code></pre>
</div>
<ul class="list-disc pl-5">
<li>Export a specific folder structure as a plain text file:</li>
</ul>
<div class="code-container relative rounded-lg p-4 overflow-auto mt-2">
<button
class="copy-btn absolute top-3 right-3 bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-3 py-1 text-sm rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition m-[25px] z-[10]"><i
id="copyBtn" class="bi bi-clipboard"></i></button>
<pre class="line-numbers"><code class="language-bash">npx tree-export -d ./src -o src-tree.txt -f txt
</code></pre>
</div>
<ul class="list-disc pl-5">
<li>Export folder structure as an MDX file:</li>
</ul>
<div class="code-container relative rounded-lg p-4 overflow-auto mt-2">
<button
class="copy-btn absolute top-3 right-3 bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-3 py-1 text-sm rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition m-[25px] z-[10]"><i
id="copyBtn" class="bi bi-clipboard"></i></button>
<pre class="line-numbers"><code class="language-bash">npx tree-export -d ./project -o project-structure.mdx -f mdx
</code></pre>
</div>
<ul class="list-disc pl-5">
<li>Export folder structure as an SVG image:</li>
</ul>
<div class="code-container relative rounded-lg p-4 overflow-auto mt-2">
<button
class="copy-btn absolute top-3 right-3 bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-3 py-1 text-sm rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition m-[25px] z-[10]"><i
id="copyBtn" class="bi bi-clipboard"></i></button>
<pre class="line-numbers"><code class="language-bash">npx tree-export -d ./src -o src-tree.svg -f svg
</code></pre>
</div>
<ul class="list-disc pl-5">
<li>Export as PNG image:</li>
</ul>
<div class="code-container relative rounded-lg p-4 overflow-auto mt-2">
<button
class="copy-btn absolute top-3 right-3 bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-3 py-1 text-sm rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition m-[25px] z-[10]"><i
id="copyBtn" class="bi bi-clipboard"></i></button>
<pre class="line-numbers"><code class="language-bash">npx tree-export -d ./src -o src-tree.png -f png
</code></pre>
</div>
<ul class="list-disc pl-5">
<li>Export as JPG image:</li>
</ul>
<div class="code-container relative rounded-lg p-4 overflow-auto mt-2">
<button
class="copy-btn absolute top-3 right-3 bg-gray-200 dark:bg-gray-700 text-black dark:text-white px-3 py-1 text-sm rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition m-[25px] z-[10]"><i
id="copyBtn" class="bi bi-clipboard"></i></button>
<pre class="line-numbers"><code class="language-bash">npx tree-export -d ./src -o src-tree.jpg -f jpg
</code></pre>
</div>
<hr class="border-gray-300 my-4">
<h2 id="-notes"
class="text-2xl font-bold my-1 !text-gray-600 dark:!text-gray-100">
<a href="#-notes">📋 Notes</a>
</h2>
<ul class="list-disc pl-5">
<li>When a <code class="bg-gray-200 px-1 rounded">.gitignore</code> file
is detected, you will be prompted whether to exclude ignored files and
folders.</li>
<li>SVG output uses <code class="bg-gray-200 px-1 rounded">
<foreignobject></foreignobject>
</code>, which may have limited support in some SVG viewers.</li>
<li>The CLI supports relative and absolute paths for both input directory
and output file.</li>
</ul>
<hr class="border-gray-300 my-4">
<h2 id="-how-it-works"
class="text-2xl font-bold my-1 !text-gray-600 dark:!text-gray-100">
<a href="#-how-it-works">🛠️ How It Works</a>
</h2>
<ul class="list-disc pl-5">
<li><code class="bg-gray-200 px-1 rounded">bin/index.js</code> handles CLI
arguments and orchestrates the process.</li>
<li><code class="bg-gray-200 px-1 rounded">lib/tree-generator.js</code>
reads and filters the directory tree, respecting <code
class="bg-gray-200 px-1 rounded">.gitignore</code> and default ignore
patterns.</li>
<li><code class="bg-gray-200 px-1 rounded">utils/export.js</code>
generates the output in the requested format.</li>
</ul>
<hr class="border-gray-300 my-4">
<h2 id="-license"
class="text-2xl font-bold my-1 !text-gray-600 dark:!text-gray-100">
<a href="#-license">📝 License</a>
</h2>
MIT © \[Osman Beyhan]
<hr class="border-gray-300 my-4">
<h2 id="-contributing"
class="text-2xl font-bold my-1 !text-gray-600 dark:!text-gray-100">
<a href="#-contributing">🤝 Contributing</a>
</h2>
Contributions, issues, and feature requests are welcome! Feel free to check
the <a class="text-blue-500 hover:underline" href="#">issues page</a> and
submit pull requests.
<hr class="border-gray-300 my-4">
Happy tree exporting! 🌳🚀
<div
class="flex justify-between gap-2 bg-white text-black dark:bg-black dark:text-white rounded-md shadow-md p-3 fixed top-4 right-4 p-2 z-[40]">
<i id="theme-toggle" class="bi bi-sun text-xl"></i>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const toggleButton = document.getElementById("theme-toggle");
function updateIcon() {
if (document.documentElement.classList.contains("dark")) {
toggleButton.classList.remove("bi-moon");
toggleButton.classList.add("bi-sun");
} else {
toggleButton.classList.remove("bi-sun");
toggleButton.classList.add("bi-moon");
}
}
updateIcon();
toggleButton?.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
const isDarkMode = document.documentElement.classList
.contains("dark");
localStorage.setItem("color-theme", isDarkMode ? "dark" :
"light");
updateIcon();
});
document.querySelector(".copy-btn")?.addEventListener("click",
function() {
const code = document.querySelector("pre code").innerText;
navigator.clipboard.writeText(code);
const copyBtn = document.getElementById("copyBtn");
copyBtn.classList.remove("bi-clipboard");
copyBtn.classList.add("bi-clipboard-check");
});
});
</script>
<p class="text-right text-black dark:text-white">Author: Osman Beyhan</p>
<div class="flex flex-wrap gap-3 mt-12">
<a href="https://github.com/osmn-byhn/tree-export" target="_blank"
class="flex gap-2 px-3 py-2 rounded-md bg-[#080808] text-white items-center justify-center whitespace-nowrap">
<i class="bi bi-github text-xl "></i>
<span class="text-xl">GitHub</span>
</a><a href="https://www.npmjs.com/package/tree-export" target="_blank"
class="flex gap-2 px-3 py-2 rounded-md bg-[#cd3e3d] text-white items-center justify-center whitespace-nowrap">
<i class="fa-brands fa-npm text-xl "></i>
<span class="text-xl">NPM</span>
</a><a href="https://yarnpkg.com/package?name=tree-export" target="_blank"
class="flex gap-2 px-3 py-2 rounded-md bg-[#3c93bb] text-white items-center justify-center whitespace-nowrap">
<i class="fa-brands fa-yarn text-xl "></i>
<span class="text-xl">Yarn</span>
</a><a href="https://tree-export.osmanbeyhan.com/" target="_blank"
class="flex gap-2 px-3 py-2 rounded-md bg-[#000] text-white items-center justify-center whitespace-nowrap">
<i class="bi bi-globe-americas text-xl "></i>
<span class="text-xl">Web</span>
</a>
</div>
</div>
<hr class="mt-10">
<div class="my-5">
<p class="text-center">
<span class="">❤️ Make via</span>
<a href="https://www.mdtoweb.osmanbeyhan.com/"
class="text-blue-600">MDtoWeb</a>
</p>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js">
</script>
</body>
</html>