CodePen.io - how to change view by changing URL

We would like to show you how to change the default view to CodePen by adding custom parameters to the URL.

CodePen.io state examples

Without the Console

• HTML On / CSS On / JS Off = http://codepen.io/pen/?editors=110
• HTML On / CSS Off / JS Off = http://codepen.io/pen/?editors=100
• HTML On / CSS Off / JS On = http://codepen.io/pen/?editors=101
• HTML Off / CSS On / JS Off = http://codepen.io/pen/?editors=010
• HTML Off / CSS Off / JS On = http://codepen.io/pen/?editors=001
• HTML Off / CSS On / JS On = http://codepen.io/pen/?editors=011

With the Console

• HTML On / CSS Off / JS On / Console On = http://codepen.io/pen/?editors=1011
• HTML Off / CSS Off / JS On / Console On = http://codepen.io/pen/?editors=0011
• HTML Off / CSS On / JS On / Console On = http://codepen.io/pen/?editors=0111
• HTML On / CSS Off / JS On / Console Replacing Preview = http://codepen.io/pen/?editors=1012
• HTML Off / CSS Off / JS On / Console Replacing Preview = http://codepen.io/pen/?editors=0012
• HTML Off / CSS On / JS On/ Console Replacing Preview = http://codepen.io/pen/?editors=0112

The most practical state for pure JS examples:

0012 - this state will keep Web Preview OFF and Console ON:

• HTML Off / CSS Off / JS On / Console Replacing Preview
  http://codepen.io/pen/?editors=0012

0011 - this state will keep Web Preview ON and Console ON:

• HTML Off / CSS Off / JS On / Console On
  http://codepen.io/pen/?editors=0011

More under below link:

• https://blog.codepen.io/documentation/editor/full-screen-editing/