DEV Community: Anvil

Build a Web App with MongoDB Using Just Python

Love Otudor — Tue, 13 Jan 2026 16:37:03 +0000

Build and deploy a full-stack web app that interacts with your external database using only Python. No HTML, CSS, or JavaScript required.

In this tutorial, we guide you step-by-step on how to create a Customer Relationship Management (CRM) system connected to a MongoDB Atlas cluster, starting completely from scratch. You'll see how to build both the frontend and backend in Python using Anvil and deploy it to the web with two clicks.

Anvil lets you build full-stack web apps with all the power of Python and the flexibility of code.

In this tutorial, we will cover:

Installing Python packages in your Server Module
Securing passwords with App Secrets
Communicating between Forms with custom events
Authentication with the Users Service
Deploying your app on Anvil's free hosting

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.

Showcasing three recent improvements to Anvil

Tony — Tue, 11 Nov 2025 11:26:11 +0000

We've made changes to improve your developer experience

Anvil is always evolving to give its users full power to make any web app they wish. In this article, we'll go over three recent features that we made specifically to give more control and options when building web apps with Anvil.

Here's what our latest efforts empower you to do, with nothing but Python:

Use industry-standard design language, with the Material 3 theme.
Use smart and secure databases, with Model Classes.
Build easily navigable multi-page apps, with Anvil's routing dependency.

If you want to see all these features in action, take a look at this example app.

Apply industry-standard design language

How your app looks is, understandably, a huge priority when it comes to building an Anvil app. So, we've given you more tools to get your app to look exactly how you want it to.

First off, our new Material 3 Theme is here with plenty of shiny and sleek components for you to use.

The Anvil Material 3 Theme is available for both new apps and existing apps. It is exhaustively documented and updated regularly.

Secondly, we've changed our approach to themes and enhanced the ability for you to create your own themes and components. Apps used as dependencies can now share their custom components. You can make an entire app filled with components styled exactly how you see fit, and then use this app as a dependency. This lets you build a library of components, themes and layouts that you can then use in any other app. In fact, that's exactly how we built the Material 3 Theme!

Ensure secure and powerful database interactions

Dealing with data can be difficult -- you need your data to be flexible, modifiable and accessible, yet secure. This is where Model Classes come in. Model Classes let you handle all validation, observation and transformation in one single Python script, letting you enjoy all the benefits of a secure database without compromising on flexibility.

Here are a few things Model Classes enable you to do:

Have your user rows automatically calculate the age of the user they represent, using their registered date of birth.
Ensure the execution of specific code whenever a new row is created or updated.
Check for permission when a user attempts to modify a row.

For example, let's say that we have an app where users can create accounts, and we want to notify the app owner whenever a new user is created.

from anvil.tables import app_tables
import anvil.email

class User(app_tables.users.row):
    # We inherit from the Row class from our users table.
    # Through Model Classes, this allows us to add logic to our row objects.

    def _do_create():
        # This method is run every time a new row object is created.
        anvil.email.send(
            to="owner@email.com",
            subject="New User Registered",
            text = """Hello Owner!
            A new user has registered to your app.
            """
        )

With just this simple script, we have added logic to our data table, and now, you can too!

All this and much more is dutifully explained in Model Classes' documentation.

Provide clear navigation

We've built a new way to use routing for page navigation within Anvil. Our new routing dependency makes the set-up process very easy, letting you set up and configure URL routes via a script, as you would any other element of your app.

Routing empowers you to:

Let your users use browser bookmarks
Redirect your users
Enable navigation to specific app states from an external link

Using routing for navigation offers a very native experience for your users, and the routing dependency lets you implement it the same way you would any other component. Our routing documentation is a great starting-off point, and the dependency's standalone documentation has all the technical details you could possibly ask for.

Dive in!

We hope that these additional tools empower our users to build exactly what they have in mind, with all the features they desire. All you need to get started is sign up, and get coding. It's that easy.

If you're looking for an example, this example app showcases all the features described here, with explanatory comments throughout the code.

We also have a bunch of tutorials to help if you're ever lost, and the Anvil community forum is filled to the brim with brilliant and helpful people, so you're never alone.

AnkiBuddy: Automating Flashcard Creation for Medical Students

Ryan — Mon, 18 Aug 2025 15:03:39 +0000

Executive Summary

