6
15 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

    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!

  4. 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!

  5. 1

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

    1. 1

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

  6. 1

    JointJs seems super powerful as well

  7. 1

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

  8. 2

    This comment was deleted 2 years ago.

Trending on Indie Hackers
Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 18 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments