museapphq / infinitecanvas.tools

Website describing the infinite canvas category of app

InfiniteCanvas.tools

infinitecanvas.tools is a microsite describing and documenting the history of infinite canvas software, from early design tools (e.g. Illustrator) up to the explosion of whiteboarding, design, programming, and thinking tools today (e.g. Miro, Figma, Origami Studio, MindNode).

The site was created by the Muse team to help showcase the diversity of apps in this space. We draw some inspiration from early versions of jamstack.org, separating advocacy for the category from any one specific product.

We hope to celebrate how these new tools, Muse included, stand on the shoulders of those that came before. This site is a resource and community of like minded thinkers and builders who use infinite canvases in their work.

How to contribute

If you have a change in mind (for example, an app to add to the gallery), please either open an issue or make a pull request with your suggested change. One of the maintainers will follow up to merge your change.

App gallery

Each app gallery entry is a .md file in /src/content/gallery/.

Images are stored in /public/images/gallery. Images in the app gallery have an aspect ratio of 16x9. If you are providing an image, please provide a high-resolution image of at least 1200px wide with your pull request.

usecases is an array of string values chosen from the following list. The intention is to support building filtering or sorting of the list in the future.

• 3D modeling
• design prototyping
• diagramming
• drawing
• machine learning
• map making
• meetings
• mind mapping
• mood boards
• notetaking
• outlining
• process modeling
• programming
• project planning
• retrospectives
• reviews
• storyboarding
• studying
• task management
• teaching
• thinking
• ui design
• video editing
• virtual space
• website
• whiteboard

History

Each history entry is a .md file in /src/content/history/. Each entry has an entry in the frontmatter with the name of the image file.

Images are stored in /public/images/history. Each images has a size of 1024px x 684px. If you are providing an image, please provide a high-resolution image of at least 1024px wide with your pull request.

How to run server

First time setup

1. Clone this repo locally
2. Make sure you install a recent version of Node and npm TODO: identify which minimum version of node and npm are needed
3. Run npm install to install all the project dependencies

Running the dev server

1. Run npm run start to run the dev server. It will print a local address with port and a network address with port (for accessing on another device on the same local network e.g. a phone or tablet)

Under the hood / how to develop

Astro docs

This site is built in Astro.

Astro documentation

Tailwind

This site is styled using Tailwind CSS.

Tailwind documentation

VSCode plugins

If you are using VSCode, there are some useful plugins that can make development easier.

• Astro: This plugin (maintained by the Astro team) adds language support for Astro to VSCode.
• Headwind: This plugin automatically sorts tailwind classes every save.
• Tailwind CSS IntelliSense: This plugin (maintained by the Tailwind Labs team) adds code completion (including custom classes). Try pressing the space key on your keyboard when writing classes.
• Prettier - Code formatter: This formatter, once installed, will pick up the prettier config in this project's package.json.
• prettier-plugin-astro: prettier-plugin-astro adds support for .astro files. Follow instructions to get it working. It is already a dev dependency for this project.

infinitecanvas.tools's Issues

Add Stretch Paper

Nice quasi-infinite zoomable note-taking/sketching app for iPad: https://apps.apple.com/us/app/stretchpaper/id1209617522

update astro and other deps

Could consider setting up some sort of auto updating bot thing

Add zeroG Browser

Infinite canvas browser
https://moonvy.com/zeroG/

Add okso app

https://okso.app/

Add MindManager

https://www.mindmanager.com/

Title: MindManager
Platforms: web, Windows, macOS
Image: https://www.mindmanager.com/static/mm/images/mindmanager/2022/features/from-idea-to-execution.jpg
Description: Infinite canvas with dynamic visual diagrams, mind maps, flowcharts and more.
Multiplayer: true

Listing to add

https://nodenogg.in

if you need more detailed reasons to add ping back but hopefully website will be enough at this stage.

Add filtering / sorting to gallery

Currently the gallery is a list sorted by alphabetical order.

It could make it easier to browse the gallery if there were some sorting functionality. Each item already has a few parameters in the markdown files that isn't exposed:

• usecase
• multiplayer?
• platform (ios, windows, etc.)

Add DeepNotes.app

DeepNotes is an open source, end-to-end encrypted visual note-taking tool with deep bidirectional page navigation and realtime collaboration.

Example screenshot:

Add Enso

https://enso.org/

Add mental canvas

https://mentalcanvas.com

Add Sane

website: https://sane.fyi

https://www.alma.sh/

Add Logseq Whiteboards

Logseq is a Personal Knowledge Management application that is developing its own "Whiteboards" feature using Tldraw library.

Logseq Whiteboards is actually in beta and accessible for testers that support Logseq with at least 5$/month, but it will be available in a few weeks for everyone and as Free and Open Source Software (like the rest of Logseq).

Add Confluence Whiteboards

https://www.atlassian.com/software/confluence/whiteboards

Add Canva Whiteboard

https://www.canva.com/online-whiteboard/

From the above website:

Canva Whiteboards gives you infinite space to collaborate. Brainstorm, run a strategy session, or plan out a project. It's never been easier — or more fun — to work together. Capture your team’s best ideas and turn them into action plans in an instant with AI tools.

Add Quadratic

• https://www.quadratichq.com/

Add Obsidian Canvas

https://obsidian.md/canvas

Add popular online diagramming tools: diagrams.net and lucidchart.com

URL formatting truncates domain names with numbers > 3 and hyphens

Hi, I'm the author of Jade (https://dragonman225.js.org/jade.html). Thanks for including my work in the collection!

I noticed a weird behavior of the formatting of my domain name, though.

As shown in the screenshot, the parts after the second "2" is missing.

