https://github.com/coder-spirit/beautiful-tree
A library to generate beautiful trees in your website
https://github.com/coder-spirit/beautiful-tree
hacktoberfest hacktoberfest2023 javascript react tree typescript web
Last synced: 2 months ago
JSON representation
A library to generate beautiful trees in your website
- Host: GitHub
- URL: https://github.com/coder-spirit/beautiful-tree
- Owner: Coder-Spirit
- License: mit
- Created: 2023-07-25T16:18:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-11-14T23:02:35.000Z (5 months ago)
- Last Synced: 2025-11-15T01:16:11.027Z (5 months ago)
- Topics: hacktoberfest, hacktoberfest2023, javascript, react, tree, typescript, web
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@beautiful-tree/react
- Size: 1.89 MB
- Stars: 17
- Watchers: 2
- Forks: 3
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Beautiful-Tree
Beautiful-Tree is a lightweight & flexible library to draw trees as SVG images.
Some of its hightlights:
- It is compatible with ESM, CJS, UMD and IIFE
- Very lightweight (3.9Kb in its minimised ESM form, and 4.2Kb in its UMD form)
- The generated trees can be styled with CSS
For now there is only a React variant, but we'll extend the support for other
technologies such as Vue.
## Packages in this repository:
- [@beautiful-tree/algorithms](@beautiful-tree/algorithms/README.md)
- [@beautiful-tree/react](@beautiful-tree/react/README.md)
- [@beautiful-tree/types](@beautiful-tree/types/README.md)
## Community
- For slow-paced discussions, debates, ideas, etc. that don't fit into specific
issues or PRs, we have a
[discussions section](https://github.com/Coder-Spirit/beautiful-tree/discussions).
- For more unstructured and "real time" conversations, we have a
[Discord space](https://discord.gg/3a8RSRdEv2).
- [How to Contribute](CONTRIBUTING.md)
## Related articles
- [How to create a React components dual library (ESM+CJS)](https://blog.coderspirit.xyz/blog/2023/09/15/create-a-react-component-lib/):
It covers some of the technical decisions behind this library to offer CJS &
ESM support at the same time.