# Editor To accelerate the build experience, Jigx Builder has a YAML editor that includes IntelliSense for code completion, predefined code snippets, and preloads with scaffolding ready to add your Jigx files in the correct structure needed to build app solutions. ## Solution scaffolding By default Jigx creates scaffolding when loading a new project in Jigx Builder. We recommend avoiding naming new files with the same name in the scaffolding. Words used by the Jigx system include actions, components, jig, databases, datasources, functions, and index.

Folder	Default File	Description
.vscode	settings.json	Relates to your Jigx solution and contains internal parameter settings required by Jigx Builder runtime. This file's scope is local (workspace) and applies to the current solution. For more information, see .
actions		Actions refer to specific controls or operations responding to an event or input. Create under the actions folder to define actions once and reuse them multiple times in different jigs.
assets		The solution's images and icons defined under the folder will preload and cache when the solution downloads or updates in the app. Allows images and icons to display when the app is offline and improves the app's performance.
databases	default.jigx	You can use the `default.jigx` file to define the tables in the Provider.
datasources		Create global data files with .jigx extension- these are available for use in your whole solution to any of the jigs.
functions	myfirstfunction.jigx	You can build logic into your solution by adding functions to get or update data from a remote service, such as or SQL Functions.
jigs	myfirstjig.jigx	The jigs folder is where you create all the files used to configure the screens for the app on your mobile device. You can create sub-folders inside the jigs folder for categorization. All files in the jigs folder must have the `.jigx` extension, e.g., leave-form.jigx
translations		Create files for various languages using localization, then reference the file in your jig using the `Text Locale` property with `id: file name`. For more information, see .
	index.jigx	The index.jigx file is the app's home screen. It uses bottom tabs to determine the layout. See and Index settings for more information.
scripts/ expressions		Create .js files to define your that can be used in expressions.

## IntelliSense To invoke IntelliSense, simultaneously press the control and spacebar (ctrl+space) keys. The code popup displays only valid options in the current cursor context. Selecting an option from the IntelliSense menu will load the code snippet with the necessary properties for that option. {% embed url="" %} ## YAML indentation In Jigx Builder the YAML code snippets use indentation. The nested structure of the YAML is visible with spaces, not tabs, and is used for indentation. Each nested level is indented further than its parent, illustrating the hierarchical structure of the YAML file. Line numbers are visible on the left side, and your cursor blinks at one of the lines. You can use a VS Code plugin to highlight the indention levels in different colors. One such plugin is [Indent-Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow).

## Code snippets Code snippets are there to help you develop quicker by providing you with recommended properties to use for a jig type, component, action, or widget. You do not need to use all the code snippets provided; you can remove the unwanted properties.

## Validation Jigx validates the structure and values in the `.jigx` YAML files and shows the issues that you need to fix.

Validation issues are shown in: * The **file name** in the side bar will be red, with the number of issues in the file shown by a red number on the right of the file name. * **Red squiggles** appear under the YAML. Hover over the YAML for more information, if we can detect what the value should be we offer a quick-fix link. Clicking on the link will fix the issue and resolve the validation. * In the **Problems tab** of the Jigx Dev tools window, the file and a description of the issue is shown. Click on the item to go to the exact ssue in the file. {% hint style="warning" %} Validation does not always prevent you from publishing your solution. The solution on the mobile app might not function as expected if the validation issues are not resolved. {% endhint %} ## Validation - Solution Diagnostics **Jigx Solution Diagnostics** is a built-in analysis tool that helps you identify and troubleshoot issues across your entire Jigx solution or a subset of files in the solution. It detects project build errors, missing references, and scans your source code for programmatic errors, warnings, and overall solution health. ### Running Solutions Diagnostics You can access the Jigx Solution Diagnostics tool through the **Jigx Explorer** by clicking the diagnostics icon, or by using the VS code command-palette accessed by fn+F1 / command+shift+P / ⇧⌘P / alt+shift+P and selecting **Run Jigx Solution Diagnostics**.

To run the tool on a subset of files, use the VS code comman-palette accessed by fn+F1 / command+shift+P /⇧⌘P / alt+shift+P and select **Run Jigx Solution Diagnostics – with filter**. Then, provide a regular expression (regex) to filter and analyze only the matching files, for example an expression for all files is `/jigs/.*`.

### Solutions Diagnostics progress The progress is shown as a **notification** in the bottom-right of the VS code window.

When the diagnostics run is complete, the results are displayed in the **Jigx Output** panel. The output includes the file path, a description of the issue, and the number of issues found in each file. You can navigate to the relevant file to review and resolve the errors. {% hint style="warning" %} The URL to open the file in the Jigx ouput panel will not work if the folder contains spaces. {% endhint %}

## Quick-fix validation {% columns %} {% column %} The **quick-fix validation popup** in VS Code helps you identify and resolve issues in your code or configuration files quickly and efficiently. When a validation error or warning is detected (such as a missing property, invalid value, or syntax issue), a lightbulb icon appears next to the line. {% endcolumn %} {% column %}

{% endcolumn %} {% endcolumns %} **How to Use It:** 1. **Hover or place your cursor** on the line showing the issue or on the highlighted error squiggle. 2. Press `Cmd + .` (Mac) or `Ctrl + .` (Windows/Linux) to open the **quick-fix popup**. 3. A list of suggested fixes or options will appear. These may include: * Adding missing fields or properties * Correcting values * Applying code suggestions * Ignoring the issue 4. **Select a fix** from the list using your arrow keys and press Enter to apply it. ## Navigating code definitions & references This feature is particularly useful in large projects or when working with unfamiliar codebases, as it helps you understand how and where certain pieces of code are implemented without manually searching through files. If the code has multiple definitions or references, VS Code presents a list of all these instances, allowing you to choose the one you're interested in. The following code definitions and references can be navigated: * fileId references * jigs * linkTo, jigId * datasources * ctx.datasources.datasourceName * functions * components * actions * entity references * databases/default.jigx * entity, entities * components references * instanceId, @ctx.components.componentInstanceId... * script references * JavaScript functions ### Definition (F12)

Place your cursor on the code and press **F12** or right-click and select **Go to Definition** from the menu options, VS Code displays a preview window that lists all the lines of code in your project where that code is used, either in the same jig or another file in the project. VS Code will open the file where that code is defined and move the cursor to the definition's location. ### References (shift+F12)

Place your cursor on the code and press **Shift + F12** or right-click and select **Go to References** from the menu options, VS Code displays a preview window that lists all the lines of code in your project where that code is used or referenced. If there are multiple references, you can click on any of the listed references in the preview window to go directly to that location in the code. --- # 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.jigx.com/building-apps-with-jigx/jigx-builder-code-editor/editor.md?ask= ``` 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.