Work With Code Editors

Most application development in Visual Builder is visual and declarative. Sometimes though you might want to update your application's source code or add custom code to make your application richer—and code editors in the Designer let you do just that.

The HTML, JavaScript, JSON, and Code view editors give you direct access to the code created by visual tools when you develop your application. For example, when designing a page, you can choose to directly edit the source code of the HTML, JavaScript, and JSON files used to describe a page's layout and behavior. Here's a look at the different code editors and what each is used for:

Tab	Description
Code mode in Page Designer	Contains a code editor that displays a page's HTML.
HTML	Contains a code editor that displays an application’s index.html file.
JavaScript	Contains a code editor to manage JavaScript functions at the application, flow, or page level as well as at the layout and fragment level.
JSON	Contains a code editor to display the JSON file that describes the artifact’s metadata (including variables and action chains) at the application, flow, or page level as well as at the layout and fragment level.

Visual Builder's code editors are based on Monaco, a JavaScript library bundled from the Visual Studio Code source, which provides a variety of code-editing features, including tooltips and hints, parameter information, and code completion. See how you can trigger code insights in each editor.