Great library but quite low level

[Rodeoclash]

I love what this library does and the results are amazing. For context I run a website that allows coaches to review video game footage and provide feedback and have prototyped using this to allow coaches to draw on top of the videos.

One question I have for @steveruizok or anybody else in the community, is anybody aware of a library which uses perfect-freehand but at a higher level? The demo (https://perfect-freehand-example.vercel.app/) comes close with providing tools for stroke colour / width etc (but does not allow selecting existing elements to move them around, erase them etc. Also, does the source exist somewhere?)

I found excalidraw which is almost exactly what I'm looking for but this appears to be canvas based rather than SVG based. SVG suits be better as I can alter the viewbox attribute to match the scaling of the video.

[steveruizok]

Hey @Rodeoclash, thanks! You might also like my library telestrator, which is designed for that "drawing on top of video" experience, but more for screen shares and streaming. That project was actually what led me to develop perfect-freehand, so it's nice to see it coming full circle with your work!

I also use perfect-freehand extensively in TLDraw, where perfect-freehand is used for the pen tool as well as the circle, rectangle, and arrow shapes. Both that project and the perfect-freehand example are built on TLDraw's core library. If you're curious about how that works, try hacking on the tldraw/core library's advanced example.

Also, regarding SVG: yet another of my projects, globs.design, is "svg only". Shapes are React components that return <path> elements, all of which sit inside of a single SVG element. If you're planning to go that route, I can confirm that it was plenty fast and works as you would expect!

[Rodeoclash]

@steveruizok thanks for the reply. All of those libraries look great! TLDraw in particular is almost exactly what I was looking for,

That said, I've actually gone ahead and implemented my own UI controls for it now (however they're pretty crude)

Is the idea for TLDraw to be a paid for app? I'd certainly be happy to pay a one off fee for a drawing tool similar to how I've implemented things already but actually contained a full set of controls (text, ellipse etc like you have in TLDraw). If that's your plan then keep me in the loop as it'd save me quite a bit of time. My main requirement is something that can scale with the size of the video (which makes SVG ideal).

You should definitely add a section to your readme for the library which lists those projects ^^^ as I didn't find them when I was looking around.

If you want to see how I'm using the tool, https://www.volt.school/videos/2f0bef7e-4ea4-4fd9-b5f7-516befd46936 show's the end result of that screenshot above (also, best on a desktop rather than mobile!)

[steveruizok]

Thanks, I'll check it out! Yes, I'm in the process of building out tldraw as a company, so yes the idea for the future is to be a service for this sort of product problem. (I've been using Mapbox as a parallel for products that want to build something with maps).