Building a simple static site generator in node.js

Learn how to build a fast & responsive markdown editor with React, Firebase, & SWR

Hey everyone! This is gonna be a pretty short post but I wanted to show you how easy it is to have the color scheme for your website be generated randomly on the client-side. It's a pretty interesting experience for the user but I don't think it makes sense for most websites, as most businesses (&amp; even individuals) would want to stick to a more standard color scheme so they can stay consistent to their brand identity. However, if you find something cool to do with these accessible combos do share it with me I would love to see!Now let's get to the actual code. There are a few ways to do this, I recently found a tiny (less than 2kb) npm package called colors2k that offers this functionality but I also wanted to show you how it's possible to do this using only vanilla JS so let's start with the easy way first. For all these examples I'm using a regular HTML page being bundled using <a target="_blank" rel="noopener noreferrer nofollow" href="https://parceljs.org/">parcel</a> and also pulling in a modified version of <a target="_blank" rel="noopener noreferrer nofollow" href="https://grotesk.now.sh/">grotesk</a> for basic styling.<h3>Setup</h3>For those not familiar this is how you create a new parcel project for the rest who want to skip directly to the combo generation <a target="_blank" rel="noopener noreferrer nofollow" href="https://kartikn.com/writing/accessible-combos#generating-the-combos">click here</a>:<pre><code class="language-bash">mkdir accessible-combos
cd accessible-combos
npm init -y
npm i -D parcel-bundler</code></pre>Let's create a <code>src</code> directory and add our HTML &amp; JavaScript file. I'm using just regular HTML boilerplate, you've probably seen this a million times:<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;Accessible Combos&lt;/title&gt;
 &lt;meta charset="utf-8" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
 &lt;meta name="author" content="Kartik Nair" /&gt;
 &lt;meta
 name="description"
 content="Generating accessible color combinations for the web"
 /&gt;
 &lt;link href="./style.css" rel="stylesheet" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;main&gt;
 &lt;h1&gt;Hello accessible combos&lt;/h1&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis
 minus sequi nesciunt, sapiente dignissimos ut, est magni,
 facilis repellat corrupti adipisci dicta ullam. Corrupti
 voluptates assumenda reiciendis quod placeat maxime.
 &lt;/p&gt;
 &lt;/main&gt;
 &lt;script src="./index.js"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>And then to your <code>package.json</code> you would add the following scripts:<pre><code class="language-json">"start": "parcel src/index.html",
"build": "parcel build src/index.html"</code></pre><h3>Generating the combos</h3>Great we're all set up now we can actually install the package I told you about:<pre><code class="language-bash">npm i colors2k</code></pre>Now let's import it in our JS file and use it's contrast function:<pre><code class="language-javascript">import { getContrast } from "colors2k";

