https://github.com/scarpmetal/codepen-tabs
Adds multi-tab support to the CodePen editor for organizing code.
https://github.com/scarpmetal/codepen-tabs
codepen tampermonkey userscript
Last synced: about 1 month ago
JSON representation
Adds multi-tab support to the CodePen editor for organizing code.
- Host: GitHub
- URL: https://github.com/scarpmetal/codepen-tabs
- Owner: ScarpMetal
- Created: 2025-02-15T03:40:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-15T04:51:19.000Z (over 1 year ago)
- Last Synced: 2025-10-05T20:55:12.682Z (9 months ago)
- Topics: codepen, tampermonkey, userscript
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CodePen Tabs
Adds multi-tab support to the CodePen editor for organizing code.
## How to install
1. Install the [TamperMonkey](https://www.tampermonkey.net/#download) browser extension
2. Click the TamperMonkey extension icon, then navigate to `Dashboard > Utilities > Import from url`
3. Paste `https://raw.githubusercontent.com/ScarpMetal/codepen-tabs/refs/heads/main/index.js` in the input and click "Install" on both the Dashboard page and the Preview page
## How to use
* Add a tab comment in the format: `/* {Tab Name} */`
* Click "Reload CodePen Tabs" (top right corner of editor) to update the tabs
* Any code above the first tab comment shows on all tabs
* You can select and deselect a tab to toggle showing all the code
Example:
```javascript
const MY_CONSTANT = "I show on every tab"
/* {Tab 1} */
function func1() {}
/* {Tab 2} */
function func2() {}
/* {Tab 3} */
function func3() {}
```
## How to setup dev environment
1. Clone the repo `git clone https://github.com/ScarpMetal/codepen-tabs.git`
2. Click the TamperMonkey extension icon, then navigate to `Dashboard > Utilities > Import from file` and upload `index.js`