Using the CircleCI in-app configuration editor

In the CircleCI web UI, select a pipeline in the Dashboard’s All Pipelines view.

To access the CircleCI configuration editor, select your desired branch from the All Branches drop-down menu near the top of the screen. Once you select a branch, the Edit Config button will become enabled, and you can access the configuration editor.

There are a few other ways to access configuration files throughout the web UI. If you are setting up a project through the Set Up Project button, you will see a Fast option, which will bring you to a default configuration file to edit (to be used if your repository does not already have a configuration file).

In the Pipelines view in a pipeline’s row, and in the Workflows view at the top of the page, you will see the three dot menu (meatball menu). Clicking this menu will allow you to open the configuration file.

The CircleCI configuration editor provides auto-complete suggestions as you type, with the ability to click on a suggestion to find out more. You will also find links to relevant documentation within the auto-completion tooltip.

At the bottom of the editor, you will see tabs for Linter, Docs, and the name of your workflow (in this case Sample).

The built in linter will validate your YAML after every change and show you errors if there is a problem. A green or red bar is always visible across the bottom of the page, and will indicate if your YAML is valid (green) or has an error (red). There is also a toggle switch to view the YAML as JSON within the validation bar.

The docs tab will link out to some helpful documentation relating to configuration files.

The workflow tab will show you all the jobs in the workflow, and link out to the individual job’s Job view in the web UI.

When hovering over a key-value pair in your configuration file, a tooltip will appear, giving you additional information specific to CircleCI configuration syntax.

Once your changes are made and your configuration is valid, you may commit to your VCS and re-run the pipeline by clicking the Save and Run button. A modal will pop up, and you will see the option to commit on the branch you are working from, or you can choose to create a new branch for the commit.

If you are not making changes on your main branch, you will need to open a pull request on your VCS to save the changes to your main branch when you are ready.

Similar features to the in-app configuration editor can be found in the official CircleCI VS Code extension if you would prefer to stay in your local environment. The VS Code extension makes it easier to write, edit, and troubleshoot configuration files through real-time syntax highlighting and validation, assisted navigation through go-to-definition and go-to-reference commands, usage hints, and autocomplete suggestions.

Authenticating the extension with your CircleCI account will also allow you to visualize and manage your CircleCI pipelines directly from VS Code, and be notified of workflow status changes.

For more information, see the VS Code extension overview.