AnkiBuddy transforms the way medical students create study materials by using AI to generate high-quality Anki flashcards from PDF documents in minutes - eliminating hours of manual card creation. Built by Dr. David Topf and using Anvil, AnkiBuddy went from initial idea to working prototype in just 2 months, with Anvil enabling rapid iteration and continuous improvement ever since.

Built by a solo developer
Prototype ready in 2 months
Users: 18,000+
Customer lifetime value: €70
MoM user growth: 32%
50,000+ PDFs parsed

Anvil has allowed me to do this as a solo entrepreneur. Any other solo entrepreneur that builds a software product needs to basically be a full stack developer who's also had experience with DevOps and has the skills to build a business.
Dr. David Topf
Founder and CEO, AnkiBuddy

The Challenge: When Manual Study Card Creation Meets Medical School

Every medical student knows the struggle: You have tonnes of PDF study materials, and you know that spaced repetition with flashcards is one of the most effective ways to learn. But creating quality flashcards manually is incredibly time-consuming. Turning a single PDF into comprehensive Anki cards can take hours.

David's sister Danielle, a medical student, experienced this firsthand. She asked David how she could use AI to transform her medical study summaries into flashcards. As David recalls, "When she showed me how long it takes her to manually generate Anki cards, I wanted to try to help".

What If We Let AI Do the Heavy Lifting?

David saw an opportunity - what if AI could handle the tedious process of reading through study materials and creating well-structured flashcards? This wasn't just about automation, it was about creating scientifically-sound study materials that would actually improve learning outcomes.

The idea became AnkiBuddy: an AI-powered platform that transforms PDF study materials into customizable, high-quality Anki flashcards optimized for medical education.

The Solution: AI-Powered Flashcard Generation

AnkiBuddy is a web-based platform that lets medical students upload their study materials and receive well-structured Anki flashcards within minutes. The platform:

Analyzes PDF content using AI
Generates professionally-structured flashcards
Allows easy customization and personalization of cards
Integrates with existing Anki workflows

No more spending hours manually creating cards. No more inconsistent formats. Just high-quality study materials, ready when you need them.

Building AnkiBuddy: Rapid Development with Anvil

David had already worked hard building an AI-powered PDF parser using Python - the next challenge was building a UI and getting it all deployed online. That's where Anvil came in.

He'd already learned Python for the AI part of the app, so he reached for Anvil to simplify the web development process and handle his DevOps and hosting. Within two months of working with Anvil, David had a working prototype of AnkiBuddy which he could give to users.

It basically simplified it to a place where, if I learn Python and I learn the rules of Anvil, I can do pretty much what I want.
Dr. David Topf
Founder and CEO, AnkiBuddy

More than just accelerating development, Anvil allowed David to offload database management, DevOps, and hosting. It saved him the headaches of navigating complex cloud platforms like AWS - letting him focus entirely on building his product and business.

He also took advantage of the support package offered by Anvil to help maximise his development speed and get answers to questions fast.

I completely underestimated how valuable the support plan would be. I’ve been able to work directly with the Anvil development team. They’re not just responsive; they’re some of the most skilled engineers I’ve ever encountered.
Dr. David Topf
Founder and CEO, AnkiBuddy

The Results: From Idea to Impact

Since its launch, AnkiBuddy has helped 18,000 medical students transform their study workflows. It has proven that there's real demand for AI-powered study tools that are tuned to specific needs.

Anvil has enabled fast iteration ever since the prototype was launched. When users reported bugs or suggested improvements, David could implement changes in no time.

AnkiBuddy is a perfect example of how modern AI can solve real educational challenges and how the right development platform can help solo entrepreneurs move from idea to impact in record time.

More Information

AnkiBuddy creates high-quality Anki flashcards from your PDF study materials in minutes.

Visit ankibuddy.com

If you’re new to Anvil and want to see how you can build powerful web apps using just Python—up to 7× faster than traditional development:

Learn more about Anvil

Have questions or want to get in touch? Visit anvil.works/contact.

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.

What makes Anvil so easy to learn?

Ryan — Fri, 18 Jul 2025 10:47:59 +0000

Anvil's Shallow Learning Curve

When evaluating a new dev tool, a common question is "How long will it take to learn?". Lengthy learning curves cost time, effort, and money - but one of the beauties of Anvil is its shallow learning curve.

I don’t want all the things slowing me down. I don’t want learning curves, I don’t want any of that. I want it quick, and that’s what Anvil gave me. — Shonna Smith, Product Manager, Consultant

