{"id":15893416,"url":"https://github.com/multimeric/botany","last_synced_at":"2026-02-26T15:41:00.168Z","repository":{"id":27831622,"uuid":"31321532","full_name":"multimeric/botany","owner":"multimeric","description":"A css/js library for creating dynamic tree-view components using declarative techniques","archived":false,"fork":false,"pushed_at":"2015-03-03T09:30:01.000Z","size":238,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-21T05:23:29.985Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/multimeric.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-25T15:55:15.000Z","updated_at":"2015-03-03T09:30:01.000Z","dependencies_parsed_at":"2022-09-02T13:31:00.423Z","dependency_job_id":null,"html_url":"https://github.com/multimeric/botany","commit_stats":null,"previous_names":["tmiguelt/botany"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multimeric%2Fbotany","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multimeric%2Fbotany/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multimeric%2Fbotany/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/multimeric%2Fbotany/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/multimeric","download_url":"https://codeload.github.com/multimeric/botany/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246863817,"owners_count":20846317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-06T08:10:28.734Z","updated_at":"2026-02-26T15:40:55.111Z","avatar_url":"https://github.com/multimeric.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Botany.js\n\n## Introduction\n\nBotany is a JavaScript/CSS library for creating tree view components using *declarative techniques*. This means that,\nunlike imperative (but still very powerful) libraries like [jsTree](http://www.jstree.com/), botany trees can be built\nusing the DOM templating of JavaScript frameworks like Angular, React etc., and adding or removing elements from the\ntree can be done without needing to tell the tree to update or redraw anything.\n\n## Demos\n\nHave a look at a live demo [here on GitHub Pages](http://tmiguelt.github.io/botany/#demo), or clone the repository and run the demo files.\n\n## Installation\n\nRun `npm install botany` or `git clone https://github.com/TMiguelT/botany` to get the latest version of the library,\nthen copy the contents of `dist` directory to your project (for example, you might put it in `static/libs/botany`).\nThis directory includes the stylesheet (`botany.css`), the script (`botany.js`) and all the relevant image files (`.svg`)\n\nThen you'll need to reference both the stylesheet and the script in your HTML. You'll also need to include jQuery\nbecause it's required by botany. Of course in a real website you'd put the scripts at the bottom of the page and\nthe stylesheets in the `\u003chead\u003e`:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"static/libs/botany/botany.css\"\u003e\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"static/libs/botany/botany.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nTo use botany, you first need to create an unordered list with the class `botany`, and give it a class indicating which\ntheme to use (see [themes](#themes) for more information). For example, your list element might look like this:\n\n```html\n\u003cul class=\"botany lines\"\u003e\u003c/ul\u003e\n```\n\nThen all you need to do is call `$(\"selector\").botany()` on the list you just created. It may seem redundant to add the\nclass and call a jQuery function but the class determines the styling of the list, meaning that the style won't suddenly\nchange when you call the plugin. All the plugin does is setup the even handlers for opening and closing the nodes.\n\n## Themes\n\nThe themes (like `lines`) in the above example, are one of the following:\n\n* lines\n* no-lines\n* no-markers\n\nThemes determine which images to use as the marker (indicating a node is open or closed), as well as the horizontal\nand vertical lines that make up the tree. The default three themes are pretty self explanatory, but if you want to\nwrite your own theme (use your own custom images), read the section on [custom themes](#custom-themes)\n\n## Basic Customization\n\nAs shown in the demo files (have a look in the demo directory), a Botany tree consists of a `\u003cul\u003e` element with the class\n`botany`. You can have any DOM structure inside this tree, but there are some things to note:\n\n* Any `\u003cul\u003e` or `\u003cli\u003e` elements inside the `.botany` element will be styled.\n\n* The `.open` class indicates when a node is open, and can be manually added to nodes that you want to start open (by\ndefault nodes are closed). This class is also automatically toggled whenever a node is opened or closed by a user, so\nyou can write your own custom styles based on this.\n\n* The `.botany-open` and `.botany-closed` classes are for manually specifying an open/closed indicator. Such an element\nshould be a direct child of an `\u003cli\u003e` and these should only be used when using a theme that has no indicators itself\n(i.e. the no-markers theme). Have a look at the demo-bootstrap.html file for an example of using the `.botany-open` and\n`.botany-closed` classes.\n\n## Custom Themes\n\nTo create a custom theme for botany, all you need to do is add a `.json` file to the `src/css/themes` directory containing\npaths to the image files you want to use as the open and closed markers, and the vertical and horizontal lines. It's\nprobably a good idea to use the existing json files as a template. Also note that you don't have to use SVGs as your\nimages, you can use any image format that CSS supports (png, jpeg etc.)\n\nThen, just add the name of that json file to the themesList variable in botany.styl. It currently looks like this:\n\n`themesList = \"lines\", \"no-lines\", \"no-markers\"`\n\nAdding a custom theme would make it more like this (if you had a my-theme.json file in the themes directory)\n\n`themesList = \"lines\", \"no-lines\", \"no-markers\", \"my-theme\"`\n\nThen, to re-create the stylesheet, just run `gulp build`, and the files in the dist directory will be rebuilt. Of course\nto do this you'll have to install the dev dependencies, so don't use the `--production` flag for `npm install`. You can\nalso rebuild botany if you want to make any other changes to the main stylesheet (botany.styl) or the main script (script.js)\n\n## Contributions\n\nIf you like the project, please help make it better! At the moment the main things that need to be fixed before a 1.0.0\nrelease are:\n\n* CSS improvements. The vertical lines have a few issues, like not reaching the top of the previous node, and sometimes\noverlapping with each other. CSS changes can be made to `botany.styl` in src/css.\n\n* Stylus improvements. In a lot of cases I may not be using the full power of stylus in the library. If you have more\nexperience with stylus than me, feel free to simply the stylesheet and make a Pull Request.\n\n* Better and more themes. I'm not a graphics designed, so the SVGs I made are pretty basic (and boring). Some more markers\nwould be a fantastic help to me.\n\n* Bug fixes and feature suggestions. I'm eager to hear how I can make botany work better for your use case. Just file an\nissue and I'll see what I can do.\n\n### Style\n\nThe only ideosyncracy with the coding style of botany is the use of braces in the stylus sheets.\nWhile braces are optional in .styl files, and aren't used in any of the example code for the Stylus library, I think it's a lot\nclearer to use braces to separate blocks, especially coming from a pure JavaScript/CSS background.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultimeric%2Fbotany","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmultimeric%2Fbotany","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmultimeric%2Fbotany/lists"}