CINXE.COM

<html class="css-1n8hie0"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/><title>Embed RunKit Notebooks with Embed.ly and OEmbed | The RunKit Blog</title><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@runkitdev"/><meta name="twitter:creator" content="@runkitdev"/><meta name="twitter:title" content="Embed RunKit Notebooks with Embed.ly and OEmbed"/><meta name="twitter:description" content="Embed.ly now supports RunKit as a content provider, which means that you can now embed any RunKit notebook on sites like Medium, or any of the other thousands of companies that rely on Embed.ly for embedding dynamic content."/><meta name="twitter:image" content="http://blog.runkit.com/assets/poster-sharing.jpg"/><meta property="og:title" content="Embed RunKit Notebooks with Embed.ly and OEmbed"/><meta property="og:site_name" content="RunKit Blog"/><meta property="og:type" content="article"/><meta property="og:description" content="Embed.ly now supports RunKit as a content provider, which means that you can now embed any RunKit notebook on sites like Medium, or any of the other thousands of companies that rely on Embed.ly for embedding dynamic content."/><meta property="og:image" content="http://blog.runkit.com/assets/poster-sharing.jpg"/><meta property="og:url" content="http://blog.runkit.com/2017/08/08/embed-runkit-notebooks-with-embedly/"/><meta property="fb:app_id" content="1463593997084629"/><link href="/assets/css/bootstrap-reboot.min.css?integrity=sha512-TxcCDZfjPRLa2vJHDnCDjixF%2BPDgNtS69nOt34BgAvYIZHF6pFJZPeqBfSqTDni5D2ZRtwFRDgUfjrQCl8VgXA%3D%3D" rel="stylesheet"/><link href="/assets/fontawesome/css/fontawesome-all.min.css?integrity=sha512-zw3VfNIRXjrUIQZt2GvSx73NM6ago%2FfP0aGfTojSdOMz%2FDxP%2B54lsqC7crLmNjbRQeLQ9IuZwc%2Fh9%2FfXT3ymmw%3D%3D" rel="stylesheet"/><link href="/assets/typography.css?integrity=sha512-J8ccEyFvoRXZzP3OQBOp9ezJFg3fSgfRQfKyZH9sDnd2nFjx1x9wVkDhOOhpcT5H9Tj%2B3OQHkNCk0F82%2FfIqwA%3D%3D" rel="stylesheet"/><script src="/assets/fluid-typography.js?integrity=sha512-WzcHEcF9s%2BOcGJSotawPJz2WhlaR1KhZan3vozKu%2FF4yglxeA7qh35GPWTjSpqVD8VOLiVLzQU5PZcO3n0AruA%3D%3D" data-classes="fluid-content, fluid-title-35, fluid-title"></script><link rel="canonical"/><style>@media (max-width:414px){.css-1n8hie0 .fluid-title-35,.css-1n8hie0 .fluid-title{margin-top:20px;font-weight:300;}}.css-1n8hie0 .margins{margin:0 auto;max-width:760px;padding:0 30px;}@support (padding:max(0px)){.css-1n8hie0 .margins{padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right));}}.css-1n8hie0 main code.inline{color:rgba(164,115,221,1.0);background:rgba(246,247,252,1.0);font-family:Menlo,Monaco,Consolas,"Courier New",monospace;border-radius:5pt;font-size:0.77em;padding:0.33em .55em;}.css-1n8hie0 main p{margin-bottom:1.2em;}.css-1n8hie0 main h1{font-weight:bolder;font-size:1.2em;}.css-1n8hie0 main h2{margin-top:1em;font-size:1.2em;font-weight:bolder;}.css-1n8hie0 main{position:relative;color:#333;background:white;width:100%;z-index:1;padding-top:3rem;}.css-gljlji{position:static;height:300px;}@media (max-width:414px){.css-gljlji{height:250px;}}.css-1b2xhp1{position:relative;width:100%;height:100%;z-index:3;color:white;text-shadow:0px 1px black;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.css-1021pn{position:fixed;width:100%;top:0;left:0;z-index:0;height:inherit;overflow:hidden;false;}.css-1m25gwu{background:url(/assets/poster-header.jpg);background-size:cover;background-position:center 0;position:absolute;-webkit-filter:blur(10px);filter:blur(10px);top:-15px;left:-15px;width:calc(100% + 30px);height:calc(100% + 30px);}.css-1xbd9xr{width:100%;height:100%;background:rgba(0,0,0,0.5);}.css-1hqvogr{position:fixed;width:100%;top:0;left:0;z-index:2;height:40px;overflow:hidden;}@media (max-width:414px){.css-1hqvogr{display:none;}}.css-1feqlpg{position:fixed;width:100%;top:0;left:0;z-index:4;height:40px;overflow:visible;opacity:0.5;}@media (max-width:414px){.css-1feqlpg{display:none;}}.css-1l7y7sy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;overflow:hidden;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;height:40px;list-style-type:none;text-transform:capitalize;color:white;margin:0;padding:0 30px;}.css-1l7y7sy > *{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}@media{.css-1l7y7sy{position:fixed;left:0;top:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-1l7y7sy .logo-container{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;font-size:20px;}}@support (padding:max(0px)){.css-1l7y7sy{padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right));}}@media (max-width:414px){.css-1l7y7sy{position:absolute;font-size:12px;}.css-1l7y7sy .logo-container{-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;font-size:initial;}}.css-1l7y7sy li{display:inline;margin:0.5em;}.css-1l7y7sy li:first-child{margin-left:0;}.css-1l7y7sy li:last-child{margin-right:0;}.css-1l7y7sy a,.css-1l7y7sy a:visited,.css-1l7y7sy a:active{color:white;text-transform:uppercase;text-decoration:none;font-weight:bold;}.css-1liba5v{padding-left:1.3em;height:1em;padding-bottom:2px;background:url(/assets/logo-large.png);background-repeat:no-repeat;background-position:left bottom;background-size:contain;}.css-kkv85h{color:#848383;font-size:80%;padding-bottom:0.5em;border-bottom:1px solid #D6D6EC;margin-bottom:2em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;}@media (max-width:414px){.css-kkv85h{display:block;}.css-kkv85h > div:first-child{margin-bottom:0.5em;}}.css-1c3h18e{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}.css-4zleql{display:block;}.css-1tg3jta{font-size:80%;}.css-di0vlv{margin:0;padding:0;}.css-di0vlv a,.css-di0vlv a:visited,.css-di0vlv a:hover{color:inherit;}.css-di0vlv i{margin:0 .05em 0 .35em;}.css-12ev6iw{text-align:center;margin:1em 0;}.css-5ko0u5{margin:1em;}.css-1puq874{background:#f8f8f9;border:1px solid #eee;margin:2em 0;padding:2em 0;}.css-q3dtf7{text-align:center;font-size:0.7em;margin:2em 0;}.css-qv45bh{width:90%;text-align:center;margin:40px auto;}.css-qv45bh img{vertical-align:middle;max-width:100%;}.css-qv45bh figcaption{font-size:0.9rem;font-style:italic;margin-top:10px;color:#555;}</style></head><body><header class="css-gljlji"><div class="css-1021pn"><div class="css-1m25gwu"><div class="css-1xbd9xr"></div></div></div><div class="css-1hqvogr"><div class="css-1m25gwu"><div class="css-1xbd9xr"></div></div></div><div class="css-1b2xhp1"><div class="margins"><h1 class="fluid-title">Embed RunKit Notebooks with Embed.ly and OEmbed</h1></div></div><div class="css-1feqlpg"><div class="css-1m25gwu"><div class="css-1xbd9xr"></div></div></div><ul class="css-1l7y7sy" style="z-index:5"><li class="logo-container"><a href="https://runkit.com/home"><img class="css-1liba5v logo" src="/assets/logotype.svg"/></a></li><li><a href="http://blog.runkit.com">Blog</a></li><li><a href="https://runkit.com/about">About</a></li><li><a href="https://discuss.runkit.com">Discuss</a></li><li><a href="https://runkit.com/login">Log In</a></li></ul></header><main><div class="margins fluid-content"><div class="css-kkv85h"><div class="css-1c3h18e"><time dateTime="2017-08-07T17:00:00-07:00" class="css-4zleql">Published August 7th, 2017</time><span class="css-1tg3jta">by Ross Boucher</span></div><span class="css-di0vlv">Share on <a href="https://www.facebook.com/dialog/share?href=http%3A%2F%2Fblog.runkit.com%2F2017%2F08%2F08%2Fembed-runkit-notebooks-with-embedly%2F&display=popup&app_id=1463593997084629" data-share-popup="facebook"><i class="fab fa-facebook"></i> facebook</a> or <a href="http://twitter.com/share?text=Embed%20RunKit%20Notebooks%20with%20Embed.ly%20and%20OEmbed&url=http%3A%2F%2Fblog.runkit.com%2F2017%2F08%2F08%2Fembed-runkit-notebooks-with-embedly%2F" data-share-popup="twitter"><i class="fab fa-twitter"></i> twitter</a></span></div><p><a href="http://embed.ly">Embed.ly</a> now supports RunKit as a content provider, which means that you can now embed any RunKit notebook on sites like <a href="http://medium.com">Medium</a>, or any of the other <a href="embed.ly/customers">thousands</a> of companies that rely on Embed.ly for embedding dynamic content.</p><p><figure class="css-qv45bh"><img src="/2017/08/08/embed-runkit-notebooks-with-embedly/medium.gif" alt="An animation of adding a RunKit embed to a Medium document"/><figcaption>Just paste a RunKit URL into Medium</figcaption></figure></p><p>Embedding uses a technology called <a href="http://oembed.com">OEmbed</a>, so any website that supports OEmbed, whether or not they use Embed.ly, can also take advantage of this new feature.</p><p>We've added some <a href="https://runkit.com/docs/embed#oembed">documentation</a> on our OEmbed endpoint, and we also support the auto-discovery protocol so many sites using OEmbed should just work automatically. For the best experience, note our documentation on how to respond to height changes in the size of an embed.</p><footer><div class="css-12ev6iw"><img class="css-5ko0u5" src="/assets/images/symbol-0.svg"/><img class="css-5ko0u5" src="/assets/images/symbol-1.svg"/><img class="css-5ko0u5" src="/assets/images/symbol-2.svg"/></div></footer></div><div class="css-1puq874"><div class="margins fluid-content"><h2>What is RunKit?</h2><ul><li>RunKit is an <strong>interactive playground</strong> for running Node.js in the cloud.</li><li>RunKit offers serverless functions with <strong>zero deploy time</strong> — prototype code changes <strong>in real time</strong>!</li><li>RunKit can be <strong>embedded</strong> in your tutorials and docs to make them interactive as seen on <a href="https://lodash.com/docs/">lodash.com</a>, <a href="http://expressjs.com/en/starter/hello-world.html">expressjs.com</a>, and <a href="https://stripe.com">stripe.com</a>.</li></ul></div></div><div class="margins fluid-content"><div class="css-q3dtf7">Follow RunKit Blog updates with the <a href="/feed.xml">RSS Feed</a><br/>Follow <a href="https://twitter.com/runkitdev">@runkitdev</a> on Twitter <i class="fab fa-twitter"></i> for the latest updates from RunKit<br/>© 2015–2018 Playground Theory, Inc.</div></div></main><script src="/assets/common.js?integrity=sha512-BWJzDIv2d5yiGRsi%2FFelo2VttvVHtjNdCUZcuYruLCJTgZAt%2BFMlEqpfGCwc%2BUs3Mayr%2B5vYqqoXWL6IosujdQ%3D%3D"></script></body></html>