Anvil lets you become productive in days, not months. This isn't just a marketing claim, it's an experience shared by many Anvil users. Let's take a look at why Anvil is quick to learn.

Why Is Anvil Easy To Learn?

1. It's All Python

It's all Python, and much like Python, the learning curve of Anvil is gentle and shallow.

You don't need to learn new languages or frameworks for each layer of your web app - saving you time. You can use Python for UI components, front-end code, back-end code and interacting with your database.

# Simple Anvil event handler - just Python
def button_click(self, **event_args):
    # Updating the display text of a label component
    self.output_label.text = f"Hello, {self.name_box.text}!"

2. No Boilerplate Code

Anvil eliminates the need for boiler plate code and setup. The platform wraps common tasks like database access, user authentication, and API endpoints in easy-to-use APIs, letting you focus on what your application does.

Consider how much effort you typically spend on:

Setting up projects
Configuring build tools
Managing deployment pipelines
Creating databases and access controls
Building secure user authentication
Configuring email services and servers
Checking software security
Developing API endpoints
Setting up version control
Implementing secrets management
Integrating external services
Connecting to IoT devices

Anvil simplifies and handles all this and more for you, dramatically saving you time. It has the added benefit of making your app more secure - less code equals fewer opportunities for vulnerabilities.

If data is ever at risk in the journey, we can't move forward with a solution, full stop... They've thought about all of this so that you don't have to. - Jacque Van Niekerk, Data Scientist, CFC Underwriting

3. Extensive Documentation

Anvil's documentation and tutorials are extensive. They cover everything from the basics to advanced topics, making it easy to get up to speed.

Try a tutorial

Read the docs

Additionally, we have an extremely active community forum where you can ask questions if you're stuck, share knowledge, and get help from our team.

4. Traditional Web Architecture

Anvil follows the traditional web architecture approach, with a separation between client and server code. This makes it familiar, easy to understand, and maintain.

For people who aren't familiar with web architecture, i.e. non-web developers, it's still useful. The clear separation of concerns makes it easier for you to debug and think about. The underlying principles are also widely understood by other people, meaning they can help even without experience of Anvil.

Learn more about client vs server

A Different Kind of Investment With Real-World Impact

Anvil being quick to learn means:

Faster time-to-market for your applications
Reduced training costs for your team
Lower risk when evaluating the platform
Increased productivity rather than delayed returns

And the impact has been felt by many Anvil users:

We wanted a web app urgently during the Covid-19 lockdown. With only intermediate skills in Python, and no knowledge of HTML/CSS/JavaScript/Flask/Django etc, Anvil enabled us to share a Minimum Viable Product in just 7 days.-Peter Fison, Managing Director, South West London TV

Next Steps

Ready to see how shallow Anvil's learning curve is? Or do you have some questions?

Try Anvil's intro tutorial
Ask questions on our friendly community forum
Talk to an Anvil engineer to discuss your specific use case

More about Anvil

Case Study: How Chris Houston Built a BI Tool with Anvil

Love Otudor — Fri, 11 Jul 2025 14:45:28 +0000

Query Streams transforms Excel and Google Sheets into powerful BI tools by enabling real-time database queries directly within the spreadsheet—no coding required. Built as a nights-and-weekends side project by Chris using Anvil, Query Streams soft launched just four weeks ago and is already being used by data analysts across multiple companies.

Built by a solo developer

Production-ready in under 5 months

Google Sheets add-on is live

Microsoft Excel add-in is live

The Challenge: When BI Tools Meet Reality

Every data team knows the cycle: Companies invest heavily in BI tools because everyone loves beautiful dashboards. Yet somehow, the most common follow-up question is still:

"The dashboards look great… uh, how do I export this to a spreadsheet?"

And then it all ends up in a spreadsheet anyway. Despite years of trying to move away from Excel and Google Sheets, spreadsheets are more popular than ever. According to a 2025 survey by Alteryx, 76% of data analysts still use spreadsheets as their primary tool.

What If We Stopped Fighting Spreadsheets?

Chris had been thinking about this for years. What if, instead of replacing spreadsheets, we empowered them?
“What if we didn’t try to replace spreadsheets with BI tools? What if we made spreadsheets the BI tool?”
This idea stuck with him until just after Thanksgiving 2024, when he started building a solution.

The Solution: Turn Spreadsheets Into the BI Tool

