Skill Tree Designer

Design scalable Roblox skill trees with a visual editor and a responsive, API-driven runtime.

1 / 5

Skill Tree Designer converting a Roblox plugin honeycomb layout into a Roblox Studio skill tree — enlarged view
1 / 5

Overview

Skill Tree Designer 3.0 is a Roblox Studio plugin for building skill trees, perk trees, talent trees and other node-based progression layouts. Design and connect nodes visually, start from honeycomb or progression-focused patterns, then ship a responsive runtime with optional mobile controls, entrance animations and a client API for custom interfaces.

Skill Tree Designer 3.0 turns a visual node layout into a responsive in-game skill-tree experience. It is built for Roblox developers who want to design progression paths quickly in Studio, support mouse and touch players, and connect their own interface controls without replacing the generated runtime.

Editor controls

The responsive editor combines a top toolbar, a Tree Inspector and a scalable canvas. Create or load a tree, delete selected nodes, zoom to a node, center the complete layout, fit every node into view and toggle labels or links. Drag a box across the canvas for fast multi-selection, then copy, mass copy or delete the selected nodes.

Start with a compact 1x1, 3x3 or 5x5 honeycomb, or use the new Snowflake, Spiral and Branches patterns for recognizable progression shapes. Larger 7x7 through 11x11 honeycomb presets remain available in the inspector.

Runtime and mobile controls

Generated trees now include an aspect-aware client runtime that responds to viewport changes. Players can drag the tree with a mouse, middle mouse button or touch and zoom toward the pointer with the mouse wheel. Enable the built-in six-button mobile pad when you want ready-made directional and zoom controls.

The SkillTreeAPI folder exposes movement, zoom, centering, reset, visibility, entrance-animation and mobile-control commands through BindableEvents and BindableFunctions. Connect custom mobile buttons or another LocalScript without editing the generated controller.

Presentation and customization

Choose Cascade, Drop or Pop entrance animations for nodes when a tree opens, or disable generated tweens and provide your own effects. In the editor, fourteen color themes, three font families, four font weights, adjustable text sizing and optional UI motion let you tune the workspace to your preference.

Node width, height and spacing remain independently adjustable. You can switch between Honeycomb and Table positioning, choose a custom node image, and configure defaults for every new tree. Fix Tree can bring older trees forward to the 3.0 runtime while leaving existing script source under your control.

Suggested workflow

  1. Install the plugin from the official Roblox Creator Store listing.
  2. Open the plugin in Roblox Studio and create a new tree.
  3. Choose a honeycomb size or start from the Snowflake, Spiral or Branches pattern.
  4. Adjust node size and spacing for the intended interface scale.
  5. Connect nodes to represent progression requirements.
  6. Choose the runtime entrance effect and enable mobile navigation if your experience needs it.
  7. Connect custom controls through the client API when the built-in controls are not the right fit.
  8. Use Zoom Node, Center Tree and Zoom Fit to review the finished layout.

Purchase and delivery are handled through the official Roblox Creator Store listing linked on this page.

Features & requirements

Included

  • Interactive visual editor with live Studio previews
  • Responsive, aspect-aware runtime for desktop and mobile layouts
  • Client runtime API for movement, zoom, visibility, animations and mobile controls
  • Optional built-in 2 by 3 mobile navigation and zoom pad
  • Mouse, middle-mouse and touch dragging with cursor-centred zoom
  • Cascade, Drop and Pop runtime entrance animations
  • Drag-box multi-selection with live node highlighting
  • Honeycomb, Snowflake, Spiral and Branches starter patterns
  • Honeycomb and aligned table layout modes
  • Custom main node image or shape asset per tree
  • Toggle node names, connection lines, the editor grid and runtime effects
  • Independent node-size and horizontal or vertical spacing controls
  • Built-in 1 by 1 through 11 by 11 layout presets
  • Copy and Mass Copy with a visible confirmation button
  • Fourteen editor themes plus font, weight, text-size, stroke and motion controls
  • Configurable new-tree defaults, keybinds and focus-scoped shortcuts
  • One-click documentation-link copying for use outside Studio
  • Fix Tree upgrades legacy trees and restores required runtime components without overwriting custom script source

Useful for

  • Design a skill or perk tree in Roblox Studio
  • Arrange connected ability and upgrade nodes
  • Build a responsive node-based progression interface
  • Add touch-friendly controls to a skill tree
  • Control a skill tree from custom client UI

Before you start

  • Roblox Studio
  • The Skill Tree Designer plugin installed from the Creator Store
  • A project that uses or plans to use a node-based progression system

Release notes

3.0Sep 4, 202610 changes
  • Introduced a responsive, aspect-aware runtime that keeps generated trees usable across changing viewport sizes.
  • Added a client runtime API with events for panning, positioning, zooming, centering, resetting, entrance effects and mobile controls, plus state and visibility functions.
  • Added optional built-in mobile navigation with a responsive 2 by 3 movement and zoom pad, along with direct touch dragging.
  • Added Cascade, Drop and Pop node entrance animations with per-tree enable controls and API playback.
  • Added drag-box multi-selection with live highlighting when at least 51 percent of a node is inside the selection area.
  • Added Snowflake, Spiral and Branches starter patterns alongside the existing honeycomb sizes.
  • Added fourteen editor themes, three font families, four font weights, adjustable text size and stroke, and optional UI motion.
  • Reworked the editor into a responsive toolbar, Tree Inspector and tabbed settings experience with clearer status feedback.
  • Updated the default navigation shortcuts to T for Zoom Node, G for Center Tree and E for Zoom Fit.
  • Expanded Fix Tree to add or repair the runtime API, mobile controls, responsive layout data and an embedded runtime README while preserving existing script source.
2.5.5Aug 12, 20269 changes
  • Added right-click node and empty-canvas action menus with arbitrary node placement.
  • Added selected-node properties, Center Node controls, Copy and working Mass Copy confirmation.
  • Added configurable defaults, editable keybinds, focus-scoped shortcuts and responsive editor layouts.
  • Added per-tree and new-tree node image assets plus Honeycomb and aligned Table layout modes.
  • Changed Center Tree and Zoom Fit to use complete node bounds, with Zoom Fit padding every node inside the canvas.
  • Matched the stationary canvas and movable tree-frame borders for consistent panning feedback.
  • Moved active-tree appearance and node-shape controls into Designer Settings for a cleaner Properties panel.
  • Replaced blocked external documentation launching with a clipboard-safe Copy Link action.
  • Improved Fit Screen containment, top-left canvas alignment and centered tree/runtime movement.
ReleasedJun 20, 20264 changes
  • Initial release of Skill Tree Designer.
  • Included the interactive grid node editor and connection tools.
  • Included pan, zoom, centering and zoom-to-fit navigation.
  • Added layout controls, honeycomb presets and component recovery tools.

Use is subject to the GoldAstro Product Licence. Redistribution or resale of the source files is not allowed.