Skip to content

# Showcase

This page shows a few public applications built with AppRun.

### Conduit

- Project: https://github.com/gothinkster/apprun-realworld-example-app

<!DOCTYPE html> <html> <!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on --> <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css"> <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css"> <!-- Import the custom Bootstrap 4 theme from our hosted CDN --> <link rel="stylesheet" href="//demo.productionready.io/main.css"> <style> .modal-backdrop.show { opacity: 0.5; z-index: 1040 !important; } .modal-open { position: absolute; width: 100% } .modal-dialog { z-index: 1100 !important; } </style> <body> <nav class="navbar navbar-light"> <div class="container"> <a class="navbar-brand" href="#">conduit</a> <div id="header" /> </div> </nav> <div id='my-app'></div> <footer> <div class="container"> <a href="#" class="logo-font">conduit</a> <span class="attribution"> An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code & design licensed under MIT. </span> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://unpkg.com/apprun/dist/apprun-dev-tools.js"></script> <script src="https://unpkg.com/apprun"></script> <script src='https://gothinkster.github.io/apprun-realworld-example-app/app.js'></script> </body> </html>

### Hacker-News PWA

- Project: https://github.com/yysun/apprun-hn

<!doctype html> <html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#FAFFE6"> <!-- Home screen for Safari on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="white"> <meta name="apple-mobile-web-app-title" content="AppRun*hn PWA"> <link rel="apple-touch-icon" href="images/icons/icon-152x152.png"> <!-- Tile icon for Windows --> <meta name="msapplication-TileImage" content="images/icons/icon-144x144.png"> <meta name="msapplication-TileColor" content="#2F3BA2"> <title>AppRun - HN</title> <style> * { box-sizing: border-box; margin: 0; padding: 0 } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; overflow: scroll } a { color: #337ab7; text-decoration: none; background-color: transparent } ul { padding: 0; list-style: none } .inner { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto } @media (min-width: 992px) { .inner { width: 970px } } @media (min-width: 768px) { .inner { width: 750px } } .hn .header { position: fixed; background-color: #faffe6; top: 0px; width: 100%; padding: 10px 0 } .hn .main { padding: 50px 0px } .hn .footer { position: fixed; background-color: #fff; right: 0; bottom: 0; left: 0; padding: 1rem } .hn .story-list li { padding: 10px 0 } .hn .score { color: #666; font-size: 1.1em; font-weight: 700; width: 60px; height: 60px; text-align: center; float: left; padding-top: 10px } .hn .meta { color: #aaa; white-space: nowrap } .hn .meta a { color: #096; cursor: pointer } .hn .comment { padding: 5px 0 5px 10px; border-left: 1px solid #eeeeee } .hn .text { padding: 10px 0 } .hn .toggle { color: #096; padding-bottom: 10px; cursor: pointer } .hn .collapsed { display: none } .hn .toggle:before { content: ' [-] ' } .hn .toggle.closed:before { content: ' [+] ' } .hn .toggle.closed:after { content: ' (...)' } .hn .more { margin-top: 20px; margin-left: 20px } .hn .more a { cursor: pointer; padding-bottom: 150px } </style> <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-database.js"></script> <script src="https://unpkg.com/apprun/dist/apprun-dev-tools.js"></script> <body> <script type="module" src="https://yysun.github.io/apprun-hn/dist/app.js"></script> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js').then(function (registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function (err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); } </script> </body> </html>

### TodoMVC

- Author: https://github.com/samsondav
- Project: https://github.com/samsondav/todomvc-apprun

<!doctype html> <html lang="en"> <body> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-common/base.css"> </link> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-app-css/index.css"> </link> <!-- CSS overrides - remove if you don't need it --> <link rel="stylesheet" href="https://todomvc-apprunjs.surge.sh/css/app.css"> </link> <script src="https://unpkg.com/apprun@latest/dist/apprun-html.js"></script> <section class="todoapp"> <div id="app"></div> </section> <footer class="info"> <p>Double-click to edit a todo</p> <p>Created by <a href="http://github.com/samphilipd">Sam Davies</a></p> <p>Powered by <a href="https://apprun.js.org/">AppRunJS</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p> </footer> <!-- Scripts here. Don't remove ↓ --> <script src="https://cdn.jsdelivr.net/npm/todomvc-common/base.js"></script> <script src="https://todomvc-apprunjs.surge.sh/js/app.js"></script> </body> </html>