Query Streams is a real-time data integration platform that lets users run SQL queries from Google Sheets and Excel directly against remote databases, without exposing credentials, setting up VPNs, or configuring firewalls. It supports SQL Server, MySQL, PostgreSQL, SQLite, Access, and other databases. You can:

Share and receive queries
Build live dashboards
Securely expose specific database queries
Choose what data to share and with whom

No hassle. No copy-pasting. No manual exports. Just real-time data, right where analysts already work.

Building Query Streams: Smarter Tools, Built Faster with Anvil

The most challenging part of building Query Streams was building the network agent in C# and other technologies that Chris wasn’t familiar with. Once he overcame that technical hurdle, building the web app in Anvil was straightforward.

With minimal experience in HTML, CSS, and JavaScript, Chris leaned heavily on Anvil’s custom HTML support and Anvil components to bring his unique UI ideas to life.

I thought we were locked into the Anvil components on the designer. But as I explored custom components in Anvil, I realised that, wow, you can build anything in Anvil.

Chris Houston — Founder and CEO, Query Streams

In just four months, Query Streams was ready to use. Built entirely in Chris's spare time while working a full-time job. Since Anvil is web-based, he could work on Query Streams wherever and whenever he had time—whether at home, in early mornings, or even while travelling with just his laptop.

The Results: From Idea to Impact

Query Streams has begun gaining traction even before its official launch. In the four weeks since its soft launch with the Google Sheets add-on, teams and analysts across several organisations have started using the platform.

Now, with the Excel add-in also live on the Microsoft AppSource marketplace, Query Streams has expanded its reach to both major spreadsheet platforms. With both add-ons available, Chris is preparing for the official launch and broader publicity efforts. You can follow along and get updates on X and LinkedIn.

Anvil is like a Swiss army knife of awesome! It allowed me to build Query Streams with a lot of ease while working alone.

Chris Houston — Founder and CEO, Query Streams

More Information

Query Streams lets you run real-time database queries directly from Excel or Google Sheets — no code required.

If you’re new to Anvil and want to see how you can build powerful web apps using just Python, up to 7× faster than traditional development:

Have questions or want to get in touch? Visit anvil.works/contact.

How We Brought the GOV.UK Design System into Anvil

Ryan — Mon, 02 Jun 2025 14:57:16 +0000

Case Study: Implementing Any Design System in Anvil

New to Anvil? Welcome! Anvil lets you build full-stack web apps using only Python. No need to juggle JavaScript, HTML, CSS, Python, SQL and all their frameworks. Just code in Python and bring your app to life!

Design systems are invaluable for creating professional web apps. Implementing your design system in Anvil, by creating custom drag-and-drop components, layouts, and themes, streamlines development for both yourself and others. Today, I’ll show you one I built from scratch to demonstrate what’s possible in Anvil.

For this case study, I'm using GOV.UK's design system. It's a great example of a comprehensive design system, which standardises styles, helps construct components and takes accessibility seriously. It provides all the benefits of using a well thought out design system when creating a web app - so it's perfect to show you what you can achieve in Anvil.

The finished product

The proof is in the pudding so, before I dig into how I implemented the system in Anvil, here's an example of using the finished design system in the Anvil editor. Here's me using the design system as a dependency and creating a GOV.UK form by simply dragging and dropping components into the page:

You can even clone this app and play around yourself:

Clone the Example

How it's built

GOV.UK's design system website provides all the HTML and CSS needed to implement their design system. They break everything down into individual components and page templates. Since Anvil allows for extensive customisation, I was able to use a few of its out-of-the-box features to recreate them.

Custom HTML Layouts

The first step was to implement GOV.UKs page template.

Anvil’s custom HTML Layouts let me use the HTML from the design system's page templates. All I had to do was insert slots in the HTML to define where components can be added to the Layout when it is used by other Forms.

<!-- Here's a slimmed down example of the GOV.UK's footer -->
<footer class="govuk-footer" role="contentinfo">
    <!-- To let developers add components to the footer, I simply defined
    the anvil-slot. -->
    <div anvil-slot="footer-items">
        <!-- And added usage details for the Anvil designer. -->
        <p anvil-if-slot-empty="footer-items" class="anvil-designer-only"><i>Drag footer links or components here</i></p>
    </div>
</footer>

To see how simple it is to create layouts from scratch, check out our docs:

Read the docs on custom layouts

Components from HTML

For GOV.UK’s individual components, I used Anvil's ability to create components from scratch in HTML.

I simply copied and pasted the HTML from the design system and added the anvil-name attribute to the elements I wanted to access in code.