console.log(getContrast("#ffffff", "#000000");</code></pre>As you can see that's pretty cool. But looping over the more than 16 million colors that hexadecimal provides would be pretty unnecessary and not that nice looking. Instead a better idea would be to find a list of colors that look nice and within that list find accessible combos. So that's what I did, and after a bit of searching I found two great options <a target="_blank" rel="noopener noreferrer nofollow" href="https://cloudflare.design/colors">cloudflare designs color pallette</a> &amp; the <a target="_blank" rel="noopener noreferrer nofollow" href="https://unpkg.com/color-name-list@5.23.0/dist/colornames.bestof.json">best of from the color-names project</a> both are still very large lists but the cloudflare one is significantly smaller so I'm going to go with that one but as you can see there are more options out there.I created a <code>colors.js</code> file and exported the colors json from there, so now in my index file I can loop through each of them to get a combo that works (by works I mean a combo that is accessible according to WCAG standards, so a contrast ratio greater than 7.1). Once I get a working combo I'm creating a style element using those colors and appending it to the head of the document:<pre><code class="language-javascript">import { getContrast } from 'color2k'
import { cloudflareColors } from './colors'

let accessibleCombo = null

while (!accessibleCombo) {
 let randomPair = [
 cloudflareColors[Math.floor(Math.random() * cloudflareColors.length)]
 .hex,
 cloudflareColors[Math.floor(Math.random() * cloudflareColors.length)]
 .hex,
 ]

 if (getContrast(randomPair[0], randomPair[1]) &gt; 7.1)
 accessibleCombo = randomPair
}

const newStyle = document.createElement('style')
newStyle.innerHTML = `
main {
 background-color: ${accessibleCombo[0]};
 color: ${accessibleCombo[1]};
}`
document.head.appendChild(newStyle)</code></pre>Pretty simple right? And the results are very pleasing to look at:<img src="https://res.cloudinary.com/kartiknair/image/upload/w_600,c_scale,dpr_1.0/combos-demo_ntlpp0.gif" alt="A demo of the result"><h3>Learning how to do it ourselves</h3>While using a library is awesome (especially a well made one) it's important that we understand how it works. So I decided that we could learn how to do this ourselves. The recommended method to get contrast ratio (<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3.org/TR/WCAG20/#contrast-ratiodef">by the WCAG at least</a>) is to divide the relative luminance of the lighter color by the relative luminance of the darker color. What's a relative luminance you ask? Well it's the relative brightness of a color, basically how close it would be to black if the image was black &amp; white (between 0 as pure white, which is not close at all and 1 which would be pure black).So how do we calculate it then, well thankfully the <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3.org/WAI/GL/wiki/Relative_luminance">WCAG has a guideline for that as well</a>, the thing is to implement this formula you would have to have your color in RGB format so we need to implement a HEX → RGB conversion as well.This is surprisingly easy to implement as all we need to do is split the string into groupings of 2s and then use the built in <code>parseInt</code> function to convert their radix:<pre><code class="language-javascript">const hexToRgb = (hexString) =&gt; {
 if (hexString.startsWith('#')) hexString = hexString.substr(1)
 return [
 parseInt(hexString.substring(0, 2), 16),
 parseInt(hexString.substring(2, 4), 16),
 parseInt(hexString.substring(4, 6), 16),
 ]
}

console.log(hexToRgb('#ffffff')) // [255, 255, 255]</code></pre>Nice! That was pretty simple. Now let's implement the relative luminance formula using what WCAG gives us. This is the formula they have on their website:<img src="https://res.cloudinary.com/kartiknair/image/upload/w_600,c_scale,dpr_1.0/wcag-formula_ny9qlg.png" alt="The formula on WCAG's website">So mapping this out would be like this. Take each value from our RGB array and divide it by 255 and then based on its size perform one of the two formulas given. Once we have the 3 values for each channel we'll do the final formula given at the top to get our luminance. Sounds good? Let's code it:<pre><code class="language-javascript">const relativeLuminance = (rgbArray) =&gt; {
 let [r, g, b] = rgbArray.map((channel) =&gt; {
 return channel / 255 &lt;= 0.03928
 ? channel / 255 / 12.92
 : ((channel / 255 + 0.055) / 1.055) ** 2.4
 })
 return 0.2126 * r + 0.7152 * g + 0.0722 * b
}

console.log(relativeLuminance(hexToRgb('#ffffff'))) // 1</code></pre>We're very close to the result now. All we have to do is implement the final formula where we compare the luminance of the two colors. To be specific we have to check which one is the lighter and that has to be L1 in this formula: <code>(L1 + 0.05) / (L2 + 0.05)</code>. Let's implement it:<pre><code class="language-javascript">const getContrast = (color1, color2) =&gt; {
 const luminance1 = relativeLuminance(hexToRgb(color1)),
 luminance2 = relativeLuminance(hexToRgb(color2))

 return luminance1 &gt; luminance2
 ? (luminance1 + 0.05) / (luminance2 + 0.05)
 : (luminance2 + 0.05) / (luminance1 + 0.05)
}</code></pre>And that's it we've done it! Here's the full code for our vanilla implementation that performs in the exact same way as using the <code>colors2k</code> library:<pre><code class="language-javascript">import { cloudflareColors } from './colors'

const hexToRgb = (hexString) =&gt; {
 if (hexString.startsWith('#')) hexString = hexString.substr(1)
 return [
 parseInt(hexString.substring(0, 2), 16),
 parseInt(hexString.substring(2, 4), 16),
 parseInt(hexString.substring(4, 6), 16),
 ]
}

