UPDATE 4/17/2020:
FlatFlowy now works with all WorkFlowy searches, including changed: and date operators.
I love WorkFlowy. Dump your brain into this versatile web-app. Tame it with intuitive and flexible outlines. Tag to connect the disconnected. Zoom to focus. Power in simplicity. What’s not to love?
While WorkFlowy’s standard search results format is great for showing context and relationships, there are times you don’t want the noise of an outline. You just need a simple, flat list.
Meet FlatFlowy.
FlatFlowy is a bookmarklet that hides the “breadcrumb” header, removes indentation, and hides parents. The result is a simple, flat, distraction-free list when searching WorkFlowy. It works as a toggle; click once for flat lists, and again to return to the standard view. FlatFlowy is compatible with most desktop and mobile browsers.
Big Hat Tip To: the fabulous Erica Heinz for the original CSS and screenshot. Thanks Erica!
Known Issues:
- Important! Don’t move, drag or multi-edit items while viewing a flat list. Since some content is hidden, you could get unexpected results.
- Due to WorkFlowy’s “lazy load” you may need to scroll down to force some items to load when your list is long.
- In flat mode, you cannot use the keyboard shortcut to zoom. Click the bullet instead.
Installation:
Happy flat flowing!
rawbytz 
Great to see another tool for Workflowy. This is tantalisingly close to the ultimate use of Workflowy as a todo list whose order can be manually sorted. However, it doesn’t seem to work on my latest version of Chrome for Windows (it does for Firefox). I’ve turned off other styles and scripts, but it still doesn’t work.
LikeLike
Hey Kevin, when you say it doesn’t work in Chrome, do you mean it isn’t creating flat lists, or you are having problems moving items within the flat list?
I should make it clear, I don’t recommend moving items items in flat mode. That would be a great feature, but FlatFlowy works by hiding some elements and moving others. Moving things will not work as expected, if you are able to move things at all.
If the issue is Chrome isn’t showing flat lists, and you’ve disabled other user styles (CSS), the only advice I can think of is to try disabling Chrome extensions.
LikeLike
Well, it seems I am destined to find only harmless bugs. The bookmarklet is working in Chrome now. I think it was a matter of re-starting the browser. I realise about the problem of moving the items around. It would be great eventually to put them into an order that can be worked through. Thanks again for the great tool.
LikeLike
Great to hear!
LikeLike
This is truly awesome and very useful. One absolutely tiny comment: on the Dropbox page, the two names of the links could be Flatflowy and “Unflatflowy” or something like that…
This is so useful, and quite surprising that it’s “just” a hack. Big thanks and big ups!
LikeLike
Oh man – THANK YOU!!! I have been waiting for this feature to come to WorkFlowy since I started using it a couple years ago. It’s still not native to WorkFlowy, but this bookmarklet is an awesome enough hack to work for my needs. THANK YOU to all who had a hand in creating and sharing this!!
LikeLike
This bookmarklet has stopped working for me. I’ve tried it on both Chrome and Firebox without any other styles. I wonder if something’s changed with Workflowy.
LikeLike
Kevin, try installing a fresh copy and see if that fixes it.
https://dl.dropboxusercontent.com/u/8681219/FlatFlowy.html
LikeLike
Thanks for that. This worked in Firefox. But not in Chrome, even with all the extensions disabled. I’m using Version 48.0.2564.79 beta-m (64-bit)
LikeLiked by 1 person
Working fine here in Chrome Version 48.0.2564.82 m. Let’s try this.
Right click on the Chrome bookmarklet > Edit > Tab > Ctrl C (to copy the code) > Cancel
Paste the code in a reply here.
LikeLike
Sure. I’ve tried it on a different machine but doens’t work as well.
Here’s the code:
javascript:(function(){var customDomain=’workflowy.com/#’;var%20customTitle=’FlatFlowy’;var%20customCSS64=’LyogRmxhdEZsb3d5IFN0eWxlc2hlZXQsIG9yaWdpbmFsIENTUyBieSBFcmljYSBIZWlueiwgaHR0cDovL3N0eWxlYm90Lm1lL3N0eWxlcy84MDg2ICovDQoNCi5wYWdlLnNlYXJjaGluZyAucHJvamVjdCAubmFtZSB7DQogICAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Ow0KfQ0KDQovKiBEZWxldGUgZm9yIFNob3cgTm90ZXMgdmVyc2lvbiAqLw0KLnBhZ2Uuc2VhcmNoaW5nIC5wcm9qZWN0IC5ub3RlcyB7DQogICAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Ow0KfQ0KDQoucGFnZS5zZWFyY2hpbmcgLnByb2plY3QubWF0Y2hlcyAubmFtZS5tYXRjaGVzIHsNCiAgICBkaXNwbGF5OiBibG9jayAhaW1wb3J0YW50Ow0KfQ0KDQoucGFnZS5zZWFyY2hpbmcgLnNlbGVjdGVkID4gLmNoaWxkcmVuID4gLnByb2plY3QgLnByb2plY3Qgew0KICAgIG1hcmdpbjogMCAwIDRweCAhaW1wb3J0YW50Ow0KfQ0KDQoucGFnZS5zZWFyY2hpbmcgLmNoaWxkcmVuIHsNCiAgICBtYXJnaW46IDAgIWltcG9ydGFudDsNCiAgICBwYWRkaW5nOiAwICFpbXBvcnRhbnQ7DQogICAgYm9yZGVyOiAwICFpbXBvcnRhbnQ7DQp9DQoNCi5wYWdlLnNlYXJjaGluZyAuY2hpbGRyZW5FbmQgew0KICAgIGhlaWdodDogMCAhaW1wb3J0YW50Ow0KfQ==’;if(location.href.indexOf(customDomain)!==-1){var%20ss=document.styleSheets;for(var%20i=0,max=ss.length;i<max;i++){if(ss[i].title==customTitle){if(ss[i].disabled==false){void(ss.item(i).disabled=true);return;}void(ss.item(i).disabled=false);return;}}addStyle=document.createElement('link');addStyle.rel='stylesheet';addStyle.href='data:text/css;base64,'+customCSS64;addStyle.title=customTitle;document.documentElement.childNodes[0].appendChild(addStyle);}return;})();
LikeLike
OK. It seems to be working now. I think it conflicted with the Grammarly extension, which persisted even when I originally disabled all the extensions. BTW, Grammarly also seems to introduce Adware to Chrome, so beware.
LikeLike
I’ve finally solved two puzzles.
The bookmarklet doesn’t seem to work for addresses that include pro like https://workflowy.com/?pro#. It works fine without this (now I’m puzzled by what the pro does).
Second, Grammarly is innocent. It’s the Local-Explorer extension which was the culprit. I had installed this so I could open local files on my desktop. Now I have to find another way to do this.
LikeLike
Hmm, not sure where the “?pro#” comes from, I just logged out and then back in to my pro account to see if WorkFlowy had changed anything. I didn’t see it. Maybe you have a bookmark that got edited somehow? You should be able to remove the “?pro” from the url (leave the hash) , refresh the page and be good to go.
If this is a WorkFlowy change, there is a surefire way to fix it by editing the FlatFlowy bookmarklet as follows:
• Right Click on the bookmarklet and select Edit.
• Tab to the URL field.
• Type Ctrl+Home to move the cursor to the beginning of the JavaScript
• You should see: “javascript:(function(){var customDomain=’workflowy.com/#’;”
• Simply delete the single ‘#’ character from the WorkFlowy url. (Don’t touch anything else!)
• Save it.
LikeLike
Thanks for that. It’s all working perfectly now.
But there is one ongoing issue with Workflowy, which is the inverse of your flat list.
I find if I expand a note and then move to another part of the list, the note remains expanded and overlays other text, making it unreadable. This happens in both Chrome and Firefox. It seems such as bothersome thing I imagine it must have been discussed before, and perhaps there are some work arounds.
Have you come across it? Do you have a remedy?
LikeLike
Kevin, haven’t seen this, and this is the first I’ve heard of it.
LikeLike
Really? It seems a constant for me on whichever platform (I haven’t tried Mac though). You first expand a note, then move elsewhere, but the note doesn’t contract. Here’s an example: https://www.dropbox.com/s/y3b97bjirb0hi1l/Text%20overlay.PNG?dl=0. I’ll take it up with Workflowy.
LikeLike
Thanks to you (and Erica before you) for this bookmarklet.
I’ve found that it doesn’t work (as in: the ‘flattening’ CSS is not applied) if my tag or text search uses the “-” (NOT) search operator prefix. Can that be fixed?
Alternatively, how might the javascript and/or CSS code be changed so as to eliminate the requirement that one must be searching for tags or text — so that it applies to whatever WorkFlowy view I’m zoomed into?
LikeLike
Thanks for the feedback, Thomas.
I should probably add a qualifying note that the current CSS doesn’t work with WorkFlowy’s special search operators. (*done) It is a known issue. There are a set of css class selectors, ‘metaMatches’, that apply to these searches and my first (and only) attempt to add them failed. I gave up pretty quickly, and haven’t looked at it since. So I think there is a solution… it is on my list, but frankly pretty far down at this point.
As far as flattening the normal views, that’s doable and likely easier than the search operators. It’s all CSS. The bookmarklet (as of v1.7) is pretty easy to customize once you have the css. Make a copy of the bookmarklet. Then encode the css in base64… this works great as long as the css isn’t huge. Then replace the base64 code between the quotes in the var css64= with your new code. Each bookmarklet will inject and then toggle its stylesheet on/off. You can have multiple running at once.
LikeLike
Thank you. I appreciate and understand your instructions. Unfortunately, after trying on and off over the past day, I’ve failed to figure out what changes to make to the CSS. I hate to bother you again, but if it wouldn’t be too much trouble, could you provide a little more specifics? Thanks again!
LikeLike
I played a little bit with the -(NOT) operator. It’s not one of the ‘metaMatches’ like “last-changed:” as I assumed. I found everything worked OK with simple examples… like “@tag -#tag”. But as searches got more complex, more terms, more levels of hierarchy… then the problems happen.
So, I don’t have the answer, and frankly not much time to look at it. I suspect it’s probably best addressed by looking at your specific situation. Maybe you could create a shared outline that mirrors your structure and shows the issue. When I have time I can look at that.
LikeLike
No worries, I appreciate that you took any time at all to think about it.
As it happened, after I switched to using Firefox’s development tools instead of Chrome’s, I was able to puzzle out enough CSS to write the rules I needed so that both Search and Regular WorkFlowy views would be flattened.
Moments later, I realized that if I’d only had the wit to combine a (close enough to) universal search term (namely: “a” OR “e” OR “i” OR “o” OR “u” OR “y”) with your FlatFlowy bookmarklet, I could have achieved the same result. Oh well, live and learn!
LikeLike
Cool. Glad you got if figured out.
LikeLike
I don’t understand how to make it work. I dragged it to the bookmarks section and it’s there, but how do I make it do something? What am I missing? Thanks!
LikeLiked by 1 person
FlatFlowy only works when WorkFlowy searches are active. Try clicking on a tag or searching for some text, and then click the bookmarklet a few times to see it in action.
Another possibility, if you are viewing a shared outline, version 1.7 won’t work. Check the url:
workflowy.com/s/… = no worky
workflowy.com/#/… = worky
I updated FlatFlowy to version 1.8, and it should work on all workflowy urls now. So try that one if you still are having issues.
Hope that helps!
LikeLike
This is brilliant. I used to use Workflowy years ago and was put of by not being able to see my top priority items without the ‘background noise’. This is perfect. Thanks for sharing it.
LikeLike
This is amazing! I transitioned to dynalist and I am trying to get back to workflowy only for this feature.
Any chance you could adapt it to dynalist one day?
LikeLike
Very familiar with DL… quick answer: not much chance.
I understand the appeal of the DL feature set for many, but for me there are many DL features I don’t need and some that slow me down. And to be fair, there are some features I’d like to see in WorkFlowy too.
I know Erica and Shida are actively developing new DL features, so I’d take that request directly to them.
Thx for the feedback!
LikeLike
For the Show Notes version, it’s still very odd (and distracting) to see the notes of the parent node. The whole point of FlatFlowy is to reduce the clutter of parent nodes and focus exclusively on the searched-for node (and *its* note). Is this intended functionality, or is it a bug? I’d love to see an update if it’s the latter. Other than this, I really love FlatFlowy! It’s a bit nerve-wracking to try and remember not to move anything around when it’s turned on! 🙂 But it’s simply great! Thanks for putting it together!
LikeLike
Thanks for the feedback. There are a few improvements I’d like to make to FlatFlowy, and I’ll add this to the list. I do know of some scenarios where the current method is preferred to your proposed one, but your request make sense and it’s no biggie to offer a third version. When (and how easy the fix is) are questions I don’t have the answer to right now.
re: moving
You really can’t do any damage by moving stuff. The big issue is that you are blind to the hierarchy, so it can be difficult to be certain where things end up. But you can always use WF’s multiple undo feature to get back to where you began. You’ll find that moving by mouse will be limited to shuffling siblings. You can move items to new parents with the move keyboard shortcuts.
Things get tricky when you activate the move keyboard shortcut and nothing appears to move… in reality it has moved. It’s not difficult to test. Just duplicate one of your items, and try moving it with the keyboard shortcuts. Then click back to default view to see where you are.
LikeLike
I’m curious. Is there a technical reason why, when using FlatFlowy, you can’t open a node’s children? Or did you choose to do that based on experience using it initially? Without thinking too in depth, it seems like it’d be useful, but I’m sure I’m missing something that you’ve already found in practice/in building it.
By the way, I absolutely love that you can easily toggle FlatFlowy on and off. Very handy.
LikeLike
It’s a limitation of the method used. It injects a style sheet that simply moves and hides stuff, as long as the style is active those children will not show. To view children, I zoom or deactivate FlatFlowy.
FWIW, I have talked with Jesse Patel (WorkFlowy co-founder), and he has shown interest in creating this function natively, but that is all I know at this point.
LikeLiked by 1 person
Works for me! Thanks so much again for providing this for the rest of us!
LikeLiked by 1 person
I know this is in the wrong place, but I could not find a way to message re multi tagger. When I implemented it with no changes, there was no prompt for input. Nothing at all seemed to happen. I am on a Mac. I tried it with all experimental features on, and then with all experimental features turned off. No luck in either case. I also closed and reopened Chrome just to see if that had any impact. No luck.
LikeLike
Thanks Rol.
This is a known issue. WorkFlowy has been rolling out changes to the underlying code and many of my bookmarklets using that code are broken. I am communicating with them, and I’m hopeful the bm will work again as is . It may take a few weeks, tho.
LikeLike
I thought that might be the case. Thanks for letting me know.
LikeLike
Hello; thank you rawbytz for this script. I would like add this to Tampermonkey with a keyboard shortcut. Do you know hot to do? thank you!
LikeLike
Would like to run FlatFlowy, as it would solve the Clutter problem in my WorkFlowy Lists. I followed the install-to-iOS instructions :
Open the bookmarks menu and edit the bookmark you just created.
Edit the title to whatever you want.
Clear the URL/Address field, and paste the code you copied above.
Save your changes and exit out of the bookmarks menu.
When I run WorkFlowy, it runs as before, but no evidence that FlatFlowy is installed or working.
I don’t know how this is intended to work, or what else I should do. Would be grateful for your help. Regards, George.
LikeLike
Hey George,
The FlatFlowy version on this page broke with the new mobile design. The stylesheet works partially, but with less than ideal results.
There is a brand new BETA version, you can get here:
https://workflowy.com/s/flatflowy-mobile/rZO8l99acCfv6AGT
If you already created a bookmark in you mobile browser, copy the all the code in the shared note (text begins with “javascript:”), and then paste that over the old “url” field in your bookmark.
How to use it:
• Navigate to WorkFlowy in your mobile browser.
• Activate the bookmark/bookmarklet you created.
(in iOS you should create the bookmark on your mobile favorites page for easy access. This means just tapping the addressbar, then tapping the bookmark.)
• This loads the custom stylesheet that creates the flat view. This flat view is only in affect when you search.
• Tap it again, to turn off the flat view.
• On a new tab load or refresh, the stylesheet will not be active until you tap the bookmark.
• FlatFlowy only hides some page elements and moves others with CSS. There is no risk of corrupting data. You only risk frustration, if you try to move stuff in flat view… that won’t work.
• You can edit the main text on the displayed bullets, but if you want to view children, edit notes, add a sibling etc… you’ll need to zoom on the bullet or tap the FlatFlowy bookmark to deactivate it.
LikeLike
It’s hard to explain, but FlatFlowy has dramatically improved the quality of my life…Thank you Rawbytz!!
LikeLike
I’ve been using (and loving) this FlatFlowy tool for many years now. With the addition of “Todo” bullets to Workflowy; I often want just the flat list of todo items. HOWEVER – task bullets show up on two lines (todo box on top line, text on the next line). Is there any way to fix this so task bullets also show correctly in FlatFlowy?
LikeLike
Thanks for the report Laura. I pushed out a fix to both the bookmarklet and PowerPack. Hopefully there aren’t any other edge cases breaking the todo feature… WorkFlowy’s CSS for todos is a bit of a cluster… something 😬
LikeLike
Oh wow; YAY!!! Thank you so much! I’d actually stopped using “todo” items because they didn’t work in FlatFlowy. I’m very grateful for the fix!
LikeLike
I pushed out another update. Made zooming by bullet clicking or keyboard shortcut work reliably. Removed the search background highlights in flat mode for a cleaner look. Also added breadcrumbs on hover. These hover-crumbs disappear when you navigate away; you can toggle FlatFlowy OFF/ON to get them back.
LikeLike