All integrations
CodePen
By Bloggable
Show the thing, not a screenshot of it.
A CodePen link becomes the running pen inside the post — the difference between describing an interaction and letting somebody try it in the paragraph where you explain it.
How the CodePen integration works
What it does
- It runs in the post.The pen is interactive where it sits, so a tutorial can demonstrate rather than assert.
- Paste is the whole setup.Any codepen.io URL on an empty line resolves into an embed block.
- Sanitised before it renders.Fetched through oEmbed server-side and filtered against a host allow-list, so a pen cannot bring anything else along with it.
- Travels as a link when published out.Inline on a Bloggable blog, a plain link on WordPress or Ghost.
How to use it
- 1Copy the pen’s addressAny public codepen.io URL.
- 2Paste it on an empty lineThe pen appears, running, at the post’s width.
The platform