You’re free to share any Pen on CodePen. Copy the URL and send away! You’ll find a Share menu in any saved Pens header to help you send it to popular social networks or get a sharing URL. There is a bit of nuance and extra features, so read on.

Privacy Affects Sharing

Pens have four different possible privacy states and each of them affect sharing a bit differently.

Public Pens

Public Pen URLs look like this:

https://codepen.io/editor/chriscoyier/pen/0193dae5-fa74-77ba-8827-86f3b88a5c69

Public Pens can be shared freely and anyone may come across a Pen on CodePen via a user profile, feed, search, or otherwise. The Public URL to a Pen will not change, but if it later becomes Private (or any of the other privacy settings), that URL will 404. Deleted Pens will also 404.

Private Pens

Private Pen URLs look like this:

https://codepen.io/editor/chriscoyier/pen/0193dae5-fa74-77ba-8827-86f3b88a5c69/4c92485776eda300331a1283fd7387b2

Note the extra-long part at the end of the URL. We call that a token.

This extra-long URL is impossible to guess. So unless you explicitly share it, nobody can guess it. Private Pens don’t show up in search, on your profile, or anywhere else someone could stumble upon it. Be careful when sharing Private Pens; only share them with people you’re sure you’re OK with seeing them.

Password-Protected Pens

Password-Protected Pens have the same URL structure as a Private Pen, but with extra security that requires a non-authenticated user to enter the correct password to view it. If you publicly share a Password-Protected Pen, and you’re free to do so, just know that everyone except logged-in Collaborators on the Pen will see a password entry screen.

Collaborator-Only Pens

Collaborator-Only Pens also have the same URL structure as a Private Pen. Pens with this setting can only be seen by logged-in users who are Collaborators on that Pen. The Pen will return a 404 for anyone else.

Sharing with Specific UI

When you share a Pen and another user is opening it for the first time, they’ll see it in a default state determined by CodePen. The preview will be open, and we try to open the three main HTML, CSS, and JavaScript files if they exist. Pens with more unique file structures may not have any files open.

You can control how you want the UI to be shown by sharing the URL to the Pen with special query parameters. For example, you can share a Pen with the Console open so that people can see output there. Or, you can share the Pen in minimal view with the editors closed for a “full page” view that focuses mostly on the preview itself.

You don’t have to memorize these special query parameters — you can click the Copy Link with Layout button to get a URL that includes the query parameters which will attempt to mimic the UI mostly as you currently have it. The query parameters will be removed from the URL after the Pen loads.

Example Query Parameters

?console=true
?ui=preview
?tab=script.tsx
?orientation=left
?panel=permissions
?show=splitCode language: JavaScript (javascript)

All UI Query Parameters

You can manually update the query parameters to control the initial view of a Pen if you prefer. Most parameters can be combined together. Here they are:

ui	default | details | preview | editor | ai Open a specific UI preset, like ?ui=preview to show a maximized Preview.
console	true | false Show the Preview console. Defaults to false
tab	Tabs to show when opening the Editor. Open a specific file using the relative file path e.g. ?tab=/styles/colors.scss See more uses below.
orientation	left | right | top Orientation of the Editors next to the Preview. Defaults to left
panel	assets | blocks | ai|details | files | permissions Open a specific Panel in the Sidebar.
preview	true | false | (relative URL path) Set to false to hide the Preview, or show the Preview with true or a specific relative path to show in the Preview. e.g. ?preview=/about/staff.html
presentation	true | false Show the editor UI in “Minimal UI”, but only temporarily, not as a permanent setting change
show	split | editors | preview Which layout to show: split side-by-side, Editors only, or Preview only. Defaults to split
tour	welcome Activates the Editor Tour. You can also activate a specific step of the tour, e.g. ?tour=welcome:files

?tab Query Param

You can open specific content using ?tab. Values can be comma-separated to open multiple tabs in one Editor:

?tab=index.html,style.css,script.jsCode language: plaintext (plaintext)

You can also separated by the | character to open multiple Editors:

?tab=index.html|style.css|script.jsCode language: plaintext (plaintext)

You can even use both to get multiple tabs in multiple editors.

?tab=index.html,style.css|script.js,console|blocksCode language: plaintext (plaintext)

• Files: Use the relative path
  • ?tab=index.html
  • ?tab=/styles/_variables.scss
  • ?tab=/component/Component.tsx
• Build Output files: Prefix with build:
  • ?tab=build:index.html
  • ?tab=build:images/image.jpg
• Panels: Use the panel ID ( files, blocks, ai, deployment, versions, permissions, details, assets, settings )
  • ?tab=blocks
  • ?tab=settings
• Views: Additional views opened by their ID ( console, buildOutput )
  • ?tab=console

View Presets with ?ui Query Param

CodePen has specific defaults and user settings for controlling the Editor UI when you start up a Pen, and from session-to-session, CodePen will remember your tabs and view settings for a Pen. Sometimes, however, you want to share a specific view or trim things down a bit.

The ?ui query param helps load specific views to let you focus in on a task or showing something off.

• ?ui=default – resets to the default UI
• ?ui=details – Opens the Pen’s description & comments in a Tab
• ?ui=preview – Maximizes the Preview, similar to full view in the Classic Editor.
• ?ui=editor – Maximizes the Editor for when you need to show off some code or focus on writing.
• ?ui=ai – Opens the CodePen AI Panel as a tab, split with the Preview so you can get help without distraction.