Schema Editor

In this part, you will need to know which business software you want to build, that is, CRM or E-commerce, also in this part you build a database schema i.e. tables and relationships between them. Here is a video example of how to work with the Schema Editor.

Creating Schema

Generation with AI

In this step, you can generate your schema with AI by clicking the relevant button Generate with AI. Next, type the application’s description in the text area and hit “Send”. The application’s schema will be ready in around 15 seconds. You may either hit deploy immediately or review the structure to make manual adjustments.

Import Schema

You can also create your database schema from scratch, import an existing one, or choose one of the suggested ones.

To import your existing database use the Import SQL button and select your .sql file. Then your database will open in the Schema Editor, where you can further edit your data (add/edit/delete entities).

Ready-made schemas

If you are not familiar with database design and it is difficult for you to understand what tables are, we have prepared several ready-made example schemas of real-world apps that you can build your app upon modification:

  • E-commerce app;

  • Time tracking app;

  • Books store;

  • Chat (messaging) app;

  • Blog.

The basic essence of the Schema Editor is that it consists of tables and columns and your work will consist of working with them.

If you choose to build an application from scratch, then you see a button to add a table as well as a ready-made default table for Users (since users exist in most applications).

By clicking on the ready-made Users tab, you will see in front of you all the columns created in the table with their properties.

Currently, we have introduced a new feature, "Roles and Permissions", exclusive to the Next.js/Tailwind stack. The Roles and Permissions are turned on by default. You will immediately see 3 entities in your schema: users, roles, and permissions. They are built-in system entities. Furthermore, roles and permissions are automatically set up for user entities. If you don’t need the Roles and Permissions entities, simply click on the 3 dots next to the Add Entity button and deselect Roles and Permissions.

For more details about roles and permissions read here.

Working with tables

When working with tables, you have 2 options - add a new table or delete it (all, except the default Users table). Now let's take a look at each of these steps separately.

When working with columns, you have 3 options - add or remove a column, or change the properties of the column

Let's take a closer look at each option separately:

  • adding the table: to add a table, you need to press the '+ Add Table' button (see screenshot below). After clicking the button, a new table will be added and you will be prompted to select a name for this table. Please follow SQL table naming standards. Please choose the name in lowercase for better code generation. You can add an unlimited number of tables to the paid plan and the free plan. For example, users, categories, tags, tags1, tags2, etc.

  • deleting the table: deleting a table is very simple - you just need to select the table you want to delete and click the 'Destroy Table' button. The table and all columns referring to it will be deleted immediately. Please note that the ‘Users’ table can not be deleted.

Working with columns

  • adding column: to create a column, you need to click on the table in which you want to create a column and then click on the ‘+ Add Column’ button. Then the Edit column window with the following parameters will open on the right side:

    • Name - here you specify the name of the column that you will see in your database. Please, use a camel case, numbers, and “_” for column names. Note, that the column name cannot start with a number. For example, Name, Title, Type, Name1, etc.

    The title is the title of the column that you will see in your live application. Here you can use capital letters and any names, as this does not affect the generation and operation of the application. - Type - in this menu you can select the data type of the column.

Note: Our generator adds the column ID itself and makes the connection if necessary: you don't need to add the column ID yourself.

The following types are offered to choose from:

  1. String - when you select this type, you have a unique Multiline option that adds multiple lines;

  2. Boolean - when choosing this type, you need to set the value to True or False;

  3. Date Time;

  4. Decimal;

  5. Integer;

  6. Enumeration - Enumerated column type: to select this data type, we need to select the column to which we want to assign it, and in the right ‘Edit Column’ window select ‘Type’ - ‘Enumeration’, then we will have the 'Options' field in which we will need to list the options for selection, as well as ‘Widget’ type for selecting options - select or radio button.

  7. Date;

  8. Images;

  9. Relation (one) - Relation to one column: to make a relation to one column you have to select it in the list of columns in the table, go to the ‘Type’ property and choose the ‘Relation (one)’ option. After that, you will have a new property Entity - the link to the table this column will be connected to.

  10. Relation (many) - Relation to multiple columns: to make a relation to many columns you have to select it in the list of columns in the table, go to the ‘Type’ property, and choose ‘Relation (many)’ options. After that, you will have a new property Ref - the link to the table this column will be connected to.

  • editing column: to change a created column, click on it, and the right side of the modal window, you will see the ‘Edit Column’ menu, where you will see the properties that you can change. In editing a column, it is possible to change only the name, title, show in form, and show in table. Please, use a camel case, numbers, and “_” for column names.

Note: The column name cannot start with a number. Also, there cannot be the same-named columns in one table.

  • deleting column: Deleting a column is done by selecting the column you want to delete and pressing the 'Destroy' button. The column should be deleted immediately. You cannot delete the last column in the table.

Note: Before making your application, we advise you to first think over its basic architecture, and maybe even draw a database relations diagram. This will make it easier for you to generate the application without having to modify it later.

← Starter Template                                             Connecting to GitHub →