SVG Path Editor
Drag the control points and watch the path data write itself.
AdvancedWeb appCreative14–28hAI-buildable 3/5no setup
Render an SVG path, expose its anchor and control points as draggable handles, and keep the `d` attribute in sync both directions. Editing the text should move the handles; moving the handles should rewrite the text. That two-way binding over a parsed format is the meat of it.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Render a path from editable path data
- Anchor and control points show as draggable handles
- Dragging a handle updates the path data live
- Editing the path data text moves the handles
- Add and remove points on the path
- Curve and line segments are both supported
- Copy the finished path data to the clipboard
The interesting part
- Parsing and re-serialising path data without losing precision
- Converting pointer coordinates into the SVG's own coordinate space
- Keeping bezier control points sensible when an anchor moves
Once it works
- Add undo and redo
- Snap handles to a grid
- Export the path as a standalone SVG file
Suggested stack
reacttypescripttailwind