├── Procfile
├── .gitignore
├── .gitattributes
├── .travis.yml
├── .github
    ├── FUNDING.yml
    └── build.js
├── public
    ├── favicon.ico
    ├── become_a_patron_button.png
    ├── style.css
    ├── guide.html
    └── index.html
├── index.js
├── CHANGELOG.md
├── src
    └── app.js
├── test
    └── app.js
├── LICENSE
├── package.json
├── README.md
├── seed.js
└── templates
    ├── GUIDE.md
    ├── layout.html
    └── index.html


/Procfile:
--------------------------------------------------------------------------------
1 | web: node index.js
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | **/*.log


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | public/* linguist-documentation
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "7"
4 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: typicode
2 | patreon: typicode
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/typicode/jsonplaceholder/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.github/build.js:
--------------------------------------------------------------------------------
1 | // Convert to markdown
2 | // use layout to
3 | // create index.html
4 | // create guide.html
5 | 


--------------------------------------------------------------------------------
/public/become_a_patron_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/typicode/jsonplaceholder/HEAD/public/become_a_patron_button.png


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const app = require('./src/app')
2 | const port = process.env.PORT || 3000
3 | 
4 | app.listen(port, () => {
5 |   console.log('JSONPlaceholder listening on http://localhost:' + port)
6 | })
7 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # CHANGELOG
2 | 
3 | ## 2018-08-16
4 | 
5 | * Replace [placehold.it](http://placehold.it) (previous name) with [placeholder.com](http://placeholder.com) (new name)
6 | * Use `https` protocol for image URLs
7 | 


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
 1 | const jsonServer = require('json-server')
 2 | const clone = require('clone')
 3 | const data = require('../data.json')
 4 | 
 5 | const app = jsonServer.create()
 6 | const router = jsonServer.router(clone(data), { _isFake: true })
 7 | 
 8 | app.use((req, res, next) => {
 9 |   if (req.path === '/') return next()
10 |   router.db.setState(clone(data))
11 |   next()
12 | })
13 | 
14 | app.use(jsonServer.defaults({
15 |   logger: process.env.NODE_ENV !== 'production'
16 | }))
17 | 
18 | app.use(router)
19 | 
20 | module.exports = app
21 | 


--------------------------------------------------------------------------------
/test/app.js:
--------------------------------------------------------------------------------
 1 | const test = require('tape')
 2 | const request = require('supertest')
 3 | const app = require('../src/app')
 4 | 
 5 | test('GET /', (t) => {
 6 |   request(app)
 7 |     .get('/')
 8 |     .expect(200, (err) => t.end(err))
 9 | })
10 | 
11 | test('POST /', (t) => {
12 |   const max = 10
13 |   t.plan(max * 3)
14 | 
15 |   // Test concurrency
16 |   for (var i = 0; i < max; i++) {
17 |     request(app)
18 |       .post('/posts')
19 |       .send({ body: 'foo' })
20 |       .expect(201, (err) => {
21 |         t.error(err)
22 |         // Check that GET /posts length still returns 100 items
23 |         request(app)
24 |           .get('/posts')
25 |           .expect(200, (err, res) => {
26 |             t.error(err)
27 |             const { length } = res.body
28 |             t.equal(
29 |               length,
30 |               100,
31 |               `more than 100 posts found (${length})`
32 |             )
33 |           })
34 |       })
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 typicode
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jsonplaceholder",
 3 |   "version": "0.3.3",
 4 |   "description": "A simple fake REST API server for testing and prototyping.",
 5 |   "keywords": [
 6 |     "fake",
 7 |     "JSON",
 8 |     "server",
 9 |     "REST",
10 |     "dummy",
11 |     "data",
12 |     "API",
13 |     "testing",
14 |     "prototyping"
15 |   ],
16 |   "homepage": "http://jsonplaceholder.typicode.com",
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "https://github.com/typicode/jsonplaceholder.git"
20 |   },
21 |   "scripts": {
22 |     "build": "node build",
23 |     "build:watch": "nodemon --watch build.js --watch templates -e js,md,html build.js",
24 |     "start": "node index",
25 |     "test": "node test/app"
26 |   },
27 |   "dependencies": {
28 |     "clone": "^2.1.2",
29 |     "json-server": "^0.16.0",
30 |     "marked": "^0.8.0"
31 |   },
32 |   "devDependencies": {
33 |     "Faker": "~0.7.2",
34 |     "husky": "^4.2.2",
35 |     "nodemon": "^2.0.2",
36 |     "pupa": "^2.0.1",
37 |     "rosie": "~2.0.1",
38 |     "showdown": "^1.9.1",
39 |     "supertest": "^4.0.2",
40 |     "tape": "^4.13.0",
41 |     "underscore": "~1.12.1"
42 |   },
43 |   "engines": {
44 |     "node": "14.x"
45 |   },
46 |   "license": "MIT",
47 |   "husky": {
48 |     "hooks": {
49 |       "pre-commit": "npm test"
50 |     }
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JSONPlaceholder
 2 | 
 3 | [JSONPlaceholder](https://jsonplaceholder.typicode.com) is a simple fake REST API for testing and prototyping.
 4 | 
 5 | It's like an [image placeholder](http://placehold.it/) but for web developers.
 6 | 
 7 | JSONPlaceholder is powered by [JSON Server](https://github.com/typicode/json-server).
 8 | 
 9 | <a href="https://www.patreon.com/typicode">
10 |   <img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
11 | </a>
12 | 
13 | ## Why?
14 | 
15 | Most of the time when trying a new library, hacking a prototype or following a tutorial, I found myself in need of some data.
16 | 
17 | I didn't like the idea of using some public API because I had the feeling that I was spending more time registering a client and understanding a complex API than focusing on my task.
18 | 
19 | But I liked the idea of image placeholders for web designers. So I decided to code a little Express server inspired by that and here is JSONPlaceholder.
20 | 
21 | You can find it running here and are free to use it in your developments: https://jsonplaceholder.typicode.com. 
22 | 
23 | I hope you will find it useful.
24 | 
25 | ## Features
26 | 
27 | * No registration
28 | * Zero-config
29 | * Basic API
30 | * "Has many" relationships
31 | * Filters and nested resources
32 | * Cross-domain ([CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) and [JSONP](http://en.wikipedia.org/wiki/JSONP))
33 | * Supports GET, POST, PUT, PATCH, DELETE and OPTIONS verbs
34 | * HTTP or HTTPS
35 | * Compatible with React, Angular, Vue, Ember, ...
36 | 
37 | ## Guide
38 | 
39 | For examples and more, you can visit https://jsonplaceholder.typicode.com
40 | 


--------------------------------------------------------------------------------
/seed.js:
--------------------------------------------------------------------------------
  1 | // Run this to generate data.json
  2 | var fs      = require('fs')
  3 | var _       = require('underscore')
  4 | var Factory = require('rosie').Factory
  5 | var Faker   = require('Faker')
  6 | var db      = {}
  7 | 
  8 | // Credit http://www.paulirish.com/2009/random-hex-color-code-snippets/
  9 | function hex() {
 10 |   return Math.floor(Math.random()*16777215).toString(16)
 11 | }
 12 | 
 13 | // Tables
 14 | db.posts    = []
 15 | db.comments = []
 16 | db.albums   = []
 17 | db.photos   = []
 18 | db.users    = []
 19 | db.todos    = []
 20 | 
 21 | // Factories
 22 | Factory.define('post')
 23 |   .sequence('id')
 24 |   .attr('title', function() {return Faker.Lorem.sentence()})
 25 |   .attr('body', function() {return Faker.Lorem.sentences(4)})
 26 | 
 27 | Factory.define('comment')
 28 |   .sequence('id')
 29 |   .attr('name', function() {return Faker.Lorem.sentence()})
 30 |   .attr('email', function() {return Faker.Internet.email()})
 31 |   .attr('body', function() {return Faker.Lorem.sentences(4)})
 32 | 
 33 | Factory.define('album')
 34 |   .sequence('id')
 35 |   .attr('title', function() {return Faker.Lorem.sentence()})
 36 | 
 37 | Factory.define('photo')
 38 |   .sequence('id')
 39 |   .attr('title', function() {return Faker.Lorem.sentence()})
 40 |   .option('color', hex())
 41 |   .attr('url', [ 'color' ], function(color) {
 42 |     return 'http://placehold.it/600/' + color
 43 |   })
 44 |   .attr('thumbnailUrl', [ 'color' ], function(color) {
 45 |     return 'http://placehold.it/150/' + color
 46 |   })
 47 | 
 48 | Factory.define('todo')
 49 |   .sequence('id')
 50 |   .attr('title', function() {return Faker.Lorem.sentence()})
 51 |   .attr('completed', function() { return _.random(1) ? true : false})
 52 | 
 53 | Factory.define('user')
 54 |   .sequence('id')
 55 |   .after(function(user) {
 56 |     var card = Faker.Helpers.userCard()
 57 |     _.each(card, function(value, key) {
 58 |       user[key] = value
 59 |     })
 60 |   })
 61 | 
 62 | // Has many relationships
 63 | // Users
 64 | _(10).times(function () {
 65 |   var user = Factory.build('user') 
 66 |   db.users.push(user)
 67 | 
 68 |   // Posts
 69 |   _(10).times(function() {
 70 |     // userId not set in create so that it appears as the last
 71 |     // attribute
 72 |     var post = Factory.build('post', {userId: user.id})
 73 |     db.posts.push(post)
 74 |     
 75 |     // Comments
 76 |     _(5).times(function () {
 77 |       var comment = Factory.build('comment', {postId: post.id})
 78 |       db.comments.push(comment)
 79 |     })
 80 |   })
 81 | 
 82 |   // Albums
 83 |   _(10).times(function() {
 84 |     var album = Factory.build('album', {userId: user.id})
 85 |     db.albums.push(album)
 86 | 
 87 |     // Photos
 88 |     _(50).times(function() {
 89 |       var photo = Factory.build('photo', {albumId: album.id})
 90 |       db.photos.push(photo)
 91 |     })
 92 |   })
 93 | 
 94 |   // Todos
 95 |   _(20).times(function() {
 96 |     var todo = Factory.build('todo', {userId: user.id})
 97 |     db.todos.push(todo)
 98 |   })
 99 | })
100 | 
101 | fs.writeFileSync('db.json', JSON.stringify(db, null, 2));
102 | 


--------------------------------------------------------------------------------
/public/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
  3 |     Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  4 |   color: rgba(0, 0, 0, 0.84);
  5 |   line-height: 1.5;
  6 | }
  7 | 
  8 | a {
  9 |   color: #1e87f0;
 10 |   text-decoration: none;
 11 |   border-bottom: 1px solid transparent;
 12 | }
 13 | 
 14 | div.announcement {
 15 |   display: block;
 16 |   padding: 1rem;
 17 |   font-weight: bold;
 18 |   border-width: 0;
 19 |   border-style: solid;
 20 |   border-color: currentColor;
 21 |   text-align: center;
 22 |   background: #ffe0b2;
 23 |   color: #e65100;
 24 | }
 25 | 
 26 | div.announcement a {
 27 |   color: inherit;
 28 |   text-decoration: underline;
 29 | }
 30 | 
 31 | div.announcement a:hover {
 32 |   text-decoration: none;
 33 | }
 34 | 
 35 | a:hover {
 36 |   text-decoration: underline;
 37 | }
 38 | 
 39 | h1 {
 40 |   margin: 0;
 41 |   font-size: 4rem;
 42 |   font-weight: 300;
 43 |   letter-spacing: 0.05em;
 44 | }
 45 | 
 46 | @media (max-width: 768px) {
 47 |   h1 {
 48 |     font-size: 2rem;
 49 |   }
 50 | }
 51 | 
 52 | h2 {
 53 |   margin-top: 6rem;
 54 |   margin-bottom: 1.5rem;
 55 |   font-size: 2rem;
 56 |   font-weight: normal;
 57 | }
 58 | 
 59 | header {
 60 |   position: sticky;
 61 |   top: 0;
 62 |   background: #ffffff;
 63 |   z-index: 999;
 64 | }
 65 | 
 66 | nav {
 67 |   margin: 0;
 68 |   overflow-x: auto;
 69 |   text-align: center;
 70 |   border-width: 0 0 1px 0;
 71 |   border-color: #e4e4e4;
 72 |   border-style: solid;
 73 | }
 74 | 
 75 | nav ul {
 76 |   display: flex;
 77 |   margin: 0;
 78 |   padding: 0;
 79 |   list-style: none;
 80 | }
 81 | 
 82 | nav li:first-of-type {
 83 |   flex-grow: 1;
 84 |   text-align: left;
 85 | }
 86 | 
 87 | nav li:first-of-type a {
 88 |   padding-left: 0;
 89 | }
 90 | 
 91 | nav li:last-of-type a {
 92 |   padding-right: 0;
 93 | }
 94 | 
 95 | nav li a {
 96 |   display: block;
 97 |   padding: 1.5rem;
 98 |   color: inherit;
 99 |   white-space: nowrap;
100 | }
101 | 
102 | .hljs {
103 |   padding: 1rem;
104 | }
105 | 
106 | td:first-child {
107 |   width: 8rem;
108 | }
109 | 
110 | .container {
111 |   max-width: 60rem;
112 |   margin: auto;
113 |   padding: 0 1rem;
114 | }
115 | 
116 | .hero {
117 |   padding: 6rem 0;
118 |   text-align: center;
119 | }
120 | 
121 | .sponsors {
122 |   margin-bottom: 2rem;
123 |   padding: 6rem 0;
124 |   border-width: 1px 0;
125 |   border-style: solid;
126 |   border-color: #e4e4e4;
127 |   text-align: center;
128 | }
129 | 
130 | .sponsors h3 {
131 |   font-size: 1.5rem;
132 |   font-weight: normal;
133 |   margin-top: 0;
134 |   margin-bottom: 2rem;
135 | }
136 | 
137 | .box {
138 |   display: flex;
139 |   justify-content: center;
140 |   align-items: center;
141 |   width: 20rem;
142 |   margin: auto;
143 |   border-radius: 0.2rem;
144 |   border: 1px dashed currentColor;
145 | }
146 | 
147 | .box a {
148 |   display: inline-block;
149 |   padding: 4rem;
150 |   color: inherit;
151 | }
152 | 
153 | .sponsors p {
154 |   margin-top: 2rem;
155 |   margin-bottom: 0;
156 | }
157 | 
158 | main {
159 |   margin-bottom: 6rem;
160 | }
161 | 
162 | #run-button {
163 |   padding: 0.5rem 1rem;
164 |   margin-right: 1rem;
165 |   border-width: 0;
166 |   border-radius: 0.25rem;
167 |   background-color: #1e87f0;
168 |   color: white;
169 |   cursor: pointer;
170 |   transition: all 0.25s;
171 | }
172 | 
173 | #run-message {
174 |   opacity: 0;
175 |   transition: all 0.25s;
176 | }
177 | 
178 | pre {
179 |   /* hack */
180 |   background: #f8f8f8;
181 | }
182 | 
183 | code {
184 |   padding: 2rem !important;
185 | }
186 | 
187 | ul {
188 |   list-style: none;
189 | }
190 | 
191 | #result {
192 |   margin: 1.5rem 0 0;
193 |   height: 176px;
194 |   opacity: 0;
195 |   transition: all 0.25s;
196 | }
197 | 
198 | footer {
199 |   padding: 6rem;
200 |   background-color: #f8fafc;
201 |   text-align: center;
202 | }
203 | 


