Read Posts using Dev.to API: A Guide

The Dev.to API is a fantastic resource for developers who want to programmatically access and display posts from the platform. Whether you're building a personal blog aggregator, a portfolio, or just exploring the API, this guide will show you how to read posts from Dev.to using JavaScript and TypeScript with the axios library. In this article, we’ll focus exclusively on reading posts—fetching lists of posts, retrieving individual posts by ID or slug, and using query parameters to filter and paginate results. Table of Contents 1. Introduction to Reading Posts 2. Setting Up Axios 3. Fetching a List of Posts Without an API Key With Pagination (page and per_page) 4. Fetching a Single Post By Post ID By Post Slug 5. Using Query Parameters Filtering by Username Filtering by Tags 6. Conclusion 1. Introduction to Reading Posts The Dev.to API provides several endpoints for reading posts: Fetch a list of posts: Retrieve multiple posts, optionally filtered by username, tags, or pagination. Fetch a single post: Retrieve a specific post by its ID or slug. All these endpoints return data in JSON format, making it easy to work with in JavaScript or TypeScript. 2. Setting Up Axios Before we start, ensure you have axios installed. You can install it using npm or yarn: npm install axios # or yarn add axios 3. Fetching a List of Posts Without an API Key You can fetch posts without an API key using the /articles endpoint. Here’s how to do it in JavaScript and TypeScript: JavaScript Example: const axios = require('axios'); const username = 'your_username'; // Replace with the desired username const url = `https://dev.to/api/articles?username=${username}&page=1&per_page=3`; axios.get(url) .then(response => { const posts = response.data; posts.forEach(post => { console.log(`Title: ${post.title}`); console.log(`Author: ${post.user.name}`); console.log(`Published: ${post.readable_publish_date}`); console.log(`URL: ${post.url}`); console.log('---'); }); }) .catch(error => { console.error('Error fetching posts:', error); }); TypeScript Example: import axios from 'axios'; interface Post { title: string; user: { name: string; }; readable_publish_date: string; url: string; } const username = 'your_username'; // Replace with the desired username const url = `https://dev.to/api/articles?username=${username}&page=1&per_page=3`; axios.get(url) .then(response => { const posts = response.data; posts.forEach(post => { console.log(`Title: ${post.title}`); console.log(`Author: ${post.user.name}`); console.log(`Published: ${post.readable_publish_date}`); console.log(`URL: ${post.url}`); console.log('---'); }); }) .catch(error => { console.error('Error fetching posts:', error); }); With Pagination (page and per_page) The Dev.to API supports pagination using the page and per_page parameters: page: The page number to fetch (default is 1). per_page: The number of posts per page (default is 30, maximum is 1000). Example URL: https://dev.to/api/articles?username=your_username&page=2&per_page=5 4. Fetching a Single Post By Post ID To fetch a single post by its ID, use the /articles/{id} endpoint. JavaScript Example: const axios = require('axios'); const postId = 123456; // Replace with the actual post ID const url = `https://dev.to/api/articles/${postId}`; axios.get(url) .then(response => { const post = response.data; console.log(`Title: ${post.title}`); console.log(`Author: ${post.user.name}`); console.log(`Published: ${post.readable_publish_date}`); console.log(`URL: ${post.url}`); }) .catch(error => { console.error('Error fetching post:', error); }); TypeScript Example: import axios from 'axios'; interface Post { title: string; user: { name: string; }; readable_publish_date: string; url: string; } const postId = 123456; // Replace with the actual post ID const url = `https://dev.to/api/articles/${postId}`; axios.get(url) .then(response => { const post = response.data; console.log(`Title: ${post.title}`); console.log(`Author: ${post.user.name}`); console.log(`Published: ${post.readable_publish_date}`); console.log(`URL: ${post.url}`); }) .catch(error => { console.error('Error fetching post:', error); }); By Post Slug To fetch a single post by its slug, use the /articles/{username}/{slug} endpoint. JavaScript Example: const axios = require('axios'); const username = 'your_username'; // Replace with the desired username const slug = 'your-post-slug'; // Replace with the actual post slug const url = `https://dev.to/api/articles/${username}/${slug}`; axios.get(url) .then(resp

Feb 12, 2025 - 02:03

The Dev.to API is a fantastic resource for developers who want to programmatically access and display posts from the platform. Whether you're building a personal blog aggregator, a portfolio, or just exploring the API, this guide will show you how to read posts from Dev.to using JavaScript and TypeScript with the axios library.

In this article, we’ll focus exclusively on reading posts—fetching lists of posts, retrieving individual posts by ID or slug, and using query parameters to filter and paginate results.

1. Introduction to Reading Posts
2. Setting Up Axios
3. Fetching a List of Posts
- Without an API Key
- With Pagination (page and per_page)
4. Fetching a Single Post
- By Post ID
- By Post Slug
5. Using Query Parameters
- Filtering by Username
- Filtering by Tags
6. Conclusion

1. Introduction to Reading Posts

The Dev.to API provides several endpoints for reading posts:

Fetch a list of posts: Retrieve multiple posts, optionally filtered by username, tags, or pagination.
Fetch a single post: Retrieve a specific post by its ID or slug.

All these endpoints return data in JSON format, making it easy to work with in JavaScript or TypeScript.

