# Concept

Kozmik lets you turn your spreadsheets into apps with drag-and-drop interface elements. Apps can be published to the Apple App Store and Google Play Store or as a Web App (PWA).

* Tables
* Screens & Elements
* Navigation
* Actions

### **Tables**

The first step of building an app is to create the tables that contain the information to be used in the app.

Tables consist of columns and rows. Columns are created in different types according to the type of information held in the row. For example, the product name and description are of text type, while the product image column is of image type.

<figure><img src="/files/qJtQWtJNip5LuZHVjCm8" alt=""><figcaption></figcaption></figure>

### **Screens & Elements**

The way to visualize tables is to create screens and add elements to those screens. There are defined relationships between tables and elements.

<figure><img src="/files/xKBKE90vdBw6IKfWqvlR" alt=""><figcaption></figcaption></figure>

> #### Table to List
>
> When a list element is added to the screen, this list references a table, and the rows in the table appear as list items.

> #### Columns to Content
>
> Elements added to screens often correspond to one or more columns in a table. For example, in the List element settings, there are defined fields such as Title, Image in the Content section, and these fields match the relevant columns in the table.

> #### Row to List Detail
>
> Detail screens of list items are created automatically. On these screens, only the contents of the relevant row are displayed. Detailed information that is not shown on the list screen can be given on this screen.

<br>

### Navigation

You can create the main flow of your app by dragging the screens you want to present to your user to the Tab and Menu headings.

<figure><img src="/files/GFPmj3Y8XwcJu5GcPKbA" alt=""><figcaption></figcaption></figure>

### Actions

Actions determine what happens when users interact with an element. Elements such as lists, buttons, and images added to the screens have the feature of determining action. It can be used to direct the users to another screen, to interact, or design your flows.

<figure><img src="/files/mTbR8pPM3VB62nIIETEg" alt=""><figcaption></figcaption></figure>

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kozmik.io/start-here/concept.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.