--------------------------------------------------------------------------------
/templates/GUIDE.md:
--------------------------------------------------------------------------------
  1 | <main>
  2 | 
  3 | ## Guide
  4 | 
  5 | You can use JSONPlaceholder with any type of project that needs to get JSON data (React, Vue, Node, Rails, Swift, Android, ...).
  6 | 
  7 | Below you'll find examples using [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). You can copy paste them in your browser Console to quickly test JSONPlaceholder.
  8 | 
  9 | ### Get a resource
 10 | 
 11 | ```js
 12 | fetch('https://jsonplaceholder.typicode.com/posts/1')
 13 |   .then(response => response.json())
 14 |   .then(json => console.log(json))
 15 | 
 16 | // Output
 17 | {
 18 |   id: 1,
 19 |   title: '[...]',
 20 |   body: '[...]',
 21 |   userId: 1
 22 | }
 23 | ```
 24 | 
 25 | <div id="codefund"><!-- fallback content --></div>
 26 | <script src="https://app.codefund.io/properties/338/funder.js" async="async"></script>
 27 | 
 28 | ### List all resources
 29 | 
 30 | ```js
 31 | fetch('https://jsonplaceholder.typicode.com/posts')
 32 |   .then(response => response.json())
 33 |   .then(json => console.log(json))
 34 | 
 35 | // Output
 36 | [
 37 |   { id: 1, title: '[...]' /* ... */ },
 38 |   /* ... */
 39 |   { id: 100, title: '[...]' /* ... */ }
 40 | ]
 41 | ```
 42 | 
 43 | ### Create a resource
 44 | 
 45 | ```js
 46 | fetch('https://jsonplaceholder.typicode.com/posts', {
 47 |     method: 'POST',
 48 |     body: JSON.stringify({
 49 |       title: 'foo',
 50 |       body: 'bar',
 51 |       userId: 1
 52 |     }),
 53 |     headers: {
 54 |       "Content-type": "application/json; charset=UTF-8"
 55 |     }
 56 |   })
 57 |   .then(response => response.json())
 58 |   .then(json => console.log(json))
 59 | 
 60 | // Output
 61 | {
 62 |   id: 101,
 63 |   title: 'foo',
 64 |   body: 'bar',
 65 |   userId: 1
 66 | }
 67 | ```
 68 | 
 69 | Important: the resource will not be really created on the server but it will be faked as if. In other words, if you try to access a post using 101 as an id, you'll get a 404 error.
 70 | 
 71 | ### Update a resource
 72 | 
 73 | #### With PUT
 74 | 
 75 | ```js
 76 | fetch('https://jsonplaceholder.typicode.com/posts/1', {
 77 |     method: 'PUT',
 78 |     body: JSON.stringify({
 79 |       id: 1,
 80 |       title: 'foo',
 81 |       body: 'bar',
 82 |       userId: 1
 83 |     }),
 84 |     headers: {
 85 |       "Content-type": "application/json; charset=UTF-8"
 86 |     }
 87 |   })
 88 |   .then(response => response.json())
 89 |   .then(json => console.log(json))
 90 | 
 91 | // Output
 92 | {
 93 |   id: 1,
 94 |   title: 'foo',
 95 |   body: 'bar',
 96 |   userId: 1
 97 | }
 98 | ```
 99 | 
