Betty Genius is your assistant built directly into the builder, designed to optimize both the design and logic of your application. It gives you immediate, intuitive control over your page’s front end with two ways to make changes: precise component editing and broader full-page editing.
First steps in Pages
Right after you've generated your application's pages, they will appear in your Pages overview.
By clicking one of the existing pages, you'll see your page canvas and the page builder menu on the right - this is where your editing practice starts!
Component editing
For quick adjustments to specific page components, Betty Genius is available directly on the canvas.
- How it works: Simply click on any component within your page builder
- Interface: A small Betty Genius text box will appear directly underneath the selected component
- Usage: Type your command to modify that specific element (e.g., "Change the background color to primary blue" or "Make this text bold").
Full page editing
For broader changes, layout overhauls, or complex multi-component instructions, use the dedicated Genius chat.
- How to access: Click the Betty Genius tab located in the top-left corner of the builder
- Interface: This opens a dedicated chat panel where you can chat with Betty Genius about what you would like to be changed on your page
- Usage: Enter a prompt that affects the entire page (e.g., "Rearrange this dashboard to have the metrics at the top and the data table at the bottom").an
Reviewing your changes
Once the generation is complete, you are given full control to review the output using three specific tools found at the bottom of the chat:
|
Button |
Description |
|
Keep changes |
Accepts the edit and applies the changes to your page. |
|
Discard |
Rejects the edit. The page immediately reverts to exactly how it looked before you entered the prompt. |
|
Compare |
(Represented by a looped arrow). Pressing this button toggles the view between the Before and After states. Use this to spot differences before deciding to keep or discard the changes. |
Adding components manually
Another way to customize your pages is by using the classic Betty Blocks drag-and-drop method. To add new components from the default set, go to the Components tab.
Then you can drag the desired component onto your page canvas. For example, we'll add an Image component to the page here:
Once added, the component becomes active and you can adjust its settings (1)—for example, choose the image source, add a link to an internal or external page, and more. You can also return to AI-based editing at any time by entering a prompt in the Betty Genius text box beneath the component (2).
We hope this gives you a solid start on your application-building journey with Betty Blocks. If you’d like a more in-depth walkthrough, you can easily request it via this link: Request demo