const relativeLuminance = (rgbArray) =&gt; {
 let [r, g, b] = rgbArray.map((channel) =&gt; {
 return channel / 255 &lt;= 0.03928
 ? channel / 255 / 12.92
 : ((channel / 255 + 0.055) / 1.055) ** 2.4
 })
 return 0.2126 * r + 0.7152 * g + 0.0722 * b
}

const getContrast = (color1, color2) =&gt; {
 const luminance1 = relativeLuminance(hexToRgb(color1)),
 luminance2 = relativeLuminance(hexToRgb(color2))

 return luminance1 &gt; luminance2
 ? (luminance1 + 0.05) / (luminance2 + 0.05)
 : (luminance2 + 0.05) / (luminance1 + 0.05)
}

let accessibleCombo = null

while (!accessibleCombo) {
 let randomPair = [
 cloudflareColors[Math.floor(Math.random() * cloudflareColors.length)]
 .hex,
 cloudflareColors[Math.floor(Math.random() * cloudflareColors.length)]
 .hex,
 ]

 if (getContrast(randomPair[0], randomPair[1]) &gt; 7.1)
 accessibleCombo = randomPair
}

const newStyle = document.createElement('style')
newStyle.innerHTML = `
main {
 background-color: ${accessibleCombo[0]};
 color: ${accessibleCombo[1]};
}
 `
document.head.appendChild(newStyle)</code></pre>Cool that was it for this post hope you find this little snippet useful &amp; make something cool woth it. You can see it live at <a target="_blank" rel="noopener noreferrer nofollow" href="https://accessible-combos.now.sh">https://accessible-combos.now.sh</a> or check out the code at <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/kartiknair/accessible-combos">https://github.com/kartiknair/accessible-combos</a>. Thanks for reading, if you wanna say hello hit me up on twitter, I'm <a target="_blank" rel="noopener noreferrer nofollow" href="https://twitter.com/kartikajitnair/">@kartikajitnair</a>. Stay safe ✌.

Generating accessible color combinations for the web

I try and make my websites look nice. I think the visual aspect of a website is very important especially to an average visitor. A regular person doesn't care about what architecture you're using to build your website, they care if it looks good and loads fast. And since typography is very important to a website's looks, today we'll be discussing a few ways you can immediately improve your web typography.Typography is the base of all web design. Text is in my opinion the majority of a website's content (couldn't find any studies about this but I'm pretty sure this is true). So how do you make text look nice? There are a few things to consider:<ol><li>Size (&amp; the scaling in between different levels)</li><li>Spacing</li><li>Font choice</li></ol><h3>Size (&amp; scaling)</h3>The type scale is crucial so that a user knows what hierarchy you're trying to convey. You can find great ways to generate type scales online, I'm personally a fan of <a target="_blank" rel="noopener noreferrer nofollow" href="https://type-scale.com/">https://type-scale.com/</a> which let's you visually calculate a type scale for your website. Here's an example of a type scale (this particular one is inspired from <a target="_blank" rel="noopener noreferrer nofollow" href="https://tailwindcss.com/">tailwind</a>) implemented in CSS:<pre><code class="language-css">html,
body {
 font-size: 1rem;
}

h1 {
 font-size: 2.25rem;
}

h2 {
 font-size: 1.875rem;
}

h3 {
 font-size: 1.5rem;
}

h4 {
 font-size: 1.25rem;
}

h5 {
 font-size: 1.125rem;
}

h6 {
 font-size: 0.875rem;
}</code></pre>This will immediately make a difference to your websites by clarifying how the hierarchy of content works. While this will look great on almost all devices we need to consider people on high resolution displays &amp; small phones as well. For this I've started employing a few media queries to handle scaling all the type in my website responsively for them:<pre><code class="language-css">/* ↓ This one is for smaller phones ↓ */
@media (max-width: 350px) {
 html {
 font-size: 0.9rem;
 }
}

/* ↓ These are for high-res displays ↓ */
@media (min-width: 1900px) {
 html {
 font-size: 1.5rem;
 }
}

