Demo: SVGForge - SVG Node Editor
SVGForge is a SVG editor built using React and Redux for efficient state management. This editor was designed to modify SVG's to be used with code based animation libraries such as GSAP and React Spring.
- SVG viewer: A viewer that can inspect SVG paths, select paths for editing and has functionality such as zoom, pan, delete, undo, redo etc.
- Code Editor: An in-built code editor with detailed syntax and error handling.
- Theme Editor: View and customize the colors of the SVG at a global scale.
- Tree Hierarchy Panel: View the SVG paths as a tree with parent child relations.
- Properties Panel: View and modify properties such as colors, stoke width, ids, etc using the properties panel.
SVGForge Editor with theme configuration
Selected Path and Properties panel
SVGForge error handling for invalid syntax
State management using redux
SVGForge is built using Redux toolkit for state management and a custom subscription react hook for state selectors, This allows only those components that are subscribed to a state value to receive state updates reducing the strain on component re-renderers thereby increasing performance.
const selectedNode = useSelector(state => state.selectedNode)
The code editor is built using Microsoft's Monaco Editor with built-in intellisense and syntax colorization.
- UI Library
- Antd - https://ant.design
- Code Editor
- Monaco editor - https://microsoft.github.io/monaco-editor
- State Management Library
- Redux Toolkit - https://redux-toolkit.js.org