1. Home
  2. Docs
  3. NoCode-X Documentation
  4. Templates
  5. Template-editor


The template-editor is where you will be creating your no code web application pages. Each of its aspects is covered below.


After opening a template, the template grid appears. It looks like a checkered sheet, as shown below:

Shows an empty grid for templates.

Initially, it will be empty. The grid serves to facilitate all your template’s no code UI components.


You can adjust the grid size and color. This is explained in the Template style article.


The origin of the grid is located in the top left corner. The x-axis runs horizontally from left to right and the y-axis runs vertically from top to bottom. This information could be useful when positioning a component with the Position styling option. Again we refer to the Template style article for more information.

Drag and drop

You can drag and drop components from the component picker onto the grid, in the desired location.


Move components that are already on the grid by clicking the move icon and dragging the component to the desired location. This icon can be seen below:

A line chart graph with the move icon indicated.


Resize components by clicking the three lines shaped like an arrow in the bottom right of the component. Drag your cursor around to resize. This is shown for a button component in the image below.

Shows how to resize a button component.


Delete components by clicking the cross in the top right corner of the component:

Shows how to delete a component, specifically a check box component.

A window appears. Confirm the deletion by clicking the Remove button, or cancel it:

Shows the confirmation screen for component deletion. The remove button is highlighted with a cursor.

Then click OK in the success window:

Success window for the deletion of a component. We must now click OK.


Click anywhere on the grid and drag your cursor around to change your view of the template.

Zoom in/out

You can zoom in and on the grid by using the zoom bar in the bottom right corner of the grid. It looks like this:

Shows the zoom bar for the grid.

Click the left and right magnifying glasses or drag the slider in the middle to zoom in and out.


You can preview the webpage generated by the template by clicking the preview button in the top right corner of the grid. This is how the webpage will look for people accessing it through their browser.

Shows the Preview button.


Templates can inherit from other templates. This means that certain components will carry over to others, depending on their place in the template hierarchy. More details can be found in the Template hierarchy article.

Shows the hierarchy button.


Often you will need your webpages to be available in multiple languages. NoCode-X supports this out-of-the-box. More details can be found in the Multilanguage article.

Shows the translate button.


The toolbar is where you can find and configure components. You can also edit the information and style of the template. Open the toolbar by pressing the Toggle toolplane icon button in the top right corner of the grid:

Shows how to make the toolbar appear.

The toolbar appears on the right of your screen:

The toolbar.

Click each tab to open it.


Here you can search for components and view a short description for each. More details can be found in the Component picker article.

The components tab in the toolbar.


Templates have properties, can be styled and can have actions attached to them. More details for each of the three tabs in the Template menu can be found in the Template properties, Template style and Template actions articles.

Shows the template menu and its three tabs: Properties, Style and Actions.


You can configure who can access your page in the Authorization tab. Detailed information can be found in the template Authorization article.

The authorization tab of the toolbar.

Template parameters

You can add variable elements on a template using Template parameters. A detailed explanation can be found in the Template parameters article.

The template parameters tab in the toolbar.


The navigator shows the codes and the icon of all components currently on the grid. This allows you to easily select components that may otherwise be hard to locate on the grid.

Shows the navigator tab of the toolbar.

How can we help?