2. Setting Up Axios

Before we start, ensure you have axios installed. You can install it using npm or yarn:

npm install axios
# or
yarn add axios

3. Fetching a List of Posts

Without an API Key

You can fetch posts without an API key using the /articles endpoint. Here’s how to do it in JavaScript and TypeScript:

JavaScript Example:

const axios = require('axios');

const username = 'your_username'; // Replace with the desired username
const url = `https://dev.to/api/articles?username=${username}&page=1&per_page=3`;

axios.get(url)
  .then(response => {
    const posts = response.data;
    posts.forEach(post => {
      console.log(`Title: ${post.title}`);
      console.log(`Author: ${post.user.name}`);
      console.log(`Published: ${post.readable_publish_date}`);
      console.log(`URL: ${post.url}`);
      console.log('---');
    });
  })
  .catch(error => {
    console.error('Error fetching posts:', error);
  });

TypeScript Example:

import axios from 'axios';

interface Post {
  title: string;
  user: {
    name: string;
  };
  readable_publish_date: string;
  url: string;
}

const username = 'your_username'; // Replace with the desired username
const url = `https://dev.to/api/articles?username=${username}&page=1&per_page=3`;

axios.get<Post[]>(url)
  .then(response => {
    const posts = response.data;
    posts.forEach(post => {
      console.log(`Title: ${post.title}`);
      console.log(`Author: ${post.user.name}`);
      console.log(`Published: ${post.readable_publish_date}`);
      console.log(`URL: ${post.url}`);
      console.log('---');
    });
  })
  .catch(error => {
    console.error('Error fetching posts:', error);
  });

With Pagination (`page` and `per_page`)

The Dev.to API supports pagination using the page and per_page parameters:

page: The page number to fetch (default is 1).
per_page: The number of posts per page (default is 30, maximum is 1000).

Example URL:

https://dev.to/api/articles?username=your_username&page=2&per_page=5

4. Fetching a Single Post

By Post ID

To fetch a single post by its ID, use the /articles/{id} endpoint.

JavaScript Example:

const axios = require('axios');

const postId = 123456; // Replace with the actual post ID
const url = `https://dev.to/api/articles/${postId}`;

axios.get(url)
  .then(response => {
    const post = response.data;
    console.log(`Title: ${post.title}`);
    console.log(`Author: ${post.user.name}`);
    console.log(`Published: ${post.readable_publish_date}`);
    console.log(`URL: ${post.url}`);
  })
  .catch(error => {
    console.error('Error fetching post:', error);
  });

TypeScript Example:

import axios from 'axios';

interface Post {
  title: string;
  user: {
    name: string;
  };
  readable_publish_date: string;
  url: string;
}

const postId = 123456; // Replace with the actual post ID
const url = `https://dev.to/api/articles/${postId}`;

axios.get<Post>(url)
  .then(response => {
    const post = response.data;
    console.log(`Title: ${post.title}`);
    console.log(`Author: ${post.user.name}`);
    console.log(`Published: ${post.readable_publish_date}`);
    console.log(`URL: ${post.url}`);
  })
  .catch(error => {
    console.error('Error fetching post:', error);
  });

By Post Slug

To fetch a single post by its slug, use the /articles/{username}/{slug} endpoint.

JavaScript Example:

const axios = require('axios');

const username = 'your_username'; // Replace with the desired username
const slug = 'your-post-slug'; // Replace with the actual post slug
const url = `https://dev.to/api/articles/${username}/${slug}`;

axios.get(url)
  .then(response => {
    const post = response.data;
    console.log(`Title: ${post.title}`);
    console.log(`Author: ${post.user.name}`);
    console.log(`Published: ${post.readable_publish_date}`);
    console.log(`URL: ${post.url}`);
  })
  .catch(error => {
    console.error('Error fetching post:', error);
  });

TypeScript Example:

import axios from 'axios';

interface Post {
  title: string;
  user: {
    name: string;
  };
  readable_publish_date: string;
  url: string;
}

const username = 'your_username'; // Replace with the desired username
const slug = 'your-post-slug'; // Replace with the actual post slug
const url = `https://dev.to/api/articles/${username}/${slug}`;

axios.get<Post>(url)
  .then(response => {
    const post = response.data;
    console.log(`Title: ${post.title}`);
    console.log(`Author: ${post.user.name}`);
    console.log(`Published: ${post.readable_publish_date}`);
    console.log(`URL: ${post.url}`);
  })
  .catch(error => {
    console.error('Error fetching post:', error);
  });

5. Using Query Parameters

Filtering by Username

To fetch posts by a specific user, use the username parameter:

https://dev.to/api/articles?username=your_username

Filtering by Tags

To fetch posts with specific tags, use the tag parameter:

https://dev.to/api/articles?tag=javascript

You can combine multiple parameters for more specific queries:

https://dev.to/api/articles?username=your_username&tag=webdev&page=1&per_page=5

6. Conclusion

Reading posts from Dev.to using the API is straightforward and powerful. Whether you’re fetching a list of posts, retrieving a single post by ID or slug, or filtering results using query parameters, the Dev.to API provides all the tools you need.

By using axios in JavaScript or TypeScript, you can easily integrate Dev.to posts into your applications. This guide should give you a solid foundation to start exploring the API and building your own projects.

Happy coding!