Spruce up your apps with a new way to display text

Note: This guide includes screenshots of the Classic Editor. Since we created this guide, we've released the new Anvil Editor, which is more powerful and easier to use.

All the code in this guide will work, but the Anvil Editor will look a little different to the screenshots you see here!


Use Markdown in your apps with no fuss.

Use Markdown in your apps with no fuss.

Until now, the go-to component to display text in your Anvil apps has been the Label component. Today, we’re announcing its new companion, RichText, allowing you to do all sorts of things with the text in your apps!

You can use all the power of Markdown formatting, display HTML dynamically and safely - or keep your text plain and unadorned, with no formatting.

Use slots to embed components into your RichText

Create slots within your RichText, and use the drag-and-drop editor to use them immediately!

Create slots within your RichText, and use the drag-and-drop editor to use them immediately!

Want to interleave text and components - say, a Button or a TextInput component? RichText components are also Containers, and adding a named slot to a RichText component is as simple as adding {slot_name} into your text.

This works whether your RichText component is displaying Markdown, HTML or plain text - and, just like every other component, you can use the drag-and-drop editor to add new components into these slots. Or, do it in code by passing the slot’s name as the slot container property!

Adding components dynamically is a one-liner.

Adding components dynamically is a one-liner.

You can also populate your component slots by setting the data property on a RichText component:

Assign components or values to your named slots with a dictionary.

Assign components or values to your named slots with a dictionary.

Display user-submitted HTML safely

This app sets the content of its RichText to the TextArea input.

This app sets the content of its RichText to the TextArea input.

You can dynamically set the content of your RichText component to HTML, without worries about code safety.

When a RichText’s format property is set to restricted_html, its HTML content will automatically be parsed and sanitised, keeping only a safe subset of tags and attributes - see the documentation for more detail!

No need to worry about what might sneak in through a script tag!

No need to worry about what might sneak in through a script tag!

Learn more

Check out our documentation for more information:

Read the docs

Or just spin up a new app, drag in a RichText component, and start experimenting!

Build your own app with Anvil

If you’re new here, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.

Try Anvil

Want to build an app of your own? Get started with one of our tutorials:

Data Dashboard

In this tutorial, you will learn to plot data using client-side Python code and deploy it online for others to see.
Go

Build Database-Backed Apps

In this tutorial, you will learn how to build a simple news aggregator app.
Go

Build a Simple Feedback Form

Build a data-entry app, and learn the techniques fundamental to building any Anvil app. In this tutorial, you will:

  • Write server-side Python
  • Build your User Interface
  • Write client-side Python
  • Store data in a database
  • Deploy your app
Go