JSONPlaceholder is a simple fake REST API for testing and prototyping.
It's like an image placeholder but for web developers.
JSONPlaceholder is powered by JSON Server.
Most of the time when trying a new library, hacking a prototype or following a tutorial, I found myself in need of some data.
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.
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.
You can find it running here and are free to use it in your developments: https://jsonplaceholder.typicode.com.
I hope you will find it useful.
- No registration
- Zero-config
- Basic API
- "Has many" relationships
- Filters and nested resources
- Cross-domain (CORS and JSONP)
- Supports GET, POST, PUT, PATCH, DELETE and OPTIONS verbs
- HTTP or HTTPS
- Compatible with React, Angular, Vue, Ember, ...
Let's start with resources, JSONPlaceholder provides the usual suspects:
- Posts https://jsonplaceholder.typicode.com/posts/1
- Comments https://jsonplaceholder.typicode.com/comments/1
- Albums https://jsonplaceholder.typicode.com/albums/1
- Photos https://jsonplaceholder.typicode.com/photos/1
- Users https://jsonplaceholder.typicode.com/users/1
- Todos https://jsonplaceholder.typicode.com/todos/1
Here's some code using Fetch API showing what can be done with JSONPlaceholder.
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => console.log(json))
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(json => console.log(json))
// POST adds a random id to the object sent
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => console.log(json))
/* will return
{
id: 101,
title: 'foo',
body: 'bar',
userId: 1
}
*/
Note: the resource will not be really created on the server but it will be faked as if.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
body: JSON.stringify({
id: 1,
title: 'foo',
body: 'bar',
userId: 1
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => console.log(json))
/* will return
{
id: 1,
title: 'foo',
body: 'bar',
userId: 1
}
*/
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PATCH',
body: JSON.stringify({
title: 'foo'
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => console.log(json))
/* will return
{
id: 1,
title: 'foo',
body: 'quia et suscipit [...]',
userId: 1
}
*/
Note: the resource will not be really updated on the server but it will be faked as if.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE'
})
Note: the resource will not be really deleted on the server but it will be faked as if.
Basic filtering is supported through query parameters.
// Will return all the posts that belong to the first user
fetch('https://jsonplaceholder.typicode.com/posts?userId=1')
.then(response => response.json())
.then(json => console.log(json))
One level of nested route is available.
// equivalent to /comments?postId=1
fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
.then(response => response.json())
.then(json => console.log(json))
Here's the list of available nested routes: