Getting started
The first time you create a project, you see this screen.
Interface map

Components picker

This is your main utility toolbelt. Drag the components on the interface to use them.


This is the area where you build and see your project. Within this area, you can pan and zoom to move around.


Pan movement
  • Space + drag
  • Middle-click + drag
  • Scroll (vertical)
  • Shift + scroll (horizontal)
  • Two fingers swipe


  • Ctrl + Scroll

View frame

This is where you create your layouts. It can be a page or a component. The mechanics depend on your layout engine setup (at the beginning of the project).


Main mechanics:
Click to select a compoent
Shift + click to add to selection
Shift + click to unselect
Draw a rectangle to select
Drag to move
Shift + drag to restrict movement vertically/horizontally
Alt + drag to duplicate
Corners to resize
Shift + resize to maintain proportions
Alt + resize to maintain simetry
Resize + drag in multiple elements


Add elements by dragging
Add elements on sides
Resize elements on the side
Select ancestor elements in the lower breadcrumb
Each node has a direction different from its parent

Size types

each flex slot have 3 options of size types
Size types editor
This makes the slot expand proportionally to its parent. Measured in %, this is great for content containers, blank areas, and other non-functional slots.
Expand size type
This size type makes the size fixed in pixels, no matter its parent's size. Measured in pixels, this is great for navbars, sidebars, footers, and other navigation elements.
Fixed size type
Fit to content
This size type makes the size equal to the minimum required by its content. This cannot be resized once is defined by its content only. Great for buttons, inputs, and other components in the interface.
Fit to content


When you want any kind of logic on your application, you need actions. This feature allows you to call APIs, change pages, etc.
Click to add actions
Select an action
Select what you want to do
Actions can be dispatched from multiple types of triggers
Drag to reutilize actions
Views can have actions too
Actions can have actions as well
Triggers can be selected too
Delete actions

Project inspector

This is where you can see the entities of your projects.


show pages
add page
rename page
delete page (need confirmation)


These are the reutilized elements on your interface. You can use them for navbars, sidebars, footers, cards, and other repeated pieces of the layout.
Components tab
Add component
Rename component
Delete component

Global variables

Variables are used to coordinate your application state. Just like in programming.
In Abstra, global variables are shared across the navigation.
Global variables tab
add global variable
Edit variable

Selection inspector

This is the area where you can edit what is selected on the canvas.
Selection inspector changes depending on what is selected

View inspector

This is the area where you can navigate through the entities of your view (page or component).

View settings

View settings

Local variables

Variables are used to coordinate your application state. Just like in programming.
In Abstra, local variables live in one view (page or component).

Project tabs

Use this tabs to access your backend and settings page


This is the face of your application. This part contains the layout where your users can interact directly through the interface.


This is the part where your users don't touch directly, this is where you store your data, send emails, access other APIs.


General settings of your projects. In this part, you can change the project name, configure auth, and other global parameters.

Breadcrumb navigation

You can use to navigate to your workspaces or rename the project.
Click to rename

Project toolbar

Project toolbar


Use this chat to talk with our staff whenever you have any problems or questions about Abstra.


This link brings to these docs (where you are reading right now)


Allows you to simulate your application running, so you can easily debug what is happening


Generate a version of your app online, so you can test it with a shareable link with your teammates.
Last modified 5mo ago