CINXE.COM
RunKit is Node prototyping
<!DOCTYPE html> <html> <head> <title>RunKit is Node prototyping</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"> <div id="main-content"> <div id="home-body"> <link rel="stylesheet" href="https://static.runkitcdn.com/assets/styles/home.css?v=ce0f1cbf00545d68f7a212bb4a3cb3a4aac49d35"> <script src = "https://static.runkitcdn.com/assets/vendor/smooth-scroll/smooth-scroll.min.js"></script> <header style = "background:rgba(0,0,0,1);"> <nav class = "home container d-sm-block d-lg-none" style = "flex-shrink:0;"> <div class="col-12" style="text-align:center; height:2.5em; display:flex; align-items:center"> <a class="logo" style="top:0px; color:white; flex-grow:1" href="/home">RunKit</a> </div> </nav> <nav class="navbar navbar-expand"> <div class="container"> <ul class="primary-nav navbar-nav mr-auto w-100"> <li class="nav-item d-none d-lg-block"><a class="logo navbar-brand" href="/home">RunKit</a></li> <li class="nav-item d-none d-sm-block"><a class="nav-link" data-scroll href="#notebooks">Playgrounds</a></li> <li class="nav-item d-none d-md-block"><a class="nav-link" data-scroll href="#endpoint">Endpoint</a></li> <li class="nav-item d-none d-lg-block"><a class="nav-link" data-scroll href="#embed">Embed</a></li> <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">Docs</a></li> <li class="nav-item"><a class="nav-link" href="/explore">Explore</a></li> <div class="navbar-user-menu-container"> <li class="nav-item"><a class="nav-link" href="/login"><span class="signin">Sign in</span></a></li> </div> </ul> </div> </nav> <div id = "hero-mobile" class = "container opacity_1" style = "position:relative"> <div class = "background explore-background selected"></div> <div class = "col-xs-12" style = "z-index:10"> <h1><span class="logo">RunKit</span> <span style = "color:rgba(255, 255, 255, 0.75)">is</span> a node playground.</h1> <p>Full node environment, right in the browser with every npm package already pre-installed</p> <a class = "button action" href = "/new" style = "margin-top:10px">Create a Notebook</a> <img src = "https://static.runkitcdn.com/assets/images/iphone.png?v=runkit" style = "width:90%"/> </div> </div> <div class = "d-none d-md-block" style = "flex-grow:1; flex-shrink:0; position:relative; "> <div style = "position:absolute; height:100%; width:100%; overflow-x:hidden; display: flex; align-items:center; justify-content:center"> <video id = "main-video" webkit-playsinline controls playsinline autoplay muted style = "left:0; height:100%; max-height:868px;" poster = "https://static.runkitcdn.com/assets/images/poster.png?v=runkit"> <source src="https://static.runkitcdn.com/assets/videos/demo.mp4?v=runkit" type="video/mp4"> <source src="https://static.runkitcdn.com/assets/videos/demo.webm?v=runkit" type='video/webm;codecs="vp8, vorbis"'> </video> <script src = "https://static.runkitcdn.com/assets/videos/demo-buttons.js" data-video-id = "main-video" type = "text/javascript"></script> </div> </div> <div class = "d-none d-md-block" style = "height: 80px; text-align: center;"> <a data-scroll href = "#notebooks"> <svg width="31px" height="16px" viewBox="0 0 71 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <polyline id="path-1" points="10.5253391 -24.6446609 60.5253391 -24.6446609 60.5253391 25.3553391"></polyline> <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="50" height="50" fill="white"> <use xlink:href="#path-1"></use> </mask> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Artboard" stroke="#979797" stroke-width="5"> <use id="Rectangle" mask="url(#mask-2)" transform="translate(35.525339, 0.355339) rotate(-225.000000) translate(-35.525339, -0.355339) " xlink:href="#path-1"></use> </g> </g> </svg> </a> </div> </header> <section id = "notebooks"> <div class = "container"> <div class="row justify-content-center"> <div class="col-lg-8 col-md-12"> <h2>Prototype and explore your ideas</h2> <p class = "subheading"> RunKit notebooks completely remove the friction of trying new ideas. With one click you'll have a sandboxed JavaScript environment where you can instantly switch node versions, use every npm module without having to wait to install it, and even visualize your results. No more configuration, just straight to coding. </p> </div> </div> <div class="row" style="margin: 2em 0;"> <div class="col-12 col-xl-8 text-center"> <video class = "data-visualizing" src="https://static.runkitcdn.com/assets/videos/data_viz.mp4" webkit-playsinline playsinline autoplay loop muted style = "width:100%; max-width:750px;"></video> </div> <div style = "margin-top: 50px" class="col-12 col-xl-4"> <div class="row"> <div class = "feature col-md-6 col-lg-4 col-xl-12"> <span class = "icon icon-pack" style = ""></span> <b> <svg xmlns="http://www.w3.org/2000/svg" style = "width:2.7em; margin-left:-4px; margin-bottom:-4px" viewBox="0 0 18 7"><path fill="#000" d="M0,0v6h5v1h4v-1h9v-6"/><path fill="#FFF" d="M1,1v4h2v-3h1v3h1v-4h1v5h2v-4h1v2h-1v1h2v-4h1v4h2v-3h1v3h1v-3h1v3h1v-4"/></svg> connected </b> <br/> Every version of every package on npm pre-installed. Built in search to help you find it. </div> <div class = "feature col-md-6 col-lg-4 col-xl-12"> <span class="icon icon-chart-bar"></span> <b>Visualize your data</b> <br/> From graphs and maps to low level hexadecimal inspectors, you can pick and choose the best way to look at your data after creating it. </div> <div class = "feature col-md-6 col-lg-4 col-xl-12"> <span class="icon icon-back-in-time"></span> <b>Time Traveling Debugging</b> <br/> RunKit allows you to rewind your work to a previous point, even filesystem changes are rewound! </div> <div class = "feature col-md-6 col-lg-4 col-xl-12"> <span class="icon icon-level-down"></span> <b>Async Friendly</b> <br/> Instead of fiddling with chains of callbacks, you can use async/await. </div> <div class = "feature col-md-6 col-lg-4 col-xl-12"> <span class="icon icon-download"></span> <b>Download</b> <br/> All notebooks are just node modules, so you can download them and run them on your own setup with no changes. </div> <div class = "feature col-md-6 col-lg-4 col-xl-12"> <span class="icon icon-share"></span> <b>Share</b> <br/> You can link anyone to your notebook and it serves as a frozen example. Great for bug reports and code samples! </div> </div> </div> </div> </div> </section> <section id="explore" class = "explore-background" style = "background-position:bottom"> <div class = "container" style = "color:white"> <div class="row"> <div class = "col-12 col-md-6" style = "padding: 20px 10px 10px 10px; text-align:center;"> <h3><span class="icon icon-globe"></span> The Global Library at Your Fingertips</h3> <p style = "font-size:18px">RunKit removes all barriers to finding existing libraries that already do what you need. In fact, you can even require multiple versions of the same package side by side in a document, providing unique debugging opportunities. </p> <p> <a class = "button info clickable" href = "/runkit/api-diff-example" style = "margin-top:10px">API Diff Example</a> </p> </div> <div class = "col-12 col-md-6" style = "padding: 20px 10px 10px 10px; text-align:center;"> <h3><span class="icon icon-back-in-time"></span> Next Generation Time Traveling</h3> <p style = "font-size:18px">RunKit takes time traveling debugging further using a revolutionary new technology called CRIU, which allows notebooks to snapshot the entire environment. That means you can rewind subprocesses, the filesystem, really just about anything in your session.</p> <p> <a class = "button info clickable" href = "http://blog.runkit.com/2015/09/10/time-traveling-in-node.js-notebooks.html" style = "margin-top:10px">Learn More About Time Traveling</a> </p> </div> </div> </div> </section> <section id = "endpoint"> <div class = "container"> <div class="row justify-content-center"> <div class="col-lg-8 col-md-12"> <h2>Instant API.</h2> <p class = "subheading"> Create an API without worrying about servers or configuration. Just export a endpoint function and your notebook automatically becomes an HTTPS endpoint, accessible from any app. Great for prototyping iOS and Android backends, or creating microservices. </p> </div> </div> <div class="row justify-content-center" style="margin: 2em 0;"> <div class = "col-12 col-xl-5"> <div class ="example-component-window"> <iframe class="component-example" src="https://static.runkitcdn.com/home/endpoint.html?v=runkit"></iframe> </div> </div> <div class = "col-12 col-xl-1 arrow" style = "text-align:center;"> <span class = "icon icon-right-circled"></span> </div> <div class = "col-12 col-xl-5"> <div class ="example-component-window"> <iframe class="component-example" src="https://static.runkitcdn.com/home/terminal.html?v=runkit"></iframe> </div> </div> </div> <div class="row"> <div class = "col-12" style = "text-align:center; margin-top:50px;"> <p>Try it yourself with <code style="background-color: transparent">$ curl -L <a href = "https://runkit.io/runkit/hello-world-api/1.0.0">https://runkit.io/runkit/hello-world-api/1.0.0</a></code><p> </div> <div class = "col-12" style = "text-align:center; margin-top:50px;"> <a class = "button info gray clickable" href = "/docs/endpoint">Full Documentation</a> </div> </div> </div> </section> <section id = "embed" style = "background:url(https://static.runkitcdn.com/assets/images/embed.jpeg); background-size:cover; color:white; text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;"> <div class = "container"> <div class="row justify-content-center"> <div class="col-lg-8 col-md-12"> <h2>Bring your code to life.</h2> <p class = "subheading"> RunKit makes it easy to let your users run the sample code in your blog posts and documentation right on your website. </p> </div> </div> <div class="row justify-content-center" style="margin: 2em 0;"> <div class = "col-12 col-xl-5"> <div class ="example-component-window"> <iframe class="component-example" src="https://static.runkitcdn.com/home/embed-sample.html?v=runkit"></iframe> </div> </div> <div class = "col-12 col-xl-1 arrow" style = "text-align:center;"> <span class = "icon icon-right-circled"></span> </div> <div class = "col-12 col-xl-5"> <div class ="example-component-window"> <iframe class="component-example" src="https://static.runkitcdn.com/home/embed-example.html?v=runkit"></iframe> </div> </div> </div> <div class="row"> <div class = "col-12" style = "text-align:center; margin-top: 50px;"> <a class = "button info clickable" href = "/docs/embed">Full Documentation</a> </div> </div> </div> </section> <section id="case-studies"> <div class="container"> <h2>Case Studies</h2> <div class="row"> <div class = "col-12 col-md-6" style = "padding: 20px 10px 10px 10px; text-align:center;"> <a href="https://fieldbook.com/developers"><h2 style = "font-size:25px" id="fieldbook">The Fieldbook</h2></a> <p style = "font-size:18px"> Fieldbook lets you create a database as easily as a spreadsheet, and uses RunKit Embed to let their users try their API right from their site. Power users can use JavaScript to interact with Fieldbook databases right in the browser! </p> </div> <div class = "col-12 col-md-6" style = "padding: 20px 10px 10px 10px; text-align:center;"> <a href="https://www.gitbook.com/"><h2 style = "font-size:25px" id="gitbook">Gitbook</h2></a> <p style = "font-size:18px">The RunKit Gitbook plugin lets you embed live examples into your books. Documentation, tutorials, and educational materials can benefit from working examples! </p> </div> </div> </div> </section> <section id="examples"> <div class="container"> <div class="examples row"> <div class="col-12 col-sm-4"> <a id="iss" 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> <br/> <span class="description">Find the ISS with the Open Notify API.</span> </div> </a> </div> <div class="col-12 col-sm-4"> <a id="horse-api" href="/tolmasky/wpl-get-started-ported-to-javascript" 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> </div> <div class="col-12 col-sm-4"> <a id="beaker" 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">D3</span> <span class="user">@tolmasky</span> <br/> <span class="description">Prototype D3 visualizations in RunKit.</span> </div> </a> </div> </div> <div style = "width:100%; text-align:center; margin-top:20px;"> <a class = "button action clickable" href = "/new">Create a Notebook</a> <a class = "button info gray clickable" href = "/explore">Explore RunKit</a> </div> </div> </section> <script> smoothScroll.init(); (function() { 'use strict'; // Set the name of the 'hidden' property and the change event for visibility var hidden, visibilityChange; if (typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; } else if (typeof document.mozHidden !== 'undefined') { // Firefox up to v17 hidden = 'mozHidden'; visibilityChange = 'mozvisibilitychange'; } else if (typeof document.webkitHidden !== 'undefined') { // Chrome up to v32, Android up to v4.4, Blackberry up to v10 hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; } if (document.addEventListener && document[hidden] !== undefined) { document.addEventListener(visibilityChange, handleVisibilityChange, false); } function handleVisibilityChange() { var videoElements = document.getElementsByTagName('video'); var functionName = document[hidden] ? 'pause' : 'play'; for (var videoElementIdx = 0; videoElementIdx < videoElements.length; videoElementIdx++) { videoElements[videoElementIdx][functionName](); } } })(); </script> </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>