Side project

ReactTailwindShadcnReactFlowSVG

A node-based editor for visually creating and debugging SVGs

#Overview

Some times when you're crafting the best UI you can leverage SVG to get the exact result you're looking for. Many times, debugging SVGs can be tricky, especially when there are filters involved.

I always thought it would be great to have a tool where I can build SVGs visually, and inspect every step of a filter chain when something is not working quite right. SBG is my attempt to build such a tool.

#Features

• type-aware nodes and handles (connections in each node)
• visual cues for edges (lines connecting nodes) based on their type
• drop nodes from the / menu (menu works, but dropping hasn't been implemented yet! 😅)
• expanding nodes to get more details

Check it out at /sbg, as it's still just a demo and doesn't have its own home yet.