@media (min-width: 2500px) {
 html {
 font-size: 2rem;
 }
}

@media (min-width: 3000px) {
 html {
 font-size: 2.5rem;
 }
}

@media (min-width: 3400px) {
 html {
 font-size: 3rem;
 }
}</code></pre>As you can see we're changing the size on the <code>html</code> tag which will affect what a <code>rem</code> means for everything else on your website, a great way to easily &amp; responsively scale everything.<h3>Spacing</h3>Spacing is very very important, have a look at the 2 websites below, which one do you think is better designed?<img src="https://res.cloudinary.com/kartiknair/image/upload/w_700,c_scale,dpr_1.0/website-one_noxng5.png" alt="The first website"><img src="https://res.cloudinary.com/kartiknair/image/upload/w_700,c_scale,dpr_1.0/website-two_jxvkuy.png" alt="The second website">Even though both of them use the same font and even the same type scale, the second one (in my opinion) objectively looks better. All it took was setting the correct <code>line-height</code> and making sure that the user doesn't have to track their eyes from one corner of the screen to the other. I usually accomplish this by wrapping all my text in a <code>&lt;main&gt;</code> tag and then size it accordingly:<pre><code class="language-css">html,
body {
 line-height: 1.5; // &lt;- this will depend on your font
}

main {
 width: 50%;
 margin: 6% 25%;
}

@media (max-width: 768px) {
 main {
 width: 80%;
 margin: 15% 10%;
 }
}

@media (max-width: 350px) {
 main {
 width: 90%;
 margin: 15% 5%;
 }
}</code></pre>Pretty simple in terms of CSS but has a huge impact on readability and pleasantness to look at.<h3>Font choice</h3>Choosing the right font for your website depends very heavily on the website and what it's purpose is. What matters most in font choice is that you make sure that it's legible. Since the purpose of text is to convey information (at least in the context of text heavy websites) using a font that isn't good at that wouldn't be very productive.I leave it to you to make good choices in this area but if you're interested you can see some of my favourite open-source fonts below:<ol><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://fonts.google.com/specimen/Inter">Inter</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://fonts.google.com/specimen/Merriweather">Merriweather</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/chrismsimpson/Metropolis">Metropolis</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://fonts.google.com/specimen/EB+Garamond">EB Garamond</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://fonts.google.com/specimen/Jost">Jost*</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://fonts.google.com/specimen/Libre+Baskerville">Libre Baskerville</a></li></ol><h3>Parting words</h3>That's all for this short article, I just wanted to share some easily implementable styling tips for web typography. I've compiled all of my basic typography styling into a simple starter CSS file (<a target="_blank" rel="noopener noreferrer nofollow" href="https://gist.github.com/kartiknair/00521222c6e2ae4b385d91c400debd30">GitHub gist link</a>) feel free to use it in any of your projects. Have a nice day &amp; stay safe!

Improve your web typography with a few solid tips

