📱Build your first app on Kodular

This tutorial series guide you to create and test your very first app using Kodular platform.

The App Idea

You are going to build a simple image hide and show app. The user interface of the app has an image and a button. If the button is labelled as Hide and a user clicks on the button, the app hides the image and the changes the button label as Show and vice versa.

👏 Prefer a video tutorial? Check it out now! 🎉

Kodular tutorial

How to Create a Project in Kodular

1. Open the Chrome browser and visit Kodular.

2. Click on the Create Project button.

3. Choose "Sign in with Google"

Create a project

• Give a project name and click Next

• Click Finish

• This will open the Designer tab to start the app building process

App building landing page

The designer tab is the place where you design the user interface and the look and feel of your app.

Designer Tab Breakdown

• Left Section: Contains all the palettes. You can drag and drop a palette (or component) onto the phone view in the middle of the screen.

• Middle Section: Contains the live view of the design. Any palette you drag and drop will appear here. Some non-visible palettes (e.g., sound) won't display anything on the screen.

• Second Last Column: Features a tree view of all the palettes you have brought onto the screen.

• Rightmost Column: Displays the properties of the selected palette. Changes to any property (e.g., button color) will reflect on the phone view.