Build Your First App in 10 Minutes

This tutorial cuts straight through the core of Layerz. By building a simple to-do list app, you'll experience firsthand that an app is made of three things — Design, Data, and Behavior — and that it runs instantly, with no build step. The whole process takes only 10 minutes.

1. Design the Screen

When you create a new project, a single empty Screen appears on the canvas.

1. Open the UI Library and Drag and Drop a List onto the canvas. A List is a component that repeatedly shows cells of the same shape.
2. Place a Label inside the cell. This Label becomes the title of each to-do item.
3. Place a Text Field and a Button near the top of the screen. You'll use these to enter and add a new to-do item.

The cells are still empty. In the next step, connecting data will fill the screen.

2. Prepare the Data

The difference between a mockup and an app that actually works is data.

1. In Data in the left panel, create a Data Schema and name it Todo.
2. Add a title (string) field to Todo.
3. Create an Array of Todo data and put in a few sample to-do items.

For details, see Data Schema.

3. Bind the Data to the Screen

Now it's time to connect the data you created to your design. This is called Binding.

1. Select the List and bind the Todo array you just created. → Cells are filled automatically, one for each to-do item in the array.
2. Select the Label inside the cell and bind it to the title field.

When you change the data, the screen changes by itself. This is exactly the boundary between a static picture and a living app. For details, see Binding Data to UI.

4. Add Behavior (Action Flow)

Now make it so that pressing the Add button puts a new to-do item into the list. Behavior is defined with an Action Flow.

1. Select the Button and connect an Action Flow to its Touch event.
2. Add an Update Data action that adds the Text Field's input value to the Todo array in Append mode.

Now, when you press the button, the to-do item you entered is added to the list. "An event calls a flow, the flow changes the data, and the data updates the screen" — this is the behavior model of Layerz. For details, see What is Action Flow.

5. Run It

You're done. No build, no waiting. Press Preview and the app you just made runs right away.

Try entering and adding a to-do item. It's an app that actually works. You can continue working on the same project anywhere — iPhone, iPad, or Mac — and switch between Light and Dark themes instantly.