Getting started
The first time you create a project, you see this screen.
Interface map
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
Zoom
- Ctrl + Scroll
This is where you create your layouts. It can be a page or a component.
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
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
This is where you can see the entities of your projects.
Show pages
Add page
Rename page
Delete page (needs 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
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
This is the area where you can edit what is selected on the canvas.
Selection inspector changes depending on what is selected
This is the area where you can navigate through the entities of your view (page or component).
View settings
Variables are used to coordinate your application state. Just like in programming.
In Abstra, local variables live in one view (page or component).
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.
You can use to navigate to your workspaces or rename the project.
Click to rename
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 1yr ago