Skip to main content

Scott Nath Frontend Architect

Scott Nath's picture
Header image for article 'DEV Profile Web Components: embed your profile anywhere'

DEV Profile Web Components: embed your profile anywhere

Learn about native web components that showcase DEV profiles and posts.

Learn about native web components that showcase DEV profiles and posts. profile native web components, which show a user and their posts, are included in the profile-components library. These native web components can be utilized on any HTML page, framework-based site, or wherever you can use HTML. You can access them via or include the NPM module in your project.


install via NPM:

npm i profile-components

use via

<!-- add to HEAD -->

<!-- shows a profile with posts fetched from for user `scottnath` -->
<devto-user username="scottnath" fetch="true"></devto-user>

Table of contents

What are the profile components?

  • Cross-browser, pure native web components
  • Zero dependencies
  • Fetch profile and post data from the API
  • No api key required
  • Present content as a profile widget
  • Styled using’s CSS style variables from Forem
  • Released in the profile-components library

Includes two components: user and post

There are two components for presenting content from the site. One is a simple UI to present a single post, showing only an image and the post title and linking to the post. The other, devto-user, is the full profile component, which incorporates the devto-post UI to present user-written posts. post

The devto-post web component displays details about a post. It is very basic, but can be styled via themes and adjusts spacing via container-queries. post web component post web component (400px) post web component post web component (300px) user

The devto-user web component displays details about a DEV user. Using fetch to populate the content will include a set of posts (if the user has posts). On fetch, you can choose to not include posts by changing fetch="true" to fetch="no-posts". user web component user without posts user user (400px)

How to use the user profile component

These components can be used on any HTML page - whether built via framework or just plain HTML. They are available via or you can add the NPM module to your project.

Using the unpkg distribution for a User

Add the script tag to your HTML page’s HEAD:

<!-- add to HEAD -->

Add the component to your HTML page’s BODY:

<!-- shows a user's profile -->
<devto-user username="scottnath" fetch="true"></devto-user>

Show Fetched profile without posts

<!-- shows a user's profile without posts -->
<devto-user username="scottnath" fetch="no-posts"></devto-user>

Write your own content instead of fetching from

  name="Meowy McMeowerstein"
  summary="Spending time purring and sleepin"
  joined_at="Jan 1, 1979"

Server Side Rendering (Astro example)

Because these components were built with separate HTML, CSS, and JS files, you can use those pieces to generate HTML on the server. This example is what I did to make an Astro component for

// DevToUser.astro
import devto from 'profile-components/devto-utils';
const user = devto.user;

const repos = JSON.stringify(['scottnath/profile-components', 'storydocker/storydocker']);
const userContent = await user.generateContent({
  login: 'scottnath',
  // a local profile image helps performance
  avatar_url: '/scott-nath-profile-pic.jpeg',
let userHTML = '<style>' + user.styles + '</style>';
userHTML += user.html(userContent);

  <template shadowrootmode="open" set:html={userHTML}>

Where do the styles come from?

The best way to have the look n feel of an external site is to integrate their design language as much as possible. The DEV web components use the same source for styles as itself, the Forem open source community software. More specifically, from the Forem open source repo on GitHub.

Forem Open source community software

This is a large codebase, which includes a lot of Ruby files. The styles are in both CSS and Sass files and can be found in the /app/assets/stylesheets subdirectory..

Dev, by way of Forem, essentially has four themes: Forem base styles, Dev branded styles, and light and dark versions of each. For now, these web components only compensate for branded colors. I wrote some scripts to copy-pasta specific variables from a few stylesheets which can be found in these docs for the web component helpers