Example
Input (indented paths)
src
app
page.tsx
layout.tsx
components
Header.tsx
lib
tools.tsOutput (ASCII tree)
src
├── app
│ ├── page.tsx
│ └── layout.tsx
├── components
│ └── Header.tsx
└── lib
└── tools.tsNote
Indent with 2 or 4 spaces and the hierarchy turns into `├──` / `└──` tree characters. Perfect for README directory structures.
Usage / FAQ
When to use
- Visualize directory structure in a README
- Show folder trees in tech docs or wiki pages
- Attach an affected-files tree to a PR description
- Sketch information architecture in design docs
- Include a directory tree in an AI prompt
FAQ
- Q.Can I mix tabs and spaces?
- A.Not recommended. The indent unit is inferred from the first line — stick to a consistent 2-space or 4-space style.
- Q.How do I distinguish directories from files?
- A.Text is rendered as-is. Add a `/` suffix or an emoji like `📁` in the input and it carries through to the output.
- Q.Is the output safe to paste into GitHub markdown?
- A.Yes — pure ASCII, so wrapping it in a fenced code block renders identically everywhere.
Fun facts
Tree-drawing characters like ├ │ └ ─ live in Unicode 1.0's (1991) 'Box Drawing' block (U+2500 – U+257F) — 128 characters in total. Before Unicode, IBM Code Page 437 (1981 PC) was the de facto standard for single- and double-line drawing — Unicode rolled that intent forward directly.
Wikipedia — Box-drawing charactersDOS's `tree` command shipped in MS-DOS 3.2 (1986) — the first widely-available tool that visualized directory structure as an ASCII tree. Windows and Linux's same-named commands inherited the convention; the output shape of 'C:\>tree' has stayed essentially unchanged for 40 years.
Wikipedia — tree commandGit's `git log --graph` uses the same box-drawing characters to render branch and merge history as an ASCII graph — `*` for commits, `| / \` for branches and merges. A powerful trick that lets a plain terminal show commit topology at a glance, no GUI required.
Git — log documentation
Related tools
- JSON Formatter / Validator
Format, validate, and minify JSON strings. Adjust indent and optionally sort keys. Runs entirely in your browser.
- String Case Converter
Convert strings between camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, and Title Case — all six cases shown side-by-side.
- Regex Tester
Test JavaScript regular expressions with live match results. Supports g/i/m/s/u/y flags and capture groups.
- Markdown Preview
Render Markdown to HTML side-by-side. Supports CommonMark + GFM (tables, fenced code, task lists). marked is lazy-loaded.
- HTML → Markdown
Convert HTML into Markdown. Headings, lists, links, code, tables, blockquotes. Uses the browser's DOMParser — accurate, 0 dependency.
- YAML ↔ JSON
Convert between YAML and JSON. Tolerates comments and multiline strings on the YAML side. yaml is lazy-loaded.
- Text Diff
Compare two texts and highlight added/removed lines, words, or characters.
- JSON Diff
Compare two JSON values, with optional key sorting and JSON-aware error messages.
- CSV ↔ JSON
Convert between CSV and JSON. Handles quoted fields, custom delimiters, and header rows.
- SQL Formatter
Format SQL queries with proper indentation and keyword casing. Supports PostgreSQL, MySQL, SQLite, and standard dialects.
- XML Formatter
Pretty-print or minify XML with attribute preservation. Handles SOAP, sitemaps, and config files.
- XML ↔ JSON
Convert between XML and JSON with attribute and element handling.
- Smart Paste
Paste any text and get tool recommendations — JSON, JWT, Base64, URL, UUID, Cron, and 9 more types auto-detected.
- Lorem Ipsum
Generate placeholder text in words, sentences, or paragraphs. Classic Lorem Ipsum or randomized.
- JSON Path
Query JSON with JSONPath expressions ($.store.book[*].author etc.) and inspect matches.
- JSON Schema Validator
Validate JSON data against a JSON Schema (Draft 2020-12). Powered by Ajv with format support.
- JSON Schema Generator
Generate a JSON Schema (Draft 2020-12) from a sample JSON. Infer types, required fields, and nested structures automatically.
- HTML Formatter
Beautify or minify HTML with proper indentation, attribute alignment, and configurable wrap.
- CSS Formatter
Beautify or minify CSS with proper indentation. Configurable selector and property style.
- JavaScript Formatter
Beautify or minify JavaScript with brace style and indent options. Powered by js-beautify.
- TOML ↔ JSON
Convert between TOML (Tom's Obvious Minimal Language) and JSON. Used in Cargo.toml, pyproject.toml, etc.
- INI ↔ JSON
Convert INI configuration to JSON and back. Supports sections, comments (; or #), and key=value.
- JSON → TypeScript
Generate TypeScript interfaces from a JSON sample. Nested objects become separate interfaces.
- JS Object → JSON
Convert a JavaScript object literal (unquoted keys, single quotes, trailing commas, comments) into standard JSON. Lenient parser, strict output.
- Slug Generator
Convert text into a URL-safe slug. Configurable separator, lowercase, and accent stripping.
- Diff Patch
Generate a unified diff (-u) patch from two text inputs. Compatible with `git apply` / `patch -p0`.
- Mock Data
Generate fake JSON records — names, emails, UUIDs, dates, and more. 0 dependency.
- MongoDB Extended JSON
Convert MongoDB Extended JSON (EJSON) between Canonical and Relaxed forms, or strip BSON wrappers to plain JSON. Recognizes 16 wrapper types ($oid/$date/$numberLong/$numberDecimal/$binary/...).