Document navigation made easy - previewing the content minimap in CKEditor 5

If there is one thing every content writer could probably do without, it is the feeling of getting lost in a long document. Trying to navigate a book chapter or a legal document? We have all been there and we know this can be such a headache. There is good news, though: we came up with something to make your editing experience a little bit easier. What if the same content navigation tool that programmers have been using and enjoying for years was available in CKEditor 5? We decided to give it a try and this is how the first content minimap for a WYSIWYG text editor was born.

# Improved document navigation

The proposed feature introduces a content minimap that shows your current location and the visible portion of the document. It is a high-level overview and content writer’s personal compass: it will follow you as you move around and edit text, always keeping track of where you are. Need to move quickly to the last chapter of your document? Just click the minimap and drag it to where you want to go.

Improved document navigation
Navigating the content with the minimap in CKEditor 5 WYSIWYG editor window.

The minimap is not only a great tool for content creators, letting you navigate back and forth to revisit certain parts of the document you work on. It will be all the same the best friend of proofreaders and editors, letting each assess the content length and structure with just a glance and a scroll of a mouse.

The ability to intake the whole length of a document may aid the structuring and make it easier and faster to edit. And of course it shows both the text and the media, therefore allowing for a quick visual inspection of the layout, too. As such, this tool will be invaluable for designers and webmasters. All in all, the minimap — just like the real big maps — will serve different purposes and help different users in ways they need the most.

For more information, such as installation, integration, or configuration instructions, check out the content minimap feature guide.

# Content minimap availability

There’s even better news: the content minimap feature for CKEditor 5 will be available in the upcoming release and you can try it right away.

# Feedback needed!

It’s worth noticing that this is still a feature preview but we would absolutely love to know your thoughts. Feel free to comment on GitHub and help us improve the minimap for CKEditor 5 users. Or just leave a 👍 to let us know how you feel about it.

Do you have any questions or would like to discuss your particular use case with us? Do not hesitate to contact us!

Related posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

Thanks for subscribing!

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

piAId = '1019062'; piCId = '3317'; piHostname = 'info.ckeditor.com'; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })();(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });