How to customize your Website with JS and CSS

The default website is kinda ugly.

Image description

Here’s mine after a bit of work:

Image description

Here’s how to customize your website if you use Transistor. But also it’s a simple guide to do clientside customizations of almost any website whose code you don’t control.

How To Video (3mins)


Head HTML:

window.onload = function () {
  let el;
  if (document.location.pathname === "/episodes") {
    el = document.createElement("div");
  } else {
    // assuming index page
    el = document.getElementsByClassName("site-first-episode")[0];

  el.innerHTML = `
<iframe title="swyx mixtape embed" width="100%" height="390" frameborder="no" scrolling="no" seamless src=""></iframe>
`; = "swyxembed";
function makeLive() {
  if (!document.getElementById("swyxembed")) window.onload();
  setTimeout(makeLive, 200);
setTimeout(makeLive, 200);


.site-intro {
  font-size: 1.25rem;
    width: 60ch;
    margin: 0 auto;

.site-credits {
    position: fixed;
    width: 100vw;
    bottom: 0;

#site-footer {
  display: hidden

#swyxembed {
  padding: 2rem;
.site-featured-episodes .site-episode,
.site-episode-detail .site-episode {
 display: block;
.site-episode {
  display: grid;
  grid-template-areas: "date title"
                       "date desc";
  grid-template-rows: minmax(1rem, auto) 1fr;
  grid-template-columns: 10ch 1fr;
  grid-column-gap: 1rem;
  margin-bottom: 1rem;
.site-episode time { grid-area: date }
.site-episode time span { text-transform: none }
.site-episode h2 { grid-area: title; font-size: 1.5rem }
.site-episode .site-episode-summary { grid-area: desc }
.site-episode nav {
   display: none;

Other customization ideas

Look at the css for

You can also use custom fonts:

Tagged in: #tips #js #css

Leave a reaction if you liked this post! 🧡
Loading comments...

Subscribe to the newsletter

Join >10,000 subscribers getting occasional updates on new posts and projects!

I also write an AI newsletter and a DevRel/DevTools newsletter.

Latest Posts

Search and see all content