At first, I thought it was because of the length, but then I saw there were even longer domain names like "mischief.findmysoft.com", so I looked into the code and found

infinitecanvas.tools/src/pages/gallery.astro

Line 43 in a2177e1

.match(/[a-z1-3.]*/g)[0] + "↗" //capture just the domain and nothing after

The regex only keeps numbers 1, 2, and 3, which would truncate my domain name as soon as it sees the "5".

Are there any reasons behind this design? Thinking about it more, I could see it would also truncate domain names with hyphens, or even international domain names containing Unicode.

If a filter is necessary, maybe changing the regex to /[a-z0-9\-.]*/g would be a good start? It would support most domain names, while ignoring rarely used Unicode ones for now.

Slack Canvas

https://slack.com/features/canvas

Add Canva

Canva has an infinite canvas document now, called Whiteboards!

https://www.canva.com/online-whiteboard/templates/

Another Infinite Canvas app...

Hi!

Just wanted to mention Leonardo (https://www.getleonardo.com). Windows only. You can open drawings either with a specific resolution or infinite canvas. Somewhat similar to Mischief... except actively supported. Works very well on tablet/direct-draw-digitizers.

Thanks!

Add natto.dev

https://natto.dev/

Neat node-based JavaScript sandbox that would fit in nicely with all the other tools!

Add n8n.io to app gallery

n8n.md contents:

---
title: n8n
platforms: ["Web", "Windows", "Linux", "MacOS"]
url: https://n8n.io/
usecases: ["programming"]
image: n8n.jpg
description: "n8n is an extendable workflow automation tool. With a fair-code distribution model, n8n will always have visible source code, be available to self-host, and allow you to add your own custom functions, logic and apps. n8n's node-based approach makes it highly versatile, enabling you to connect anything to everything."
multiplayer: false
---

Image:

Add Quant-UX

Please add https://github.com/KlausSchaefers/quant-ux, which is an OpenSource canvas based UX research tool.

Allow clicking on the images in the gallery to maximize them

This is slightly related to #23, but the idea here is to allow the higher-resolution images in the Gallery page to be shown in a pop-up / lightbox, maximized to fill the available viewport.

Even better if the description of the tool were shown underneath the image, and navigation controls (keyboard arrow keys and clickable arrow icons) were present, allowing a richer way to explore the gallery. But this could be a separate enhancement.

A couple others to add

raskinformac > nothing alse like it out there!
zoomnotes > super powerful tool. 'had those' features for ages.
endlesspaper > is what it says.
pretty sure Lunacy has gone limitless on its canvas!

Fermat.ws

https://fermat.ws

Add SAGE3

https://sage3.sagecommons.org/

Title: SAGE3
Platforms: web, macos, windows, linux
Image: https://i0.wp.com/sage3.sagecommons.org/wp-content/uploads/2021/12/front-1.png
Description: Infinite canvas for science and collaboration, SAGE3 is an open-source collaboration software designed for real-time interactive information and visualization sharing. Seamlessly complementing video conferencing, it enhances group environments for information-rich collaboration.
Multiplayer: true

Add Subset.so

https://subset.so/

Subset is a spreadsheet in the browser built on an infinite canvas!

Serve up images as srcsets

Currently, all images are served in their original format and size. To improve load times and also viewing across different device types, we should serve up images in a variety of sizes and formats (jpg, avif, webp).

Add diagrams mac app

https://diagrams.app/

Add Xmind

link: https://xmind.app/
description: The full-featured mind mapping and brainstorming app.

Add canvasql and Data Rabbit

• https://www.canvasql.com/
• https://www.datarabbit.com/

Pls add tldraw

I think tldraw.dev is Infinite Canvas

tldraw webapp
tldraw gitub
@tldraw on Twitter

Add google drawings?

(infinitecanvas is really cool, thanks!)

Add MaxMSP

Max is an infinitely flexible space to create your own interactive software.

Hover to reveal that gallery item is linkable

Hover a gallery item to reveal a ¶, §, 🔗 or some other symbol that indicates the section is linkable (as is the case e.g. in GitHub READMEs).

This is a continuation of #54

Import script setting all items to `multiplayer: true`

Consider Workflowy and other non-visual tools

It seems to me that Workflowy (and to a degree, most outliners) fits all the properties of an infinite canvas tool:

• Expansiveness: The basic premise of outliners is precisely that of an infinitely nestable bullet list. There are no limits (other than software performance and cognitive complexity) to the levels of depth one can go to.
• Zoom: This is another core feature of most outliners, where it's called "hoisting": any level of the tree can be zoomed into to become the "current" view.
• Direct manipulation: To edit the content, one just has to place the cursor in the desired place and start typing. There's no visually distinct editing mode, like e.g. on Checkvist or Dynalist. There's also support for WYSIWYG formatting.
• Collaboration: The tool supports collaborative editing of outlines, including various sharing modes, mentions, etc. This has been a focus of their recent development.

The above is true of other outliners as well, but Workflowy is one of the few that has a seamless, almost invisible UI, includes powerful features like board and prose views, live clone nodes (mirrors), etc.

Many people describe it using variants of the expression "it works the way my brain works", and in my experience, that is true 90% of the time (the major exception being content that's better expressed as spreadsheets).

Add Venba.app

Venba is infinite canvas for writing and submitting poetry.

App: https://venba.app
Home page: https://koodpad.com/venba.

Thank you.

Disclaimer: I'm the developer.

Add IDs to all section headings in the website

So they can be easily linked to. Even better if hovering the headings reveals a ¶, §, 🔗 or some other symbol that indicates the section is linkable (as is the case e.g. in GitHub READMEs).