Sharing

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 will be able to guess it. Private Pens don’t show up in search, on your profile, or anywhere else someone could stumble upon it. Take care in sharing Private Pens, only sharing it with people you’re sure you’re OK with seeing it.

Password-Protected Pens

Password Protected Pens have the same URL structure as a Private Pen, but has extra security on top of it, required a non-authenticated user to enter the correct password in order to see 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 404 for anyone else.

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
?file=%2Ffile.tsx
?orientation=left
?panel=permissions
?show=splitCode language: JavaScript (javascript)

All UI Query Parameters

You can update the query parameters for controlling the initial view of a Pen manually if you’d prefer. Here they are:

`console`	`true` \| `false` Show the Preview console. Defaults to `false`
`file`	Open a specific file using the relative file path e.g. `?file=/styles/colors.scss`
`orientation`	`left` \| `right` \| `top` Orientation of the Editors next to the Preview. Defaults to `left`
`panel`	`assets` \| `blocks` \| `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`
`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`