Latest CMS Developer Posts

HubSpot CMS Blog

Keyboard Shortcuts for CMS Development Efficiencies

Written By Alex Girard on Mar 28, 2018 2:23:59 PM

There are a number of new keyboard shortcuts available for CMS developers and designers within the beta of the new Design Manager. These keyboard shortcuts might be familiar to you from your work in other IDEs, making the Design Manager a more welcoming environment for you to build assets in a timely, efficient manner.

How does it work?
Note: The following instructions are written for Mac users. If you are a PC user, use ‘Ctrl’ instead of ‘Command.’

Multiple Cursors
Let’s say you are setting up your style sheet and you know that you have to create ten section separators to organize the file. You could type out each line one by one, you could write one line and then copy and paste your code, or you could take advantage of this keyboard shortcut. Hold down ‘Command’ while clicking your mouse into different positions in the code editor, and your cursor will be active on multiple lines. Start typing, and your code will be entered next to each location. You can also use this feature to highlight multiple sections at a time, making it easy to delete or overwrite large selections of code at a time.

Quickly Comment Out Code In Bulk
Highlight a block of HTML, CSS, or JS, and press ‘Command + /’. Your entire selection will be commented out, saving you time and minimizing user error when manually commenting out lines of code. You can also create explicit block comments by clicking ‘Command+Alt+/’ (‘Ctrl+Shift+/’ on a PC).


Module or Group Identified in the URL
We previously made it possible to select a line or lines of code, and have your templates URL update to account for your selection. We’ve now extended that functionality to our drag and drop editor. When a module or group is selected in the new Design Manager, the URL will now specify the selected module. Upon loading that URL, users will be brought immediately to that module or group in the template. This allows you to share the URL with a colleague or client, and direct them to a specific module quickly and easily.

Find and Replace
You can now quickly find specific pieces of code through the following keyboard shortcuts.
Opening 'find' will bring up the following search toolbar within the code editor.
find and replace
The toolbar includes modifiers, such as a toggle mode that lets you switch between find and replace, a case sensitivity mode which will only reveal content that matches the case of your input,  and regular expression which will let you use your find input as a regular expression.
These updates are available to all users of the new Design Manager.


Go to the Design Manager


Topics: Product Updates

Alex Girard

Alex is an Associate Product Marketing Manager at HubSpot, and an avid music fan.

Stay Up To Date 👇

Learn how to code on HubSpot CMS
    Join the HubSpot CMS Developer Slack

    Ask questions in the CMS Developer Forum

    Join the free CMS for Developers Course

    View the HubSpot API Documentation

    Recommended Posts