In Codepen, I have the VIM shortcuts enabled.

But I keep having to use the mouse to switch between the HTML, CSS, and JS panels.

Is there a keyboard shortcut for this? If so, what is it?


There's no native keyboard shortcuts for switching between panes in CodePen, but since you asked for it -- and it's a good idea -- here's a Chrome extension that adds that functionality in:

codeTabber for Chrome

Once you install the extension, you can use CTRL < to shift focus to the pane to the left of the current pane, and CTRL> to shift focus to the pane to the right. If no pane currently has focus, the HTML pane will get focus. As of right now, it works anywhere on the screen except when the iframe where the output is shown is the active element, but that's being worked on.

If you don't use Chrome, I'll try to get this up soon for other browsers. It's free and simple to use.

UPDATE: Here's codeTabber for Opera, and codeTabber for Firefox.

| improve this answer | |
  • I'm getting the following error : i.imgur.com/pj8ff6p.png any idea why ? – Ahmed Eid Sep 2 '17 at 16:54
  • @aeid Weird, the file should be there. Are you using it in Chrome, Firefox, or Opera? – freginold Sep 2 '17 at 18:05
  • I am using chrome . – Ahmed Eid Sep 2 '17 at 19:30
  • I just uninstalled it and reinstalled it in Chrome, works fine. Do you get that error on install? Maybe the download got corrupted. – freginold Sep 2 '17 at 22:36
  • 1
    This really made being productive easier for me. 1+ upvote from me. – Moh Vahedi Mar 29 at 10:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.