DEV Community: Brooke Myers

The Best Python Web App Frameworks in 2025

Brooke Myers — Tue, 22 Jul 2025 13:48:46 +0000

The Top 5 Python GUI Builders

Python is a popular language amongst beginners, academics and data scientists, and its popularity is steadily growing. In 2024, Python became the most used language on GitHub, surpassing JavaScript for the first time. With the number of Python developers steadily increasing, there is more demand than ever to be able to build graphical user interfaces (GUIs) with Python.

While Python has long been used as a backend language for web development, more and more developers are looking to use it on the frontend too. There are now several frameworks for building full-stack web applications entirely in Python, each with their own approach to solving the issue. Let's take a look at a few of them.

In this article, we'll compare and contrast five tools for building GUIs in Python:

Streamlit
Shiny for Python
NiceGUI
Reflex
Anvil

TL;DR

Don't have the time? Skip the in-depth comparison and go straight to the summary.

Streamlit

Streamlit is a popular open-source Python library for building data-driven apps. Streamlit's approach to building web applications is simple and pythonic, which makes it easy to adapt existing Python scripts into Streamlit apps.

Although the Streamlit benefits from being straightforward and user friendly, its simplicity is also its biggest weakness. Any time a user interacts with a Streamlit app, the script reruns from top to bottom. This causes two issues: apps can be slow and state management is tricky. It's also not easy to customize Streamlit apps, which results in most Streamlit apps all looking alike.

Overall, Streamlit is great for prototyping or building small data-based apps, but it's not the best solution when your app requires more complexity or customization.

Pros

Easy to turn an existing script into an app
Great for building dashboards
Intuitive and straightforward to understand
Large and active developer community
Completely free and open-source

Cons

Apps can be slow
Not good for bigger, more complex apps
Hard to customize
Minimal features

Shiny for Python

Shiny for Python is a relatively new library for building interactive web applications in Python. Originally a popular tool for the language R, Shiny has now branched out into Python. Shiny's approach is very similar to Streamlit's, but it aims to correct two of Streamlit's biggest flaws: the need to rerun the entire script and the lack of customizability.

An example Shiny dashboard: https://gallery.shinyapps.io/template-dashboard-tips1/

Instead of reruning the entire script after any user interaction, Shiny only re-renders elements that have been affected by that user interaction. This means the entire Shiny script doesn't need to rerun every time a user makes a change, but it leads to less readable and intuitive code.

Unlike Streamlit, Shiny also allows you to add CSS classes to have more control over the look and feel of your app.

Pros

The script doesn't rerun after every user interaction
Can use CSS to customize your apps
Great for building dashboards
Good documentation and examples
Completely free and open-source

Cons

Less straightforward code
Minimal features
Newer library with a smaller community

NiceGUI

NiceGUI is Python library for building web applications that was developed explicitly as an alternative to Streamlit. Like Shiny for Python, NiceGUI doesn't rerun the entire script after every user interaction. It also allows you to add CSS classes, including Tailwind classes, to your code for more customization of the look and feel.

NiceGUI's website was built using NiceGUI.

NiceGUI code lacks the simplicity and intuitiveness of Streamlit code, and its approach to reactivity and state management is more opaque than Shiny's. There are different methods and decorators for different types of UI updating, so it can be difficult to know how to get the UI to update. In addition, NiceGUI's documentation is less robust than Streamlit's or Shiny's, and there are no tutorials or live examples. This makes getting started with NiceGUI more of a challenge.

Pros

The script doesn't rerun after every user interaction
Can use inline CSS, stylesheets and Tailwind to customize your apps
Completely free and open-source

Cons

Incomplete documentation
No official tutorials
Not great for building dashboards
Updating the UI is not always straightforward or consistent

Reflex

While Reflex is also a Python library for building interactive GUIs, its approach is different than Streamlit, Shiny and NiceGUI. Unlike the previous options, Reflex doesn't abstract away much of traditional web development. This means that if you are not familiar with traditional web development, Reflex comes with a bit of a learning curve. However, it also means that Reflex uses less magic to deal with reactivity and state management.

An example Reflex app: https://dashboard-new.reflex.run

Reflex uses a State class to keep track of the state of the app, and methods within the State class update the app's state. Although Reflex code is more verbose than the previous examples, it is more explicit about state management and separating front-end and back-end code. This means there is less "magic" involved in Reflex apps so they are easier to adapt and extend.

Pros

Explicit state management
Robust documentation with lots of examples
Templates to get started
Has an AI app generator
Customizable

Cons

Need to learn web development
Code is not that simple and straightforward

Anvil

Anvil takes a very different approach to building Python web applications. While the previous options are Python packages built as alternatives to Streamlit, Anvil was built to be Visual Basic for the web.

An example Anvil app. Learn more: https://anvil.works/learn/examples/task-manager-app

Anvil is a cloud-based IDE where you visually build your user interfaces and write Python code for the front-end and back-end. Like Reflex, Anvil doesn't abstract away web development, but it aims to make it more approachable for non-web developers. To build an Anvil app, you drag and drop components onto the page to build your UI (you can also create components in code), then write client-side code to make the components interactive and server-side code for back-end functions. To call server functions from your UI, you just use anvil.server.call. Client-side code runs entirely in the browser which makes it super fast.

Anvil allows you to do everything in Python, but doesn't try to stop you if you want to break out. You can still use HTML, CSS and JS in your Anvil apps. What's more, Anvil includes a whole host of features that none of the other options having including a built-in database, out-of-the-box user management and instant cloud hosting.

Pros

Visually build your User Interface
Lots of built-in features and integrations
Instant unlimited cloud hosting
Explicit state management and separation of client and server
In-depth documentation and tutorials

Cons

Need to get used to a new IDE
Client-server architecture may be unfamiliar to non-web developers

Summary

Streamlit
- Strengths: Quick to learn, straightforward code, easy for simple dashboards
- Weakness: The entire script re-runs with user interaction, limited in features and flexibility
Shiny for Python
- Strengths: Only re-runs relevant functions, great for building dashboards, good documentation and examples
- Weaknesses: Newer library with a smaller community, minimal features
NiceGUI
- Strengths: Doesn't re-run the script after each interaction, can use CSS and Tailwind for customixation
- Weaknesses: Code isn't always straightforward, not great for dashboarding, incomplete documentation with no official tutorials
Reflex
- Strengths: Uses explicit state management, very customizable, robust documentation and examples
- Weaknesses: Larger learning curve, need to understand web development
Anvil
- Strengths: Out-of-the-box instant cloud hosting , drag-and-drop UI builder, more features for complex apps, in-depth documentation with lots of tutorials
- Weaknesses: Unfamiliar IDE, client-server architecture may be unfamiliar as well

Conclusion

With Python being the most popular programming language, there are more tools than ever for building interactive web applications entirely in Python.

Streamlit is one such tool that offers a simple, Pythonic approach. However, it suffers from two main weaknesses: the script needs to be re-run after every user interaction, and customizing the look and feel of a Streamlit app is dificult. Shiny for Python is a great alternative for building dashboards and small data-backed apps. Shiny only re-renders code as necessary - not the entire script, and offers more flexibility in styling your app. NiceGUI offers a similar approach, but with less intuitive code and no tutorials or live examples, is more of a challenge to get started with. Reflex is a great option if you want more flexibility in building your app's UI, but you'll need to learn a bit of traditional web development.

Anvil takes a different approach to building Python web apps. With Anvil, you drag and drop components to build your user interface then write Python code to make it interactive. Anvil also comes with many out-of-the-box features such as a built-in database, user management and instant cloud hosting. If you want to build more complex apps and host them easily for free, then Anvil is your best bet.

Python Admin Dashboard Template

Brooke Myers — Tue, 29 Apr 2025 09:48:31 +0000

Anvil is a powerful and versatile tool for building full-stack web applications. With Anvil, you can quickly and easily create your UI and write Python code to control the front-end and back-end of your app. Creating apps with Anvil is fast and flexible, making it well-suited for building dashboards, SaaS products, and internal tools.

Whatever your use case, Anvil can help you build it.

Explore the dashboard

Ready to dive into the source code?

Clone the app

Create powerful apps with a powerful tool

With a drag-and-drop UI builder, integrated database and built-in user management, Anvil takes care of the hard stuff so you can focus on building your app.

Send emails, generate PDFs and deploy your app to the web in just a click.

Build your UI with Material 3

The Admin Dashboard uses the Material 3 design system for a sleek and modern design. Build your own dashboards by dragging and dropping Material 3 components onto the page.

Try it for yourself

Clone the Admin Dashboard Template to explore it for yourself.

Clone the app

More about Anvil

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.

Connect your Anvil apps to GitHub

Brooke Myers — Wed, 30 Aug 2023 15:00:56 +0000

Version control, collaboration and open-source made easy