100 | #### With PATCH
101 | 
102 | ```js
103 | fetch('https://jsonplaceholder.typicode.com/posts/1', {
104 |     method: 'PATCH',
105 |     body: JSON.stringify({
106 |       title: 'foo'
107 |     }),
108 |     headers: {
109 |       "Content-type": "application/json; charset=UTF-8"
110 |     }
111 |   })
112 |   .then(response => response.json())
113 |   .then(json => console.log(json))
114 | 
115 | // Output
116 | {
117 |   id: 1,
118 |   title: 'foo',
119 |   body: '[...]',
120 |   userId: 1
121 | }
122 | ```
123 | 
124 | Important: the resource will not be really updated on the server but it will be faked as if. 
125 | 
126 | ### Delete a resource
127 | 
128 | ```js
129 | fetch('https://jsonplaceholder.typicode.com/posts/1', {
130 |   method: 'DELETE'
131 | })
132 | ```
133 | 
134 | Important: the resource will not be really deleted on the server but it will be faked as if. 
135 | 
136 | ### Filter resources
137 | 
138 | Basic filtering is supported through query parameters.
139 | 
140 | ```js
141 | // Will return all the posts that belong to the first user
142 | fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
143 |   .then(response => response.json())
144 |   .then(json => console.log(json))
145 | ```
146 | 
147 | ### Nested resources
148 | 
149 | One level of nested route is available.
150 | 
151 | ```js
152 | // Equivalent to /comments?postId=1
153 | fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
154 |   .then(response => response.json())
155 |   .then(json => console.log(json))
156 | ```
157 | 
158 | Available nested routes:
159 | 
160 | * https://jsonplaceholder.typicode.com/posts/1/comments
161 | * https://jsonplaceholder.typicode.com/albums/1/photos
162 | * https://jsonplaceholder.typicode.com/users/1/albums
163 | * https://jsonplaceholder.typicode.com/users/1/todos
164 | * https://jsonplaceholder.typicode.com/users/1/posts
165 | 
166 | </main>
167 | 


