App Blueprint gives you an instant visual overview of your application's structure. As you build with Genius AI, every page you create appears on the blueprint right away, placed inside its layout and connected to the pages it links to. You get a bird's-eye view of your app without opening each page one by one.
As applications grow, it gets harder to keep the whole picture in your head. You have pages, layouts, buttons, the connections between them, and a growing list of things you want to change next.
App Blueprint solves this by turning your application into a schematic you can actually look at.
Create a page with Genius, and it appears on the canvas in the right place, with its connections drawn in. That means you can check the result at a glance and confirm that the new page sits where you expect it to, rather than clicking through the app to find out.
How to use App Blueprint?
Find App Blueprint at the top of the builder bar – press it to open the schematic overview of your application.
Here you can see the canvas you can pan and zoom (the zoom control sits in the bottom-left corner). Every part of your application appears as a card, grouped by layout and connected by lines, so you can follow the structure at a glance.
New pages appear here automatically
This is the heart of the blueprint today. When you use Genius to create a page, it shows up on the blueprint as soon as it's generated, grouped under the layout it belongs to.
For example, adding a Wishlist page to a book catalog app drops it straight into the Catalog Layout, alongside the pages already there (Book Overview, Add Book, Book Details). You don't have to place it or connect it yourself to see where it landed; the blueprint reflects the new structure right away.
Layouts and pages
Layouts are the frames your pages live inside. They appear as grouped containers, each showing how many pages it holds and which pages are used as navigation items.
Inside a layout, you see the individual page cards, for example, Book Overview, Add Book, Book Details, and the newly added Wishlist (A).
Some pages have their own layouts, and they are positioned outside of the layout, like Admin and Error pages in the case of our application (B).
A layout represents the structure that pages share. For example, the Book Details page uses the Catalog Layout, which is also used by Add Book, Wishlist, and other pages — and in the App Blueprint view, those pages are visibly grouped together in one container.
Read more about layouts and how they work on the platform in Page layouts and widgets.
What's inside a page
Each page card shows the key elements it contains, labelled by type, so you can see what a page is made of without opening it. On the Wishlist page, for instance, you can see:
- BUTTON — actions on the page, such as Explore Catalog and Browse Catalog.
- LIST ITEM — a repeating item that renders each record, such as Book Card.
Across the other pages you'll also see types like ELEMENT (a building block placed on the page, such as User management or Roles), SUBVIEW ITEM (a nested view embedded in a page, as on Admin - Roles), and LIST ITEM (a repeating item that renders each record, such as BookCard on the Wishlist page).
Connections between pages
The dashed lines show how pages link to one another, so you can trace a user's path through the app. When a new page is generated, its connections are drawn in too.
For example, the Back to overview button on the Book Details page connects to the Book Overview page, so you can see at a glance that clicking it takes the user back to the overview. Within the Catalog Layout, the same kind of links tie together Book Details, Book Overview, Wishlist, and Add Book, giving you the full navigation flow in one view.
This makes it easy to confirm the AI wired the navigation the way you intended, and to spot any links that are missing or point somewhere wrong.
Downloading your application code
The Download button in the top-right corner lets you export your application as source code. You can choose which part to download:
- Front-end as React source code (all your pages and layouts)
- Back-end as WebAssembly source code (all your actions).
Note: Access to the download capability is controlled by role-based permissions, managed via My Betty Blocks > Roles and permissions, so you can decide which roles are allowed to download the application code
Where we stand
App Blueprint is at an early stage. Today it shows your layouts and pages, the elements inside each page, and the connections between pages, and it reflects new pages created by Genius AI as they're built.
Right now, the app's current state and the Genius build plan are shown as two separate views. Bringing them together is one of the first improvements on the way.
Next milestones
- One combined view — the app's current state and the Genius AI build plan shown together in a single blueprint, instead of two separate views, so you can see exactly what's changing against what already exists.
- Open page details from the blueprint — click a page card to jump straight into its details, turning the blueprint into a navigation tool as well as an overview.
- Live preview during a build — watch pages appear on the blueprint in real time as Genius AI executes a build plan, so you can follow the work as it happens.
Further ahead
The blueprint will expand beyond pages and layouts to show the rest of what makes up your application:
- Actions — the logic that runs behind the scenes.
- Models — the structure of your data.
- Data sources — where your app's data comes from.
- MCP servers — connected services and integrations.
As these arrive, the App Blueprint moves from a map of your screens toward a complete, living picture of your entire application, current state and future plans in one place.