CINXE.COM
RunKit: Example Notebooks
<!DOCTYPE html> <html> <head> <title>RunKit: Example Notebooks</title> <script src="https://static.runkitcdn.com/assets/vendor/jquery/jquery.min.js"></script> <script src="https://static.runkitcdn.com/assets/vendor/bootstrap/bootstrap.min.js?v=4.1.3"></script> <meta name="keywords" content="RunKit REPL tonic endpoint playground javascript node npm module prototype prototyping API server" /> <meta name="author" content="runkit.com" /> <meta name="description" content="RunKit notebooks are interactive javascript playgrounds connected to a complete node environment right in your browser. Every npm module pre-installed."> <meta name="viewport" content="width=device-width, initial-scale=0.5"> <link type="application/opensearchdescription+xml" rel="search" title="RunKit" href="https://static.runkitcdn.com/search.xml"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,700|Ubuntu+Mono:400|Roboto:300,400,700" type="text/css"> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/vendor/font-awesome/css/font-awesome.min.css" /> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/styles/codemirror.css"/> <link rel="stylesheet" href="https://themes.runkitcdn.com/runkit-light.css?v=ce0f1cbf00545d68f7a212bb4a3cb3a4aac49d35" /> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/vendor/bootstrap/bootstrap.min.css?v=4.1.3"/> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/styles/base.css?v=ce0f1cbf00545d68f7a212bb4a3cb3a4aac49d35"/> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/styles/static.css?v=ce0f1cbf00545d68f7a212bb4a3cb3a4aac49d35"/> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/vendor/photon/icons.min.css"> </head> <body class="static-page"> <header> <nav class="primary-nav navbar navbar-expand-sm navbar-light"> <div class="container justify-content-between"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="logo navbar-brand" href="/home">RunKit</a> </li> </ul> <ul class="navbar-nav secondary-links text-right navbar-right"> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="https://discuss.runkit.com">Forum</a></li> <li class="nav-item"><a class="nav-link" href="http://blog.runkit.com/">Blog</a></li> <li class="nav-item"><a class="nav-link" href="/docs">Documentation</a></li> <li class="nav-item"><a class="nav-link" href="/explore">Explore</a></li> </ul> </div> <div class="navbar-user-menu-container"> <li class="nav-item"><a class="nav-link" href="/login"><span class="signin">Sign in</span></a></li> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar"> <span class="navbar-toggler-icon"></span> </button> </div> </ul> </div> </nav> </header> <div id="main-content"> <style> #trending ul, #main-content ul.examples { padding: 0; } #trending li.row { list-style-type: none; padding: 0.6em 0; } #trending li.row a { width: 100%; display: block; font-size: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #featured h3 { margin-top: 64px; padding-bottom: 12px; border-bottom: 1px solid #eee; margin-bottom: 32px; } .hidden-example { opacity: 0; height: 300pt; } .examples li { list-style: none; } .examples li a { overflow: hidden; margin-bottom: 60px; margin-right: 60px; border-radius: 10pt; background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05); display: block; -webkit-transition: box-shadow 0.3s ease; -moz-transition: box-shadow 0.3s ease; -ms-transition: box-shadow 0.3s ease; -o-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; text-align: center; color: #111; } .examples li a:nth-child(3n) { margin-right: 0; } .examples li a:hover { transition: box-shadow 0.3s ease; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 12px 22px rgba(0, 0, 0, 0.15); text-decoration: none; } .examples img { margin: 0; width: 180pt; height: 180pt; } .examples .title { font-size: 20pt; display: block; padding: 10pt 0 5pt; color: rgba(0, 0, 0, 0.9); } .examples .description { font-size: 10pt; color: #999; padding: 5pt 5pt; opacity: 0.9; display: block; min-height: 50pt; } .examples .user { color: #337AB7; } .examples .info { background: #fff; } .submit { border: 3pt dashed #EEE; } .examples .submit, .examples .submit:hover { box-shadow: none; } </style> <div class="container"> <h1 style="text-align: center; margin-top: 42px; font-size: 42px;">Explore RunKit</h1> <p style="text-align: center; margin-bottom: 42px; color: #888;">See the interesting things people are creating with RunKit.</p> <div id="trending" class="row"> <div class="col-12 col-md-6"> <div style="border-bottom: 1px solid #eee;"> <div class="btn-group btn-group-sm" role="group" style="margin-top: 2px; float: right; margin-right: 20px;"> <a href="?t=days" class="btn btn-light active" role="button" aria-pressed="true">Daily</a> <a href="?t=weeks" class="btn btn-light " role="button" >Weekly</a> <a href="?t=months" class="btn btn-light " role="button" >Monthly</a> </div> <h3>Popular</h3> </div> <ul> </ul> </div> <div class="col-12 col-md-6"> <div style="border-bottom: 1px solid #eee;"> <h3>Recently Published</h3> </div> <ul> </ul> </div> </div> <div id="featured"> <h3>Featured Notebooks</h3> <ul class="examples row"> <li id="slack-slash" class="col-lg-4 col-md-6 col-12"><a href="/matt/slack-slash-commands/1.0.0"> <img src="https://static.runkitcdn.com/assets/images/examples/slack.svg" alt="Slack Slash Commands"> <div class="info"> <span class="title">Slack Commands</span> <span class="user">@matt</span><br/> <span class="description">Prototype Slack slash commands.</span> </div> </a></li> <li id="horse-api" class="col-lg-4 col-md-6 col-12"><a href="/tolmasky/oil-paint-filter" style="background: #e37948;"> <img src="https://static.runkitcdn.com/assets/images/examples/paint.svg" alt="Image Filter"> <div class="info"> <span class="title">Image Filter</span> <span class="user">@tolmasky</span><br/> <span class="description">Apply filters to your pictures.</span> </div> </a></li> <li id="iss" class="col-lg-4 col-md-6 col-12"><a href="/capicue/iss/4.0.0" style="background: #324d5b;"> <img src="https://static.runkitcdn.com/assets/images/examples/space.svg" alt="ISS Location"> <div class="info"> <span class="title">Track ISS</span> <span class="user">@capicue</span> <span class="description">Find the ISS with the Open Notify API.</span> </div> </a></li> <li id="city-forecast" class="col-lg-4 col-md-6 col-12"><a href="/runkit/city-forecast" style="background: #26a6d1;"> <img src="https://static.runkitcdn.com/assets/images/examples/weather.svg" alt="Weather Forecast"> <div class="info"> <span class="title">Weather Forecast</span> <span class="user">@capicue</span> <span class="description">Compare the projected weather of two cities.</span> </div> </a></li> <li id="brain-js" class="col-lg-4 col-md-6 col-12"><a href="/runkit/brain-js" style="background: #3db39e;"> <img src="https://static.runkitcdn.com/assets/images/examples/brain.svg" alt="Learning Colors"> <div class="info"> <span class="title">Learning Colors</span> <span class="user">@boucher</span> <span class="description">Build a simple neural network with Brain.js.</span> </div> </a></li> <li id="telephone" class="col-lg-4 col-md-6 col-12"><a href="/runkit/telephone" style="background: #efc75e;"> <img src="https://static.runkitcdn.com/assets/images/examples/chat.svg" alt="Telephone"> <div class="info"> <span class="title">Telephone?</span> <span class="user">@capicue</span> <span class="description">Translation ping-pong with the Yandex API.</span> </div> </a></li> <li id="pencil-availability" class="col-lg-4 col-md-6 col-12"><a href="/tolmasky/pencil-availability" style="background: #668292;"> <img src="https://static.runkitcdn.com/assets/images/examples/pencil.svg" alt="Apple Pencil"> <div class="info"> <span class="title">Apple Pencil</span> <span class="user">@pouwerkerk</span> <span class="description">Poll realtime availability for the Apple Pencil.</span> </div> </a></li> <li id="d3-example-from-beaker" class="col-lg-4 col-md-6 col-12"><a href="/runkit/d3-example-from-beaker" style="background: #f4f0d3;"> <img src="https://static.runkitcdn.com/assets/images/examples/beaker.svg" alt="Beaker"> <div class="info"> <span class="title">Beaker</span> <span class="user">@tolmasky</span> <span class="description">Prototype D3 visualizations in RunKit.</span> </div> </a></li> <li id="await" class="col-lg-4 col-md-6 col-12"><a href="/docs/await" style="background: #e2574c;"> <img src="https://static.runkitcdn.com/assets/images/examples/await.svg" alt="Await"> <div class="info"> <span class="title">Await</span> <span class="user">@tolmasky</span> <span class="description">How to write asynchronous code with await.</span> </div> </a></li> <li class="col-lg-4 col-md-6 col-12"><a class="submit" href="mailto:support@runkit.com?subject=Featured Notebooks&body=Notebook URL: [Your Notebook]"> <img src="https://static.runkitcdn.com/assets/images/examples/submit.svg" alt="Submit"> <div class="info"> <span class="title">Submit</span> <span class="user"> </span> <span class="description">Send us your notebook and it could be featured!</span> </div> </a></li> </ul> </div> </div> </div> <footer> <div> <a href="https://twitter.com/runkitdev"><img src="https://static.runkitcdn.com/assets/images/integrations/twitter.svg" title="twitter" height="16" /></a> </div> <div id="copy"> © 2025 runkit • <a href="/s/privacy">privacy</a> · <a href="/s/terms">terms</a> · <a href="/s/acceptable-use">acceptable use</a> · <a href="/about">about</a> · <a href="/jobs">jobs</a> · <a href="http://blog.runkit.com">blog</a> · <a href="https://discuss.runkit.com">forum</a> </div> </footer> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-65519033-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>