--------------------------------------------------------------------------------
/templates/layout.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta
  6 |       name="viewport"
  7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
  8 |     />
  9 |     <link
 10 |       rel="stylesheet"
 11 |       href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.5.0/modern-normalize.min.css"
 12 |     />
 13 |     <link rel="stylesheet" href="./style.css" />
 14 |     <link
 15 |       rel="stylesheet"
 16 |       href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css"
 17 |     />
 18 |     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
 19 |     <link
 20 |       rel="stylesheet"
 21 |       href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
 22 |       integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
 23 |       crossorigin="anonymous"
 24 |     />
 25 |     <script>
 26 |       hljs.initHighlightingOnLoad()
 27 |     </script>
 28 |     <title>JSONPlaceholder - Fake online REST API for developers</title>
 29 |   </head>
 30 | 
 31 |   <body>
 32 |     <header>
 33 |       <div class="announcement">
 34 |         This service is maintained and provided for free, please consider
 35 |         supporting it on
 36 |         <a href="https://github.com/users/typicode/sponsorship"
 37 |           >GitHub Sponsors</a
 38 |         >
 39 |         ❤️
 40 |       </div>
 41 |       <nav class="container">
 42 |         <ul>
 43 |           <li><a href="/">JSONPlaceholder</a></li>
 44 |           <li><a href="/guide.html">Guide</a></li>
 45 |           <li><a href="https://github.com/typicode">GitHub</a></li>
 46 |           <li>
 47 |             <a href="https://my-json-server.typicode.com">My JSON Server</a>
 48 |           </li>
 49 |         </ul>
 50 |       </nav>
 51 |     </header>
 52 | 
 53 |     <div class="container">
 54 |       {content}
 55 |     </div>
 56 | 
 57 |     <!-- Footer -->
 58 |     <footer>
 59 |       <div class="container">
 60 |         <div style="margin-bottom: 2rem;">
 61 |           <!-- <a href="https://www.patreon.com/bePatron?c=784328"> -->
 62 |           <!--   <img -->
 63 |           <!--     src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" -->
 64 |           <!--     width="217" -->
 65 |           <!--   /> -->
 66 |           <!-- </a> -->
 67 |           <a href="https://github.com/users/typicode/sponsorship">
 68 |             <i class="fab fa-github-alt"></i>
 69 |             <strong>Sponsor this project on GitHub</strong>
 70 |           </a>
 71 |         </div>
 72 |         <div>
 73 |           Coded and built with ❤️ by
 74 |           <a href="https://github.com/typicode">typicode</a>
 75 |           <br />Source code and CHANGELOG available on
 76 |           <a href="https://github.com/typicode/jsonplaceholder">GitHub</a>
 77 |         </div>
 78 |       </div>
 79 |     </footer>
 80 | 
 81 |     <!-- Analytics -->
 82 |     <script>
 83 |       ;(function (i, s, o, g, r, a, m) {
 84 |         i['GoogleAnalyticsObject'] = r
 85 |         ;(i[r] =
 86 |           i[r] ||
 87 |           function () {
 88 |             ;(i[r].q = i[r].q || []).push(arguments)
 89 |           }),
 90 |           (i[r].l = 1 * new Date())
 91 |         ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
 92 |         a.async = 1
 93 |         a.src = g
 94 |         m.parentNode.insertBefore(a, m)
 95 |       })(
 96 |         window,
 97 |         document,
 98 |         'script',
 99 |         '//www.google-analytics.com/analytics.js',
100 |         'ga',
101 |       )
102 |       ga('create', 'UA-44497010-1', 'typicode.com')
103 |       ga('send', 'pageview')
104 |       var trackOutboundLink = function (url) {
105 |         ga('send', 'event', 'outbound', 'click', url, {
106 |           transport: 'beacon',
107 |         })
108 |       }
109 |     </script>
110 | 
111 |     <script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
112 |     <script>
113 |       // Use http or https based on location.protocol
114 |       var example = document.getElementById('example')
115 |       example.textContent = example.textContent.replace(
116 |         'http:',
117 |         location.protocol,
118 |       )
119 | 
120 |       // Highlight result element
121 |       var result = document.getElementById('result')
122 |       hljs.highlightBlock(result)
123 | 
124 |       // Run example
125 |       var runButton = document.getElementById('run-button')
126 |       runButton.onclick = function () {
127 |         var root = location.protocol + '//jsonplaceholder.typicode.com'
128 |         var runMessage = document.getElementById('run-message')
129 | 
130 |         // Hide or disable things during API call
131 |         runButton.disabled = true
132 |         runMessage.style.opacity = 0
133 |         result.style.opacity = 0
134 | 
135 |         fetch('https://jsonplaceholder.typicode.com/todos/1')
136 |           .then((response) => response.json())
137 |           .then((json) => {
138 |             var str = JSON.stringify(json, null, '\t')
139 | 
140 |             // Format result
141 |             result.innerHTML = str
142 |               .replace(/\n/g, '<br/>')
143 |               .replace(/\\n/g, ' ')
144 |               .replace(/\t/g, '&nbsp;&nbsp;')
145 | 
146 |             hljs.highlightBlock(result)
147 | 
148 |             // Show and enable things after API call
149 |             runButton.disabled = false
150 |             runMessage.style.opacity = 1
151 |             result.style.opacity = 1
152 |           })
153 |       }
154 |     </script>
155 |   </body>
156 | </html>
157 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
  1 |   <!-- Hero -->
  2 |   <div class="hero">
  3 |     <div class="container">
  4 |       <h1>
  5 |         JSONPlaceholder
  6 |       </h1>
  7 | 
  8 |       <p class="subtitle">
  9 |         Fake Online REST API for Testing and Prototyping
 10 |         <br> <b>Serving ~350M requests per month</b>
 11 |         <br> Powered by
 12 |         <a href="https://github.com/typicode/json-server">JSON Server</a>
 13 |         +
 14 |         <a href="https://github.com/typicode/lowdb">LowDB</a>
 15 |       </p>
 16 | 
 17 |       <!-- <p> -->
 18 |       <!--   <a href="https://www.patreon.com/bePatron?c=784328"> -->
 19 |       <!--     <img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="217"> -->
 20 |       <!--   </a> -->
 21 |       <!-- </p> -->
 22 |     </div>
 23 |   </div>
 24 | 
 25 |   <!-- Sponsors -->
 26 |   <div class="sponsors">
 27 |     <h3>Gold Sponsors</h3>
 28 | 
 29 |     <p>
 30 |       <a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=typicode" target="_blank">
 31 |         <img src="https://i.imgur.com/IBItATn.png" height="70px">
 32 |       </a>
 33 |     </p>
 34 |     
 35 |     <p>
 36 |       <a href="https://www.checklyhq.com/?utm_source=jsonplaceholder" target="_blank">
 37 |         <img src="https://i.imgur.com/qS8XyfG.png" height="70px">
 38 |       </a>
 39 |     </p>
 40 | 
 41 |     <p>
 42 |       <a href="https://www.patreon.com/bePatron?c=784328">Your Company Logo Here</a>
 43 |     </p>
 44 |   </div>
 45 | 
 46 |   <!-- Main -->
 47 |   <div class="container">
 48 |     <main>
 49 |       <!-- Intro -->
 50 |       <h2>Intro</h2>
 51 |       <p>
 52 |         JSONPlaceholder is a free online REST API that you can use whenever you need some fake data.
 53 |         <br>It's great for tutorials, testing new libraries, sharing code examples, ...
 54 |       </p>
 55 | 
 56 |       <!-- Example -->
 57 |       <h2>Example</h2>
 58 |       <p>
 59 |         Run this code in a console or from any site:
 60 |       </p>
 61 | 
 62 |       <pre><code id="example" class="javascript">fetch('https://jsonplaceholder.typicode.com/todos/1')
 63 |   .then(response => response.json())
 64 |   .then(json => console.log(json))
 65 | </code></pre>
 66 | 
 67 |       <p>
 68 |         <button id="run-button">Try it</button>
 69 |       </p>
 70 | 
 71 |       <pre><code id="result" class="json"></code></pre>
 72 |       <span id="run-message">Congrats you've made your first call to JSONPlaceholder! 😃 🎉</span>
 73 | 
 74 |       <p>
 75 |         <strong>Tip</strong>: you can use
 76 |         <b>
 77 |           http://
 78 |         </b> or
 79 |         <b>
 80 |           https://
 81 |         </b> when making requests to JSONPlaceholder.
 82 |       </p>
 83 | 
 84 |       <div id="codefund"><!-- fallback content --></div>
 85 |       <script src="https://app.codefund.io/properties/338/funder.js" async="async"></script>
 86 | 
 87 |       <!-- Resources -->
 88 |       <h2>Resources</h2>
 89 |       <p>
 90 |         JSONPlaceholder comes with a set of 6 common resources:
 91 |       </p>
 92 | 
 93 |       <table class="resources">
 94 |         <tr>
 95 |           <td>
 96 |             <a href="/posts">/posts</a>
 97 |           </td>
 98 |           <td>100 posts</td>
 99 |         </tr>
