Bringing a richer text experience to data notebooks

One of the coolest features of data notebooks is how code, outputs, and text live together in the same collaborative document. Interweaving these elements in any way you like gives you the freedom to explore data swiftly and write a compelling narrative to underpin your analysis.

Composing the textual part, however, is usually not as smooth as it should be. Likely due to having a primarily technical audience, data notebooks default to using Markdown as a way to format text. Although not a difficult skill to pick up, relying on Markdown for text editing basics, such as inserting a hyperlink, feels unnecessarily clunky.

The difference between what you type in Markdown and the intended output of what’s displayed is a small friction that keeps cutting.

Forget to include a closed parentheses at the end of your link? Better toggle back to your Markdown code and drop it in.

Yes, it's a simple fix, yet an annoyance that distracts you from your narrative. You end up context-switching by looking up syntax in a cheat sheet, hardly the modern user experience that tools like Notion have gotten us used to.

We think that nicely structured and formatted text is a powerful part of the data practitioner’s toolkit. A little formatting love — headings, bullets, hyperlinks, text styling — can make all the difference when it comes to the comprehension and consumption of shared information.

Composing these elements should be easy, intuitive, and accessible. And that’s why we decided to give text editing a well-deserved promotion to elevate it from an afterthought to a first-class citizen in Deepnote notebooks.

Here's how we did it.

Text as blocks

When we set out to create the rich text editing experience in Deepnote, we had to make a critical design decision about how the new text elements would be structured. 

Should they be free-text boxes in which you combine different formatting and stylistic elements (think Evernote) or are we splitting them into smaller units (think Notion and Coda)?

We decided to go with the latter: each paragraph, heading, list item, or callout is represented as an individual block.

This approach has several advantages:

Blocks are more interactive

⁠When each piece of text is a block, you can manipulate them via handy operations such as duplication, deletion, commenting, reordering, and so on.

Feel like moving your callout further up on the page? No need to copy/paste. Instead, just drag the handlebar and drop it into its new position or use the block sidebar actions.

Blocks are a natural fit for notebooks

Code, charts, SQL queries, and input widgets represent blocks in a notebook (or “cell” in Jupyter jargon). Having text follow the same pattern makes it a much more consistent experience.

Need to insert a code block between two paragraphs? Again, no need to fuss with creating a new text box somewhere and copying and pasting content — click on your block and select Add code block below. Easy!

Blocks are neater

⁠When text is divided into small units, it changes how you think about composing your narrative. Rather than simply writing and applying formatting on top (the old way), you can build out your document block by block. This Lego-like workflow offers a more engineering-y way of thinking: As you mix and match from your available blocks, you’re essentially forced to be more conscious about your choices.

This is a subtle shift in mindset that results in more structured documents. No wonder even Google Docs is adopting (at least the appearance of) blocks (see image below).

Weighing the benefits of blocks, it was clear that this modern approach would offer a more efficient and intuitive user experience. So we’ve implemented each of our new native text features as blocks. It turns out this is a pretty complex engineering challenge, but it was an investment we believed in.

Building on the basics

Now that we have a foundation established, we’ve started rolling out support for new rich text features, focusing on the basics first.

Bold, italic, underline, strikethrough, & code

First, we wanted to ensure that text formatting operations were possible without using Markdown. So we powered up our existing paragraph and heading blocks to support rich text editing via a styling toolbar.

Now, when you highlight text in Deepnote, you’ll see styling options for bold, italic, underline, strikethrough, and code. You can also use keyboard shortcuts for text formatting.

Bulleted & numbered lists

After covering the basics, we added a small (yet powerful) upgrade to the rich text editing experience: lists. Simply type - or 1. into a paragraph block along with a space, and bulleted and numbered lists are automatically created in your notebook.

Hyperlinks

Inserting a hyperlink is one of the more cumbersome things to do in Markdown. To make this very common operation much smoother, we’ve added a hyperlink option to the text formatting toolbar. Highlight any text and include a URL by clicking the link icon. You can also use the cmd + v shortcut to add links even faster.

To-do lists

To-do lists are an essential component of ongoing projects and a handy addition to the collaboration toolkit of data teams. We’ve made these to be as simple to add as possible: select To-do list from the add block (+) menu and create a list of tasks. Check marks support collaboration by allowing you to keep track of outstanding tasks with team members.

Colorful callouts

Callouts can add a nice aesthetic touch to your analytical narratives, particularly useful when presenting analysis to stakeholders. In our latest release, we've added callout blocks to bring more style to your storytelling. Create a callout from the add block (+) menu and select one of four colors to highlight blocks of text in your notebook.

Finally, all of these rich text features were built to help users style text in whichever way they are most comfortable:

• Select from a menu
• Type in a keyboard shortcut (e.g., | to start a callout or cmd + v to paste a link)
• Use Markdown-style shortcut (e.g., type # to render a heading)

Where we are now

Our initial goal in supporting rich text editing was simple: Enable users to perform everyday text formatting operations without the need for Markdown. After just a few weeks, it seems we are on the right path, as usage of text blocks has increased by more than 55% while use of Markdown blocks saw a 29% drop.

That's not to say Markdown doesn't have valid use cases. Advanced operations (e.g., inserting a table) are currently only possible via Markdown blocks. It does, however, show the importance of giving users an option they're more comfortable with and that feels more intuitive for them.

We want to make it as easy as possible for data practitioners and business stakeholders to work better together. Adding support for rich text is just one way we're making this happen. In the coming weeks, we'll be rolling out new features and improvements to make text editing even smoother and more delightful.

Let us know if you have any feedback or feature suggestions on our product feedback portal. And if you're new to Deepnote, sign up for free.