How to Embed Codepen into Notion : Complete Guide

  • CodePen is a collaborative development platform. Its core functionality is that it allows you to write code in the browser and view the results as you go.
  • A powerful and liberating online code editor for developers of all skill levels, but especially for those learning to code. Codepen primarily concentrates on front-end languages such as HTML, CSS, and JavaScript, as well as the preprocessing syntaxes that transform them.
  • Notion which is an all-in one productivity tool comes with a lot of awesome features.One of feature is the support to embed code from various third party service providers.

In this Tutorial we will see How to embed Codepen into Notion.

Step-by-Step Guide : How to embed Codepen into Notion

Step 1 : Login to your codepen account

Once you logon you will see codepen dashboard in your browser.

Step 2 : Open the pen which you want to embed into Notion.

Step 3 : Copy the URL of your codepen code

Step 4 : Go to Notion and open the Notion Page where your want to embed the code.

Type “/Codepen” or “/Code” without quotes to get the CodePen Embed option.

Select the CodePen Option under EMBEDS from drop-down.

Step 5: Paste the Codepen URL as shown below and click on Embed Link.

Step 6 : Once you will click on the Embed Link ,you will see the pen on your Notion Page

How to Embed Codepen into Notion

You can click on HTML,CSS and JS to see the code.

How to Embed Codepen into Notion

Other Useful Articles :

How to Add Columns in Notion

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.