I’m finding Codepen to be more and more valuable not only for testing out new code and ideas, but also – when working on large applications – as a time-saving rapid prototyping environment which sidesteps the overhead of back-end set-up. Here are some tips which I’ve found useful, for future reference.
Control the Editor View layout
Append /left/, /right/, or /top/ to the URL to set the editor layout.
Append ?editors=1111 (change numbers as appropriate) to the URL to set which panels are maximised (in order of HTML, CSS, JavaScript, and console).
For example:
https://codepen.io/fuzzylogicx/pen/BEEYQL/left/?editors=1100
References
- https://blog.codepen.io/documentation/url-extensions/
- Adding external resources to a pen
- ES Modules on codepen
- https://www.hongkiat.com/blog/codepen-tips-beginners/