Single page applications have instant navigation. You click on a link and it changes views instantly. There might not be data &amp; you might be shown a loading screen but still the navigation itself is instant and I've always missed this in pure static websites so, I thought I would try &amp; implement something really simple to accomplish this nice boost in user experience.The idea for the code is pretty simple. We need to get all the links on the page, check if they are internal, if they are we need to add a click event handler on them. This click handler will prevent the default action from happening &amp; instead use the Browser History API to push a new entry in while also updating the DOM with the fresh content. It's only that last part which is a bit complex. So let's take a look at the Browser History API first.It gives us a few functions that we can use to manipulate the browser history. They are:<ol><li><code>back()</code></li><li><code>forward()</code></li><li><code>go()</code></li><li><code>pushState()</code></li><li><code>replaceState()</code></li></ol><code>back()</code> and <code>forward()</code> are pretty self-explanatory, they basically mimic the back and forward buttons in your browser. <code>go()</code> is the same except instead of back and forward you can specify exactly how far you want to travel from the current location (negative number for back, positive for forward; imagine a number line where 0 is the current location). <code>pushState()</code> let's us create a new entry in the history. This is what we're gonna use for our links as well, the reason we won't use <code>replaceState()</code> is because it won't create a new entry, all it will do is update the current entry. This would mean the back and forward buttons won't work as expected.Alright so let's start implementing this in code. First we're gonna listen for the page load and then loop through all our links.<pre><code class="language-javascript">window.onload = function () {
 document.querySelectorAll('a').forEach((link) =&gt; {
 // do something with link
 })
}</code></pre>Now with each link we have to check if they are internal or not. For this we can use the <code>host</code> attribute that every <code>a</code> tag has &amp; compare it to the <code>window.location.host</code>, if they are the same the link is internal. We're also gonna add a <code>data-internal</code> or <code>data-external</code> attribute to the link as a way to separately style them later:<pre><code class="language-javascript">window.onload = function () {
 document.querySelectorAll('a').forEach((link) =&gt; {
 if (link.host === window.location.host) {
 link.setAttribute('data-internal', true)
 } else {
 link.setAttribute('data-external', true)
 }
 })
}</code></pre>Now that we have this basic setup we need to actually intercept when an internal link is clicked and then use <code>history.pushState()</code> to add an entry to the browser history. But <code>pushState()</code> takes three arguments: state, title, &amp; URL. In our case we'll just use our link's <code>href</code> as the <code>route</code> in our state object and also pass it as the title &amp; URL. Here's how that looks:<pre><code class="language-javascript">window.onload = function () {
 document.querySelectorAll('a').forEach((link) =&gt; {
 if (link.host === window.location.host) {
 link.setAttribute('data-internal', true)

 link.addEventListener('click', (e) =&gt; {
 e.preventDefault()
 const destination = link.getAttribute('href')
 history.pushState(
 { route: destination },
 destination,
 destination
 )
 })
 } else {
 link.setAttribute('data-external', true)
 }
 })
}</code></pre>Quick note: Use <code>link.getAttribute("href")</code> instead of <code>link.href</code> to get the actual href provided to the DOM. For example an a tag like this: <code>&lt;a href="/foo"&gt;To foo&lt;/a&gt;</code> when asked directly for href would give <code>http://localhost:5500/foo</code> (or whatever domain it's currently hosted on) but <code>getAttribute("href")</code> would return "/foo".Great now our links change the URL without a page refresh but our DOM isn't updating, the webpage looks exactly the same. So let's deal with that.<h3>Updating the DOM</h3>To update the DOM we actually need to get the new DOM. Since the page to which the link is pointing actually does exist, what we can do is use <code>fetch()</code> to get it's HTML content &amp; then replace our current HTML with that. So let's make an async function called <code>updateDOM</code> to do this:<pre><code class="language-javascript">async function updateDom(path) {
 const res = await fetch(path)
 const data = await res.text()
 document.querySelector('html').innerHTML = data
}</code></pre>Pretty simple as you can see, when provided with a path like <code>/about</code> or <code>/blog/awesome-post.html</code> we'll use fetch to get a response &amp; then use the <code>.text()</code> function to get it's plain text. Once we have that we just set our <code>html</code> elements innerHTML to be this text.Now we need to call this function when our link is clicked:<pre><code class="language-javascript">window.onload = function () {
 document.querySelectorAll("a").forEach(link =&gt; {
 if (link.host === window.location.host) {
 link.setAttribute("data-internal", true);

 link.addEventListener("click", (e) =&gt; {
 e.preventDefault();
 const destination = link.getAttribute("href");
 history.pushState({ route: destination }, destination, destination);
 await updateDom(destination);
 });
 } else {
 link.setAttribute("data-external", true);
 }
 })
}</code></pre>Great! Now you should've seen your link working. But this has a few issues. It'll only work on the first page. To fix this you need to import your script in all your html files &amp; also we're gonna call <code>updateLinks()</code> as soon as we update the DOM. We also have to make sure that we scroll back to the top like a regular link otherwise we might confuse the user. So now our <code>updateDom</code> function is looking like this:<pre><code class="language-javascript">async function updateDom(path) {
 const res = await fetch(path)
 const data = await res.text()
 document.querySelector('html').innerHTML = data

 updateLinks()
 window.scrollTo(0, 0)
}</code></pre>Now all we're missing is the back and forward buttons. To deal with this we need to actually listen for a window event called <code>onpopstate</code>, this event is fired when the back or forward button is clicked &amp; the important thing to note is that it's fired after the location is updated. Which means we can just update our DOM using <code>window.location.pathname</code> as our new path. So let's add that to our code:<pre><code class="language-javascript">window.onload = function () {
 {...}

 window.onpopstate = function () {
 updateDom(window.location.pathname);
 };
}</code></pre>Great now everything works as expected. We've come a long way. But... we can still do some optimization. Now we're just updating the entire html even if a lot of it is the exact same. And while it won't have much difference for smaller websites, on a larger website this would be pretty jarring. Which is why we're gonna use a tiny (550byted minzipped) library called <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/WebReflection/udomdiff">µdomdiff</a> for this.µdomdiff is just a single function and it takes 4 parameters (&amp; a 5th optional one). Here's what it needs:<pre><code class="language-javascript">futureNodes = udomdiff(
 parent, // where changes happen
 [...currentNodes], // Array of current items/nodes
 [...futureNodes], // Array of future items/nodes (returned)
 get, // a callback to retrieve the node
 before // the (optional) anchored node to insertBefore
)

