Gathering detailed insights and metrics for @devtools-ds/tree
Gathering detailed insights and metrics for @devtools-ds/tree
Gathering detailed insights and metrics for @devtools-ds/tree
Gathering detailed insights and metrics for @devtools-ds/tree
@devtools-ds/object-parser
Object parser is a utility used by the the `Object Inspector` package, which creates a JSON tree structure with node types that help simplify the JavaScript type system. It also uses TypeScript to make logic around using the tree strongly typed.
@devtools-ds/dom-inspector
An emulation of the Chrome and Firefox DOM inspector, built on the `@devtools-ds/tree` component.
@iampava-devtools-ds/tree
A versatile expanding `Tree` component, with full keyboard navigation following the [Tree View Design Pattern](https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/treeview-2a.html).
@iampava-devtools-ds/object-parser
Object parser is a utility used by the the `Object Inspector` package, which creates a JSON tree structure with node types that help simplify the JavaScript type system. It also uses TypeScript to make logic around using the tree strongly typed.
UI components, libraries, and templates for building robust devtools experiences.
npm install @devtools-ds/tree
Typescript
Module System
Node Version
NPM Version
94.1
Supply Chain
81.2
Quality
76
Maintenance
50
Vulnerability
100
License
TypeScript (82.1%)
MDX (7.18%)
JavaScript (6.69%)
CSS (3.39%)
HTML (0.64%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
262 Stars
163 Commits
17 Forks
4 Watchers
5 Branches
7 Contributors
Updated on Jul 09, 2025
Latest Version
1.2.1
Package Id
@devtools-ds/tree@1.2.1
Unpacked Size
100.69 kB
Size
20.18 kB
File Count
27
NPM Version
lerna/3.22.1/node@v12.22.7+x64 (linux)
Node Version
12.22.7
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
3
1
A versatile expanding Tree
component, with full keyboard navigation following the Tree View Design Pattern.
1npm i @devtools-ds/tree 2# or with yarn 3yarn add @devtools-ds/tree
Then to use the component in your code just import it!
1import { Tree } from "@devtools-ds/tree";
This component follows the DOM structure and interaction guidelines outlined in the Tree View Design Pattern.
Some of these resources were helpful for following the tree
view interaction best practices.
The label can be a string or a React component.
1<Tree label="Root"> 2 <Tree label="Branch One"> 3 <Tree label="Leaf One" /> 4 <Tree label="Leaf Two" /> 5 </Tree> 6 <Tree label="Branch Two" /> 7 <Tree label="Branch Three" /> 8</Tree>
Thanks goes to these wonderful people (emoji key):
Tyler Krupicka 💻 📖 🎨 🚇 💡 ⚠️ | Adam Dierkens 📖 💡 ⚠️ 💻 | Andrew Lisowski 📖 💡 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 3/19 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
142 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More