public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JSONPlaceholder - Fake online REST API for developers</title>
    <meta name="description" content="Fake online REST API for developers">
    <meta name="author" content="Typicode">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/mono-blue.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- Google plus -->
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>

    <header>
      <h1><img src="http://i.imgur.com/QRlAg0b.png"><br>JSONPlaceholder </h1>

      <p>
        Fake Online REST API for Testing and Prototyping<br>
        <small>powered by <a href="https://github.com/typicode/json-server">JSON Server</a></small>
      </p>
    </header>

    <div class="narrow">
      <div class="center">
        <!-- Twitter button -->
        <div class="inline">
          <a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true">Tweet</a>
          <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </div>

        <!-- Google plus -->
        <div class="inline">
          <div class="g-plusone" data-size="medium"></div>
        </div>

        <!-- Facebook -->
        <div class="inline">
          <div id="fb-root"></div>
          <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));</script>

          <div class="fb-like" data-href="http://jsonplaceholder.typicode.com/" data-layout="button_count" data-action="recommend" data-show-faces="false" data-share="false"></div>
        </div>
      </div>
      <h2>Intro</h2>

      <p>
        JSONPlaceholder is a free online REST service that you can use whenever you need some fake data.
      </p>

      <p>
        It's great for tutorials, faking a server, sharing code examples, ...
      </p>

      <h2>Example</h2>

      <p>Run this code in a console or from anywhere (CORS and JSONP supported).</p>

      <pre><code class="javascript">var root = 'http://jsonplaceholder.typicode.com';

$.ajax({
  url: root + '/posts/1',
  method: 'GET'
}).then(function(data) {
  console.log(data);
});</code></pre>

      <p>
        <button id="run">Run</button>
      </p>

      <p id="result" class="json">"Try me!"</p>

      <h2>Resources</h2>

      <p>
        Inspired by common use cases.
      </p>

      <table>
        <tr><td><a href="/posts">/posts</a><td><td>100 items</td></tr>
        <tr><td><a href="/comments">/comments</a><td><td>500 items</td></tr>
        <tr><td><a href="/albums">/albums</a><td><td>100 items</td></tr>
        <tr><td><a href="/photos">/photos</a><td><td>200 items</td></tr>
        <tr><td><a href="/todos">/todos</a><td><td>200 items</td></tr>
        <tr><td><a href="/users">/users</a><td><td>10 items</td></tr>
      </table>

      <h2>Routes</h2>

      <p>
        All HTTP verbs are supported.
      </p>

      <table>
        <tr><td class="verb">GET</td><td><a href="/posts">/posts</a></td></tr>
        <tr><td class="verb">GET</td><td><a href="/posts/1">/posts/1</a></td></tr>
        <tr><td class="verb">GET</td><td><a href="/posts/1/comments">/posts/1/comments</a></td></tr>
        <tr><td class="verb">GET</td><td><a href="/comments?postId=1">/comments?postId=1</a></td></tr>
        <tr><td class="verb">GET</td><td><a href="/posts?userId=1">/posts?userId=1</a></td></tr>
        <tr><td class="verb">POST</td><td>/posts</td></tr>
        <tr><td class="verb">PUT</td><td>/posts/1</td></tr>
        <tr><td class="verb">PATCH</td><td>/posts/1</td></tr>
        <tr><td class="verb">DELETE</td><td>/posts/1</td></tr>
        </tr>
      </table>

      <p>
        View usage <a href="https://github.com/typicode/jsonplaceholder#how-to">examples</a>.
      </p>

      <h2>Use your OWN data</h2>

      <p>
        <a href="https://github.com/typicode/json-server">JSON Server</a> powers this website.
        You can use it to create a <strong>fake API</strong> in seconds with <strong>zero coding</strong>.
      </p>

      <pre>
        <code class="bash">$ npm install -g json-server</code>
      </pre>

      <p id="os-x">
        Hey, you seem to be on OS X. Check also <a href="https://github.com/typicode/katon">katon</a>,
        a development tool I've built.
      </p>
    </div>

    <footer>
      <p>
        Coded and built with heart by <a href="https://github.com/typicode">Typicode</a>.
        Source code available on <a href="https://github.com/typicode/jsonplaceholder">GitHub</a>.
      </p>
    </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-44497010-1', 'typicode.com');
      ga('send', 'pageview');
    </script>

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>
      // Highlight result element
      $('#result').each(function(i, block) {
        hljs.highlightBlock(block);
      });

      // Run example
      $('#run').click(function() {
        var root = 'http://jsonplaceholder.typicode.com';
        $.ajax({
          url: root + '/posts/1',
          method: 'GET'
        }).then(function(data) {
          var str = JSON.stringify(data, null, '\t')
          $('#result').html(
            str.replace(/\n/g, '<br/>')
               .replace(/\\n/g, ' ')
               .replace(/\t/g, '&nbsp;&nbsp;')
          );

          $('#result').each(function(i, block) {
            hljs.highlightBlock(block);
          });
        });
      });

      // Display os-x element only for OS X users
      var isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
      if (isMac) {
        document.getElementById('os-x').style.display = 'block'
      }

      // Tell that jQuery can be used in console
      console.log('You can use jQuery functions')
    </script>
  </body>
</html>