Developers
CodePen
Embed CodePen demos in lab sections via slash command.
Overview
Slash command: /codepen
Type: Editor embed
Open Studio → Developer → Integrations to manage this integration for the current workspace.
What you can do
- Show live HTML/CSS/JS examples beside instructions
- Let learners explore interactive front-end demos
- Reuse existing Pens instead of pasting static code only
- Illustrate UI patterns with a runnable preview
How to set it up
Insert a CodePen embed from the lab editor slash menu.
Open a lab
Open a lab in the Studio editor
Insert CodePen
Type /codepen or open slash commands and choose CodePen under Embeds
Paste a CodePen URL
Paste a CodePen URL into the embed field
Publish
Publish the lab: learners can interact with the Pen inline