Speed, meet beauty.
But sometimes, you need to put your best foot forward. You want to re-use your existing page design and brand assets. Or if you’re building those assets from scratch, you want pixel-perfect control over your page header. In short, you want the flexibility of traditional web design.
So, we asked: What if you could have both?
Introducing HTML templates
Anvil’s built-in templates make it easier than ever to produce a beautiful web app in record time. But if you know HTML, or have existing web assets, you can go beyond our built-in templates.
If you’re an Anvil Pro user, you can control your page down to the pixel, with any HTML or CSS you like. All you need is a couple of special attributes to tell Anvil where you can drag and drop components.
I can code my web app in Python, and employ a web designer to help me with the HTML/CSS. Anvil is without a doubt the easiest and fastest way to bring my app to life!
– Peter, Startup founder (Yes, he actually said this)
Here’s all you need to build a drag-and-drop layout. You just need to specify where each group of components goes, and where to drag-and-drop them:
<link rel="stylesheet" href="https://anvil.works/template-assets/flower-card.css"> <div class="header" anvil-drop-slot="title"> <div anvil-slot-repeat="title"></div> </div> <div class="card" anvil-slot-repeat="default" anvil-drop-here> </div>
(Want to know how that works? Check out our documentation.
And here’s how it looks in action:
To build an app with Anvil templates, sign up and try some of our examples, or start from scratch. We’ve got lots of video tutorials to help you out. If you’re into DIY, our reference documentation describes how to use your own HTML and CSS with Anvil.