https://github.com/remcostoeten/beautiful-interactive-file-tree

A beautiul interactive file tree component for React/NextJS with tooling to auto-generate your tree +files, feature-rich and the most aesthetic on the market.
https://github.com/remcostoeten/beautiful-interactive-file-tree

docs documentation file-viewer syntax-highlighting thegoat tree-structure tree-visualization typescript

Last synced: 12 days ago
JSON representation

A beautiul interactive file tree component for React/NextJS with tooling to auto-generate your tree +files, feature-rich and the most aesthetic on the market.

• Host: GitHub
• URL: https://github.com/remcostoeten/beautiful-interactive-file-tree
• Owner: remcostoeten
• Created: 2024-11-20T01:02:25.000Z (about 2 months ago)
• Default Branch: boilerplate
• Last Pushed: 2024-11-20T02:39:03.000Z (about 2 months ago)
• Last Synced: 2024-11-20T03:23:08.395Z (about 2 months ago)
• Topics: docs, documentation, file-viewer, syntax-highlighting, thegoat, tree-structure, tree-visualization, typescript
• Language: TypeScript
• Homepage: https://interactive-tree.remcostoeten.com
• Size: 186 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Beautiful interactive file-tree viewer

In my pursuit of creating beautiful open source components that help with showcasing parsed data or documentation I, nailed it with this epic component. After having build this [beatiful code block](https://beautiful-code-block.remcostoeten.com), and the nice beta api/prop/interface renderer I built this interactive file tree with showcase of the file on click.

It's beautiful, feature-rich and easy to use. There is an pythhon script which you just can run and generates the entire file structure + file contents in `.ts` whihch then is accepted via a prop, and et voila.

```shell

pop-os% python src/scripts/generate-tree-object.py src/app

Successfully generated IDE structure in src/core/config/tree-object.ts

```

Beta and docs to be continued.See landing page for a live demo and props usage. [beautiful-tree.remcostoeten.com](beautiful-tree.remcostoeten.com)

xxx

Remco Stoeten