[TOOL] Visual Graph Editor Extension for PlayCanvas 🚀

Useful Resources
, ,
1

Hi everyone! :wave:

I’m excited to share a side project I’ve been working on: PlayCanvas Visual Graph Editor.

It’s a Chrome Extension that adds a visual node-based interface to the PlayCanvas Editor. As my scenes grew more complex, I found it increasingly difficult to visualize the hierarchy and data flow between scripts—so I built this tool try to improve that.

:sparkles: Key Features

  • Visual Scene Graph: View your entity hierarchy as an interactive node tree.

  • Visual Connections: See connection lines for entity script attributes instantly (great for visualizing dependencies!).

  • Comprehensive Attribute Support: I’ve referenced the PlayCanvas ESM Attribute Types documentation to support a wide range of types, including boolean, number, string, json, asset, entity, rgb, rgba, vec2, vec3, vec4, curve, and colorCurve.

  • Optimized Array Inputs: Improve UI for managing array data.

  • Bi-directional Sync: Everything syncs with the PlayCanvas Editor in real-time.

Demo

pc-graph-editor-demo

Links

Usage

  1. Install:
    • Download and unzip the latest release (PlayCanvas-Graph-Editor.zip).
    • Go to chrome://extensions/ > Enable “Developer mode” > “Load unpacked” > Select the folder.
  2. Open Editor: Go to your PlayCanvas project editor.
  3. Launch: Click the “PlayCanvas Graph Editor” extension icon to open the app tab.

It’s currently in an early stage (v0.0.1). While I’ve tried to cover most attribute types, there might still be edge cases or UI imperfections. :melting_face:

I’m really curious to know if this idea is helpful for your workflow? Does it solve the visualization problems you face, or is there a different idea you’d prefer?

I’d love to hear your thoughts, feedback, or any features you think are missing!

Feel free to try it out and let me know what you think (or report issues on GitHub).

Happy developing! :joystick:

13 Likes