Anvil's new GitHub integration is here to make development and collaboration more efficient than ever by allowing you to keep your Anvil app's source code in a GitHub repository. Whether you're collaborating with teammates or on open-source projects, you can store your source code on GitHub, make pull requests and use all of GitHub's version control and collaboration tools. You don't need to be a Git expert to collaborate using GitHub: Anvil takes care of keeping your app and GitHub repository in sync.

Learn more in our documentation.

Streamlined development and collaboration

The Anvil GitHub integration fits neatly into your workflow. On Anvil's Business Plan and above, you can create private repositories to store and manage Anvil code with the rest of your company's codebase. Open issues, create pull requests, review changes and manage conflicts within GitHub. Anvil's built-in version control tab lets you manage your repository and keep track of code changes from within your app.

Create and contribute to open-source projects

All Anvil users can connect to public repositories for free, so you can create and contribute to open-source projects. Publish your Anvil code on GitHub and share it with other Anvil developers, or open pull requests in other repositories to contribute to Anvil community projects. Show off your Anvil code on your GitHub profile and build a portfolio of your Anvil projects.

How does it work?

To get started with the GitHub integration, you'll need to either save an app to a new GitHub repository or clone an existing repository into Anvil. No need to be a pro at Git to get started: all your changes will automatically be pushed to the repository, and other developers’ changes will show up live in your app.

Want to use Git but don't want to use GitHub? No problem. Anvil supports other Git remotes as well.

Ready to get started? Check out our GitHub integration quickstart tutorial or dive right in and start building an app.

More about Anvil

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.

Integrate Mapbox into your Web App using only Python

Brooke Myers — Wed, 24 May 2023 15:35:26 +0000

Add powerful Mapbox maps into your Anvil app

Watch me live code this app during a Mapbox webinar.

Mapbox is a powerful tool for building interactive customizable maps and integrating location and navigation data into your apps and websites. With Anvil, you can add Mapbox to your web applications entirely in Python - no JavaScript needed.

Anvil is a platform for building full-stack web applications with nothing but Python. In this tutorial, I'm going to show you how to build an Anvil app, which uses Mapbox's Isochrone API to estimate how far you can travel given a starting point and a certain amount of time. My app build is based on this tutorial, but requires no JS.

First, we'll set up our app by creating a blank Anvil app, getting a Mapbox access key and adding a Map object to our new app. Next, we'll add a geocoder to the app so that users can search for a location, and then we'll use the Isochrone API estimate how far we can travel in a certain amount of time. Finally, we'll build the UI for our app.

Let's get started!

1. Set up the App and Mapbox Map

Create an Anvil app

We first need to create a blank Anvil app:

Get a Mapbox access key

Next, we need to create a Mapbox account and get an access key. You can sign up for a free account at mapbox.com, which will give you a public access token.

Now that we have a Mapbox account and an access token, we can add a basic map to our Anvil app. This step is based on Mapbox's quickstart tutorial.

We first need to add the Mapbox GL JS library and CSS file into our Anvil app. Add the following code to the Native Libraries section of your app:

<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />

The blank Anvil app we created already has a Form (Form1) that will load when someone visits our app. In our Form1 code, we need to add the following import statements:

from anvil.js.window import mapboxgl
import anvil.js
import anvil.http

anvil.js.window allows us to access JS libraries in our Anvil app and interact with JS objects from Python. This way, we can still make use of Mapbox's powerful JS library, but we can do it with Python.

Add a Map object

We need to add a placeholder component to our app that will hold our map. A Spacer works nicely because we can easily set the height. Drag and drop one from the Toolbox onto the form, and set its height to something reasonable.

We want the map to be displayed when the form is opened, so select the form and scroll down to the bottom of the Properties panel to create an event handler for the show event:

Anvil has created the form_show event handler for you, and this is where we want to write code to display our map.

In form_show, we first need to set our Mapbox access token then create a Mapbox Map object. We'll pass in a dictionary that tells the Map object where it should be displayed (the Spacer component we added), how the map should be styled, where to center the map (as [longitude, latitude] coordinates) and how zoomed in the map should be.

def form_show(self, **event_args):
    """This method is called when the HTML panel is shown on the screen"""
    #I defined my access token in the __init__
    mapboxgl.accessToken = self.token 

    #put the map in the spacer 
    self.mapbox = mapboxgl.Map({'container': anvil.js.get_dom_node(self.spacer_1), 
                                'style': 'mapbox://styles/mapbox/streets-v11', #use the standard Mapbox style
                                'center': [0.1218, 52.2053], #center on Cambridge
                                'zoom': 11})

Why are we using the Show event rather than setting this up in the constructor?
We need our spacer component to be on the page before we initialise Mapbox's API. __init__ is called before adding the Form to the page, but the show event is triggered afterwards. (See more in the Anvil docs)

Add a Marker object

Finally, we can add a Marker object to our map. We first need to create the object, give it a color and set draggable to True. Then we can set its [longitude, latitude] coordinates and add it to the map. This is added to the form_show event:

    self.marker = mapboxgl.Marker({'color': '#5a3fc0', 'draggable': True})
    self.marker.setLngLat([0.1218, 52.2053]).addTo(self.mapbox)

2. Add a Geocoder

Mapbox's Geocoding API allows us to easily turn location searches into longitude and latitude coordinates. We can use the Mapbox GL JS Geocoder plugin to add a search bar to our map. When a users searches for and selects a place, the map will fly over to this new location.

Import the geocoder

We first need to add the Mapbox Geocoder. In Native Libraries, add the following lines:

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css' />

Next, change the import statement you added in the previous step to also import MapboxGeocoder:

from anvil.js.window import mapboxgl, MapboxGeocoder

Add a geocoder to the map

Next we need to instantiate a MapboxGeocoder object by passing in our access token. Then we can add it to our map. The following code should be added to the form_show event:

    self.geocoder = MapboxGeocoder({'accessToken': mapboxgl.accessToken,
                                    'marker': False}) #we've already added a marker
    self.mapbox.addControl(self.geocoder)

Move the marker

We now have a geocoder added to our map. It will center the map to the location we search for, but it doesn't move the marker. Let's change that. We'll write a function that gets the new coordinates from the geocoder and sets the marker to these coordinates after the user selects a location from the geocoder:

def form_show(self, **event_args):

    ...

    #when the 'result' event is triggered, call self.move_marker
    self.geocoder.on('result', self.move_marker)

def move_marker(self, result):
    #get the [longitude, latitude] coordinates from the JS object returned from 'result'
    lnglat = result['result']['geometry']['coordinates']
    self.marker.setLngLat(lnglat)

3. Add the Isochrone API

Now that we have a map, a marker and a geocoder, we can calculate the isochrone lines that tell us how far we can travel given a specified amount of time.