100 |         <tr>
101 |           <td>
102 |             <a href="/comments">/comments</a>
103 |           </td>
104 |           <td>500 comments</td>
105 |         </tr>
106 |         <tr>
107 |           <td>
108 |             <a href="/albums">/albums</a>
109 |           </td>
110 |           <td>100 albums</td>
111 |         </tr>
112 |         <tr>
113 |           <td>
114 |             <a href="/photos">/photos</a>
115 |           </td>
116 |           <td>5000 photos</td>
117 |         </tr>
118 |         <tr>
119 |           <td>
120 |             <a href="/todos">/todos</a>
121 |           </td>
122 |           <td>200 todos</td>
123 |         </tr>
124 |         <tr>
125 |           <td>
126 |             <a href="/users">/users</a>
127 |           </td>
128 |           <td>10 users</td>
129 |         </tr>
130 |       </table>
131 | 
132 |       <p>
133 |         <strong>Note</strong>: resources have relations. For example:
134 |         <b>posts</b> have many
135 |         <b>comments</b>,
136 |         <b>albums</b> have many
137 |         <b>photos</b>, ... see below for routes examples.
138 |       </p>
139 | 
140 |       <!-- Routes -->
141 |       <h2>Routes</h2>
142 |       <p>
143 |         All HTTP methods are supported.
144 |       </p>
145 | 
146 |       <table>
147 |         <tr>
148 |           <td>GET</td>
149 |           <td>
150 |             <a href="/posts">/posts</a>
151 |           </td>
152 |         </tr>
153 |         <tr>
154 |           <td>GET</td>
155 |           <td>
156 |             <a href="/posts/1">/posts/1</a>
157 |           </td>
158 |         </tr>
159 |         <tr>
160 |           <td>GET</td>
161 |           <td>
162 |             <a href="/posts/1/comments">/posts/1/comments</a>
163 |           </td>
164 |         </tr>
165 |         <tr>
166 |           <td>GET</td>
167 |           <td>
168 |             <a href="/comments?postId=1">/comments?postId=1</a>
169 |           </td>
170 |         </tr>
171 |         <tr>
172 |           <td>GET</td>
173 |           <td>
174 |             <a href="/posts?userId=1">/posts?userId=1</a>
175 |           </td>
176 |         </tr>
177 |         <tr>
178 |           <td>POST</td>
179 |           <td>/posts</td>
180 |         </tr>
181 |         <tr>
182 |           <td>PUT</td>
183 |           <td>/posts/1</td>
184 |         </tr>
185 |         <tr>
186 |           <td>PATCH</td>
187 |           <td>/posts/1</td>
188 |         </tr>
189 |         <tr>
190 |           <td>DELETE</td>
191 |           <td>/posts/1</td>
192 |         </tr>
193 |         </tr>
194 |       </table>
195 | 
196 |       <p>
197 |         <strong>Note</strong>: you can view detailed examples
198 |         <a href="guide.html">here</a>.
199 |       </p>
200 | 
201 |       <!-- JSON Server -->
202 |       <h2>Use your own data</h2>
203 |       <!-- <p>
204 |         <a href="https://github.com/typicode/json-server">JSON Server</a>
205 |         powers this website. You can use it to create the same fake API in less than
206 |         <strong>30 seconds</strong> with your own data.
207 |       </p>
208 | 
209 |       <pre><code class="bash">npm install json-server</code></pre> -->
210 | 
211 |       <p>
212 |         With <a href="https://my-json-server.typicode.com">My JSON Server</a> online service and a simple GitHub repo, you can have your own online fake REST server in seconds.
213 |       </p>
214 |     </main>
215 |   </div>
216 | 


--------------------------------------------------------------------------------
/public/guide.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta
  6 |       name="viewport"
  7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
  8 |     />
  9 |     <link
 10 |       rel="stylesheet"
 11 |       href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.5.0/modern-normalize.min.css"
 12 |     />
 13 |     <link rel="stylesheet" href="./style.css" />
 14 |     <link
 15 |       rel="stylesheet"
 16 |       href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css"
 17 |     />
 18 |     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
 19 |     <link
 20 |       rel="stylesheet"
 21 |       href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
 22 |       integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
 23 |       crossorigin="anonymous"
 24 |     />
 25 |     <script>
 26 |       hljs.initHighlightingOnLoad()
 27 |     </script>
 28 |     <title>JSONPlaceholder - Fake online REST API for developers</title>
 29 |   </head>
 30 | 
 31 |   <body>
 32 |     <header>
 33 |       <div class="announcement">
 34 |         This service is maintained and provided for free, please consider
 35 |         supporting it on
 36 |         <a href="https://github.com/users/typicode/sponsorship"
 37 |           >GitHub Sponsors</a
 38 |         >
 39 |         ❤️
 40 |       </div>
 41 |       <nav class="container">
 42 |         <ul>
 43 |           <li><a href="/">JSONPlaceholder</a></li>
 44 |           <li><a href="/guide.html">Guide</a></li>
 45 |           <li><a href="https://github.com/typicode">GitHub</a></li>
 46 |           <li>
 47 |             <a href="https://my-json-server.typicode.com">My JSON Server</a>
 48 |           </li>
 49 |         </ul>
 50 |       </nav>
 51 |     </header>
 52 | 
 53 |     <div class="container">
 54 |       <p><main></p>
 55 | <h2 id="guide">Guide</h2>
 56 | <p>You can use JSONPlaceholder with any type of project that needs to get JSON data (React, Vue, Node, Rails, Swift, Android, …).</p>
 57 | <p>Below you'll find examples using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. You can copy paste them in your browser Console to quickly test JSONPlaceholder.</p>
 58 | <h3 id="getaresource">Get a resource</h3>
 59 | <pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts/1')
 60 |   .then(response =&gt; response.json())
 61 |   .then(json =&gt; console.log(json))
 62 | 
 63 | // Output
 64 | {
 65 |   id: 1,
 66 |   title: '[...]',
 67 |   body: '[...]',
 68 |   userId: 1
 69 | }
 70 | </code></pre>
 71 | <div id="codefund"><!-- fallback content --></div>
 72 | <script src="https://app.codefund.io/properties/338/funder.js" async="async"></script>
 73 | <h3 id="listallresources">List all resources</h3>
 74 | <pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts')
 75 |   .then(response =&gt; response.json())
 76 |   .then(json =&gt; console.log(json))
 77 | 
 78 | // Output
 79 | [
 80 |   { id: 1, title: '[...]' /* ... */ },
 81 |   /* ... */
 82 |   { id: 100, title: '[...]' /* ... */ }
 83 | ]
 84 | </code></pre>
 85 | <h3 id="createaresource">Create a resource</h3>
 86 | <pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts', {
 87 |     method: 'POST',
 88 |     body: JSON.stringify({
 89 |       title: 'foo',
 90 |       body: 'bar',
 91 |       userId: 1
 92 |     }),
 93 |     headers: {
 94 |       "Content-type": "application/json; charset=UTF-8"
 95 |     }
 96 |   })
 97 |   .then(response =&gt; response.json())
 98 |   .then(json =&gt; console.log(json))
 99 | 
