Skip to content

Textual 0.11.0 adds a beautiful Markdown widget

We released Textual 0.10.0 25 days ago, which is a little longer than our usual release cycle. What have we been up to?

The headline feature of this release is the enhanced Markdown support. Here's a screenshot of an example:

MarkdownApp ▋Header level 6 content. ▼ Ⅰ Textual Markdown Browser - Demo▋ ├── ▼ Ⅱ Headers▋▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ │   └── ▼ Ⅲ This is H3▋▎▋ │   └── ▼ Ⅳ This is H4▋▎Typography▋ │   └── ▼ Ⅴ This is H5▋▎▋ │   └── Ⅵ This is H6▋▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ├── ▼ Ⅱ Typography▋The usual Markdown typography is supported. The exact output depends on  │   ┣━━ Ⅲ Emphasis▋your terminal, although most are fairly consistent.▁▁ │   ┣━━ Ⅲ Strong▋ │   ┣━━ Ⅲ Strikethrough▋Emphasis │   ┗━━ Ⅲ Inline code▋▔▔▔▔▔▔▔▔ ├── Ⅱ Fences▋Emphasis is rendered with *asterisks*, and looks like this; ├── Ⅱ Quote▋ └── Ⅱ Tables▋Strong ▋▔▔▔▔▔▔ ▋Use two asterisks to indicate strong which renders in bold, e.g.  ▋**strong** render strong. ▋ ▋Strikethrough ▋▔▔▔▔▔▔▔▔▔▔▔▔▔ ▋Two tildes indicates strikethrough, e.g. ~~cross out~~ render cross out. ▋▂▂ ▋Inline code ▋▔▔▔▔▔▔▔▔▔▔▔ ▋Inline code is indicated by backticks. e.g. import this. ▋ ▋▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ▋▎▋ ▋▎Fences▋ ▋▎▋ ▋▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▋Fenced code blocks are introduced with three back-ticks and the optional  ▋parser. Here we are rendering the code in a sub-widget with syntax  ▋highlighting and indent guides. ▋ ▋In the future I think we could add controls to export the code, copy to  ▋the clipboard. Heck, even run it and show the output? ▋ ▋ ▋@lru_cache(maxsize=1024) ▋defsplit(self,cut_x:int,cut_y:int)->tuple[Region,Region,Regi ▋│   """Split a region in to 4 from given x and y offsets (cuts).  T  TOC  B  Back  F  Forward 

Tip

You can generate these SVG screenshots for your app with textual run my_app.py --screenshot 5 which will export a screenshot after 5 seconds.

There are actually 2 new widgets: Markdown for a simple Markdown document, and MarkdownViewer which adds browser-like navigation and a table of contents.

Textual has had support for Markdown since day one by embedding a Rich Markdown object -- which still gives decent results! This new widget adds dynamic controls such as scrollable code fences and tables, in addition to working links.

In future releases we plan on adding more Markdown extensions, and the ability to easily embed custom widgets within the document. I'm sure there are plenty of interesting applications that could be powered by dynamically generated Markdown documents.

DataTable improvements

There has been a lot of work on the DataTable API. We've added the ability to sort the data, which required that we introduce the concept of row and column keys. You can now reference rows / columns / cells by their coordinate or by row / column key.

Additionally there are new update_cell and update_cell_at methods to update cells after the data has been populated. Future releases will have more methods to manipulate table data, which will make it a very general purpose (and powerful) widget.

Tree control

The Tree widget has grown a few methods to programmatically expand, collapse and toggle tree nodes.

Breaking changes

There are a few breaking changes in this release. These are mostly naming and import related, which should be easy to fix if you are affected. Here's a few notable examples:

  • Checkbox has been renamed to Switch. This is because we plan to introduce complimentary Checkbox and RadioButton widgets in a future release, but we loved the look of Switches too much to drop them.
  • We've dropped the emit and emit_no_wait methods. These methods posted message to the parent widget, but we found that made it problematic to subclass widgets. In almost all situations you want to replace these with self.post_message (or self.post_message_no_wait).

Be sure to check the CHANGELOG for the full details on potential breaking changes.

Join us!

We're having fun on our Discord server. Join us there to talk to Textualize developers and share ideas.