Struggling to Create Personal Website

Anvil Q&A
1

What I’m trying to do: Problem: Write a header / title for the main page | Project: Building a personal website containing learning content, resume, blog etc

What I’ve tried and what’s not working: ChatGPT / Gemini are unable to crawl Anvil documentation well. And I’m just struggling with this platform having mainly used streamlit before this (and streamlit doesn’t scale, so here I am)

Code Sample:

#Please convert below code to Anvil code
import streamlit as st
st.title("This is a title")
st.header("_Streamlit_ is :blue[cool] :sunglasses:")

Clone link:

2

There are several ways to do that depending on what you actually want:

  1. In the standard-page.html, you can add <h1> and <h2> tags with the content you want.
  2. On the pages you want to have the titles/headings, you can drag a label component onto the page where you want it to be and then add other styling or anvil-roles to make them look like you want them to.
  3. If you are using the M3 components, they also have headings/title and other more specific components.
1 Like
3

Have you tried any of the tutorials?

1 Like
4

Hi @bitsplease and welcome to the forum!

There are three ways to add components to your page in Anvil: through Python code, through HTML, or the recommended way (in most circumstances), dragging and dropping components from the Toolbox onto the page. This is very different from the way Streamlit works, which is just a Python script that runs top to bottom in order to render the page. Building your UI through drag and drop gives you more control over the layout and visual style of your app.

I highly recommend you start with your basic tutorial. It doesn’t take long to complete and it covers everything you need to get started: Anvil | Build a Simple Feedback Form

I also recommend you have a look through the documentation yourself! While ChatGPT can be a great assistant in some cases, if you don’t actually understand the app you are building, you’ll find it difficult to fix your app when things go wrong or to expand on it. Speaking from experience, ChatGPT can be confidently wrong over and over again when writing vanilla JavaScript and SQL.

I’ve also written a guide on transitioning from Streamlit to Anvil. It will be live on our website very soon, and I’ll post the link here when it’s published. Hopefully that will provide some help as well!

4 Likes