Details View is perhaps the most shareable view on CodePen. It shows off your Pen visually front-and-center. It clearly shows the author and the information they have written about the Pen. It shows tags, statistics, and other meta information about the Pen since its creation. It is also the social home for the Pen, where other CodePen members can tell you how much they like your work!

Accessing the Details View

You can open the Details View for any Pen by selecting it from the "Change View" menu in the header.

Pen Information

The creator's name, avatar, and follow button are shown directly below the Pen preview, along with the Pen's stats (views, comment count, and hearts).

Below that you'll find the Pen's description, tags, and license tabs. The description includes the Pen's creation date and the date of the most recent update (if it's different from the creation date). You can write a description and add tags for your Pen in the Pen's settings.

Lovers and Forks

To the right of the Pen info you'll find the Lovers and Forks tabs.

The Lovers tab shows all the CodePen members who have hearted the Pen.

The Forks tab shows a list of all of the Pen's "children" created from forks of the Pen. If you hover over a fork link, you can see a preview of the forked Pen. This is handy for finding forks that take the Pen in a new direction.


Logged-in CodePen members can leave a comment on the Pen or heart another member's comment. You can also @-mention another CodePen member in the comments. Any member who'd like to keep up with the conversation can subscribe to a comment thread by clicking the "Notify me of new comments via email" link below the comment form.

Adjusting the Preview Height

Some Pens previews need more vertical space to show them off best. Some need less. You can adjust the height of the preview area to best fit your Pen by using a URL parameter ?preview_height=X where X is a positive integer of pixels for the preview height. For example: