📢 New: Introducing Layouts

Reusable Layouts are here!

Layouts simplify UI design by letting you create reusable page structures that can be shared across multiple Forms. For example, you can design a Layout with a navigation bar, and any Form using this Layout will inherit the navigation bar. This makes UI building easier, faster and more consistent.

What are the benefits?

1. Better reusability with shared Layouts
2. Layouts make building page navigation into your apps simpler than ever.
3. You can create complex UI structures by nesting Layouts within each other.

Want to learn more?

17 Likes

Amazing, I can’t wait to try it out tonight!

1 Like

Your link “Layouts” at the top goes to a local URL :

http://localhost:3000/docs/ui/layouts

1 Like

Thanks for letting me know. I’ve fixed it. There’s always one link :person_facepalming:

2 Likes

This is certainly simpler than creating forms and components from HTML!

I can see using this to create “smart” wrappers for data-entry components, e.g., to add a visible Prompt (and optional info/warning/error label/link).

I can’t wait to see what other innovative uses the folks here invent!

2 Likes

Well… there’s two links: this one in the docs misses an “s” at the end :slight_smile:
image

1 Like

This looks cool! Sounds like custom components as containers with slots but with more convenience.

Regarding the navigation example - I much prefer the template/route setup of hash-based routing from anvil-extras. Once I got used to that, it opened up so many possibilities. I feel like that should be the standard tbh.

3 Likes

I agree.

I think it should be standard and, since it’s done at lower level than Anvil Extras, it should not have hash, so we would finally get rid of the SEO limitation.

Google Maps for example is a single page app similar to Anvil apps, but every time you click or search, the URL changes, but the app is not reloaded. I do the same in my apps: when the user types something in my search bars, I update the hash, so the user can copy the link to that specific search.

2 Likes