The other day, I re-discovered the dev.to API and found out that it can be used without an API key. That’s really great if you want to embed your articles anywhere — maybe on a personal blog — without the hassle of protecting secret keys. You can fetch a list of articles by a given author or a specific article.

So, I coded a web component that lets you grab either a list of articles or a specific one. Let’s start with the “list mode”:

<dev-to
  author="madsstoumann"
  theme="classic"
  itemsperpage="10"
  links="internal">
</dev-to>
Enter fullscreen mode Exit fullscreen mode

Here’s what we get:
List

Notice the theme and links attributes.

I’ve added 3 themes to choose from (but you can easily add your own):

  • brutalist
  • classic
  • modern

links can be either “internal” or “external”. The first opens the article directly within the web component, while the latter opens the article on dev.to in a new tab.

Now, let’s click on “The Golden Ratio in CSS”.

Classic Theme

Very posh, classic theme, isn’t it?!

If you just want to show the article directly, without showing the list first, you can use the component in “article mode”:

<dev-to article="2014104" theme="classic"></dev-to>
Enter fullscreen mode Exit fullscreen mode

Let’s change the theme to “modern”:

Modern

... or how about “brutalist”, for that raw, industrial look?

Brutalist

Internationalization

If you want to display dates and UI text in your local language, the component supports i18n this way:

<dev-to 
  author="madsstoumann"
  lang="es"
  i18n='{"es":{"more":"Más...","reactions":"reacciones"}}'>
</dev-to>
Enter fullscreen mode Exit fullscreen mode

Customization

The component exposes several parts that you can style using CSS ::part():

dev-to::part(avatar) {
  border-radius: 50%;
  border: 2px solid currentColor;
}

dev-to::part(cover) {
  filter: sepia(0.3);
}

dev-to::part(more) {
  background: #ff00ff;
}
Enter fullscreen mode Exit fullscreen mode

Shadow DOM or Not?

If you need to style the component directly (without shadowDOM and parts), just add the noshadow attribute:

<dev-to author="madsstoumann" noshadow></dev-to>
Enter fullscreen mode Exit fullscreen mode

Demo

You can try out a demo, using external links, here: browser.style/ui/dev-to

Installation

You can install the component directly from npm:

npm i @browser.style/dev-to
Enter fullscreen mode Exit fullscreen mode

Or import the script directly from browser.style:

<script
  type="module"
  src="https://browser.style/ui/dev-to/index.js">
</script>
Enter fullscreen mode Exit fullscreen mode

Let me know what you think!

Cover Photo by Markus Spiske: https://www.pexels.com/photo/mork-computer-gron-software-225769/