<!-- The Component's HTML is the same as the design system plus the `anvil-name` attribute -->
<input anvil-name="govuk-input" class="govuk-input">

With anvil-name assigned, I could easily reference those elements in Python using Anvil’s dom_nodes API. This let me to select individual elements, insert new content, apply new styles, and modify attributes—all while keeping the structure of the original design system intact.

# Here's are some simple getter and setter functions for the text input component I built
@property
def label_text(self):
    return self.dom_nodes["govuk-label"].textContent

@label_text.setter
def label_text(self, value):
    self.dom_nodes["govuk-label"].textContent = value

Anvil stands out by giving you full access to any HTML element's APIs directly from Python code. There are no limits imposed by Anvil's abtraction.

Check out our tutorial on building custom components from HTML:

Learn how to create components

Ready to get started?

We’ve got full documentation and tutorials to help you get started:

Multi-page apps with Layouts tutorial - Learn how to structure your app using layouts.
Custom HTML Layouts docs - Recreate page templates as Anvil layouts.
Creating custom components from scratch tutorial - Follow a step-by-step guide to creating your first custom component.
Components from HTML docs - Build individual components and access their attributes.

These resources will help you with everything you need to bring your design system into Anvil.

Any questions? Our Community Forum is full of helpful information and Anvil experts.

More about Anvil

Sign up for Anvil

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

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

Secure Team Collaboration in Anvil

Love Otudor — Fri, 30 May 2025 14:48:49 +0000

You asked and we answered! We put together a practical how-to guide on collaborating as a team in Anvil. Building amazing Anvil apps is even better with your team by your side, and we've developed foolproof methods to make this process hassle-free.

This guide walks you through how to:

Set up secure, real-world workflows for collaborating on Anvil apps while keeping your production environment isolated and safe.
Separate development and production environments to ensure only well-tested and reviewed changes reach your users.

Whether your team prefers working together on a shared Anvil app or on individual ones, this step-by-step guide will help you implement Git-based workflows that improve code quality and team efficiency.

More about Anvil

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.

Building a Game App with Just Python

Love Otudor — Wed, 16 Apr 2025 16:51:04 +0000

"Guess the Sketch" is a multiplayer game where you draw sketches and challenge friends to guess what they are. Players earn points for correct guesses, with fewer attempts leading to higher scores. Each round, one player is chosen to sketch, while the others try to guess as quickly as possible.

I built this game using Python and Anvil, and it was surprisingly easy! I didn’t need to write HTML, CSS, or JavaScript. In this post, I will walk you through the key parts of building Guess the Sketch:

Building the UI,
Saving and sending sketches,
Sending invites,
Managing players and scores, and
Publishing and sharing.

Let's get started!

Building the UI

With Anvil’s drag-and-drop editor, building the UI was very intuitive. Instead of writing HTML and CSS, I simply dragged components from the Toolbox onto the Form and arranged them as needed. Here is how easy it was to build the SketchScreen, where players create and name their sketches.

Anvil’s Canvas component provided a seamless way to add a drawing area to the game. It is a Python wrapper around the HTML <canvas> element, with built-in methods and event handlers that handle drawing effortlessly. I used the mouse_down, mouse_move, and mouse_up events to track real-time mouse movement and draw lines on the canvas. Adding an eraser was as simple as setting the brush colour to match the background of the drawing area.

Want to learn more about the Canvas component? Check out this Canvas Tutorial:

Saving and Sending Sketches

Once a player finishes drawing and clicks the Send Sketch button, the image is retrieved from the Canvas using the .get_image() method:

sketch = self.canvas_1.get_image()

This converts the sketch into a Media object, which is then stored in a Data Table for later retrieval.

When a player submits a sketch, one of two things happens:

A new game is created, along with its first round (if the player is starting a new game).
A new round is added to an existing game, which happens when a player joins an ongoing game and takes their turn.

Here’s how I handled both scenarios:

sketch = self.canvas_1.get_image()

# Add a round to an existing game
if self.game_id:
  anvil.server.call('add_game_round', self.game_id, sketch, sketch_name)
  navigate(path = "/invite/:id", params = {"id":self.game_id})

# Create a new game
else:
  game_id = anvil.server.call('start_game', sketch, sketch_name)
  navigate(path = "/invite/:id", params = {"id":game_id})

In both cases, a new game round is created and linked to the current game, whether the game is newly created or ongoing.

