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. Interleaving these elements in any way you like gives you the freedom to 1) explore data swiftly and 2) write a compelling narrative underpinning 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 like 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.
Forgot 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 focus 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 got us used to.
We think that nicely structured and formatted texts are powerful items in the data practitioner’s toolkit. A little formatting love—headings, bullets, hyperlinks, text-styling—can make all the difference when it comes to comprehension and consumption of shared information.
Composing these elements should be easy, intuitive, and accessible. And that’s why a little while ago we decided to give text editing a well deserved promotion: elevate it from an afterthought to a first class citizen in Deepnote notebooks.
This is a short story about how we went about doing so...
Text as blocks 🧱
When we set out to create the rich text editing experience in Deepnote, we had to make a critical design decision around how the new text elements will 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 or 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 follows 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 copy/paste 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.
Now that we have a foundation established, we’ve started rolling out support for new rich text features, focussing on the basics first.
The basics: bold, italic, underline, strikethrough, and
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
1. into a paragraph block along with a space, and bulleted and numbered lists are automatically created in your notebook.
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 added these to be as simple as they come: select
To-do list from the add block (+) menu and create a list of tasks. Check marks are also collaborative so that you can 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 + vto 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: enabling 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 over 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 to and which 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.
Share this post
Join the world's best data teams and get started with Deepnote
No credit card required. Run your first notebook in seconds.