JS - Box\inserts planner - solutions and advices

I want to make a frontend (js) app that helps to make blueprints of different boxes\inserts for laser cut.

User can create inserts of any form and size and after this it should provide a blueprint (svg)

So main problems are:

• How to render - create HTML boxes or use svg\canvas
• How to slice rects to have inner 'walls' for inserts
• How to detect where 'walls' connected to generate connection pattern

So in generaly im asking about directions - maybe some useful libraries for render\slice\math such stuff.

User can 'plan' something like

And after planning app should provide blueprint like

Working with pure html and 'div's pretty easy, but slicing it kinda complicated.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/tpTR7Uw