With Data Tables, creating a round is as simple as inserting a new row into the Rounds Table and adding the round ID to the corresponding game's rounds column (which stores a list of round IDs for that game).

Here’s how I create and link a round to an existing game:

@anvil.server.callable(require_user=True)
def add_game_round(game_id, image, sketch_name):
  # Other game logic...
  game = app_tables.game_table.get_by_id(game_id)
  round = app_tables.rounds_table.add_row(game_id=game_id, image=image, owner=player, sketch_name=sketch_name, start_time=datetime.now())
  game['rounds'] += [round]
  # Other game logic...

Sending Invites

Anvil has a built-in Email Service, which makes sending invites as simple as a single function call. I used anvil.email.send() to email friends a game invite with a preview of the sketch as an inline attachment:

  anvil.email.send(
    bcc = emails, 
    from_address = player['email'], 
    subject = f"{player['name']} is inviting you to Guess the Sketch!",
    html = f"""
      Hey,
      I just created this sketch:<br>
      <img src="cid:sketch"><br>
      Think you can figure out what it is? Click this link to play: {link} 
    """,
    inline_attachments = {'sketch': image})

Players receive this email with a preview of the sketch right in their inbox. Here’s how it looks:

This makes it really easy for players to see the sketch before they click the link to play.

Managing Players and Scores

To manage player authentication, I used Anvil’s Users Service, which automatically created a Users Table that stored player details.

With just one line, I could add a login Form:

anvil.users.login_with_form()

This allows players to sign up and log in with their Google accounts, making it easy to track their progress across games. Each new user is automatically added as a row in the Users Table.

At any point in the app, I can access the currently logged-in player by calling:

player = anvil.users.get_user()

Tracking Player Scores

To track scores, I added a points column to the automatically generated Users Table, where I store the total points each player accumulates.

For every point a player earns in a game, I update the player’s total score:

player = anvil.users.get_user()

# Other game logic...

    if player['points']:
      player['points'] += points_gained
    else:
      player['points'] = points_gained

This ensures that scores remain updated and persistent across game sessions.

Publishing and Sharing

Once everything was ready, publishing the game was just one click on the Publish button in the Anvil editor. I instantly got a public URL, that I could share with friends to start playing right away!

Want to Build Your Own?

These are just some of the highlights, but you can clone the full project and explore how it works yourself.

More about Anvil

Making a Clicker Game with a Leaderboard

Tony — Thu, 27 Mar 2025 11:07:38 +0000

Are you the Ultimate Clicker?

Arguably, the web is built from small, often ridiculous ideas. Sometimes, you don't really feel like making the next Amazon or an internal tool to "promote synergy between stakeholders". Sometimes, you just get a fun little idea, and you want to shove that into your nearest internet pipe and share it with your friends.

When I started using Anvil, I quickly realized I could use it for pretty much whatever I wanted to make, be it sleek and professional productivity-oriented tools, or, you know, a clicker game that my friends and I can compete in! And, best of all, it could do it fast and without requiring poring over documentation for days on end.

You can clone the finished app by clicking here.

The idea is super simple: have my friends set up an account, let them click on a button as many times as they can to earn points, display all my friends’ total points on a public leaderboard, and let their competitive spirit do the rest.

Anvil made the process super quick and painless, you can easily knock this down in an afternoon. Let me walk you through how I did it.

Why I Chose Anvil

For my app, I needed a tool that provided a traditional web app structure, complete with a user interface, client-server architecture, and ideally, the following features:

Support for multiple pages and navigation between them
Log-in system for multiple users
An integrated database for storing users’ points

Spoiler alert: Anvil has all of those, among many more, and they’re super easy to set up. All I had to do was create a new app using the editor, use the drag-and-drop interface to build my navigation layout, include the log-in feature by literally just clicking on a couple of boxes, and it even automatically created an integrated Data Table to store all the user information.

Building A User Interface

Our UI should be pretty simple: one page to get a bunch of clicks in, and another to see ourselves climbing the leaderboard.

I thus created two Forms based on the navigational layout I had created prior:

A Clicker Form, which only needed a simple button and would communicate with a "Leaderboard" Data Table, storing all users' scores.
A Leaderboard Form, with a data grid to display the app’s top 10 users with the most points.

With a clear idea in mind, I hopped in the editor and designed my heart away. The drag-and-drop interface made it very easy to arrange the various components however I wanted.

Once that was done, it was time to program the behavior of the interface with some simple Python code.