To make the request to the Isochrone API, we need to pass in the profile ('walking', 'cycling' or 'driving'), the coordinates of our starting point (as [longitude, latitude]) and the number of minutes we want to calculate the isochrone for (contours_minutes). We can get the longitude and latitude coordinates from our marker and collect the profile and minutes from the front-end of our app (we'll build this in the next step).

def get_iso(self, profile, contours_minutes):
    lnglat = self.marker.getLngLat()
    response = anvil.http.request(f"https://api.mapbox.com/isochrone/v1/mapbox/{profile}/{lnglat.lng},{lnglat.lat}?contours_minutes={contours_minutes}&polygons=true&access_token={self.token}", json=True)

response will be a JSON object representing the isochrone lines we want to add to our map. In order to add these, we first need to add a Source, which tells the map which data it should display, and a Layer, which defines how to style the source data.

We should set the source and layer at the beginning of our get_iso function. Then after we get the response from the API, we can set that as the data for the source to display:

def get_iso(self, profile, contours_minutes):
    #we only want to create the source and layer once
    if not self.mapbox.getSource('iso'):
        self.mapbox.addSource('iso', {'type': 'geojson',
                                        'data': {'type': 'FeatureCollection',
                                                        'features': []}})
        self.mapbox.addLayer({'id': 'isoLayer',
                                'type': 'fill',
                                'source': 'iso', #the id of the source we just defined
                                'layout': {},
                                'paint': {
                                'fill-color': '#5a3fc0',
                                'fill-opacity': 0.3}})

    lnglat = self.marker.getLngLat()
    response = anvil.http.request(f"https://api.mapbox.com/isochrone/v1/mapbox/{profile}/{lnglat.lng},{lnglat.lat}?contours_minutes={contours_minutes}&polygons=true&access_token={self.token}", json=True)

    self.mapbox.getSource('iso').setData(response)

Let's now build a front-end for our app so that users can specify an amount of time and a mode of travel.

4. Build the Front End

We can add two DropDown menus to our app so that users can select an amount of time and a mode of travel. Name the first DropDown time_dropdown and the other profile_dropdown.

When we pass an amount of time as the contours_minutes argument to our get_iso function, we need it to be a number as a string (e.g. '10'). If we set time_dropdown.items from code, we can use a list of 2-tuples where the the first element of each tuple will be displayed in the DropDown and the second element will be the selected_value of the DropDown:

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.    
    self.time_dropdown.items = [('10 minutes', '10'), ('20 minutes', '20'), ('30 minutes', '30')]

The items for the profile_dropdown should be 'walking', 'cycling' and 'driving'. These can be set directly in the Properties panel of the Editor or via code:

self.profile_dropdown.items = ['walking', 'cycling', 'driving']

We now need to add event handlers so that get_iso is called whenever the value of a DropDown menu changes. For each DropDown on your form, scroll down to the bottom of the Properties panel to create an event handler for the change event. Then call get_iso with the selected values of the DropDowns as arguments to the function:

  def time_dropdown_change(self, **event_args):
      """This method is called when an item is selected"""
      self.get_iso(self.profile_dropdown.selected_value, self.time_dropdown.selected_value)

  def profile_dropdown_change(self, **event_args):
      """This method is called when an item is selected"""
      self.get_iso(self.profile_dropdown.selected_value, self.time_dropdown.selected_value)

Finally, we can also call get_iso when the Marker is dragged. We'll do this just like we did in Step 2 when we caught the result event being triggered on the geocoder and moved the Marker. This time, we need to catch when the drag event is triggered on the Marker, then call get_iso:

  def form_show(self, **event_args):
      ...

      self.marker.on('drag', self.marker_dragged)

  def marker_dragged(self, drag):
      self.get_iso(self.profile_dropdown.selected_value, self.time_dropdown.selected_value)

And that's it! We now have a fully working app built from the Mapbox Isochrone API that shows us how far we can travel in a specific amount of time. I made some changes to the style of my map and app, which I'll show you how to do in the next (optional) step.

You can check out the full source code of the app here

5. Optional: Style your app (Advanced)

To make my app look a bit nicer, I first changed the style of the Mapbox map.

This page lists Mapbox's predefined styles, but you can also design your own in the Studio or choose from the gallery. I chose the style Frank from the gallery and added this to my account. After adding the style, you'll be in Mapbox Studio. Click "Share" in the top menu and copy the 'Style URL'. When instantiating your map, pass this URL as the map's 'style'.

I also changed the color of the Marker and the Isochrone fill to better match the 'Frank' style. I also set the height of the Spacer holding the map to 100vh so that the map would fill the entire page.

I then edited the app's HTML to remove the app bar and add an extra <div> element that floats on top of the map. At the top of standard-page.html, I commented out the app-bar and added a floating-menu.

 <div class="structure">
<!--   <div class="app-bar" anvil-drop-container=".anvil-container" anvil-drop-redirect=".placeholder">
    <a class="sidebar-toggle" anvil-if-slot-empty="top-left-btn" anvil-hide-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn" href="javascript:void(0)"><i class="fa fa-bars"></i></a>
    <a class="sidebar-toggle anvil-designer-only" anvil-if-slot-empty="top-left-btn" anvil-if-slot-empty="left-nav" anvil-drop-slot="top-left-btn"><i class="fa fa-blank"></i></a>
    <div class="top-left-btn" anvil-slot="top-left-btn"></div>
    <div class="title" anvil-slot="title">
      <div class="placeholder anvil-designer-only" anvil-if-slot-empty="title" anvil-drop-here>Drop title here</div>
    </div>
    <div class="app-bar-nav" anvil-slot="nav-right">
      <div class="placeholder anvil-designer-only" anvil-if-slot-empty="nav-right" anvil-drop-here>Drop a FlowPanel here</div>
    </div>
    <div style="clear:both"></div>
  </div> -->
  <div class="floating-menu" anvil-drop-here anvil-slot=".floating-menu">
  </div>

I added my DropDown menus to this floating element and edited its class in theme.css so that it's background is transparent, and it stays fixed to the map:

.floating-menu {
  position: absolute;
  z-index: 100;
  min-height: 250px;
  min-width: 400px;
  margin: 50px 100px;
  padding: 30px 40px;
  background-color: rgba(229, 213, 194, 0.7);
}

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

The PiCast: Connect a Raspberry Pi Pico W to an Anvil app

Brooke Myers — Fri, 12 May 2023 14:22:08 +0000

Connect a Pico W to an Anvil app

The Pico W is Raspberry Pi's powerful WiFi-enabled microcontroller board. Using the Anvil Uplink, you can connect your Pico W to an Anvil app. Meredydd sat down with the lovely people from Tom's Hardware to demonstrate how to do just that.

In his episode of The PiCast, Meredydd builds two projects, live on stream:

Displaying a message on an e-ink display
Logging data from a sensor

Watch the episode to learn how it's done:

Build your own app with Anvil

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.

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

Directly upload large files to the cloud with Anvil

Brooke Myers — Thu, 30 Mar 2023 16:16:55 +0000

You might need to build a web app that allows users to upload very large files. If you were building an Anvil app, you would normally use a FileLoader component to capture the user's file then store the file in a Data Table. But if your file is many gigabytes in size, you might see timeouts while uploading or exceed the storage limits of your Data Tables. Instead, it makes sense to store giant files directly in a cloud storage service, such as Amazon S3.

Fortunately, Anvil makes it easy to use third-party cloud services on the back end, and Javascript libraries on the front end. In this example, we'll walk through how to use the use the uppy.io JavaScript widget and Amazon boto3 library to upload files from Anvil directly to an S3 bucket.

New to Anvil? Anvil is a platform for building full-stack web applications with nothing but Python. This is a fairly advanced how-to guide -- you might want to start with a quick tutorial.

Check out the app we're going to build by cloning the source code.

We'll build the app in five steps:

First, we'll create a new Anvil app.
We'll then set up an Amazon S3 bucket with the proper permissions.
Next, we'll add the Uppy widget to our app.
We then need to get a presigned URL using Amazon's boto3 library.
Finally, we'll provide the presigned URL to Uppy which will upload the file to S3.

Step 1: Create an Anvil app

First, log into Anvil and create a new blank app. We'll need to make use of our app's App Secrets to store the AWS access keys that we'll acquire in the next step, so ahead and add the App Secrets service to your app.

Step 2: Set up an S3 bucket

If you don't already have an S3 bucket, you'll need to set one up. You can find a get started guide here: Getting Started with Amazon S3.

Your S3 bucket will need to have cross-origin access enabled. The following cross-origin policy is sufficient to allow uploads from browsers – you can paste it into the CORS policy text box in the S3 console:

[{"AllowedHeaders": ["content-type"], "AllowedMethods": ["POST", "PUT"], "AllowedOrigins": ["*"], "ExposeHeaders": []}]

You'll also need an AWS Access Key and a Secret Access Key that has permission to write to your S3 bucket.

Save your access keys in your app's App Secrets. Store the AWS access key ID in a secret named aws_key_id and the secret key in a secret named aws_secret_key.

Step 3: Add the Uppy widget to the app

Uppy is a third-party JavaScript that displays a form where users can drag and drop files to upload to S3. We can add the widget to an Anvil app using Native Libraries and the anvil.js module.

First, add the following line to your app's Native Libraries:

<link href="https://releases.transloadit.com/uppy/v3.3.1/uppy.min.css" rel="stylesheet">

Next, go to the Design View of your Form, add a ColumnPanel, and name it uppy_target. This is where the Uppy widget will go.

Switch to Code View and add the following import statements to your Form's code:

from anvil.js import window, import_from, get_dom_node
import anvil.js

We'll need to set up two functions for the Uppy widget to use:

get_upload_parameters will return AWS credentials from a Server Module that will give Uppy temporary permission to access the S3 bucket.
on_complete will be called by Uppy when the upload completes, whether or not it's successful.

For now, the functions won't do anything, but we'll fix that in Steps 4 and 5.

  def get_upload_parameters(self, file_descr):
    # This function is called to get the pre-signed URL
    # for the S3 upload.
    pass


  def on_complete(self, result, *args):
    # This function is called when the upload is finished,
    # successful or not.
    pass

Next, in the Form's __init__ method, add the following code:

    mod = anvil.js.import_from("https://releases.transloadit.com/uppy/v3.3.1/uppy.min.mjs")
    self.uppy = mod.Uppy().use(mod.Dashboard, {
      'inline': True,
      'target': get_dom_node(self.uppy_target)
    })
    self.uppy.use(mod.AwsS3, {
      'getUploadParameters': self.get_upload_parameters
    })
    self.uppy.on('complete', self.on_complete)

If you run the app now, you'll see an empty Uppy uploader. Nothing will happen if you try to upload a file because we haven't set up the get_upload_parameters function yet. In the next step, we'll use boto3 to return the AWS credentials we need.

Step 4: Get a presigned URL from S3 using boto3

The AWS access key we set up in Step 2 will provide access to S3, but it's a powerful credential for this very reason. We don't want to expose it to the client and give anyone unlimited access to our S3.

Instead, we can generate a presigned URL, which grants temporary access to upload one file to the target S3 bucket. We can use the boto3 library from a Server Module to generate the presigned URL.

We can trust the server code with powerful AWS credentials, because we have control over the server. Because the client is controlled by anyone who visits our app, we can't trust it with anything except a time-limited, single-purpose presigned URL. Read more about client and server security here.

In a Server Module, add the required import statements and set up variables for your S3 bucket and AWS region:

import boto3, string
from datetime import datetime
from random import SystemRandom

BUCKET_NAME="anvil-upload-demo" # Replace with your S3 bucket name
REGION_NAME="eu-west-2" # Replace with your AWS region

Next, we'll need to create a function to generate the presigned URL and make it callable from the client. This function will be called in the get_upload_parameters function we created in the previous step:

@anvil.server.callable
def get_presigned_url(filename, content_type):
  s3_client = boto3.client(
      's3',
      aws_access_key_id=anvil.secrets.get_secret('aws_key_id'),
      aws_secret_access_key=anvil.secrets.get_secret('aws_secret_key'),
      region_name=REGION_NAME
  )

  # Because the filename is user-supplied, we use the current date and a random string to ensure
  # a unique filename for each upload
  random_string = ''.join(SystemRandom().choice(string.ascii_uppercase + string.digits) for _ in range(10))
  filename_to_upload = f"{datetime.now().isoformat()}-{random_string}-{filename}"

  r = s3_client.generate_presigned_post(BUCKET_NAME, filename_to_upload)

  # Return the data in the format Uppy needs
  return {
    'url': r['url'],
    'fields': r['fields'],
    'method': 'POST'
  }

Step 5: Provide the presigned URL to Uppy

When Uppy is ready to upload a file, it will call the get_upload_parameters function. We can now change the function so that it calls the get_presigned_url server function and returns the results (the pre-signed URL and associated data) to Uppy.

Because we're using this function as a callback from Javascript, we need to add the @anvil.js.report_exceptions decorator. This makes sure that if the code throws an exception, it appears correctly in the Anvil console.

Go back to your Form's client code and update get_upload_parameters:

  @anvil.js.report_exceptions
  def get_upload_parameters(self, file_descr):
    return anvil.server.call('get_presigned_url', file_descr['name'], file_descr['type'])

Provided you've configured your bucket and access keys correctly, you should now be able to upload files to S3.

Optionally, we can configure the on_complete function to report feedback from Uppy. We can add this to an alert to display to the user:

  @anvil.js.report_exceptions
  def on_complete(self, result, *args):
    successful = result['successful']
    failed = result['failed']
    alert(f"{len(successful)} succeeded, {len(failed)} failed")

That's it!

That's all we need to upload files directly from our user's browser into S3.

You can copy the sample app here. Of course, you'll need your own S3 bucket and access keys for it work.

For our next steps, consult the Uppy documentation for how to customise the Uppy upload widget, or the boto3 documentation for how to handle your file now it's safely uploaded into S3.

Using other cloud storage services

Amazon S3 isn't the only cloud storage service out there. But because it was the first, a lot of other services use the same API. You can adapt the sample code from this example to use other services, such as Cloudflare R2, DigitalOcean Spaces or Backblaze B2.

Just check your preferred service's documentation for how to use it with boto3. (For example, here's CloudFlare's page on configuring boto3 to work with their R2 service.)

Build your own app with Anvil

4 Streamlit Alternatives for Building Python Data Apps

Brooke Myers — Wed, 08 Feb 2023 15:28:45 +0000

Streamlit is a library for turning Python scripts into shareable web applications. Streamlit apps are designed for the data science and machine learning community and make it easy to build dashboards and interactive ML models. What makes Streamlit so popular is its simplicity. Using the Streamlit library is quick and intuitive, which means you can create data apps without needing any web development experience.

While Streamlit is a great tool, it can fall short depending on your use case. The layout and styling of Streamlit apps is pretty rigid, so unless you're willing to write some HTML, JS and CSS, all your apps will pretty much look the same. Streamlit also has speed issues becuase it reruns the Python script serving the app after every interaction on the frontend.

While Streamlit claims "instant deployment", this isn't quite true. Although deploying an app on Streamlit Cloud isn't difficult, it takes several minutes each time you deploy a new change -- and that's not counting the time it takes the first time to connect up GitHub and Streamlit Cloud.

If you're looking for an alternative to Streamlit, you have some options. In this article, we’ll be taking a look at four different alternatives:

Gradio: a Python library for building machine learning demos
Plotly Dash: a low-code framework for building data apps with the Plotly plotting library in Python, R or Julia
Panel: a Python library for creating flexible dashboards and web apps
Anvil: a platform for building full-stack web apps in Python

TL;DR

Don't have the time? Skip the details of each alternative, and go straight to the summary.

1. Gradio

Gradio is probably the most similar alternative to Streamlit on this list. Like Streamlit, Gradio is a Python library for turning datasets and machine learning models into interactive web UIs. The main difference is that Gradio is designed more for machine learning demos whereas Streamlit is designed for creating data dashboards.

An example Gradio application. Find it here.

Pros:

East to use ML Models: Gradio is now part of Hugging Face, and the Hugging Face integration makes it sleek and simple to load ML models and datasets.
Easy to share your apps: It's easy to share your apps. You can quickly generate a link to send to other users, but this link expires after 72 hours and runs all the code on your own machine. To share your app, you'll need to host it someplace else, like Hugging Face Spaces.
Embed in notebooks: Gradio can be embedded in a Python notebook. This makes it easy to share and interact with code.

Cons:

Dated appearance: Gradio apps have a very basic and dated look. It is possible to customize them, but you'll need to know how to write some CSS
Out-of-the-box cloud hosting options are limited: The simplest way to host your Gradio app is on Hugging Face Spaces, but apps hosted on Spaces are very clearly hosted within the Hugging Face website, which makes it hard to brand your app for yourself or your company.
Not standalone apps: Gradio apps work best when embedded in another webpage, unlike Streamlit apps which work well as standalone apps.

2. Plotly Dash

Plotly is a plotting library, and Dash is their open-source framework for building data apps with Python, R or Julia. (Dash also has an Enterprise version, but we'll focus on the open-source library here.)

An example Dash Enterprise application. Find it here.

Pros:

Faster than Streamlit: Dash only needs to run the functions that are called while interacting with the app. With Streamlit, the entire script is re-run with every interaction.
Work in Jupyter notebooks: If you prefer working in a Jupyter notebook, the jupyter-dash library lets you run your dashboards within a Jupyter notebook.
More flexible design: If you know some HTML and CSS, you can more easily style your Dash apps how you want.
Not limited to Python: Dash is also a framework for R and Julia, so you are not limited to building apps in Python.

Cons:

Limited layout options without HTML: Dash has a Python wrapper around HTML for building UIs, but you still need an understanding of HTML in order to use it.
Larger learning curve: Dash is a bit more complicated than Streamlit (you'll need to use "callbacks" and some HTML, for example), so it isn't as easy to get started with.
Mostly Limited to Plotly: Dash is a Plotly product, so the framework is designed to work with that plotting library. Technically, you can use Dash with other plotting libraries but not as easily and smoothly as Plotly.

3. Panel

Like the previous three alternatives, Panel is an open-source Python library for creating interactive dashboard web apps. Panel is extremely flexible, allowing you to use any plotting library you like. Like Gradio but unlike Streamlit, you can use Panel in Jupyter notebooks. Panel dashboards can also be deployed as standalone web apps, but like Plotly Dash, you'll need to set up a server to deploy it yourself.

An example Panel application. Find it here.

Pros:

Work in Jupyter notebooks: Panel integrates well with Jupyter notebooks, if that's how you prefer to write code.
Faster UI: Unlike Streamlit, Panel does not re-run the entire Python script with every interaction, which means the UI can update much faster.
Use any plotting library: Panel is also not tied to any specific plotting library (but Streamlit includes integrations with all of the most popular Python plotting libraries).
Start with a template: Panel has some templates to start with. Although they are not very modern, they make it easier to vary the look of apps than Streamlit does.

Cons:

Dated appearance: By default, Panel apps look extremely boring and dated even when using a template. Changing the styling of Panel apps requires writing CSS.
Larger learning curve: Panel is not as simple and intuitive as Streamlit is when building more complex apps.
Small community: Panel has a smaller community, which means it can be harder to discuss and get help with using the library.
No out-of-the-box cloud hosting option: Like all of the options here, Panel makes it easy to run and host your apps locally, but if you want to deploy them to the cloud, you're on your own. They do provide a guide on different deployment options.

4. Anvil

Anvil is not a Python library like the other alternatives, but an entire IDE for building and deploying full-stack Python web applications. Anvil has a drag-and-drop page designer, which makes it much easier to layout and style the UI of your apps than any other alternative on the list. Because Anvil is more than just a Python library, it has more bells and whistles than the other options, such as a built-in database, user authentication, version control and cloud hosting that takes a matter of seconds to set up. All of this also means that it can have a bit more of a learning curve than the other alternatives.

An example Anvil application. Find it here.

Pros:

Deploy apps to the cloud instantly: Anvil has truly instant cloud deployment. After just two clicks and no waiting time, your app is deployed. Basic hosting is free, including private apps. On paid plans, you can also have multiple development environments and add your own custom domains.
Design the layout: The drag-and-drop UI designer makes it easier to layout and style unique dashboards without CSS and HTML (although you can use them if you want).
Connect to a built-in database: The built-in database means you can store, query and edit data all with Python. Anvil also has file storage for connecting CSV datasets, ML models and other large files.
Plotly is built in: The built-in Plotly integration makes it easy to build dashboards.

Cons:

Larger learning curve: Anvil has more of a learning curve than the other alternatives, which are just Python libraries.
Some features require a paid plan: The Plotly integration is available for free, but if you want to install other Python libraries such as Pandas or Matplotlib, you'll need a paid plan (starting at $15/mo, with a free trial).

Summary

Streamlit
- Strengths: Quick to learn, easy for simple internal-facing or personal projects
- Weakness: Can be slow to run and deploy, limited in features and flexibility
Gradio
- Strengths: Easily connect to HuggingFace packages
- Weaknesses: Doesn't work well as a standalone app, limited in features and flexibility, basic and dated appearance
Plotly Dash
- Strengths: Apps are fast, work from a Jupyter notebook, can use R or Julia
- Weaknesses: Larger learning curve, need to know some HTML to layout apps
Panel
- Strengths: Use any plotting or visualisation library no matter how niche, work from a Jupyter notebook
- Weaknesses: Basic and dated appearance, larger learning curve, no out-of-the-box cloud hosting
Anvil
- Strengths: Out-of-the-box instant cloud hosting , drag-and-drop UI builder, more features for complex apps
- Weaknesses: Larger learning curve, not all features are available for free

Conclusion

Streamlit is a great tool for turning a Python script into an interactive web application. But it's not your only option for building Python data apps. Gradio is a good tool for ML-focused apps, especially if you want to embed them in a Jupyter Notebook. For building dashboards, Plotly Dash gives you more flexibility over the layout of your app, while Panel is the best option for using more niche plotting libraries. But if you're looking to build more complex apps and want to have control over their layout and design, then Anvil comes out on top.

Build Python Web Apps with Even More Power and Flexibility

Brooke Myers — Tue, 31 Jan 2023 10:53:03 +0000

At Anvil, our goal is to make it fast and easy to build powerful web apps entirely in Python. So we've made Anvil itself faster, easier to use, and more powerful than ever. The new Editor includes many of your most-requested features such as built-in version control and multiple databases. We've also given the Anvil Editor a complete makeover to give you a cleaner, more intuitive interface for creating your web apps.

Start building today!

Keep reading to learn about some of the biggest updates that are part of this release. For more details on all the new features, check out our documentation. And as always, head on over to the Anvil Community Forum to say hello, tell us your thoughts and ask any questions.

Powerful New Features

Version control and collaboration

At the bottom of the Editor is a version control tab that lets you create branches, commit changes, merge contributions and resolve conflicts, all without leaving Anvil. You can now easily work with colleagues to edit your app, and the new version control tools mean you won’t get in each other’s way. With Anvil, you can now easily share your work with others and collaborate on your apps.

Multiple deployment environments and databases

Deploy development, staging and production versions of your app on separate URLs with separate databases, Uplinks and more. It’s now easier than ever to build, test and deploy your web apps.

Interactive Consoles

Debugging your apps has never been easier. The new App Console allows you to interact directly with your running app via a live Python terminal. Alternatively, launch a Server Console to connect directly to your chosen Python environment on the server. Ideal for prototyping, debugging and exploring custom packages you've installed!

A More Intuitive Interface

Tabbed editing

You can now open multiple forms and modules in separate tabs, and switch between them easily. Switch from writing client code to writing server code to editing your data tables to editing your assets and back again. Colour-coded tabs make it easy to keep track of what you're working on.

Split view

With the new Anvil Editor, you can view your client code and UI design side-by-side. You can now write Python code and tweak your UI without the need to switch back and forth. You can now also run your app in split view so you can build your app and view your live app in the same screen.

Dark mode

Do you know the power of the Dark Side? We've got you covered.

And so much more...

The new Anvil Editor has a lot more to offer, including:

Improved app list: Easily see all your apps, sort by name or the date they were last edited. Star your most important apps to keep them at the top of the list.
Upgraded code editors: The code editors in Anvil now have better syntax highlighting as well as faster and more powerful autocompletion for all Python, JS, HTML, and CSS files.
Static file storage: Use Anvil's Data Files to attach large datasets, ML models and other files to your app and access them through an intuitive API.
Improved app logging: Searching through app logs is faster and more powerful than before. You can now search through your app's logs using regex and filter by session type and environment.

Check out our documentation for more details on all the new features.

The best way to experience the new Anvil Editor is to try it out for yourself. Start building web apps with Anvil today!

Start building today!

New to Anvil?

If you're new to Anvil, welcome! We are a platform for building full-stack web applications entirely in Python - no JavaScript, HTML, CSS required. Anvil is perfect for developers of all skills levels, whether you're a beginner just getting started with web development or an experienced developer looking for a faster, more efficient way to build web apps.

Try the new Anvil Editor today and experience the power and flexibility of building web apps in Python. Sign up for a free account and start building your own web app in minutes.

Start with a quick tutorial!

A Task Manager App Built with Python

Brooke Myers — Tue, 15 Nov 2022 11:18:43 +0000

Building a task management app with Anvil

Open the source code and check out the app for yourself: https://anvil.works/build#clone:ILO62UVSCDQLTFHF%3dPJNDVGDLQSB7GG4RAQLSNHXA

I built the app’s UI with Anvil’s drag-and-drop editor and by writing front-end Python code. The back-end is also written in Python code in a secure Server Module. The app also uses Anvil's built-in database system and user management service. Keep reading to learn more about how I built the task manager app with Python and Anvil.

What it does

The app is a simple task manager that allows you to create and manage projects. Each project is a configurable table of tasks where users can give tasks a priority level, add checkboxes and assign other users to tasks. The table of tasks is displayed using a Data Grid. Users can click on the cells in the table to edit their contents.

On the main page, there is a board view of all the projects. Here, you can add comments to or delete projects.

How it's built

Building the database

Every Anvil app comes with a built-in database system built on top of PostgreSQL. Anvil's Data Tables have a GUI for creating, editing and deleting tables, but tables can also be edited via Python code. To build my task manager app, I first needed to define my database schema.

I needed a way to store the columns in each user-created project table and the data in each row. I did this by first creating a table to store the name and type of all the columns in the projects.

Next, I created a table to store all the projects. This table has a column for the project name and a column that links to columns table. This connects each row in the Columns Data Table with its corresponding project.

Finally, a third Data Table stores the data for each row in all the projects. This table has a column linking back to Projects Data Table and a column for the row data, stored in a simple dictionary.

Writing back-end Python

Anvil’s Server Modules are a full server-side Python environment. Server Modules cannot be edited or seen by the user, so we can trust them to do what we tell them. By default, the Data Tables in an Anvil app are not editable by users, but they can be accessed from a Server Module. In the task manager app, any updates to the Data Tables occur in server-side functions within a Server Module. These functions can be called from client-side Forms using just one line of code.

For example, when a new column is added to a Data Grid, a new row is added to the Columns Data Table and that new row is then linked to the project in the Projects Data Table.

@anvil.server.callable
def add_column_to_db(column_name, project, type):
    #project is a row from the Projects Data Table
    #add a new row to the Columns Data Table
    column_row = app_tables.columns.add_row(title=column_name, type=type)
    #link the new column to Projects
    project['columns'] += [column_row]
    return column_row

The @anvil.server.callable decorator means that this function can easily be called from client-side code:

anvil.server.call('add_column_to_db', title, self.project, type)

Creating the UI with client-side Python

I created the app’s UI by using both Anvil’s drag-and-drop UI builder and by writing Python code to dynamically generate UI elements. For example, to create the project view page of my app, I dragged a Data Grid onto the page which is then used to display the table of tasks for each project:

The drag-and-drop designer makes building the front-end of your app a breeze, but sometimes you’ll want to build the front-end in code instead. For example, in the left navigation menu of my task management app, there are Links to all the projects in the app.

These Links are dynamically generated via code and updated anytime a project is created, deleted or renamed. Below is the Python function that searches the database for projects and creates Links for each project. The function is written in a client-side Form that runs in the user’s browser.

def add_project_links(self):
    #clear out the container that the links are in
    self.link_panel.clear()
    #get a list of the projects from the database
    for row in anvil.server.call('get_projects'):
      #create a link
      link = Link(text=row["project_name"], tag=row)
      #set up a event handler that opens the project when the link is clicked
      link.set_event_handler("click", self.open_project)
      #add the link to the container
      self.link_panel.add_component(link)

Anvil has many pre-built components that you can add to your apps, but you can also create your own component types using Custom Components. In my task manager app, I created a Custom Component that allows users to edit the text of the component by clicking on it. I reused this Custom Component throughout the app to make the contents of the project tables and the name of the projects user-editable.

Adding the User Management Service

Anvil also provides built-in user management that handles signup, login and user permissions. I added the Users service to my task management app so that team members can log in and work on projects together. Adding the Users service to an Anvil app automatically creates a Users table where you can manage access to your app. Since the Users table is an ordinary Data Table, I also used it to create a component for assigning tasks to users.

Anvil handles the login process, including single-sign-on with Google, Microsoft or your corporate SAML provider. I just needed to add anvil.users.login_with_form() to my app so that users are presented with a login form on startup.

What next?

Clone the app to check out the source code and try it for yourself: https://anvil.works/build#clone:ILO62UVSCDQLTFHF%3dPJNDVGDLQSB7GG4RAQLSNHXA

If you’re new to Anvil, why not try a 5-minute tutorial to learn more about building web apps with nothing but Python? Or if you’re an experienced Anvil user, why not extend the app? Here is some inspiration for features to add:

Make the board view more informative. Try displaying the number of tasks in each project on the card.
Add deadlines. Use a Date Picker component to allow users to set a deadline on a project. If the deadline has passed, make the colour of the deadline red. Expand this even further by adding a new type of column to project tables that lets you set a date for each task.
Archive tasks. Add a function that lets users archive tasks without deleting them. They shouldn’t show up in the normal table but still be viewable somehow.
Allow multiple tables per project. Right now, the app only allows one table per project. Allow users to add or delete tables to a project. Think about how this would change your database structure.

Show us what you’ve built! Have you created a cool internal tool with Anvil or extended this Task Manager app? Let us know! We’d love to see what you’ve built on our Show and Tell Community Forum.

Want to dig into how this app works? Our tutorials show you all the pieces this app is made from, and more:

How to Style Anvil Apps with CSS

Brooke Myers — Fri, 13 May 2022 16:05:54 +0000

About Anvil

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. Get started with one of our tutorials or check out an example app. For more help, we have detailed developer documentation and a friendly Community Forum.

Using CSS in Anvil

Anvil lets you build web apps entirely in Python. You can build your UI by dragging and dropping Python components and styling them with Python code. But if you want to have even more control over the appearance of your Anvil apps, you can use CSS.

CSS is a language used to style web pages. This guide will provide an introduction to CSS and how we can use it to change the appearance of web pages. We'll see how we can target components on a web page with CSS and write rules to modify how those components look. You'll be able to test your skills with some challenges as we go along. We'll then experiment with CSS on the live Anvil homepage using the developer tools built into your browser. Then, we'll work through an example of using CSS to customize the appearance of an Anvil app with the Material Design theme.

In this guide to using CSS in Anvil, we will:

Take a look at HTML and its relationship to CSS
Examine CSS syntax in more detail, including:
- Using selectors and classes
- Combining selectors
Use the browser's developer tools on the Anvil homepage to:
- Select an HTML element
- Inspect the HTML code
- Inspect the CSS code
Learn more about using CSS to style Anvil apps, including:
- Applying CSS via Python
- Writing CSS in theme.css
- Using Anvil roles

The best external resource for learning more about CSS and HTML is the Mozilla Developer Network Web Docs. The MDN Web Docs are an open-source project that provide reference guides and tutorials for web languages and technologies. They have detailed and clear resources for beginners and advanced users. I will frequently be linking to the MDN Web Docs in this guide.

HTML and CSS

When we talk about front-end web development, we are talking about all the code that is responsible for displaying the visual part of a website or web app. When you load a web page, all the code associated with displaying the page is loaded into your browser, which is where the code runs. You can actually inspect this code and make local changes to it, which we will do with the Anvil homepage later in this guide.

In the traditional, non-Anvil, way of doing front-end development, HTML is used to define the elements that make up a web page. CSS targets those elements and defines rules that dictate how they will appear on the page. When you drag-and-drop Anvil components onto a form, these components generate their own HTML. When you edit the component's properties, this generates CSS rules that target the HTML to style the component.

HTML defines the elements on a page using "tags". The most basic HTML element is a <div>, which is just a generic container with no pre-defined styling. Very often, HTML elements are nested inside each other, just as in Anvil where we often nest components within containers like ColumnPanels and FlowPanels. For example, the following code defines a <div> and adds a button that says 'Submit' to the page:



<div>
  <button>Submit</button>
</div>

With CSS, we can target the button and change the way it looks. The following code targets all buttons on the page, gives them a pink border and a gray background color:



button {
  border: 1px solid pink;
  background-color: gray;
}

Next, we'll take a closer look at CSS and its syntax.

CSS Syntax

With CSS, we can write rules that tell the browser what each component on our webpage should look like. CSS stands for Cascading Stylesheet. 'Stylesheet' refers to the document where the CSS styling rules are written, and 'Cascading' refers to the order in which CSS applies those styling rules. A CSS rule has three parts:

Selector: This 'selects' which HTML element or elements to apply the rule to.
Property: This is the feature of the element that will be targeted.
Value: Describes how the property will be rendered by the browser.

Selectors and classes

In the previous example, we used CSS to target <button> elements. We did this by just writing the name of the tag and then defining the rule. This is called a type selector.

More often, we will target elements by giving them a class. Classes can be applied to as many HTML elements as we want. They are a way of applying the same style to multiple elements without repeating code. To add a class in HTML, we use the class attribute, and to use the class selector, we use . followed by the class name.

Let's extend our previous example and give the button a class. Then, we can apply styling rules to that class. This way, we won't change every single button on the page, just the ones we want to target. Let's give the button a class called submit and apply the same styling rules just to that class:



<div>
  <button class="submit">Submit</button>
</div>



.submit {
  border: 1px solid pink;
  background-color: gray;
}

There are a number of different CSS selectors, which you can read about here, but the most important for this guide are type and class selectors.

Try it yourself

Now it's your turn! Open the following code in CodePen and:

Give the second <button> a class called cancel
In the CSS, target that class and give it a different background color.

The background-color property can take some text-based values as well as hex and rgb values. Read more about background-color here

Combining selectors

Selectors can also be combined in different ways. Let's look at how we can use more complex selectors to target the elements that we want.

Multiple selectors

Selectors can be grouped using a , in order to apply the same rules to multiple selectors. In the example below, elements with the submit or the cancel class will have a font size of 16px:



.submit, .cancel {
  font-size: 16px;
}

Combining type and class selectors

A class selector can come directly after a type selector (without a space in between) to select elements of that type with that class. For example, we can use the following code to select <button> elements with the submit class (in case there are other types of elements that have the same class name):



button.submit {
  border: 1px solid pink;
  background-color: gray;
}

Selecting descendents

Sometimes, we want to select elements that are nested inside other elements. For example, we might want to select buttons that are within a card container but no other buttons. A space between two selectors will select the elements that are descendants of the first element, while a > will select the elements that are a child (a direct descendant) of the first element.

For example, the following HTML code defines a <div> element with the class card, which has another <div> with the class buttons-div nested inside. Inside that <div> are two <button> elements:



<div class="card">
  <div class="buttons-div">
    <button class="submit">Submit</button>
    <button class="cancel">Cancel</button>
  </div>
</div>

Because the <button> elements are within the <div> with the card class, we can select them with the following CSS:



.card button {
  border: 1px solid pink;
  background-color: gray;
}

However, the <button>s are not children of the card element because they are not directly nested within the <div>, but they are children of the buttons-div element. The first rule below will not select the <button>s whereas the second rule will:



/* This won't select the buttons because they aren't children of the "card" <div> */
.card > button {
  border: 1px solid pink;
  background-color: gray;
}

/* This will select the buttons because they are children of the "buttons-div" <div> */
.buttons-div > button {
  border: 1px solid pink;
  background-color: gray;
}

For more on combining CSS selectors, see the MDN web docs.

Try it yourself

Now it's your turn to combine CSS selectors to target elements. For the following challenges, open the code in CodePen, and don't add any new classes:

Select the second <p> and give it a color of pink. But keep the first <p> the way it is.
Give both the submit and clear buttons a background-color of lightblue, but leave the cancel button the way it is.
Give the <div> within the card a border property of 1px solid pink

Stuck? Check out a solution.

CSS properties

There are many different CSS properties that affect the layout and appearance of HTML elements, but it's beyond the scope of this guide to go over them in detail. For a list of all CSS properties and their corresponding values, see the MDN web docs. In general, the MDN docs are the best place to learn more about CSS properties because they are detailed, give visual examples and are easy to follow.

Using the developer tools

Your browser has built-in developer tools to help you with front-end web development. These developer tools let you see all the code and files that are loaded into the browser when you open a web page. We can use the dev tools to inspect live code and make local edits, so they are an incredibly handy tool for debugging and experimenting with styling.

Let's now use the dev tools to inspect the Anvil homepage and see how HTML and CSS works out in the wild.

Selecting an element

When you load a web page, all the code used to display that page is loaded into the browser. This means that we can see the source code for any web page we can load in our browser, and we can make local changes to that code. Let's go to Anvil's homepage and inspect the source code.

On the website, you can right click and choose 'Inspect' to bring up the browser's developer tools. (I use Google Chrome, but other browsers will have very similar dev tools).

In the dev tools, click on 'Elements' to bring up the HTML and CSS for the page. Then click on the icon that looks like a square with a mouse cursor. This will allow us to select an element on the page and inspect its HTML and CSS.

Let's select the link that says "Start with a quick tutorial" on the Anvil website. This will highlight the relevant HTML in the dev tools and show us the CSS associated with that element.

Inspecting the HTML

This is the HTML responsible for displaying that link:

Here we have an <a>, or anchor, element. Anchor elements are links, and the href attribute specifies the link's "target": usually, the URL to open when you click it The element also has a class attribute. This particular element has two classes: nowrap and tutorial.

There is also an <svg> element nested inside the <a> element. The SVG is displaying the arrow in the link. Because the <svg> is nested directly inside the <a>, we can say that it is a child of the <a>.

Inspecting the CSS

In the dev tools, we can see the CSS being applied to the element. The first rule looks like this:

The first line is the selector. This particular selector means "select the element with the tutorial class that is a descendent of an element with the sub-hero-links class which is a descendent of an element with both the col-hero and home classes".

The next line of the CSS rule is the property we want to target and how it should be displayed. This particular rule is making the color of the element a light grey.

We can actually modify the code directly in the dev tools. If I change the color of the link to be lightgreen, for example, we can see the change live in the browser.

This is incredibly handy for styling apps. You can change and add CSS properties directly in the dev tools and immediately see the results. After playing with the CSS styling in the browser, you can then go and actually change the source code of your app. The dev tools are also incredibly useful for debugging. If an element is not displaying how you think it should be, you can inspect it to see what CSS code is being applied to the element. Refreshing your browser will reload the page, and your local changes will be gone. This makes it easy to experiment without worrying about breaking the source code.

Using CSS in Anvil apps

With Anvil, you can build the front-end of your web app entirely in Python. However, even when you are styling your apps in Python, your apps still use HTML and CSS. Anvil components generate HTML, and changing the properties of those components modifies the CSS for those components. In Anvil, we can change the appearance of components using Python via the Properties Panel or client code. Every Anvil app also has a stylesheet, so we can also write CSS for our app in the traditional way. This gives us more control over the appearance of an app.

To see how CSS is used in Anvil apps, let's create a new Anvil app and choose the Material Design theme.

Applying CSS via Python

Anvil components have properties that can be modified via the Editor or through Python code. When we modify a component's properties, CSS is applied to the component's HTML in a style attribute. To see this in action, let's drag and drop a Button component onto our Anvil app and change its background color to gray in the Properties Panel:

We can also change properties from code. Let's switch to code view and change the foreground color of our button in the __init_ of our Form code.



class Form1(Form1Template):

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    self.button_1.foreground = "white"

We can now run our app and inspect the page, just like we did with the Anvil homepage. If we select the button, we can see some HTML that looks like this:



<button class="btn btn-default to-disable" ontouchstart=""
style="max-width: 100%; text-overflow: ellipsis; overflow: hidden; background-color: gray ; color: white;">...</button>

Within the style attribute, we can see both the background-color property that we added in the Properties Panel and the color property (foreground in Anvil) that we added in the Form code.

Writing CSS in the stylesheet

We can also target Anvil components and write CSS rules in the app's stylesheet. Every Anvil app has a stylesheet named theme.css associated with it, which can be found in the App browser under "Assets".

Because we created an Anvil app with the Material Design theme, our app's stylesheet is already populated with CSS rules. Let's open theme.css and modify some of the code.

Let's find the CSS code related to styling Buttons. Ctrl + F and search for "button". This should land us around line 548. Here we can see some CSS that is applied to components with the btn class. If we run our app and inspect the button again, we can see that it has a class called btn. In this rule, let's adjust the background-color to be something different:



.btn, .btn-default, .file-loader>label {
  border-radius: 2px;
  font-size: 14px;
  ...
  background-color: lightblue; /* This line is changed */
  ...
}

Now, if we run the app, we can see that nothing has changed. Let's inspect the button to see what is going on. We can see the background-color we added in theme.css is crossed out, and instead the background-color that we added in the Properties Panel is taking precedence.

When CSS properties conflict with each other, CSS has rules to determine which property is applied. Styling rules written in the stylesheet will be applied first, then rules written in the HTML will be applied. This is why our Button is gray and not lightblue. The background-color: gray property written in the HTML will be applied last and therefore overrides the background-color: lightblue property in theme.css.

If CSS styling rules written in the stylesheet conflict, then the last rule will override preceding rules. This is why stylesheets are cascading. For example, if we had the following code in a stylesheet (and no conflicting styling rules added to the HTML), then buttons would end up having a pink background:



button {
  background-color: gray;
}

button {
  background-color: pink;
}

However, if rules have different selectors but could still conflict, then the most specific rule applies. Class selectors are more specific than type selectors. So in the following code, buttons with the submit class would have a gray background color despite the rule coming first:



.submit {
  background-color: gray;
}

button {
  background-color: pink;
}

The cascade and specificity rules can be overridden by using !important. !important is applied to a property within a rule in order to make its value more important than any other conflicting value, but this is almost always a bad idea. We'll discuss why !important should be avoided, but let's first see how it works by making the background-color property we set in theme.css !important:



.btn, .btn-default, .file-loader>label {
  border-radius: 2px;
  font-size: 14px;
  ...
  background-color: lightblue !important;
  ...
}

If we run the app again, the button now has a light blue background. Inspecting the button shows that the background-color set in the style attribute is crossed out this time. In practice, we should not use !important here. Instead, we should either set the background-color we want from the Properties Panel or remove the background-color set there and set it in theme.css without making it !important.

In general, using !important should be avoided. Occasionally, you may need to use it to override default styling rules that you don't have access to. (The example above is not one of these scenarios.) But overriding the cascade makes debugging difficult and will often cause other developers (and your future self) pain and confusion. Instead, try reordering rules and using more specific selectors. You can read more about specificity and !important here.

Anvil Roles

We can add CSS classes to Anvil components using Anvil Roles. After you create a Role, you can write CSS rules in the app's stylesheet to define how the Role will affect components. You can apply the Role to a component through the Properties Panel or in code.

Let's create a new Role in our app to apply to our Button. In the sidebar, click on "Theme", then choose "Roles". Click on "+ Add a new role" then choose a name for the role. I've named my role submit and have restricted it so that it can only be applied to Button components.

Let's now switch back to Form1 and give the Button the submit Role. Let's also remove any properties we set in the Editor or in the Form code.

We should also change the code we altered in theme.css. Right now, all buttons in our app will be light blue, but let's use the role we just defined to only make Buttons with the submit Role light blue. So the code we changed in theme.css should look like this again:



.btn, .btn-default, .file-loader>label {
  border-radius: 2px;
  font-size: 14px;
  ...
  background-color: transparent; /* this line is changed back */
  ...
}

The Button now has the submit Role, which means Anvil will give the component a CSS class. The class name will be the Role name with the prefix anvil-role-. We can now go into theme.css and write some styling rules for the anvil-role-submit class.

At the very bottom of theme.css, let's select the anvil-role-submit class and change the background color, the font color and the font size:



.anvil-role-submit {
  background-color: lightblue;
  color: white;
  font-size: 22px;
}

Run the app to see how the code worked.

Our button doesn't quite look right, so we should inspect the app to see what is going on. If we select the element with the light blue background, we can see that it is a <div> that has the anvil-role-submit class. Inside of this <div> is the Button we actually want to target.

Let's go back to theme.css and modify the selector so we select the <button> nested inside the <div>.

There are a few ways we can do this, but let's be as specific as possible and select <button> elements that have the btn class that are children of the .anvil-role-submit class:



.anvil-role-submit > button.btn {
  background-color: lightblue;
  color: white;
  font-size: 22px;
}

Now let's rerun our app to see if we've selected the correct element.

Great, it worked!

Summary

In this guide, we have gone over the basics of using CSS in Anvil apps. We briefly covered HTML and how it relates to CSS. We also looked at how to write CSS rules using selectors and properties. We've also seen how we can use the browser's developer tools to inspect code and make local changes. When using CSS in Anvil, we can edit the properties of Anvil components with Python or by writing CSS rules in the app's stylesheet. We can also define Anvil roles to add CSS classes to Anvil components.

CSS is a very powerful tool, but we've only scratched the surface on what it can do. I highly recommend playing around with your browser's developer tools to inspect web pages and make local changes to the code. This is a great way to learn more about how CSS works.

If you'd like to learn more about how to use CSS, check out my suggested resources below:

Client vs Server Code in Anvil

Brooke Myers — Mon, 04 Apr 2022 16:05:26 +0000

About Anvil

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. Get started with one of our tutorials or check out an example app. For more help, we have detailed developer documentation and a friendly Community Forum.

Introduction to Client-Server Architecture

When you write code in an Anvil web app, there are two different places it can run: the client or the server. Client code runs on the user's browser while server code runs on a central computer that you control. If you are new to web development, the distinction between client and server can be confusing at first. When you use Anvil, you don't need to worry about the messiness of traditional web development, but you still need to separate out where your code runs.

The purpose of this article is to provide an introduction to the client-server architecture and to explain why we need to write code for Anvil apps in two different places. We'll then use the Feedback Form Tutorial as an example to better understand why we need to use both client-side and server-side code.

In this article, we will cover:

The client and client-side code
The server and server-side code
Communication between the client and server in Anvil
The Feedback Form app as an example

The Client

The front-end

Client-side code runs in the user's browser and is responsible for showing the visual components of an app as well as interacting with the user. This code running on the client makes up the front-end of a web app. In Anvil, your app's front-end is made up of Forms where you can drag and drop Python components to build a user interface and write client-side Python code.

When a user opens a web app, all of the front-end code is downloaded to the browser, which means that the user has full control over that code. Because of this, client code is untrusted. This is the reason we want some code to run elsewhere on a server. We don’t want the user to have access to code that authenticates users or processes payments, for example.

Client-side Python

In traditional (non-Anvil) web apps, front-end code is written in HTML and JavaScript because those are the languages that browsers can understand. Anvil lets you write all your front-end code in Python. This works because Anvil translates the Python code in your client-side Forms and Modules into JavaScript for the browser to execute. Not every Python library can be translated, which means that there are certain Python libraries that cannot be used on the client-side in Anvil. Server-side Python does not run in the browser, so there is no need for it to be translated into JavaScript. This is why extra Python libraries can be used in server code or via the Uplink. If you're interested, Anvil uses the Skulpt Python-to-JavaScript compiler. It's an open-source project, and we contribute heavily to it.

Server-side code

The back-end

Unlike client code, which runs in the user's browser, server-side code runs on a computer that is separate from the user’s device. This is the back-end of a web app. Code written in an Anvil app's Server Module will never be seen by your app's users. This means that it can act as a gatekeeper for central resources (such as data in your app's Data Tables) and enforce permissions checks (for example, checking if a user is an admin before showing information).

Learn more about building secure apps in our documentation.

In Anvil, we provide the server to run your server-side code, so you don’t have to worry about where to host it. In your Anvil apps, you just write code in a Server Module, and we provide the computer where it executes. This is called the Cloud, or serverless computing.

The Uplink

However, your server-side code doesn't need to live on Anvil's servers. If you want to run your server-side code locally or on a different server, you can use the Anvil Uplink. The Uplink is a way to connect an Anvil app to Python code running on a script somewhere else. For example, you could connect a script running in a Google Colab notebook to your web app via the Uplink. In this case, the Google Colab notebook would be your app's back-end, and Google would be providing the server.

You can also use your own computer as the server by hosting your code locally and connecting it to your app with the Uplink. However, once you shut your computer off or set it to sleep, the Uplink will disconnect and the script will no longer be running. To keep the script running so that your app continues to work properly, you can host your Uplink scripts on a virtual private server such as AWS Lightsail or Digital Ocean Droplets. For more information on hosting your Uplinks scripts on an external server, see our guide on using Docker to containerise and run your scripts.

Communicating between the client and server

In Anvil, your app communicates by calling server-side functions from client-side code. You can make a server function available to the client using the @anvil.server.callable decorator, and then call it from client code using anvil.server.call. We'll see an example of this in the next section.

The Feedback Form: Putting it all together

Let's take the Feedback Form Tutorial as an example of a simple web app that uses the client-server architecture. The app has a simple user interface for taking user input and storing it in a Data Table.

Client-side

The front-end of the app is the user interface and the client-side code that collects user input. This code lives on the client because the user is interacting with it. After the user enters input and clicks the "submit" button, we use anvil.server.call() to call a server function to add this input to the Data Table:

  def submit_button_click(self, **event_args):
    name = self.name_box.text
    email = self.email_box.text
    feedback = self.feedback_box.text
    # Call the 'add_feedback' server function
    # pass in name, email and feedback as arguments
    anvil.server.call('add_feedback', name, email, feedback)

Server-side

The server function and the Data Table are the back-end of our app. Because the server is separate from the user’s device, we can use it to run code we don’t want to expose to the user. In the case of the Feedback Form, we don't want users to have access to code that modifies the Data Table since it contains other users' data. By default, only server-side code has permission to access a Data Table. We can pass the user input to a server function that then updates the Data Table:

@anvil.server.callable
def add_feedback(name, email, feedback):
  app_tables.feedback.add_row(
    name=name, 
    email=email, 
    feedback=feedback, 
    created=datetime.now()
  )

Summary

In this article, we looked at why we need to write code in two different places in Anvil apps. We covered why we write code on both the client and server, and how to communicate between the two in Anvil. Finally, we saw how the client-server architecture works in the Feedback Form Tutorial app.

Draw FusionCharts with Python

Brooke Myers — Thu, 10 Mar 2022 16:39:35 +0000

Draw beautiful charts with FusionCharts and Anvil

FusionCharts is a library for building beautiful dashboards in the browser, and with Anvil you can build your FusionCharts dashboard entirely in Python, no HTML or JS required!

Let's jump in and build the standard FusionCharts demo plot in Anvil. Here's the plan:

Create an Anvil app
Add the FusionCharts library
Create a FusionChart plot in Python
Bonus: Add an event handler to the plot
Deploy your app to the web

1. Create an Anvil app

We're going to start with a blank app, built from Anvil's Material Design theme:

2. Add the FusionCharts library

FusionCharts is distributed as a Javascript library, so we'll add that to our app in the Native Libraries section:

<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

That's all the HTML we have to write - the rest of our app will be written entirely from Python!

3. Create a FusionCharts plot in Python

The blank app we created already has a form (Form1) that will load when someone visits our app, so let's add a placeholder component to hold the plot. A Spacer works nicely. Drag and drop one from the Toolbox onto the form, set the height to something suitable, and rename it to chart_placeholder:

We want to display the chart when the form is opened, so select the form and then scroll down to the bottom of the Properties panel to create an event handler for the show event:

Anvil has created the form_show event handler for you, and this is where we want to write code to display our chart. Before we get to that, let's import the things we need. We'll be using the anvil.js module to interact with the FusionCharts Javascript, so start by importing that at the top of the file. At the same time, let's add the data we want to plot:

...
from anvil import *
import anvil.js # Add this import

chart_data = [{
    "label": "Venezuela",
    "value": "290"
  },{
    "label": "Saudi",
    "value": "260"
  },{
    "label": "Canada",
    "value": "180"
  },{
    "label": "Iran",
    "value": "140"
  },{
    "label": "Russia",
    "value": "115"
  },{
    "label": "UAE",
    "value": "100"
  },{
    "label": "US",
    "value": "30"
  },{
    "label": "China",
    "value": "30"
  }
]

# 
class Form1(Form1Template):
  ...

Now update your new form_show event handler to create the chart:

  def form_show(self, **event_args):
    """This method is called when the form is shown on the screen"""

    chart = anvil.js.window.FusionCharts({
      "renderAt": anvil.js.get_dom_node(self.chart_placeholder),
      "type": "column2d",
      "width": "100%",
      "height": "100%",
      "dataSource": {
        "chart": {
          "caption": "Countries With Most Oil Reserves [2017-18]",
          "subCaption": "In MMbbl = One Million barrels",
          "xAxisName": "Country",
          "yAxisName": "Reserves (MMbbl)",
          "numberSuffix": "K",
          "theme": "fusion",
        },
        "data": chart_data,
      },
    })

    chart.render()

And that's it! Hit "Run" to see your chart. It should look something like this:

4. Bonus step: Add an event handler to your plot

FusionCharts are fully interactive, and we can easily wire up their events to Python methods in our app. Let's pop up an alert when the user clicks one of the bars on the plot.

First, we'll add a method to our form to handle the event:

  def data_plot_click(self, event, data):
    alert(f"You clicked on {data.categoryLabel}, which has a value of {data.displayValue}")

Then we need to modify our chart generation code to pass the method to FusionCharts:

  def form_show(self, **event_args):
    """This method is called when the form is shown on the screen"""

    chart = anvil.js.window.FusionCharts({
      "renderAt": anvil.js.get_dom_node(self.spacer_1),
      "type": "column2d",
      ## Add this section to register our new event handler
      "events": {
        "dataplotclick": self.data_plot_click
      }
      "width": "100%",
      "height": "100%",
    ...

That's all we need. Run your app again, and try clicking on one of the bars to see the popup.

5. Deploy your app to the web

Anvil makes it really easy to publish your new FusionCharts dashboard to the web. Deploying the app is as simple as clicking 'Publish App' in the app's settings and choosing a URL:

Now our app is available to anyone on the web!

That's it!

We've just created a web app with nothing but Python, even though the FusionCharts library usually requires Javascript!

Check out the full source code of the app here