Navigate the Code Editor – Yext Help

In the Code Editor, all the files from your GitHub repository are pulled in so that you can commit changes just like a developer. The Code Editor is similar to a code repository in GitHub, except it's even easier to quickly move around and load multiple files at once.

To open the Code Editor in Pages, navigate to Pages > [Your Site] > Deploys and click the Code Editor button in the top right.

To open the Code Editor in Classic Pages, navigate to Pages > [Your Site] and click the View Code Editor button next to the Custom Development section.

Branches

One of the first things you will see when opening the Code Editor is a list of branches. A branch is a named version of your repository. By default, you start with only the master branch.

To start editing, hover over the branch name and click the pencil icon that appears to the right. This opens the Code Editor view where you can start modifying code. By default, make changes on the master branch unless you're working with a developer.

You can create new branches for complex changes that need extra QA and that you don't want to make on the main branch, then merge those branches together when you're ready. To create a new branch, hover over the "master" branch, select … and click Create new branch. In the modal, input a branch name and click Create Branch. In most cases you should be branching off of the master branch.

This is a standard git workflow. For more information, see this Atlassian tutorial.

Session Management

When you open the Code Editor, you are either starting a new session or resuming a session (you'll see a small toast message if you are resuming). If you leave the Code Editor or hard refresh the page, you don't lose any of your work. Your session will remain active for four hours and in "paused mode" for up to two days. After that, you will automatically start a new session.

You can also share your session with a teammate by copying the URL with the session ID in it.

If you want to discard all of your code edits and begin a new session, terminate your session via Tools > Terminate Session, then navigate back into the Code Editor. This is recommended if you have made commits outside of the Code Editor that you need to retrieve.

Live Preview

The Live Preview compiles the latest information in your Code Editor to show you what it would look like if you committed your code and published your page in its current state. This allows you to catch issues or experiment as you build.

View Live Preview

By the time you've navigated to the Code Editor, your preview is already ready to go. Click View Live Preview at the top of the Code Editor to open your local site in a new tab.

Note: When building a Search site from scratch, you will need to connect a backend experience to the frontend and add a universal search results page before seeing the live preview display properly.

As you're making changes, click outside of the Code Editor to update your preview. If you refresh your preview tab while an update is in progress, you'll see an error page — just wait for the update to complete and refresh. You'll know an update is complete when you see this "Completed" message in the console:

You can share your preview link with others or use it to open your changes in different browsers. Note that the preview link expires after a few hours.

Note: If you click "View Live Preview" before an index.html file exists on your site, you'll see a directory where you can choose which page to preview. If you haven't created any pages yet, there won't be anything to preview.

Restarting Live Preview

Click "Restart Live Preview" any time you've updated dependencies — for example, after a theme upgrade or after updating the experience key in the locale_config.json file.

The Console

As you update your preview, view the console to check for errors. Open it via Tools > Console. The console won't be selectable unless you've started the Live Preview process.

Keep an eye out for the "Completed" message to confirm your preview is ready before refreshing. For guidance on troubleshooting common errors, see the Common Console and Preview Errors doc.

Jambo Commands

To do things like add pages or override the theme, use Jambo Commands. Access them via Tools > Jambo Commands, which opens a modal with all available options.

Updating Code

To update a file, navigate to it in the Files section on the left of the Code Editor, click to open it as a tab in your workspace, type your changes, and commit. You can also add new files or delete files by hovering on a directory or file and clicking the add or trash icons.

Update Global and Locale Configs

To get search up and running, update these properties in the locale_config.json and global_config.json files:

1. Connect the Frontend and the Backend

The experienceKey in locale_config.json must match the experience key in your backend. Find it at Search > [Your Experience] > General Settings. See the Global Settings and Local Configuration reference doc for more.

"default": "en",
"localeConfig": {
  "en": {
    "experienceKey": "brand-search"
  }
}

2. Update Locale for Non-English Experiences

If your search experience is not in English, update the locale property in locale_config.json. This defaults to en.

3. Update Cloud Region if in the EU

If you are in the EU and want your data hosted in the EU, update "cloudRegion" to "eu" within global_config.json. This defaults to "us". You can also update the cloud provider with "cloudChoice" — defaults to "multi" (AWS or GCP), or set to "gcp" to limit to GCP-based regions only.

Note: You must be on Theme v1.31 or above to set the cloud region. See the Upgrade the Theme and SDK module and Theme Upgrade guide.

Commented Out Code

The Code Editor formats and colors code to make it easier to read. Any code in green is "commented out" — it will be ignored and the component will not render.

Each file type has different comment syntax:

Handlebars files (.hbs): {{!-- --}}
JSON files: // for single lines or /** **/ for blocks

Comments are there to provide information or sample code. To use commented-out code, remove the comment characters on both sides. For example:

With comments: {{!– {{> templates/vertical-standard/script/sortoptions }} –}}

Correctly removed: {{> templates/vertical-standard/script/sortoptions }}

Tip: Use cmd + / on a Mac or ctrl + / on a PC to quickly comment or uncomment code.

Reset Changes

The "Staged Changes" section in the top left shows all files you've updated: yellow for updated, green for added, red for deleted. To undo changes to a specific file, hover on the file name and click the "X" icon. To undo all changes, click "Reset."

Troubleshooting Errors

The Code Editor will help you find errors before you commit:

Red underlining on the problematic code
A red indicator on the right side of the editor

Hover over the underlined text to see an error message:

If you're not sure which file is causing an error, open the console and look for error messages that point you to the right file.

Apply Diffs

Collaborate with coworkers or share commits between repos using Apply Diffs. Navigate to Tools > Apply Diffs, enter a URL to a .diff or .patch file stored in a publicly accessible URL, click View to see what the diffs contain, and click Apply to add to your staged changes.

Committing Your Code

Once you are done making changes, click Commit under the "Staged Changes" section to open the "Commit Changes" modal.

To make a code commit:

Click Pages in the navigation bar and click on your desired site.
Click on the View Code Editor button.
Hover over the master branch and click the pencil icon that appears.
Navigate to the file you want to edit and make your changes.
Review changes by clicking View Live Preview.
Click Commit in the top left below "Staged Changes."
Enter a Commit Message — keep it succinct but descriptive (e.g., "updated primary text color").
Optionally, fill in a Tag.

Commit Message

The Commit Message lets other users know what the commit was for. Keep it succinct but descriptive.

Tag (Optional)

Adding a Tag to a commit makes it easier to publish those specific changes later. Use a date system or semantic versioning, following Git conventions. For example, "2020-05-02" is valid, but "starting point" is not. You can always add the tag later by clicking into a recent commit on a branch.

Note: You'll want to add a tag if you plan to publish changes to production.

Managing Commits

To view recent commits, navigate to the first screen of the Code Editor where the list of branches appears.

Click into a commit to see the files and lines of code that were changed, and to assign a tag if you didn't during the original commit.