Registering & Logging Users In

I am a simple person. I do not know fancy HTML, JavaScript or CSS. That’s three whole languages, when most people only really know one. Thankfully, Anvil lets you create full-stack apps with nothing but Python, so I can remain a simple person and still get my friends to ruthlessly compete against each other over who can click their mouse the most.

The first thing I did was add a way for users to enter a username for the leaderboard. I wanted it to be so that when somebody logs in for the first time, an Alert pops up and prompts them for a username, which is then saved along with the rest of their user information in the “Users” Data Table.

For this purpose, I created a new Form, that I named UserEdit, that would be shown upon login. I placed a Label asking the user for their username, and a TextBox for the user to type it in. I then made the content of the TextBox a data binding, so I could easily use the input username in code.

Within the startup Form's code, right after logging the user in, I have the server check if that user already has a username. If not, I display an Alert showing the UserEdit Form I had just created.

Upon confirmation from the user, the UserEdit Form then returns the username that was entered, which is sent to the server and saved within the "Users" Data Table for the current user. Finally, a row for this new user is initialized within the "Leaderboard" Data Table with zero points.

# In Client code

login_with_form()
# Ask the server to check if the currently logged-in user has a name.
if not anvil.server.call('does_current_user_have_a_name'):
    # Open an Alert pop-up that prompts the user for their name.
    name = alert(UserEdit(), large=True, dismissible=False, buttons=None)
    # The obtained name is then sent to the server for user initialization.
    anvil.server.call('initialize_user', name)

# In Server code

@anvil.server.callable
def does_current_user_have_a_name():
  current_user = anvil.users.get_user()
  # Check that a user is currently logged in and, if so, that they have a non-empty username.
  return current_user is not None and current_user['username'] not in (None, '')

@anvil.server.callable
def initialize_user(name):
  current_user = anvil.users.get_user()
  # Add the gathered name to our user row.
  current_user.update(username=name)
  # Add a new row to the leaderboard Data Table, with our user in the user column and 0 in the points column.
  app_tables.leaderboard.add_row(user=current_user, points=0)

Displaying Data From Data Tables

With the user side of the app setup, it was time to take care of the leaderboard.

For this, I used Anvil's DataGrid to display rows of the "Leaderboard" database. I placed an instance of that component in my page and named it top_10_panel.

The top_10_panel Data Grid component needed to communicate with the "Leaderboard" Data Table. I made the Leaderboard Form fetch the contents of the "Leaderboard" Data Table whenever shown, sort the rows by descending order of points, and set the 10 first entries to populate the DataGrid. Easy-peasy!

# In Client code

def refresh_top_10_grid(self):
    top_10_clickers = anvil.server.call('get_top_10_clickers')
    # Set our DataGrid's contents to be the top 10 leaderboard rows.
    self.top_10_panel.items = top_10_clickers

# In Server code

@anvil.server.callable
def get_top_10_clickers():
  # Create a list containing, for each user, a dictionary with their username and points.
  all_users = [
    {
      'username': row['user']['username'],
      'points': row['points']
    } for row in app_tables.leaderboard.search()
  ]
  # Sort our list based on a descending order of points.
  all_users.sort(key=lambda x: x['points'], reverse=True)
  # Reconstruct our sorted list by enumerating it and added a ranking to each user dictionary.
  ranked_users = [
    {
      'rank': i+1,
      'username': user_dict['username'],
      'points': user_dict['points'],
    } for i, user_dict in enumerate(all_users)
  ]
  # Only return the first 10 items of our ranked list.
  return ranked_users[:10]

Making Components Interactive With Events

Finally, all I had to do was make the clicker button actually increase your score on each click. Anvil components can raise events, which code can react to, in response to user interaction.

When Button components are clicked they raise a 'click' event, so all I had to do was create a handler function to run when a user clicks the button. This is easily done from the Object Palette, or the Properties Panel:

With the event handler in place to detect button clicks, all that remained was writing the logic into the event handler.

We want every click event raised by our button to increase a local_points property of the Clicker Form, which is at first initialized by fetching the amount of points of the current user:

# In Client code

def on_clicker_clicked(self, **event_args):
    # This event is triggered whenever the clicker button is clicked.
    self.item['local_points'] += 1
    # Refresh our data bindings to make sure our components reflect the form's newly updated `item` property.
    self.refresh_data_bindings()

