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:

    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,


    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
4 of my biggest mistakes from 2 years of building 👎 23 comments Best Gumroad Day Ever 18 comments "all that can be invented has been invented" syndrome, how do you deal with it? 16 comments Uncomfortable = Learning 12 comments From 13 followers to 1000 in less than 2 weeks 😱 9 comments My Newsletter Mention Brought More Traffic Than Product Hunt 3 comments