DEV Community

Cover image for How to use DEV.to API
Guilherme Cheng
Guilherme Cheng

Posted on

How to use DEV.to API

In this post, we'll explore how to use the DEV.to API and show some practical examples of how you can use it in your application to display the list of published posts and how to show a post.

What is the Dev.to API?

The DEV.to API is an application programming interface (API) that allows developers to interact with the DEV.to platform. With it, you can create, read, update, and delete articles, as well as perform other operations related to community interactions, such as following users, listing followers, getting notifications, and much more.

How to use the API?

The API can be used by any application, with or without an API Key. In your application, just fetch the endpoint, as follows:

How to show artibles list without API Key:

const articles = fetch(`https://dev.to/api/articles?username=${username}`).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

Response

[
  {
    "type_of": "article",
    "id": 1419842,
    "title": "Hey there!",
    "description": "Did u know, that this is my first draft? I'm actually testing the API",
    "readable_publish_date": "Apr 6",
    "slug": "hey-there-34hj",
    "path": "/guilhermecheng/hey-there-34hj",
    "url": "https://dev.to/guilhermecheng/hey-there-34hj",
    "comments_count": 0,
    "public_reactions_count": 0,
    "collection_id": null,
    "published_timestamp": "2023-04-06T23:29:44Z",
    "positive_reactions_count": 0,
    "cover_image": null,
    "social_image": "https://dev.to/social_previews/article/1419842.png",
    "canonical_url": "https://dev.to/guilhermecheng/hey-there-34hj",
    "created_at": "2023-03-29T23:59:07Z",
    "edited_at": null,
    "crossposted_at": null,
    "published_at": "2023-04-06T23:29:44Z",
    "last_comment_at": "2023-04-06T23:29:44Z",
    "reading_time_minutes": 1,
    "tag_list": [

    ],
    "tags": "",
    "user": {
      "name": "Guilherme Cheng",
      "username": "guilhermecheng",
      "twitter_username": null,
      "github_username": "Guilhermecheng",
      "user_id": 1046757,
      "website_url": null,
      "profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--sDcHxoDy--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1046757/543e3ca0-4f99-46ba-b8a1-79c06976b72b.jpeg",
      "profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--4IlcgxTN--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/1046757/543e3ca0-4f99-46ba-b8a1-79c06976b72b.jpeg"
    }
  }
]
Enter fullscreen mode Exit fullscreen mode

Get article by id

const article = fetch(`https://dev.to/api/articles/${articleId}`).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

Get article by post slug

const article = fetch(`https://dev.to/api/articles/<your_username>/${slug}`).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

User data

By user_id

const user = fetch(`https://dev.to/api/users/${userId}`).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

By username

const user = fetch(`https://dev.to/api/users/by_username?url=${username}`).then((res) => res.json());
Enter fullscreen mode Exit fullscreen mode

With the API Key

Setting up your application to use the DEV.to API:

Before you start using the DEV.to API, you'll need to configure your application to authenticate properly. To do this, follow these steps:

  1. Access the settings page of your account on DEV.to and generate an API Key.
  2. In your code, use this API Key to authenticate your requests to the API. There are libraries for various languages that make this process easier, so choose the one that best suits your application.

Display the list of posts with the API Key

const articles = fetch("<https://dev.to/api/articles/me>", {
    headers: {
      "api-key": process.env.API_KEY,
    },
}).then((res) => res.json());

Enter fullscreen mode Exit fullscreen mode

Other possibilities through the API

Now that you've configured your application to use the DEV.to API, let's take a look at what else you can do:

  1. Publish a new article: Use the API to create a new article directly from your application, automating the publication process and allowing you to share content more efficiently.
  2. Retrieve articles from a specific user: With the API, you can get a list of articles published by a particular user. This can be useful for displaying a "recent articles" section on your website or application.
  3. List your followers: Through the API, you can get a list of users who follow you on DEV.to. This information can be used to personalize the experience of your followers in your own application.
  4. Send notifications: The API also allows you to send notifications to your followers on DEV.to. For example, you can send a notification to your followers when you publish a new article or perform some other relevant action.

Top comments (3)

Collapse
 
usmanzahidcode profile image
Usman Zahid

You may dictate the number of posts you want. You can use page and per_page parameters in the URL.

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

Collapse
 
razielrodrigues profile image
Raziel Rodrigues

That's a monster thanks so much!

Collapse
 
sukhrobabdullaev profile image
sukhrobabdullaev

why new added article is not appearing on dev.to/api/articles?username=sukhr...

this is one example