8 ms·

Infinite Canvas

95 points by bpierre 4y ago

samwillis 4y ago
A particularly interesting one in the gallery is TLdraw (https://beta.tldraw.com/ https://beta.tldraw.com/). As well as building an infinite canvas app they are also developing a toolkit for others to use to build application specific infinite canvases.
- rapnie 4y ago
  Was discussed recently: https://news.ycombinator.com/item?id=33818822 https://news.ycombinator.com/item?id=33818822
- ge96 4y ago
  Paid but Miro is pretty nice, have used in workplace
topspin 4y ago
A useful survey of current efforts. However, I don't see what I want here: depth. The third dimension. Yes, we think visually. But we also aggressively compartmentalize. We rigorously group things into mental boxes, dig into the boxes when necessary, or stick them in our mental attic while concerns are elsewhere. There are examples of grouping and some clear hierarchies. But our mental processes are more complex. Things can exist in multiple boxes, boxes can overlap, crosscut, have different priorities, constraints, etc. Conventional hierarchies are too simple.
- waldir 4y ago
  That's why I prefer outliners. They still provide the sense of an infinitely nestable hierarchy, allow focusing on arbitrary levels of it as a temporary "root" document", and allow collapsing entire trees that are irrelevant for the current work I'm doing. But crucially, if they implement live cloning of subtrees (in Workflowy, for example, these are called "mirrors"), they can also allow a more flexible graph structure as opposed to a strictly hierarchical tree. Of course, that misses the graphical/spatial aspect of other tools, but as josephg points out, these sometimes backfire without a natural, design-encouraged way to organize the content, and a stable frame reference. I for one don't miss the ability to organize my content spatially, even though I do that when working with physical paper. I think that's because of the limitations of the medium — i.e. I spread paper sheets out on a surface, and spread content within those sheets, because it's the only way to group content in a stable manner. The nesting system performs the same function for me in outliners.
mch82 4y ago
“Zooming User Interface” article on Wikipedia is another overview of the history behind ZUI, https://en.wikipedia.org/wiki/Zooming_user_interface https://en.wikipedia.org/wiki/Zooming_user_interface
mch82 4y ago
Great to see this catalog! I’m extremely excited about the current wave of ZUI / infinite canvas apps & was surprised by how many apps there are. So far, my favorite infinite canvas apps have been InVision Freehand and Excalidraw. This category of app might finally be the “killer app” that drives tablet adoption & moves digital collaboration ahead of the physical whiteboard. Freehand has changed how I work with my team. It’s phenomenal for documenting workflows. It’s also better than PowerPoint at evolving a slide deck. Amazingly, it works well enough on a phone to reference on the go. Currently too expensive for large teams though.
quickthrower2 4y ago
how do you submit an app?
- zhenpixels 4y ago
  Submit an issue on GitHub! I’m one of the creators. Got a bit backed up due to personal circumstances, but I have time carved out in the holidays to make changes.
cjohnson318 4y ago
I don't understand the value proposition of ZUI. Yes, I think visually, but I tend to remember things as atoms, or as narratives. An atom might be "CBC means Cipher Block Chaining", a narrative might be, "you take your plaintext and split it into blocks, then you take your IV and XOR it with your first block, then you XOR block n with the block n-1". I'm not sure that a graph data structure adds value. What's the value add for y'all? Is this mostly an information collection exercise?
- pavlov 4y ago
  It sounds like you’re thinking about recording facts. The CBC algorithm doesn’t change and doesn’t contain human uncertainties. Designing or planning something is different. You want to record options, potential paths that may not be taken, input from various people with different viewpoints. A graph structure can help manage that by making the branching and grouping more explicit.
- greenbit 4y ago
  How do you find your way around your home town? The brain's ability to handle that problem is so deep, most people don't even notice. It's taken for granted, like breathing. Graphic representation can plug into that brain system. We all want tools that get out of the way and enable us to focus on the problem at hand, to help establish the much desired state of flow - nobody (I know, anyway) likes to continuously put the business problem on pause to navigate some tool's odd conceptualization of the work space. At least for some users, the value-add is smoother work flow.
  - its-summertime 4y ago
    > How do you find your way around your home town? Extremely poorly? I 100% notice my lack of ability to navigate without aid. If I was to guess the representation in my head, it'd be a node graph, which you'd think would be spatial, but doesn't have to be, in my case it isn't. Intersections are just connected to other intersections, that's all I seemingly know: I can't even reasonably predict how far I am along a road! All of this to somewhat say, the "some" in "At least for some users" is doing overtime: I think the answer isn't an infinite canvas, but somewhere in the facts of what an infinite canvas offers us over traditional forms: extreme link-ability between things, and organization of those links
rapnie 4y ago
Would be nice if this website also tracked software projects for building infinite canvases in your own apps. Especially for collaborative online canvases there's not that many (F)OSS projects around. All the nice, well-designed products are proprietary SaaS'es.
- hobofan 4y ago
  Yes, please! Trying to replicate the navigational behavior of those apps, isn't as straightforward as one would hope, and having some good open source references would help out a lot. E.g. lot of canvas/whiteboard "competitors" use drag-to-pan with a trackpad, which if you've ever used Miro/Figma/etc. feels very outdated compared to the two-finger pan that they use. We've tried to replicate similar behavior for our app and had to try and reverse-engineer it from multiple of those apps, as almost every out of the box OSS implemenation of canvas navigation only implements drag-to-pan.
CTDOCodebases 4y ago
I wish someone would just clone Freeform and make it multi platform with a subscription similar to Obsidian. The apple ecosystem is lovely but I’m not willing to pay the cost of entry when I have perfectly functioning hardware.
perk 4y ago
Shameless plug: https://stylepad.io https://stylepad.io
samwillis 4y ago
I think they have missed the opportunity to make the whole site a zooming infinite canvas. Would however feel a little like some of the experimental site of the early 2000s. It's a lovely resource.
coldblues 4y ago
It would be awesome if someone actually built an infinite canvas application that didn't run on the browser, so that you could actually use it effectively. Currently, the majority of infinite canvas applications begin to noticeably lag and stutter after a while, and start to have syncing inconsistencies especially in their "multiplayer" mode.
- catach 4y ago
  Seems like there's plenty of native options here: https://alternativeto.net/feature/infinite-canvas/ https://alternativeto.net/feature/infinite-canvas/
- NL807 4y ago
  They lag because some Porter and Duff layer composition modes require textures at the size of the parent bounding box enclosing all objects. Bigger the texture, the more resource demanding the composition becomes.
- pprotas 4y ago
  FigJam can run outside of the browser. It always surprises me how FigJam is never mentioned in discussions around this topic, even though it’s sibling product (Figma) is so popular!
- marcinignac 4y ago
  If you are on Mac then there is one called Muse (https://museapp.com/ https://museapp.com/) by the authors of the site in this thread and it's as smooth as you would expect.
- agloeregrets 4y ago
  Lol. Their key example is Figma…which is, effectively, a better knockoff of the native Sketch mac desktop app. It had that infinite canvas first.
  - ethanbond 4y ago
    “Knockoff” is not giving Figma its due credit. People loved Sketch, and now everyone in product design is using Figma. You think that happened by Figma being a knockoff?
pixel_tracing 4y ago
I’d be curious to know how one actually implements infinite canvas? I guess would you: 1. Initially set a default window size and scale the window to that? 2. Track if the user is zooming in and out and based on the zoom factor scale all the windows contents based on that?
- agloeregrets 4y ago
  I get the impression that it kinda is like Minecraft: you have a 0,0 position and a scale factor. On a 1440p 100% scale display the bottom right corner would be position 2560,1440. When you zoom the position becomes 2560* scale factor by 1440 * scale factor. Then, during rendering, all size values just hit that scale factor.
josephg 4y ago
Just as a counterpoint: I've been really enjoying goodnotes on the ipad lately. GoodNotes is a notetaking app which is not an infinitely zoomable canvas. And I love it. (I'm not affiliated in any way, I'm just a huge fan). Goodnotes documents are essentially paper notepads that you can write in. New pages are added to the document as you need them (usually by swiping right from the last page). I've tried a couple infinitely zoomable canvases but I tend to make a bit of a dog's breakfast when I use them: - Everything ends up in a seemingly random place in the document, and at different zoom levels. I personally find I tend to gradually zoom out while I write in infinite canvas apps. After awhile it gets increasingly difficult to find things I've written earlier because old things get small. - There's no natural sense of "before" or "after" on an infinite canvas. This is kind of the point, but it makes me work harder to keep items arranged in space or tell a story after you've taken a bunch of notes. If you don't, then you've got to go hunting for things. Goodnotes doesn't have this problem. I can sit down and just start writing, or flip to a new page and write there. Because pages have a natural order, my notes end up in a nice chronological ordering. Each page is individually coherent, and its easy to reorder & delete pages later if I want to throw away some of my rough note pages. And each page is screen sized. There's no ambiguity about how big each pen is, or what the right zoom level is for something I've written. Each page fits on the screen. The next page is a swipe away. Infinite canvases are better for connecting disperate ideas - like mind mapping. But the notes I've taken in goodnotes feel easier to read later, or screen share and present. I find I tend to go back and read them more often.
- jwr 4y ago
  Goodnotes is a great app, I've been using it for years. But it has two big usability issues: 1. Your documents are not organized spatially. They are dumped in a way that is convenient for application developers to implement. This means that every time you launch an app with an idea in your head, you spend time and mental effort on finding the document that you want to open. By the time you get there, the idea is often gone. 2. Its "paper" isn't screen-sized. Seems silly? Perhaps — but on my iPad Pro about 10% of screen space is wasted on "margins" just because their "paper" isn't the right size. If you don't implement an infinite canvas, that's fine, but then provide a way to quickly take notes on "pages" without zooming, panning, or otherwise fiddling, and provide a way to use all of the screen. I feel like we underestimate the power of simple and the power of spatial organization.
jwr 4y ago
"We think spatially" — this is true! So why do most of our apps and operating systems insist on ignoring that and dump stuff on us in a programmer-convenient way? The Mac desktop remembers icon/folder positions — and people love it! That's why it's used for so many things and why you so often see unbelievably busy/cluttered desktops. So why can't other apps and OSs do the same? Windows insists on losing my desktop arrangement regularly. Apps and file managers show table views. File-Open windows show (tiny) table views with inscrutable navigation. And even the Mac, which used to be spatially-organized, can't even be bothered to remember window positions correctly.
- greenbit 4y ago
  Used Macs back in mid/late 80s, and to this day that feature, that icons stay where you put them, is the part I miss the most. Before 95, Windows seemed like just a glorified program-launcher, but when 95 took on that icons-stay -put feature, that's when I decided Windows might just be ok after all. It makes sense, at a deep level in our brains, that we apprehend our world spatially, that we'd be adapted to instant recognition of landscapes. Other people would look at my Mac folders and ask "how can you find anything?" For me, it was bliss. I could see without having to read any path names exactly where I was, because each folder's icons had a unique sort of constellation. If I needed to find someplace else, unconscious brain mechanisms could tell me it's that way, i.e. behind whichever icon. London cabbies are known to have maps of the entire city in their minds, and that's what it felt like. Some of the same people that thought my icon arrangements were crazy had their own constellations that didn't make sense to me. It was a much more personal experience. So of course not long after trying to get comfortable with W95, it came as a shock when I discovered previously tamed territory was suddenly in disarray. Suddenly I had to read O(n) icon names to find what was sought, rather than just knowing by spatial arrangement which was the right one. And as I tried to establish and expand order, it became apparent this was just a kind of whack-a-mole, due to a very poor implementation that could only retain 400 positions at most. There were many other reasons I eventually abandoned Windows, but this was one of the first deep aggravations with it.
janlaureys 4y ago
I feel like Freeform is gonna be quite a setback for a lot of these infinite canvas drawing/notes apps.
- CTDOCodebases 4y ago
  The issue with freeform is it's tied to the apple ecosystem.
yesenadam 4y ago
Obsidian now has infinite canvas as a core plugin. https://obsidian.md/canvas https://obsidian.md/canvas 15min video demoing it: https://www.youtube.com/watch?v=rPescoJzcFA https://www.youtube.com/watch?v=rPescoJzcFA
KyleBrandt 4y ago
Don't have it in front of me to verify, but would NodeRed make the list? https://nodered.org/ https://nodered.org/
archivisti 4y ago
obsidian also added canvas mode, been using it for couple of days and it's pretty cool.
rrgok 4y ago
Sigh, no self-hosted alternatives? Why is so difficult to offer a payed self-hosted license? Obsidian comes close, but it doesn't offer the full drawing toolbox like Miro.

95 points by bpierre 4y ago

A particularly interesting one in the gallery is TLdraw (https://beta.tldraw.com/ https://beta.tldraw.com/). As well as building an infinite canvas app they are also developing a toolkit for others to use to build application specific infinite canvases.

rapnie 4y ago
Was discussed recently: https://news.ycombinator.com/item?id=33818822 https://news.ycombinator.com/item?id=33818822
ge96 4y ago
Paid but Miro is pretty nice, have used in workplace

topspin 4y ago

A useful survey of current efforts. However, I don't see what I want here: depth. The third dimension. Yes, we think visually. But we also aggressively compartmentalize. We rigorously group things into mental boxes, dig into the boxes when necessary, or stick them in our mental attic while concerns are elsewhere. There are examples of grouping and some clear hierarchies. But our mental processes are more complex. Things can exist in multiple boxes, boxes can overlap, crosscut, have different priorities, constraints, etc. Conventional hierarchies are too simple.

waldir 4y ago
That's why I prefer outliners. They still provide the sense of an infinitely nestable hierarchy, allow focusing on arbitrary levels of it as a temporary "root" document", and allow collapsing entire trees that are irrelevant for the current work I'm doing. But crucially, if they implement live cloning of subtrees (in Workflowy, for example, these are called "mirrors"), they can also allow a more flexible graph structure as opposed to a strictly hierarchical tree. Of course, that misses the graphical/spatial aspect of other tools, but as josephg points out, these sometimes backfire without a natural, design-encouraged way to organize the content, and a stable frame reference. I for one don't miss the ability to organize my content spatially, even though I do that when working with physical paper. I think that's because of the limitations of the medium — i.e. I spread paper sheets out on a surface, and spread content within those sheets, because it's the only way to group content in a stable manner. The nesting system performs the same function for me in outliners.

mch82 4y ago

“Zooming User Interface” article on Wikipedia is another overview of the history behind ZUI, https://en.wikipedia.org/wiki/Zooming_user_interface https://en.wikipedia.org/wiki/Zooming_user_interface

mch82 4y ago

Great to see this catalog! I’m extremely excited about the current wave of ZUI / infinite canvas apps & was surprised by how many apps there are. So far, my favorite infinite canvas apps have been InVision Freehand and Excalidraw. This category of app might finally be the “killer app” that drives tablet adoption & moves digital collaboration ahead of the physical whiteboard. Freehand has changed how I work with my team. It’s phenomenal for documenting workflows. It’s also better than PowerPoint at evolving a slide deck. Amazingly, it works well enough on a phone to reference on the go. Currently too expensive for large teams though.

quickthrower2 4y ago

how do you submit an app?

zhenpixels 4y ago
Submit an issue on GitHub! I’m one of the creators. Got a bit backed up due to personal circumstances, but I have time carved out in the holidays to make changes.

cjohnson318 4y ago

I don't understand the value proposition of ZUI. Yes, I think visually, but I tend to remember things as atoms, or as narratives. An atom might be "CBC means Cipher Block Chaining", a narrative might be, "you take your plaintext and split it into blocks, then you take your IV and XOR it with your first block, then you XOR block n with the block n-1". I'm not sure that a graph data structure adds value. What's the value add for y'all? Is this mostly an information collection exercise?

pavlov 4y ago
It sounds like you’re thinking about recording facts. The CBC algorithm doesn’t change and doesn’t contain human uncertainties. Designing or planning something is different. You want to record options, potential paths that may not be taken, input from various people with different viewpoints. A graph structure can help manage that by making the branching and grouping more explicit.
greenbit 4y ago
How do you find your way around your home town? The brain's ability to handle that problem is so deep, most people don't even notice. It's taken for granted, like breathing. Graphic representation can plug into that brain system. We all want tools that get out of the way and enable us to focus on the problem at hand, to help establish the much desired state of flow - nobody (I know, anyway) likes to continuously put the business problem on pause to navigate some tool's odd conceptualization of the work space. At least for some users, the value-add is smoother work flow.
- its-summertime 4y ago
  > How do you find your way around your home town? Extremely poorly? I 100% notice my lack of ability to navigate without aid. If I was to guess the representation in my head, it'd be a node graph, which you'd think would be spatial, but doesn't have to be, in my case it isn't. Intersections are just connected to other intersections, that's all I seemingly know: I can't even reasonably predict how far I am along a road! All of this to somewhat say, the "some" in "At least for some users" is doing overtime: I think the answer isn't an infinite canvas, but somewhere in the facts of what an infinite canvas offers us over traditional forms: extreme link-ability between things, and organization of those links

rapnie 4y ago

Would be nice if this website also tracked software projects for building infinite canvases in your own apps. Especially for collaborative online canvases there's not that many (F)OSS projects around. All the nice, well-designed products are proprietary SaaS'es.

hobofan 4y ago
Yes, please! Trying to replicate the navigational behavior of those apps, isn't as straightforward as one would hope, and having some good open source references would help out a lot. E.g. lot of canvas/whiteboard "competitors" use drag-to-pan with a trackpad, which if you've ever used Miro/Figma/etc. feels very outdated compared to the two-finger pan that they use. We've tried to replicate similar behavior for our app and had to try and reverse-engineer it from multiple of those apps, as almost every out of the box OSS implemenation of canvas navigation only implements drag-to-pan.

CTDOCodebases 4y ago

I wish someone would just clone Freeform and make it multi platform with a subscription similar to Obsidian. The apple ecosystem is lovely but I’m not willing to pay the cost of entry when I have perfectly functioning hardware.

perk 4y ago

Shameless plug: https://stylepad.io https://stylepad.io

samwillis 4y ago

I think they have missed the opportunity to make the whole site a zooming infinite canvas. Would however feel a little like some of the experimental site of the early 2000s. It's a lovely resource.

coldblues 4y ago

It would be awesome if someone actually built an infinite canvas application that didn't run on the browser, so that you could actually use it effectively. Currently, the majority of infinite canvas applications begin to noticeably lag and stutter after a while, and start to have syncing inconsistencies especially in their "multiplayer" mode.

catach 4y ago
Seems like there's plenty of native options here: https://alternativeto.net/feature/infinite-canvas/ https://alternativeto.net/feature/infinite-canvas/
NL807 4y ago
They lag because some Porter and Duff layer composition modes require textures at the size of the parent bounding box enclosing all objects. Bigger the texture, the more resource demanding the composition becomes.
pprotas 4y ago
FigJam can run outside of the browser. It always surprises me how FigJam is never mentioned in discussions around this topic, even though it’s sibling product (Figma) is so popular!
marcinignac 4y ago
If you are on Mac then there is one called Muse (https://museapp.com/ https://museapp.com/) by the authors of the site in this thread and it's as smooth as you would expect.
agloeregrets 4y ago
Lol. Their key example is Figma…which is, effectively, a better knockoff of the native Sketch mac desktop app. It had that infinite canvas first.
- ethanbond 4y ago
  “Knockoff” is not giving Figma its due credit. People loved Sketch, and now everyone in product design is using Figma. You think that happened by Figma being a knockoff?

pixel_tracing 4y ago

I’d be curious to know how one actually implements infinite canvas? I guess would you: 1. Initially set a default window size and scale the window to that? 2. Track if the user is zooming in and out and based on the zoom factor scale all the windows contents based on that?

agloeregrets 4y ago
I get the impression that it kinda is like Minecraft: you have a 0,0 position and a scale factor. On a 1440p 100% scale display the bottom right corner would be position 2560,1440. When you zoom the position becomes 2560* scale factor by 1440 * scale factor. Then, during rendering, all size values just hit that scale factor.

josephg 4y ago

Just as a counterpoint: I've been really enjoying goodnotes on the ipad lately. GoodNotes is a notetaking app which is not an infinitely zoomable canvas. And I love it. (I'm not affiliated in any way, I'm just a huge fan). Goodnotes documents are essentially paper notepads that you can write in. New pages are added to the document as you need them (usually by swiping right from the last page). I've tried a couple infinitely zoomable canvases but I tend to make a bit of a dog's breakfast when I use them: - Everything ends up in a seemingly random place in the document, and at different zoom levels. I personally find I tend to gradually zoom out while I write in infinite canvas apps. After awhile it gets increasingly difficult to find things I've written earlier because old things get small. - There's no natural sense of "before" or "after" on an infinite canvas. This is kind of the point, but it makes me work harder to keep items arranged in space or tell a story after you've taken a bunch of notes. If you don't, then you've got to go hunting for things. Goodnotes doesn't have this problem. I can sit down and just start writing, or flip to a new page and write there. Because pages have a natural order, my notes end up in a nice chronological ordering. Each page is individually coherent, and its easy to reorder & delete pages later if I want to throw away some of my rough note pages. And each page is screen sized. There's no ambiguity about how big each pen is, or what the right zoom level is for something I've written. Each page fits on the screen. The next page is a swipe away. Infinite canvases are better for connecting disperate ideas - like mind mapping. But the notes I've taken in goodnotes feel easier to read later, or screen share and present. I find I tend to go back and read them more often.

jwr 4y ago
Goodnotes is a great app, I've been using it for years. But it has two big usability issues: 1. Your documents are not organized spatially. They are dumped in a way that is convenient for application developers to implement. This means that every time you launch an app with an idea in your head, you spend time and mental effort on finding the document that you want to open. By the time you get there, the idea is often gone. 2. Its "paper" isn't screen-sized. Seems silly? Perhaps — but on my iPad Pro about 10% of screen space is wasted on "margins" just because their "paper" isn't the right size. If you don't implement an infinite canvas, that's fine, but then provide a way to quickly take notes on "pages" without zooming, panning, or otherwise fiddling, and provide a way to use all of the screen. I feel like we underestimate the power of simple and the power of spatial organization.

jwr 4y ago

"We think spatially" — this is true! So why do most of our apps and operating systems insist on ignoring that and dump stuff on us in a programmer-convenient way? The Mac desktop remembers icon/folder positions — and people love it! That's why it's used for so many things and why you so often see unbelievably busy/cluttered desktops. So why can't other apps and OSs do the same? Windows insists on losing my desktop arrangement regularly. Apps and file managers show table views. File-Open windows show (tiny) table views with inscrutable navigation. And even the Mac, which used to be spatially-organized, can't even be bothered to remember window positions correctly.

greenbit 4y ago
Used Macs back in mid/late 80s, and to this day that feature, that icons stay where you put them, is the part I miss the most. Before 95, Windows seemed like just a glorified program-launcher, but when 95 took on that icons-stay -put feature, that's when I decided Windows might just be ok after all. It makes sense, at a deep level in our brains, that we apprehend our world spatially, that we'd be adapted to instant recognition of landscapes. Other people would look at my Mac folders and ask "how can you find anything?" For me, it was bliss. I could see without having to read any path names exactly where I was, because each folder's icons had a unique sort of constellation. If I needed to find someplace else, unconscious brain mechanisms could tell me it's that way, i.e. behind whichever icon. London cabbies are known to have maps of the entire city in their minds, and that's what it felt like. Some of the same people that thought my icon arrangements were crazy had their own constellations that didn't make sense to me. It was a much more personal experience. So of course not long after trying to get comfortable with W95, it came as a shock when I discovered previously tamed territory was suddenly in disarray. Suddenly I had to read O(n) icon names to find what was sought, rather than just knowing by spatial arrangement which was the right one. And as I tried to establish and expand order, it became apparent this was just a kind of whack-a-mole, due to a very poor implementation that could only retain 400 positions at most. There were many other reasons I eventually abandoned Windows, but this was one of the first deep aggravations with it.

janlaureys 4y ago

I feel like Freeform is gonna be quite a setback for a lot of these infinite canvas drawing/notes apps.

CTDOCodebases 4y ago
The issue with freeform is it's tied to the apple ecosystem.

yesenadam 4y ago

Obsidian now has infinite canvas as a core plugin. https://obsidian.md/canvas https://obsidian.md/canvas 15min video demoing it: https://www.youtube.com/watch?v=rPescoJzcFA https://www.youtube.com/watch?v=rPescoJzcFA

KyleBrandt 4y ago

Don't have it in front of me to verify, but would NodeRed make the list? https://nodered.org/ https://nodered.org/

archivisti 4y ago

obsidian also added canvas mode, been using it for couple of days and it's pretty cool.

rrgok 4y ago

Sigh, no self-hosted alternatives? Why is so difficult to offer a payed self-hosted license? Obsidian comes close, but it doesn't offer the full drawing toolbox like Miro.