Help implementing `Custom Preview` for GH file(s)

Hello everyone!

I’m exploring an idea of creating a diff-tool (file comparer) tool for VPL (Visual Programming Language) such as Grasshopper, Dynamo, and the like.

To keep things simple, I currently work with Grasshopper by creating a (.vson) / JSON representation of the entire file, from which visualization can be created. I currently generate a SVG representation of the .gh or .ghx file.

Current Status

As a next step, I want to try using this as a dynamic preview of .gh files in Speckle. For Example, When a user pushes a rhino / .3dm file, we get a preview of the geometry in the file. I intend to create something similar - more suited for 2D canvas.

Help Required

Does anyone have experience creating something like this? In my head, these would be some of the high-level steps involved.

  1. Trigger workflow / script when a commit event happens.
  2. Check if any files have my custom file extension (.vson)
  3. Generate visualization, and display it somewhere.

Directions to any reference material / reference-person is highly appreciated.

:bulb:Note: Although I mentioned it was a Diff-tool, atm I want to first make sure the preview works. Diff is next in my roadmap.

If you’re curious / need more information, feel free to reach out.


Kaushik LS
Chennai, IN

Cool Idea!

I wanted to learn and develop more stuff in this direction. I’m just getting started with automations in speckle, but if I can help with some Typescript/C#/Grasshopper programming, please let me know. :slight_smile:

Are you converting the xlm structure from the grasshopper file to .vson/JSON?


Hey @TheVessen
Thank you for your interest, I think it would be nice to have a JavaScript / React based front end for this project. Unfortunately, my JS skills are not so great, and hence I had to resort to SVG for now.
I just made the codebase public
Feel free to explore / fork / raise an Issue, PR, etc.


GitHub Repo
Project Roadmap


To answer your question:

No, currently I’m not parsing the XML because that would introduce scope-creep. It could be a project on its own imo.

Related Issue: Issue 4

1 Like

Cool React is not really my strengths more Svelte, but ill take a look! Thanks for sharing