100 | // Output
101 | {
102 |   id: 101,
103 |   title: 'foo',
104 |   body: 'bar',
105 |   userId: 1
106 | }
107 | </code></pre>
108 | <p>Important: the resource will not be really created on the server but it will be faked as if. In other words, if you try to access a post using 101 as an id, you'll get a 404 error.</p>
109 | <h3 id="updatearesource">Update a resource</h3>
110 | <h4 id="withput">With PUT</h4>
111 | <pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts/1', {
112 |     method: 'PUT',
113 |     body: JSON.stringify({
114 |       id: 1,
115 |       title: 'foo',
116 |       body: 'bar',
117 |       userId: 1
118 |     }),
119 |     headers: {
120 |       "Content-type": "application/json; charset=UTF-8"
121 |     }
122 |   })
123 |   .then(response =&gt; response.json())
124 |   .then(json =&gt; console.log(json))
125 | 
126 | // Output
127 | {
128 |   id: 1,
129 |   title: 'foo',
130 |   body: 'bar',
131 |   userId: 1
132 | }
133 | </code></pre>
134 | <h4 id="withpatch">With PATCH</h4>
135 | <pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts/1', {
136 |     method: 'PATCH',
137 |     body: JSON.stringify({
138 |       title: 'foo'
139 |     }),
140 |     headers: {
141 |       "Content-type": "application/json; charset=UTF-8"
142 |     }
143 |   })
144 |   .then(response =&gt; response.json())
145 |   .then(json =&gt; console.log(json))
146 | 
147 | // Output
148 | {
149 |   id: 1,
150 |   title: 'foo',
151 |   body: '[...]',
152 |   userId: 1
153 | }
154 | </code></pre>
155 | <p>Important: the resource will not be really updated on the server but it will be faked as if. </p>
156 | <h3 id="deletearesource">Delete a resource</h3>
157 | <pre><code class="js language-js">fetch('https://jsonplaceholder.typicode.com/posts/1', {
158 |   method: 'DELETE'
159 | })
160 | </code></pre>
161 | <p>Important: the resource will not be really deleted on the server but it will be faked as if. </p>
162 | <h3 id="filterresources">Filter resources</h3>
163 | <p>Basic filtering is supported through query parameters.</p>
164 | <pre><code class="js language-js">// Will return all the posts that belong to the first user
165 | fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
166 |   .then(response =&gt; response.json())
167 |   .then(json =&gt; console.log(json))
168 | </code></pre>
169 | <h3 id="nestedresources">Nested resources</h3>
170 | <p>One level of nested route is available.</p>
171 | <pre><code class="js language-js">// Equivalent to /comments?postId=1
172 | fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
173 |   .then(response =&gt; response.json())
174 |   .then(json =&gt; console.log(json))
175 | </code></pre>
176 | <p>Available nested routes:</p>
177 | <ul>
178 | <li><a href="https://jsonplaceholder.typicode.com/posts/1/comments">https://jsonplaceholder.typicode.com/posts/1/comments</a></li>
179 | <li><a href="https://jsonplaceholder.typicode.com/albums/1/photos">https://jsonplaceholder.typicode.com/albums/1/photos</a></li>
180 | <li><a href="https://jsonplaceholder.typicode.com/users/1/albums">https://jsonplaceholder.typicode.com/users/1/albums</a></li>
181 | <li><a href="https://jsonplaceholder.typicode.com/users/1/todos">https://jsonplaceholder.typicode.com/users/1/todos</a></li>
182 | <li><a href="https://jsonplaceholder.typicode.com/users/1/posts">https://jsonplaceholder.typicode.com/users/1/posts</a></li>
183 | </ul>
184 | <p></main></p>
185 |     </div>
186 | 
187 |     <!-- Footer -->
188 |     <footer>
189 |       <div class="container">
190 |         <div style="margin-bottom: 2rem;">
191 |           <!-- <a href="https://www.patreon.com/bePatron?c=784328"> -->
192 |           <!--   <img -->
193 |           <!--     src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" -->
194 |           <!--     width="217" -->
195 |           <!--   /> -->
196 |           <!-- </a> -->
197 |           <a href="https://github.com/users/typicode/sponsorship">
198 |             <i class="fab fa-github-alt"></i>
199 |             <strong>Sponsor this project on GitHub</strong>
200 |           </a>
201 |         </div>
202 |         <div>
203 |           Coded and built with ❤️ by
204 |           <a href="https://github.com/typicode">typicode</a>
205 |           <br />Source code and CHANGELOG available on
206 |           <a href="https://github.com/typicode/jsonplaceholder">GitHub</a>
207 |         </div>
208 |       </div>
209 |     </footer>
210 | 
211 |     <!-- Analytics -->
212 |     <script>
213 |       ;(function (i, s, o, g, r, a, m) {
214 |         i['GoogleAnalyticsObject'] = r
215 |         ;(i[r] =
216 |           i[r] ||
217 |           function () {
218 |             ;(i[r].q = i[r].q || []).push(arguments)
219 |           }),
220 |           (i[r].l = 1 * new Date())
221 |         ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
222 |         a.async = 1
223 |         a.src = g
224 |         m.parentNode.insertBefore(a, m)
225 |       })(
226 |         window,
227 |         document,
228 |         'script',
229 |         '//www.google-analytics.com/analytics.js',
230 |         'ga',
231 |       )
232 |       ga('create', 'UA-44497010-1', 'typicode.com')
233 |       ga('send', 'pageview')
234 |       var trackOutboundLink = function (url) {
235 |         ga('send', 'event', 'outbound', 'click', url, {
236 |           transport: 'beacon',
237 |         })
238 |       }
239 |     </script>
240 | 
241 |     <script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
242 |     <script>
243 |       // Use http or https based on location.protocol
244 |       var example = document.getElementById('example')
245 |       example.textContent = example.textContent.replace(
246 |         'http:',
247 |         location.protocol,
248 |       )
249 | 
250 |       // Highlight result element
251 |       var result = document.getElementById('result')
252 |       hljs.highlightBlock(result)
253 | 
254 |       // Run example
255 |       var runButton = document.getElementById('run-button')
256 |       runButton.onclick = function () {
257 |         var root = location.protocol + '//jsonplaceholder.typicode.com'
258 |         var runMessage = document.getElementById('run-message')
259 | 
260 |         // Hide or disable things during API call
261 |         runButton.disabled = true
262 |         runMessage.style.opacity = 0
263 |         result.style.opacity = 0
264 | 
265 |         fetch('https://jsonplaceholder.typicode.com/todos/1')
266 |           .then((response) => response.json())
267 |           .then((json) => {
268 |             var str = JSON.stringify(json, null, '\t')
269 | 
270 |             // Format result
271 |             result.innerHTML = str
272 |               .replace(/\n/g, '<br/>')
273 |               .replace(/\\n/g, ' ')
274 |               .replace(/\t/g, '&nbsp;&nbsp;')
275 | 
276 |             hljs.highlightBlock(result)
277 | 
278 |             // Show and enable things after API call
279 |             runButton.disabled = false
280 |             runMessage.style.opacity = 1
281 |             result.style.opacity = 1
282 |           })
283 |       }
284 |     </script>
285 |   </body>
286 | </html>
287 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta
  6 |       name="viewport"
  7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
  8 |     />
  9 |     <link
 10 |       rel="stylesheet"
 11 |       href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.5.0/modern-normalize.min.css"
 12 |     />
 13 |     <link rel="stylesheet" href="./style.css" />
 14 |     <link
 15 |       rel="stylesheet"
 16 |       href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css"
 17 |     />
 18 |     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
 19 |     <link
 20 |       rel="stylesheet"
 21 |       href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
 22 |       integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
 23 |       crossorigin="anonymous"
 24 |     />
 25 |     <script>
 26 |       hljs.initHighlightingOnLoad()
 27 |     </script>
 28 |     <title>JSONPlaceholder - Fake online REST API for developers</title>
 29 |   </head>
 30 | 
 31 |   <body>
 32 |     <header>
 33 |       <div class="announcement">
 34 |         This service is maintained and provided for free, please consider
 35 |         supporting it on
 36 |         <a href="https://github.com/users/typicode/sponsorship"
 37 |           >GitHub Sponsors</a
 38 |         >
 39 |         ❤️
 40 |       </div>
 41 |       <nav class="container">
 42 |         <ul>
 43 |           <li><a href="/">JSONPlaceholder</a></li>
 44 |           <li><a href="/guide.html">Guide</a></li>
 45 |           <li><a href="https://github.com/typicode">GitHub</a></li>
 46 |           <li>
 47 |             <a href="https://my-json-server.typicode.com">My JSON Server</a>
 48 |           </li>
 49 |         </ul>
 50 |       </nav>
 51 |     </header>
 52 | 
 53 |     <div class="container">
 54 |         <!-- Hero -->
 55 |   <div class="hero">
 56 |     <div class="container">
 57 |       <h1>
 58 |         JSONPlaceholder
 59 |       </h1>
 60 | 
 61 |       <p class="subtitle">
 62 |         Fake Online REST API for Testing and Prototyping
 63 |         <br> <b>Serving ~350M requests per month</b>
 64 |         <br> Powered by
 65 |         <a href="https://github.com/typicode/json-server">JSON Server</a>
 66 |         +
 67 |         <a href="https://github.com/typicode/lowdb">LowDB</a>
 68 |       </p>
 69 | 
 70 |       <!-- <p> -->
 71 |       <!--   <a href="https://www.patreon.com/bePatron?c=784328"> -->
 72 |       <!--     <img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="217"> -->
 73 |       <!--   </a> -->
 74 |       <!-- </p> -->
 75 |     </div>
 76 |   </div>
 77 | 
 78 |   <!-- Sponsors -->
 79 |   <div class="sponsors">
 80 |     <h3>Gold Sponsors</h3>
 81 | 
 82 |     <p>
 83 |       <a href="https://tryretool.com/?utm_source=sponsor&utm_campaign=typicode" target="_blank">
 84 |         <img src="https://i.imgur.com/IBItATn.png" height="70px">
 85 |       </a>
 86 |     </p>
 87 |     
 88 |     <p>
 89 |       <a href="https://www.checklyhq.com/?utm_source=jsonplaceholder" target="_blank">
 90 |         <img src="https://i.imgur.com/qS8XyfG.png" height="70px">
 91 |       </a>
 92 |     </p>
 93 | 
 94 |     <p>
 95 |       <a href="https://www.patreon.com/bePatron?c=784328">Your Company Logo Here</a>
 96 |     </p>
 97 |   </div>
 98 | 
 99 |   <!-- Main -->
