How to deal with groups of sequential cards

sup, ima keep piling on my case to make it easier to deal with groups of cards cos I’m feeling the pain currently :slight_smile:

So I’m writing a paper with multiple sections. I’m working in a single kinopio space for this, and I have columns for each section. Here’s a screenshot that’s been anonymized, but it gives you an idea what I mean:

The columns are my sentences/paragraphs. Sometimes I’m rearranging the order, wanting to add a paragraph in the middle of the stack. It is quite tedious to rearrange the cards. It requires a good amount of precision to draw over the right cards. It is also tough in general, when you have a denser space, to make more room in a certain area.

The feature that lets me select all connected cards doesn’t help because I want to use connections across my sections. So, it would catch more cards than the ones in the column.

One idea I’ve had is, if I had a group of cards, it would cool if I could create a card so it gets included in this group. And then some automatic rearranging of cards around it so there’s enough room (preventing overlapping of content).

Also, you’ve seen that sweet site about daily 3d experiments:

It’s neat how the creator used the background to designate sections to put cards in. Here’s another use case for a built-in ability to make groups.

(Didn’t have time to refine this post into a coherent argument, so excuse the randomness.)


When I used index cards for this stuff, I tended to group cards into what I called stacks or regions.

That’s to say, it’s really nice to be able to grab a stack of cards and place them in a linear order within a decidedly nonlinear medium.


is this a correct summarization of your problem?

  • I have a ‘group’ or a stack of cards, and I want to be able to insert something inside it without having to manually reshuffle?

what do you do (either irl or in kinopio) when you want to put move a new card between two existing stacked ones?

What I do right now is, I usually make a note to one side, because when I’m generating is the wrong time to shuffle things around. And usually I end up making 3-4 notes, often in slightly random order

Then I paint and move the cards down and out of the way, stick in the new ones, and use the “align vertical left” widget.


I never thought about it but i think my mindset is the same,

In the case of @bentsai I can see how that’d be tough to do with really long stacks that are much taller than the screen. Maybe I can address that by making vertical alignment ‘smart’:

  • if you select some cards and vertical align it checks to see what unselected cards are on that same Y axis,
  • if those same axis cards will be overlapped then also vertical align them too as if they were selected

Assuming this logic would actually work, that might be a good solution with no side-effects for other uses. Just a small matter of programming lol

1 Like

I’m having trouble following the algorithm you proposed, @pirijan :slight_smile: By “same Y axis” do you mean the same Y position?

Yes, that describes the problem I was getting at in this thread.

If you allow me to spitball for a moment…

On the one hand, sometimes I have a region/group which is sequential. In my first post, this was the case where I am writing a paper and I have cards with sentences/paragraphs. If I wanted to reorder my paragraphs or insert one, it was tedious. I went through the process that @whichrabbit described, which has a lot of manual steps. For reordering, I’d like to be able to drag my card up and down, and then have the cards around it shift accordingly. Or for inserting, for the below cards to shift down. This gets tricky if there are other cards around that are not in this list but also need to get pushed around so there is no overlap.

On the other hand, sometimes my region is a group of related cards, but not in order. If there is not much room, it is tedious to make space. It would cool if I could have a card get created within this region, and then the cards automatically shift around to so there is enough space for it. And at the same time, maintain the same relative spacings so that groups are preserved. For example, I have a region for kinopio in my digital garden. It’s filled up, so it’s harder to see where that region ends and others begin. And adding cards there is hard because there’s no space.

So going back to @whichrabbit’s quote, more broadly, I think it’d be cool if this concept of regions could be formalized a bit. This way, I could tell the system what is a region, and then it can more intelligently rearrange cards. That way it knows how to preserve the existing spacing appropriately because it has the information about what cards belong to the same region.

I realize this is a significant feature and not everyone uses Kinopio like I do, so making it work for others is a factor too. So, for your consideration and further refinement and discussion. To echo what you said, a small matter of programming ಠ‿ಠ

The smart align algorithm prob isn’t clear to anyone but me, but basically I mean if you select some cards like this:

then hit vertical align, you would get this:

This doesn’t solve the region scenario, this is a small specific fix for a specific common issue/scenario

1 Like

word, I see what you mean now. to clarify, so the other unselected cards below got pushed down?

yup, even though they weren’t explicitly selected

1 Like

One thing I’ve run into a LOT, linear stacks/regions or not, is that when the space gets crowded, it is difficult to make room to add more detail. And when it’s crowded, the visual semantics of grouping and clustering are lost. Things fall apart, the center cannot etc.


have you tried cmd/ctrl-a and moving everything to make some room on the edges? (obviously not a real solution, but maybe a stopgap)

Yes, that’s my go-to move.

Selecting sub-networks to move, as I rearrange the space afterwards, is a bit laborious. Mainly because:

  • if major topics are linked together with connection type X, and subtopics are clusters with varied relationships of type a, b, c, etc., CMD-click selects the whole web

  • if I have a kind of linear / informal stack of notes that make up a column, those don’t come with


So here, you see that I’ve had a few thoughts and popped them into place, without linking them up with connections. To my mind, this is a strength of Kinopio: the visual clustering makes the relationships clear but I didn’t have to formalize them yet while I’m thinking with tools.

This isn’t an easy problem to solve, and I’m not casting shade.


Finally, when I was doing the sketchboards, I’d segment out spaces into regions like this:

Because that way I don’t have to add a giant web of connections to everything on this one topic, and it makes rearranging the sub-clusters more better. Less frustrating.

This isn’t meant to be like a “build it like this” feature request, just here’s a thing I’m trying with the space right now


super useful thanks!

1 Like

Yeah, this would work, but I’d like to see something more robust. I think it is pretty common to create lists or have sequential cards. If you imagine in a text document context, it is super easy to add an item in the middle. You place your cursor and hit return, and everything below gets shifted down. (as @whichrabbit said, this is not an easy problem to solve, so just thinking out loud)

What if there were a list/column container that all the cards in this container would have this certain behavior. So you can click between two items to insert. And you can drag items up and down, and the other items will flow around it and keep things tight once you drop it.

A separate thought: it’s super nice to be able to place cards anywhere and even have them touching and overlapping. But at other times, I really want all cards to be visible and have no overlap. This is where it gets tedious in dense spaces to make room so everything is visible. Continuing on this container idea, what if there were a blob container that would keep a set of cards all in a bunch. And clicking anywhere on that container would add a card there, tied to the rest. Oftentimes, I want to add a card to a group like this, but it takes a lot of manual effort to arrange them so they look like part of a group.

Yeah, exactly this. Sub-networks are connected to other groups, so ⌘-clicking doesn’t work.

just wanted to get some thoughts out here :slight_smile:

1 Like

can I ask how you made the cards anonymous with the * asterisks for the screen shot please

1 Like
  .querySelectorAll(".card-content .name > span")
  .forEach(name => (name.textContent = name.textContent.replace(/[^\s]/g, "*")))

I like this spaces idea, it would help with some writing that i do for courses +1

1 Like