console.log('The new DOM is now:', futureNodes)</code></pre>In our case the parent will be the <code>&lt;html&gt;</code> element, the <code>currentNodes</code> will be the html elements child nodes, the <code>futureNodes</code> will be our html which we received from fetching, &amp; our callback can just be a simple return parameter function.The only problem is that our fetched html is text &amp; <code>udomdiff</code> expects it to be an array of nodes. So we're gonna use <code>DOMParser</code> and it's <code>parseFromText()</code> function to convert our text into DOM nodes. Then we're gonna use <code>querySelector</code> to get it's html element's child nodes. So let's start with that:<pre><code class="language-javascript">async function updateDom(path) {
 {...}

 const dataNodes = new DOMParser()
 .parseFromString(data, "text/html")
 .querySelector("html").childNodes;

 {...}
}</code></pre>Now that we have that let's use <code>udomdiff</code>:<pre><code class="language-javascript">async function updateDom(path) {
 {...}

 const get = (o) =&gt; o; // Just returning the provided node back

 const parent = document.querySelector("html");
 const currentNodes = document.querySelector("html").childNodes;
 const dataNodes = new DOMParser()
 .parseFromString(data, "text/html")
 .querySelector("html").childNodes;

 udomdiff(
 parent, // where changes happen
 [...currentNodes], // Array of current items/nodes
 [...dataNodes], // Array of future items/nodes (returned)
 get // a callback to retrieve the node
 );

 {...}
}</code></pre>And we're finally done! Smooth &amp; instant navigation between your static pages with a tiny amount of JavaScript. If you're doing this a lot perhaps you should look into established libraries like TurboLinks but for simpler websites I haven't encountered any edge cases using this.That's it for this post, hope you found it helpful. You can find the full source code in this <a target="_blank" rel="noopener noreferrer nofollow" href="https://gist.github.com/kartiknair/bd26bbc751332f64ba85095230c29314">GitHub Gist</a>. Wanna say hi? I'm <a target="_blank" rel="noopener noreferrer nofollow" href="https://twitter.com/kartikajitnair">@kartikajitnair</a> on twitter feel free to DM. That's all I have for now, stay safe!

SPA-like instant navigation in static sites

I'm personally a big fan of JSX &amp; love the way it allows me to split up &amp; componentize my code. Even though JSX had been around before React, it wouldn't have been nearly as popular without React picking it up. However we can actually use JSX without React &amp; it's not that difficult either.The way React works is by configuring your bundler to convert JSX into calls to a createElement function. So for example:<pre><code class="language-jsx">const foo = (
 &lt;div className="cool"&gt;
 &lt;p&gt;Hello there!&lt;/p&gt;
 &lt;/div&gt;
)

