5
16 Comments

How would you build a visual canvas like Miro?

I want to build a visual canvas ("mindmap") where I can add text and boxes to a canvas while also connecting it nicely with arrows and lines. I'm looking for a super simple solution that is similar to Miro (just with far less complexity). Any ideas on how to implement such a thing?

Currently, I am looking at D3.js, Konva.js and gojs.net

Appreciate your help.

  1. 3

    A nice example to look at would be excalidraw. It's fully open source, done in react using good practices etc. https://excalidraw.com/ - click the top right cat thing to go to the code.

    1. 1

      Thanks, I like how it is really close to "drawing"

  2. 3

    Some colleagues of mine are working on a similar open source project:
    https://github.com/raimohanska/r-board

    Perhaps you can check/fork/get inspired by their approach (it's MIT licensed).

    1. 1

      Thanks for sharing, definitely interesting to look into!

    2. 1

      r-board looks cool!

  3. 2

    It would be quite simple to draw the elements in HTML Canvas, but handling click events would require calculating the location of each element and comparing that to the click location. It looks like Konva.js helps with that. D3.js is fairly complicated and probably overkill.

    I'm not a huge fan of SVG, I don't think it gets as much love as canvas. But you can interact with svg in the same way you would normally interact with DOM elements which would make handling click events easy.

    I would probably go with Konva.

  4. 2

    Ink and switches proof of concept pushpin is worth reviewing,

    https://github.com/automerge/pushpin

    it is a p2p corkboard, built using react

    1. 1

      Very smart concept. Got inspired by it!

  5. 2

    I've thought about building something like Miro too, and my initial thought was that I would build it as a react app and use a library like react-archer to connect absolutely positioned components and move them around using react-dnd. But Miro uses HTML canvas instead so I don't really know what the pro/cons of those two different approaches are.

      1. 1

        Great guide. Also interesting to think about the HTML Canvas approach. Gotta dig deeper into benefits/downsides.

      2. 1

        The screenshots looked really good, I wish they'd shared the code!

  6. 1

    http://fabricjs.com seems to be the most universal solution so far

    1. 1

      Fabric's support and development is a rocky ride :)

  7. 1

    JointJs seems super powerful as well

  8. 1

    I also stumbled across https://bpmn.io which seems quite cool.

Trending on Indie Hackers
💯 users 💯 days 39 comments Can you give me some feedback? 20 comments Returning to the IH scene with two new products after pivoting a failed one 8 comments HootSuite founder Ryan Holmes discusses product validation platform Kernal 8 comments Hi, just posted my first blog post. What do you think? 6 comments How to fight back against Google FLoC 6 comments