Details View is perhaps the most “shareable” view on CodePen in that it features your work prominently right up top, allows the code to be seen as well, and encourages social interaction like hearing, commenting, and re-sharing.

Details View is where you come to see all the meta information on a Pen like:

  • The Pen’s description
  • Number of hearts (and complete list of users who have hearted it)
  • Number of views
  • Sharing links
  • Created & updated dates
  • Tags
  • Comments
  • Licence

You can see the code on Details View as well, just click on any of the code tabs to open them up or toggle between them.

If that looks familiar, it’s because Details View uses an Embed right there on top. Little dogfooding of our own feature you might say, and gives you a chance to see what Embedded Pens could be like on your own site.

You can also resize that area if you need to to test out responsive designs.

Getting to Details View

The Change View dropdown will get you there, if you happen to be looking at a Pen in the Pen Editor or another view.

Details View is also what powers the Popout Preview on CodePen. So when you click the icon in the grid, you’ll get a popup like this:

That’s literally Details View, just brought up in a Modal so you can close it without losing your place on the page below. From here, you can also paginate left and right while staying in Details View.

Comments

Details View is the only place to see and leave comments on CodePen for both Pens and Projects. You need to be logged in to CodePen with an email-address-verified account to leave a comment.

That little green icon there is just the browser extension Grammarly. Gotta make sure our comments have correct grammar, don’t we?!

Notifications and @mentions

When someone comments on work of yours, you’ll get an email about it assuming you have that setting turned on.

The same setting goes for @mentions in comments. If you @mention someone, they’ll get an email about it assuming they have that setting turned on.

Markdown

Just like Pen Descriptions, you can use Markdown in comments, meaning you can easily leave links, images, code blocks, pretty much anything that Markdown supports.

License

Details View is where you find the Pens license. All public Pens on CodePen are MIT.

Was this article helpful?
YesNo