Rotary Editor

I've been wondering what an "Alt + drag" interaction would look like in a traditional text editor.

"Alt + drag" is an interaction in canvas apps like Figma that lets you quickly duplicate elements and explore different versions of your design. If you've seen what a designer's exploration board looks like, it's like a waterfall that might start narrow on the left-hand side but then broadens into a tree of versions on the right. The Alt + drag interaction lets designers try out microdecisions and later walk their colleague through them with a "what if we went this way" story.

Writing is similarly not linear - we double back, we try different approaches, we keep multiple versions in our head. Maybe our tools could better reflect this reality. An Alt + drag interaction already exists in text where you can make a quick copy of a phrase or paragraph to try out a different version. Here's the tricky part though - while Alt + drag in Figma keeps the whole composition right there for you to see, having multiple copies of paragraphs in your text totally breaks the flow. You really need to keep the rhythm of the text intact so you can feel how it all works together.

The rotary editor (I might need a better name, suggestions welcome) is my interaction design experiment to see if we can bring a similar kind of exploration to writing. It lets you rotate, a.k.a try out, different versions of your paragraphs while keeping the natural flow of your text.

When you're typing, hitting CTRL + . rotates the paragraph into its alternate version. At first, both versions are exactly the same. As you edit one version, the other stays unchanged, and you can flip between them anytime using the same shortcut. The key thing is that you're always reading one coherent flow of text - you just rotate paragraphs in place to see their different versions.

I built this as a simple HTML/CSS/JavaScript application using the classic contenteditable = true as the editor. No frameworks, no complex dependencies - just exploring what's possible with the basic building blocks of the web.

There are still lots of questions to explore here: How do you visualize the relationship between alternates? What happens when you want to mix parts from different versions? How do you keep track of which alternatives you've tried as they accumulate?

If you're interested in thinking about these questions, I'd love to hear your thoughts. I'm keeping this page as an evergreen note + prototype as I update it with further ideas.

The source code for this page is available on GitHub.