notion.md

Code playgrounds in Notion

Notion does not support custom JavaScript widgets. However, it's still possible for a reader to edit and execute code snippets — using code links or embeds. Let's look at both methods.

Code links

A code link is a regular HTML link that points to a special lightweight Codapi page containing editable and executable code. Here is how to add code links to your Notion pages:

First, add a Code block with a code snippet as usual:

def greet(name):
  print(f"Hello, {name}!")

greet("World")

Then copy the same code to the Codapi Embed page (choose the appropriate playground first) and click Share. You'll get a shareable link to your specific code snippet.

Finally, paste this link into your page below the code snippet. Name it Run code or something like that:

Run code

And that's it! When the reader follows the link, they'll be able to run and edit the code.

You can add as many code links per page as you like.

Embeds

Embeds are Notion's way of including external website content into Notion pages. Here is how to add Codapi playgrounds to Notion pages using embeds:

First, write some code using the Codapi Embed page (choose the appropriate playground first) and click Share. You'll get a shareable link to your specific code snippet.

Then add an Embed block in Notion and paste the copied link into it. Notion will render the playground with your code and a Run button like this:

┌───────────────────────────────┐
│ def greet(name):              │
│   print(f"Hello, {name}!")    │
│                               │
│ greet("World")                │
└───────────────────────────────┘
  Run

Now you can edit and execute the code directly from the Notion page!