The Details & Comments Panel in the Pen Editor is where you can see metadata (like created and updated dates, and hearts), written information from the Author about the Pen, tags, views, and comments from others.

Pen Descriptions

The Pen Owner (or any Editor) can edit the description of a Pen in Pen Settings. Use Markdown for formatting.

When anyone can see and read that description is in the Details & Comments panel. We’d encourage you to use it to help describe what is going on in the Pen, link out to anything relevant, and generally be interesting and helpful. Pen Descriptions are also a bonus as they are part of searchable content which may help you and others find the Pen.

Tags

Tags are like global Collections. Any Pen with the same Tag will appear on the page for that Tag. Here’s #rainbow. A Pen of yours could appear on that page (largely weighted toward recently created) by adding the “rainbow” tag to it.

The Pen Owner (or any Editor) can add/edit Tags on a Pen.

One use case for Tags is allowing people to opt-in to making their Pen visible to a group. That’s how CodePen Challenges are done, for example, the global tag for any Pen participating in challenges, or a specific challenge.

Hearts

A Pen will show how many hearts it has. Anybody can heart a Pen, including the owner.

Pens can be hearted up to three times each, although even a hearted Pen only counts toward the number of hearts just once. Multi-hearting is mostly just fun. You can see what you’ve hearted at specific levels on your profile, and it’s public. Here’s Chris’ three-hearted Pens. Multi-hearted Pens are also calculated into the most-hearted Pens of the year (e.g. 2023).

Hearting has another useful feature: calculating popularity. The homepage feeds on CodePen (e.g. Trending and Following) are influenced partially by hearts.

Views

Views is a metric that tracks how many people have looked at a Pen. It is rate-limited to unique users (so nobody can just refresh the page 100 times and get 100 views). This is essentially a vanity metric, but also helps inform popularity calculations for CodePen’s feeds.

Comments

Any CodePen user can leave a comment on a Pen, unless the owner of the Pen blocks the commenter. Whoever left the comment can edit or delete it at any time. The owner of the Pen can delete any comments on Pens they own. The owner will see the new comment in their Activity, as well as get an email notification about it if they have those enabled.

Comments use Markdown for formatting.

If you @mention another CodePen user in a comment, they will receive an email notification of the mention (unless they have email notifications for comments turned off on their account).

Commenting on a user’s Pen is the only way to contact the owner of a Pen directly on CodePen. The owner of a Pen may have links to other sites on their profile, like a GitHub profile or personal website where you may find contact information, but there is no way to find contact information directly on CodePen.