// Would become this:
React.createElement(
 'div',
 { className: 'cool' },
 React.createElement('p', null, 'Hello there!')
)</code></pre>However most bundlers allow you to choose your own JSX pragma (function that will be in the place of <code>React.createElement</code>). For example if you were using Babel you could specify what function to use through a simple comment like this:<pre><code class="language-jsx">/** @jsx myJsxFunction */

const foo = (
 &lt;div className="cool"&gt;
 &lt;p&gt;Hello there!&lt;/p&gt;
 &lt;/div&gt;
)</code></pre>And now babel would pass those some parameters to <code>myJsxFunction</code>. Now all we need to do is create a function that takes these parameters &amp; created real DOM nodes which we can add to our DOM. So let's get started. (If you need a code sandbox to play around you can use <a target="_blank" rel="noopener noreferrer nofollow" href="https://codesandbox.io/s/jsx-in-the-browser-qd2hq">this static template using standalone babel</a>)DOM nodes are created using the <code>document.createNode()</code> function &amp; it requires just a tagname so a good place to start would be with that:<pre><code class="language-jsx">export const createElement = (tag, props, ...children) =&gt; {
 const element = document.createElement(tag)
 return element
}</code></pre>Now that we have a DOM node we have to actually add the attributes provided to us. These can be anything like <code>class</code> or <code>style</code>. So we'll just loop through all the provided attributes (using <code>Object.entries</code> and just set them on our DOM node:<pre><code class="language-jsx">export const createElement = (tag, props, ...children) =&gt; {
 const element = document.createElement(tag)

 Object.entries(props || {}).forEach(([name, value]) =&gt; {
 element.setAttribute(name, value.toString())
 })

 return element
}</code></pre>This approach has one issue though. How do we handle events, for example if I have this JSX:<pre><code class="language-jsx">const SayHello = (
 &lt;div&gt;
 &lt;button onClick={() =&gt; console.log('hello there!')}&gt;Say Hello&lt;/button&gt;
 &lt;/div&gt;
)</code></pre>Our function would set onClick as a normal attribute with the callback as actual text. Instead what we can do is check if our attribute starts with 'on' &amp; is in the window scope. This will tell us if it's an event or not. For example <code>onclick</code> is in the window scope however <code>onfoo</code> is not. If it is then we can register an event listener on that node using the part of the name without the 'on'.This is how it looks:<pre><code class="language-jsx">export const createElement = (tag, props, ...children) =&gt; {
 const element = document.createElement(tag)

 Object.entries(props || {}).forEach(([name, value]) =&gt; {
 if (name.startsWith('on') &amp;&amp; name.toLowerCase() in window)
 element.addEventListener(name.toLowerCase().substr(2), value)
 else element.setAttribute(name, value.toString())
 })

 return element
}</code></pre>Nice! Now all that's left to do is add all the children to the parent. However you can't append a string to a DOM node so in case the child is not also a node we can create a text node &amp; append that instead:<pre><code class="language-jsx">export const createElement = (tag, props, ...children) =&gt; {
 const element = document.createElement(tag)

 Object.entries(props || {}).forEach(([name, value]) =&gt; {
 if (name.startsWith('on') &amp;&amp; name.toLowerCase() in window)
 element.addEventListener(name.toLowerCase().substr(2), value)
 else element.setAttribute(name, value.toString())
 })

 children.forEach((child) =&gt; {
 element.appendChild(
 child.nodeType === undefined
 ? document.createTextNode(child.toString())
 : child
 )
 })

 return element
}</code></pre>However this quickly runs into issues with deeply nested elements &amp; also elements that are created using array maps. So instead let's replace that part with aa recursive <code>appendChild</code> method:<pre><code class="language-jsx">const appendChild = (parent, child) =&gt; {
 if (Array.isArray(child))
 child.forEach((nestedChild) =&gt; appendChild(parent, nestedChild))
 else
 parent.appendChild(
 child.nodeType ? child : document.createTextNode(child)
 )
}</code></pre>And now we can use this in place of our old method:<pre><code class="language-jsx">export const createElement = (tag, props, ...children) =&gt; {
 const element = document.createElement(tag)

 Object.entries(props || {}).forEach(([name, value]) =&gt; {
 if (name.startsWith('on') &amp;&amp; name.toLowerCase() in window)
 element.addEventListener(name.toLowerCase().substr(2), value)
 else element.setAttribute(name, value.toString())
 })

 children.forEach((child) =&gt; {
 appendChild(element, child)
 })

 return element
}</code></pre>It works! Try it out. We can now render basic JSX to the DOM:<pre><code class="language-jsx">import { createElement } from './Vanilla'

