CSSScript.com Demo Page

Folder Tree JS Library Demos

Download Back To CSSScript.Com

Explore folders, organize files, and try search, selection, drag and drop, and live editing.

Workspace

Your files, your arrangement.
Loading

Drag to rearrange. Right-click for more actions. Use ↑ ↓ to navigate, F2 to rename, and Ctrl / ⌘ + click to select multiple items.

Selection & file actions

Selected item

Select an item to inspect it.

Clipboard & selection

Clipboard is empty.

Move or copy

Node controls

Behavior & appearance

Plugins

Selection & editing

Search

Appearance

Drag and drop

Checkboxes
No items checked.
Transfer between trees

Drag files between Workspace and Collections. Hold Ctrl / ⌘ while dragging to copy. You can also cut or copy in one tree, then paste into a folder in the other.

Collections

Loading & saved state

Load on demand

Choose Lazy loading above, then open a folder or load all folders together. Each request has a short simulated delay.

No pending requests.

Saved state

Capture open folders, selection, and checks. The State plugin also remembers them across page reloads.

No snapshot captured.
Tree data

Import a nested or flat JSON array. Imported data replaces the current Workspace tree.

Live events
    Changes stay in this demo. Reset anytime.