Deepnote
IntegrationsPricing
Join usDocs
All posts
product

– by Deepnote team on September 15, 2022

Bringing a richer text experience to data notebooks

Why we elevated text editing from an afterthought to a first class citizen in Deepnote 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 Markdown way of basic text formatting

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.

Manipulate text blocks easily with block operations

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).

Blocks in Google Docs

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 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.

Rich text in notebooks

⚫ 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.

List styling in data notebooks

🔗 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.

Add hyperlinks to your notebook

✅ 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.

Add to-do lists to your data notebook

🌈 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.

Add colorful callouts to 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: 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.

amplitude-text-vs-markdown.png

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.

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 our 100% free plan here.

Share this post

Twitter icon

Join the world's best data teams and get started with Deepnote

No credit card required. Run your first notebook in seconds.

Deepnote
Product
© 2022 Deepnote. All rights reserved.