/** @jsx createElement */

const App = (
 &lt;div&gt;
 &lt;p&gt;My awesome app :)&lt;/p&gt;
 &lt;/div&gt;
)

document.getElementById('root').appendChild(App)</code></pre>And you should see your JSX rendered out perfectly. There are a few more things we can add though, for example in React, elements are usually functions, implementing this will allow us to nest components &amp; take full advantage of props, which are crucial featured of JSX.Thankfully it's pretty simple to implement. All we have to do is check if the tagname is a function instead of a string. If it is we don't do any of the other stuff but rather just call the function. Here's how it looks:<pre><code class="language-jsx">export const createElement = (tag, props, ...children) =&gt; {
 if (typeof tag === "function") return tag(props, children)

 {...}
}</code></pre>And now let's try that out:<pre><code class="language-jsx">import { createElement } from './Vanilla'

/** @jsx createElement */

const SayHello = (props) =&gt; (
 &lt;div&gt;
 &lt;h3&gt;Hello {props ? props.name : 'world'}&lt;/h3&gt;
 &lt;p&gt;I hope you're having a good day&lt;/p&gt;
 &lt;/div&gt;
)

/* &lt;Component /&gt; === Component() */
document.getElementById('root').appendChild(&lt;SayHello name="foo" /&gt;)</code></pre>As you can see implementing that allowed us to use props as well! You can actually say we're done here but there's one more feature I want to implement &amp; that's fragments. For those not familiar fragments are a way to have empty containers in JSX &amp; they use empty tags. Example:<pre><code class="language-jsx">/** @jsx createElement */
/** @jsxFrag createFragment */

const UsingFragment = () =&gt; (
 &lt;div&gt;
 &lt;p&gt;This is regular paragraph&lt;/p&gt;
 &lt;&gt;
 &lt;p&gt;This is a paragraph in a fragment&lt;/p&gt;
 &lt;/&gt;
 &lt;/div&gt;
)</code></pre>But for this to work we need a function that takes this fragment &amp; instead of creating a DOM element for it just returns it's children. Here's how it looks:<pre><code class="language-jsx">const createFragment = (props, ...children) =&gt; {
 return children
}</code></pre>And that's it! It works out of the box because of our recursive <code>appendChild</code> method.And that's it! We've done it. A super simple JSX to DOM function that let's us use the power of JSX without having to use react specifically. You can find the source code for it in <a target="_blank" rel="noopener noreferrer nofollow" href="https://codesandbox.io/s/jsx-in-the-browser-qd2hq">this codesandbox</a>.I hope you found this post helpful &amp; I also hope you find some cool ways to use the power of JSX. I actually learned about all of this while working on <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/kartiknair/dhow">Dhow</a>, which is a JSX-powered static-site generator for Node.js. It basically lets you write Next.js style code but converts it to static HTML with no hydration qualms. Check it out &amp; let me know what you think. Peace!

Hi there — I’m Kartik.

I write code and spend my free time learning about things I enjoy like music, compilers, typography.

Projects

OSPress

Drawer

Lnks

Writing

Building a simple static site generator in node.js

Learn how to build a fast & responsive markdown editor with React, Firebase, & SWR

Generating accessible color combinations for the web

Improve your web typography with a few solid tips

Socials

Hi there — I’m Kartik.I write code and spend my free time learning about things I enjoy like music, compilers, typography.

Projects

OSPress

Drawer

Lnks

Writing

Building a simple static site generator in node.js

Learn how to build a fast & responsive markdown editor with React, Firebase, & SWR

Generating accessible color combinations for the web

Improve your web typography with a few solid tips

Socials

Hi there — I’m Kartik.

I write code and spend my free time learning about things I enjoy like music, compilers, typography.