Clicking the button should also start a timer: when that timer reaches one second, a call is made to the server with the new amount of points to save, but each button click restarts the timer. This ensures that we don’t slow down the app with as many server calls as there were clicks, but instead only make the call once the user is done clicking.

# In Client code

def on_clicker_clicked(self, **event_args):
    # This event is triggered whenever the clicker button is clicked.
    self.item['local_points'] += 1
    # Refresh our data bindings to make sure our components reflect the form's newly updated `item` property.
    self.refresh_data_bindings()
    # Reset the timer if it is already started...
    if self.click_buffer_timer.interval != 0:
        self.click_buffer_timer.interval = 0
    # ... then start it up again from zero.
    self.click_buffer_timer.interval = 1

def click_buffer_timer_tick(self, **event_args):
    # This event is triggered whenever the timer component
    # reaches its set interval.
    # Reset and stop our timer.
    self.click_buffer_timer.interval = 0
    with anvil.server.no_loading_indicator:
      anvil.server.call('update_current_user_points', self.item['local_points'])

# In Server code

@anvil.server.callable
def update_current_user_points(new_amount):
    current_user = anvil.users.get_user()
    app_tables.leaderboard.search(user=current_user)[0]['points'] = new_amount

And that’s really all there is to it! All that was left to do was publish the app.

Publishing The App

Deployment is so easy I could do it in my sleep. In fact, I did! And, since you have no way of proving me wrong, you’re just going to have to accept that as a fact. Isn’t this fun?

All it takes is literally two clicks, and you’ll receive a shareable URL to send your friends to use your app. That way, you can focus on, you know, making the app, rather than on how to deploy it.

And voilà! My game was then deployed and all I had to do was set my friends loose to compete for the title of Ultimate Clicker.

Want to learn more?

If you want to dive right in and take a look at the clicker app from behind the scenes, you can clone the app by clicking right here, which will let you see how it was made in more detail!

Alternatively, if you want to start on your own project, our online editor is free to use and requires no installation whatsoever. We have some great step-by-step tutorials, and a bunch of fully-featured example apps like this ticketing system app.

Also, if you have questions or for any other reason feel like giving us a shout, you can find us in the Anvil Community Forum, it's always full of activity.

Introducing the Interactive Debugger in Anvil

Love Otudor — Wed, 26 Feb 2025 09:47:49 +0000

Say Hello to the Interactive Debugger in Anvil

We are very excited to announce the first release of the Interactive Debugger in Anvil. Say goodbye to countless print statements!

With the Interactive Debugger, you can now pause your code as it executes, inspect variables, and gain deeper insights into what’s happening in your code—whether on the client or server side.

What is the Interactive Debugger?

The Interactive Debugger lets you:

Add breakpoints to your code to pause execution at specific lines.
Inspect variables and values at runtime.
Debug both client-side and server-side code, including background tasks and HTTP endpoints.

Getting started is simple: Click in the gutter next to any executable line of code to add a breakpoint and then run your code. When this breakpoint is hit, the debugger pauses execution and opens the Debugger Window, where you can easily view and inspect all the variables in your code.

Get Deeper Insights into your Code in real time

With the debugger, you can add and remove breakpoints even while execution is paused, allowing you to adjust your debugging strategy as needed. The debugger toolbar gives you complete control to resume, restart, or stop execution, step over breakpoints, and step into or out of functions effortlessly. This makes it easy to navigate through your code seamlessly and gain a deeper understanding of its behaviour.

Easy Debugging Across Client and Server Code

Anvil’s debugger allows you to step into server code directly from client code. For example, you can start in your client-side form code and step directly into your server code while showing the entire call stack on the browser frame.

Here is a demo illustrating how you can step into server code from client code seamlessly:

Debug Background Tasks and HTTP Endpoints

Debugging background tasks and HTTP endpoints in server modules has never been easier. By adding breakpoints to your background tasks or endpoint calls, you can pause execution, inspect variables, and diagnose issues with accuracy and confidence.

Availability

The debugger is available to everyone!

Free users can use Anvil’s debugger only on the client-side (Form) code.
Client-side and server-side debugging is available on a Business Plan or higher.

What’s Next?

This is just the first version of the Anvil Debugger and we have plans for more interesting features, so stay tuned! In the meantime, we would love to hear your feedback! Try out the debugger today and let us know how it works for you.

For a deep dive into debugging with the interactive debugger in Anvil, as well as additional tools to enhance your debugging process, check out our Debugging Documentation.

Happy debugging!