CodePen UserScript (Replace CodePen's Editor with your Personal Favorite.)

Hey guys, I just wanted to share this with everyone. Not sure if something like this already exists but I created a TamperMonkey userscript that allows you to toggle the visibility of the HTML/CSS/JS box on CodePen. This allows you to access the Full view without changing URL’s. This proves most useful when trying to use CodePen with your browser window sized to a Mobile Phone size, since the Code Box takes up so much screen real estate.

I had the idea when using Atomic Chrome to sync with the HTML text field to have access to all of Atoms capabilities but still save and run the code through CodePen instantly while working on the FCC Projects. All you have to do is load up your pen, click inside of the text field, activate Atomic Chrome, then hide the HTML boxes completely using the “HTML” button at the bottom of the page (On the footer, where the ‘console’ button is.). Any code edited within Atom will still be synced to CodePens code editor, allowing you to essentially replace CodePens Editor entirely with Atom. I don’t know if other IDE’s have an Atomic Chrome equivalent, but if yours doesn’t you can still copy/paste the code over.

EDIT: I’ve updated the script to include a button to hide CodePens Navbar, and to place the buttons on the left side of the footer so that they are still accessible when your window is resized to mobile. I also have made the script automatically remove the left header (where you can edit the Pen name) and resize the ‘Run Save Fork Setting’ section so that all features are still accessible when your screen is sized to a mobile size.

EDIT 2: I’ve created a repo on GitHub where I will continue to add more features to the project. If you wish to add your own, feel free to contribute!

The script as it stands:

> // ==UserScript==
> // @name         CodePen Pen Display
> // @namespace
> // @version      1.2
> // @description  Testing
> // @author       R. Lane Young
> // @match*/pen/*
> // @match*/pen/*
> // @grant        GM_addStyle
> // @require
> // ==/UserScript==

> $(function() {
>     'use strict';

>     /* NavBar Button */
>      var btnNav = document.createElement("Button");
>      var navBtnId = document.createAttribute("Id");
>      navBtnId.value = "NavBtn";
>      var btnNavClass = document.createAttribute("class");
>      btnNavClass.value = "button button-dark mini-button";
>      var navBtnScript = document.createAttribute("onclick");
>      var navBtnText = document.createTextNode("Nav");
>      navBtnScript.value = "$('header.main-header').toggle();";
>      btnNav.setAttributeNode(navBtnScript);
>      btnNav.setAttributeNode(btnNavClass);
>      btnNav.appendChild(navBtnText);
>      $('div.footer-left').prepend(btnNav);

>     /* HTML BUTTON */
>      var btnHTML = document.createElement("Button");
>      var id = document.createAttribute("Id");
>      id.value = "htmlBtn";
>      var btnHTMLClass = document.createAttribute("class");
>      btnHTMLClass.value = "button button-dark mini-button";
>      var btnScript = document.createAttribute("onclick");
>      var text = document.createTextNode("HTML");
>      btnScript.value = "$('div.editor-parent').toggle();";
>      btnHTML.setAttributeNode(btnScript);
>      btnHTML.setAttributeNode(btnHTMLClass);
>      btnHTML.appendChild(text);
>      $('div.footer-left').prepend(btnHTML);

>      /* Header Left Hide */
>     $('div.pen-title-area').hide();
>     $('div.primary-actions').attr("style", "transform: scale(0.7, 0.9) translateX(-20%)");

> });
1 Like

rlaneyoung this is a great idea. Do you have the source on GITHUB so that I can follow it?

Hello dirkduplooy, thank you! I have just added the project to GitHub! Here’s a link:

I plan on updating the script in the future in whatever ways I feel make working in codepen more efficient for myself, and whatever ways any other users express. If you have any ideas for things to add please let me know and if you wish to contribute please feel free to make a pull request!

Thanks rlaneyyoung it will work great with Atom and whatever else. I plan to use GITHUB for freeCodeCamp and this will be a lifesaver. Clever out of the box thinking I like it :slight_smile: