--- title: "Share a pen and embed it on your site" description: "The editor now has a Share button: a link to the pen and a code to paste into any page. An embedded pen stays live — its code can be edited and run." url: https://penlab.space/blog/share-and-embed language: en section: "Updates" published: 2026-10-02T10:00:00Z updated: 2026-10-10T22:04:18Z translation: https://penlab.space/blog/ru/share-and-embed --- # Share a pen and embed it on your site The editor now has a Share button: a link to the pen and a code to paste into any page. An embedded pen stays live — its code can be edited and run. A pen is rarely written for oneself: it is shown to a colleague, attached to an article, put into a lesson. Until now there was one way to do that — copy the address from the browser bar. Now the editor header has a **Share** button, and there are two ways. The button works on a saved pen. While the pen is new and has no address, it is disabled — the pen has to be saved first. ## Link The first tab is the address of the pen and a Copy button. Anyone can open the pen by the link, no account needed: they will see the code, the preview and the console. Everyone has this tab, on someone else's pen too. ## Embed The second tab — Embed — is there for the author of the pen. In it we put together the block that will be shown on another site: - **Panels.** Five switches: HTML, CSS, JS, Result and Console. CSS and Result are enough for an article about a CSS animation; JS and Console — for a walk through an algorithm. - **Height** of the block — from 200 to 1200 pixels. - **Preview.** The block is shown right below, the way it will appear on the page. What is left is to press "Copy code" and paste it into your page. The code looks like this: ```html ``` ## What the reader sees An embedded pen is not a picture or a screen recording. It is the same editor in miniature: the code can be edited, the result updates, an expression can be typed into the console. The reader of an article changes a number in the example and sees what came out. Nothing is saved, though: after a page reload the block shows the author's code again. There are no buttons to save, fork or sign in. To take the example along, use the "Edit on Penlab" link in the top bar — it opens the pen in the full editor, where it can be forked. In a narrow column the block rearranges itself: the code and the result become tabs. ## Details - The link and the embedded block open **the last saved version**. If the editor has unsaved changes, the dialog says so. - The choice of panels is not stored anywhere — it is written in the address inside the code. The same pen can be embedded in two places with different panels. - Views from an embedded block do not go into the view counter of the pen: only openings of the pen itself are counted. - If the author deletes the pen, the other page shows "Pen not found" in its place. You can try it on any of your pens from the [profile](https://penlab.space/profile), or put together [a new one](https://penlab.space/new) first.