100 |   <div class="container">
101 |     <main>
102 |       <!-- Intro -->
103 |       <h2>Intro</h2>
104 |       <p>
105 |         JSONPlaceholder is a free online REST API that you can use whenever you need some fake data.
106 |         <br>It's great for tutorials, testing new libraries, sharing code examples, ...
107 |       </p>
108 | 
109 |       <!-- Example -->
110 |       <h2>Example</h2>
111 |       <p>
112 |         Run this code in a console or from any site:
113 |       </p>
114 | 
115 |       <pre><code id="example" class="javascript">fetch('https://jsonplaceholder.typicode.com/todos/1')
116 |   .then(response => response.json())
117 |   .then(json => console.log(json))
118 | </code></pre>
119 | 
120 |       <p>
121 |         <button id="run-button">Try it</button>
122 |       </p>
123 | 
124 |       <pre><code id="result" class="json"></code></pre>
125 |       <span id="run-message">Congrats you've made your first call to JSONPlaceholder! 😃 🎉</span>
126 | 
127 |       <p>
128 |         <strong>Tip</strong>: you can use
129 |         <b>
130 |           http://
131 |         </b> or
132 |         <b>
133 |           https://
134 |         </b> when making requests to JSONPlaceholder.
135 |       </p>
136 | 
137 |       <div id="codefund"><!-- fallback content --></div>
138 |       <script src="https://app.codefund.io/properties/338/funder.js" async="async"></script>
139 | 
140 |       <!-- Resources -->
141 |       <h2>Resources</h2>
142 |       <p>
143 |         JSONPlaceholder comes with a set of 6 common resources:
144 |       </p>
145 | 
146 |       <table class="resources">
147 |         <tr>
148 |           <td>
149 |             <a href="/posts">/posts</a>
150 |           </td>
151 |           <td>100 posts</td>
152 |         </tr>
153 |         <tr>
154 |           <td>
155 |             <a href="/comments">/comments</a>
156 |           </td>
157 |           <td>500 comments</td>
158 |         </tr>
159 |         <tr>
160 |           <td>
161 |             <a href="/albums">/albums</a>
162 |           </td>
163 |           <td>100 albums</td>
164 |         </tr>
165 |         <tr>
166 |           <td>
167 |             <a href="/photos">/photos</a>
168 |           </td>
169 |           <td>5000 photos</td>
170 |         </tr>
171 |         <tr>
172 |           <td>
173 |             <a href="/todos">/todos</a>
174 |           </td>
175 |           <td>200 todos</td>
176 |         </tr>
177 |         <tr>
178 |           <td>
179 |             <a href="/users">/users</a>
180 |           </td>
181 |           <td>10 users</td>
182 |         </tr>
183 |       </table>
184 | 
185 |       <p>
186 |         <strong>Note</strong>: resources have relations. For example:
187 |         <b>posts</b> have many
188 |         <b>comments</b>,
189 |         <b>albums</b> have many
190 |         <b>photos</b>, ... see below for routes examples.
191 |       </p>
192 | 
193 |       <!-- Routes -->
194 |       <h2>Routes</h2>
195 |       <p>
196 |         All HTTP methods are supported.
197 |       </p>
198 | 
199 |       <table>
200 |         <tr>
201 |           <td>GET</td>
202 |           <td>
203 |             <a href="/posts">/posts</a>
204 |           </td>
205 |         </tr>
206 |         <tr>
207 |           <td>GET</td>
208 |           <td>
209 |             <a href="/posts/1">/posts/1</a>
210 |           </td>
211 |         </tr>
212 |         <tr>
213 |           <td>GET</td>
214 |           <td>
215 |             <a href="/posts/1/comments">/posts/1/comments</a>
216 |           </td>
217 |         </tr>
218 |         <tr>
219 |           <td>GET</td>
220 |           <td>
221 |             <a href="/comments?postId=1">/comments?postId=1</a>
222 |           </td>
223 |         </tr>
224 |         <tr>
225 |           <td>GET</td>
226 |           <td>
227 |             <a href="/posts?userId=1">/posts?userId=1</a>
228 |           </td>
229 |         </tr>
230 |         <tr>
231 |           <td>POST</td>
232 |           <td>/posts</td>
233 |         </tr>
234 |         <tr>
235 |           <td>PUT</td>
236 |           <td>/posts/1</td>
237 |         </tr>
238 |         <tr>
239 |           <td>PATCH</td>
240 |           <td>/posts/1</td>
241 |         </tr>
242 |         <tr>
243 |           <td>DELETE</td>
244 |           <td>/posts/1</td>
245 |         </tr>
246 |         </tr>
247 |       </table>
248 | 
249 |       <p>
250 |         <strong>Note</strong>: you can view detailed examples
251 |         <a href="/guide/">here</a>.
252 |       </p>
253 | 
254 |       <!-- JSON Server -->
255 |       <h2>Use your own data</h2>
256 |       <!-- <p>
257 |         <a href="https://github.com/typicode/json-server">JSON Server</a>
258 |         powers this website. You can use it to create the same fake API in less than
259 |         <strong>30 seconds</strong> with your own data.
260 |       </p>
261 | 
262 |       <pre><code class="bash">npm install json-server</code></pre> -->
263 | 
264 |       <p>
265 |         With <a href="https://my-json-server.typicode.com">My JSON Server</a> online service and a simple GitHub repo, you can have your own online fake REST server in seconds.
266 |       </p>
267 |     </main>
268 |   </div>
269 | 
270 |     </div>
271 | 
272 |     <!-- Footer -->
273 |     <footer>
274 |       <div class="container">
275 |         <div style="margin-bottom: 2rem;">
276 |           <!-- <a href="https://www.patreon.com/bePatron?c=784328"> -->
277 |           <!--   <img -->
278 |           <!--     src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" -->
279 |           <!--     width="217" -->
280 |           <!--   /> -->
281 |           <!-- </a> -->
282 |           <a href="https://github.com/users/typicode/sponsorship">
283 |             <i class="fab fa-github-alt"></i>
284 |             <strong>Sponsor this project on GitHub</strong>
285 |           </a>
286 |         </div>
287 |         <div>
288 |           Coded and built with ❤️ by
289 |           <a href="https://github.com/typicode">typicode</a>
290 |           <br />Source code and CHANGELOG available on
291 |           <a href="https://github.com/typicode/jsonplaceholder">GitHub</a>
292 |         </div>
293 |       </div>
294 |     </footer>
295 | 
296 |     <!-- Analytics -->
297 |     <script>
298 |       ;(function (i, s, o, g, r, a, m) {
299 |         i['GoogleAnalyticsObject'] = r
300 |         ;(i[r] =
301 |           i[r] ||
302 |           function () {
303 |             ;(i[r].q = i[r].q || []).push(arguments)
304 |           }),
305 |           (i[r].l = 1 * new Date())
306 |         ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
307 |         a.async = 1
308 |         a.src = g
309 |         m.parentNode.insertBefore(a, m)
310 |       })(
311 |         window,
312 |         document,
313 |         'script',
314 |         '//www.google-analytics.com/analytics.js',
315 |         'ga',
316 |       )
317 |       ga('create', 'UA-44497010-1', 'typicode.com')
318 |       ga('send', 'pageview')
319 |       var trackOutboundLink = function (url) {
320 |         ga('send', 'event', 'outbound', 'click', url, {
321 |           transport: 'beacon',
322 |         })
323 |       }
324 |     </script>
325 | 
326 |     <script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
327 |     <script>
328 |       // Use http or https based on location.protocol
329 |       var example = document.getElementById('example')
330 |       example.textContent = example.textContent.replace(
331 |         'http:',
332 |         location.protocol,
333 |       )
334 | 
335 |       // Highlight result element
336 |       var result = document.getElementById('result')
337 |       hljs.highlightBlock(result)
338 | 
339 |       // Run example
340 |       var runButton = document.getElementById('run-button')
341 |       runButton.onclick = function () {
342 |         var root = location.protocol + '//jsonplaceholder.typicode.com'
343 |         var runMessage = document.getElementById('run-message')
344 | 
345 |         // Hide or disable things during API call
346 |         runButton.disabled = true
347 |         runMessage.style.opacity = 0
348 |         result.style.opacity = 0
349 | 
350 |         fetch('https://jsonplaceholder.typicode.com/todos/1')
351 |           .then((response) => response.json())
352 |           .then((json) => {
353 |             var str = JSON.stringify(json, null, '\t')
354 | 
355 |             // Format result
356 |             result.innerHTML = str
357 |               .replace(/\n/g, '<br/>')
358 |               .replace(/\\n/g, ' ')
359 |               .replace(/\t/g, '&nbsp;&nbsp;')
360 | 
361 |             hljs.highlightBlock(result)
362 | 
363 |             // Show and enable things after API call
364 |             runButton.disabled = false
365 |             runMessage.style.opacity = 1
366 |             result.style.opacity = 1
367 |           })
368 |       }
369 |     </script>
370 |   </body>
371 | </html>
372 | 


--------------------------------------------------------------------------------