App Building
Builder Guide

Building an App

On dashboard press Create App, or if you already have an app created press Open Builder.

01

App Creation

When you press Create App for the first time, you'll be presented with a selection of prebuilt templates displayed as cards. Pick the one that best matches the type of app you're building.

Once you select a template, your app is created and you're navigated straight to the builder.

A splash screen is created by default (empty for now), and a short tutorial will appear to walk you through the basics. Don't get stressed - just start doing things and you'll learn how it works rather fast.

To get back to the dashboard, press the Back button on the top right.

02

Moving Components on Screen

Now that you have components on your screen, you can simply drag them around to reposition.

On the top right corner you have a Save button - pressing it will save your progress and navigate you back to the dashboard.

03

Editing Components

When you're not in preview mode, tap any component on the screen to open its Edit Component modal.

Inside the modal you'll find editable elements such as colors, texts, images, and actions (e.g. navigating to other screens). You can also delete the component from this same modal.

Each component has its own set of options - see the detailed component docs for specifics.

When you're done, press Save component to apply your changes.

04

Adding Components

On the bottom right corner, tap the Add icon to open the building blocks modal.

Components are organized into folders - click a folder to browse its contents.

To add a component, simply click on it and it will be placed in the center of your screen.

05

Switching the Screen

On the top left, tap the gear icon to open app settings, then navigate to Manage Screens.

Screens are organized into folders - open a folder and click the screen you want to switch to.

If you have unsaved changes, a prompt will ask whether you'd like to save or continue without saving.

From here you can also create a new screen, rename an existing one, or delete it.

06

Preview

On the bottom left you'll see the Preview button. This makes your app look and work like a normal mobile app, right inside Struklio.

Use it to get the feel of how your app will look before deploying to the app stores.

To exit preview mode, shake your device - a prompt will appear asking whether you'd like to stay or leave preview mode.