8 JavaScript Libraries Built From Scratch

As JavaScript developers, when we begin our journey to become better at what we do we can get into the habit of collecting plenty of resources because it feels like the most productive thing to do. After all, it is better to have all the information in your hands rather than having nothing at all.

Some of these resources include ebooks, articles, bookmarking an abundance of websites in our browser so that we can "read later", videos, and even paid video courses.

While these are all good ways to learn fast to becoming as good as you want to be, it can become overwhelming.

In this post, we will be listing 8 JavaScript libraries that were built from scratch.

We are not saying "These libraries are doing it right" or "This is how you should be learning" or "Libraries with no dependencies are better". We are sharing this list just because they have no dependencies. I wouldn't prefer to use a library implemented in vanilla JS written with bad practices over a JavaScript library importing multiple dependencies that is more performant and smaller. However, one advantage is that you don't need to click further than the files you're looking at if none of them import a third party package anywhere in their code.

snabbdom

The first library on this list is snabbdom, a modular virtual DOM library that focuses on simplicity and performance. This library has zero dependencies and is also pretty small weighing at 12.7kb.

If you're wondering what in the world virtual DOM is, it was a programming concept popularized by facebook's reactjs library where you work on a "virtual" (or placeholder) DOM that is kept in memory. This virtual representation of the DOM becomes synced with the real DOM. This is a more performant and modern approach to building web applications because it can quickly become costly when directly manipulating DOM nodes every time.

Going through this repository is simple (as it stated in its description) to read and understand. Snabbdom is a great library to learn from. It proves that simplicity in code is powerful. It demonstrates modularity and extensibility. It enables us to think in the concept of life cycles and how to manage memory cleanup and allocation through its before/after hooks.

It's common to assume that code modules in general are gigantic pieces of code that do magic things when we're new to programming. This can become a problem if affects our confidence as a developer. This library exposes the reality that modules are just "pluggable", reusable pieces and can be of any size as long as they follow that principle.

For example you can write your own module to extend this library with just these lines of code as long as it adheres to their interface:

const myModule = {
  create(oldVNode, newVNode) {
    console.log(`[create] hook called`, { oldVNode, newVNode })
  },
  update(oldVNode, newVNode) {
    console.log(`[update] hook called`, { oldVNode, newVNode })
  },
}

module.exports = myModule

Modules are just reusable pieces that extend some functionality.

In the case below, it extends their patch function with logging (along with their default modules attributesModule and classModule):

const { init, attributesModule, classModule, toVNode } = require('snabbdom')
const myModule = require('./myModule')

const patch = init([attributesModule, classModule, myModule])

const rootEl = document.createElement('div')
rootEl.id = 'root'

document.body.appendChild(rootEl)

const vnode = patch(
  document.getElementById('root'),
  toVNode(document.getElementById('root')),
)

medium-editor

Ever thought about how text editors are built? My first hands-on experience with developing text editors from scratch was through facebook's DraftJS library years ago. It didn't take long for me to realize that text editors can quickly become really complex.

There is a lot of mystery when we think about how to even approach developing a text editor from scratch.

medium-editor is a JavaScript library that mirrors the medium inline editor toolbar.

It implements the buttons and functionality that bring the main concept of text editors come to life.

It provides an api like so:

const MediumEditor = require('medium-editor')

const editor = new MediumEditor('.root', {
  buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'],
})

An example of what you can build just by using this library can yield you something like this at a basic level:

code-block-writer

code-block-writer is a small JavaScript library that helps developers write code using helper functions.

It is simple and straight forward:

const CodeBlockWriter = require('code-block-writer').default

function createGotoFnCode(paramName, newTab = false) {
  writer.write(`function goto(${paramName})`).block(() => {
    if (newTab) {
      writer.writeLine(`window.open(${paramName})`)
    } else {
      writer.writeLine(`window.location.href = ${paramName}`)
    }
  })
}

const writer = new CodeBlockWriter({
  newLine: '\r\n',
  indentNumberOfSpaces: 2,
  useTabs: false,
  useSingleQuote: true,
})

createGotoFnCode('destination', true)

console.log(writer.toString())

This can be a good way for those who want to get familiar a design pattern like the Builder Design Pattern which aims to reduce complexity in constructing objects by providing a fluent interface. I think this is a great example of its success.

preact

Like snabbdom, preact is another JavaScript library providing a thin abstraction of a virtual DOM on top of the real DOM, with no dependencies.

Working with preact feels similar to working in react code in a way where JSX is used.

Here is an example of it in practice taken from their components page:

function MyComponent(props) {
  return <div>My name is {props.name}.</div>
}

// Usage
const App = <MyComponent name="John Doe" />

// Renders: <div>My name is John Doe.</div>
render(App, document.body)

react-colorful

react-colorful is a barebones implementation of a custom color picker react component.

This is one of many good libraries that demonstrates building something from nothing (with the exception of importing react).

This is one of the few libraries I would recommend to developers looking for inspiration on getting started with building their own custom reusable react component.

transducers-js

transducers-js, developed by Cognitect is a plain vanilla JavaScript library implementing the transducer protocol as its core.

Transducers are composable, efficient data transformation functions that doesn’t create intermediate collections. This is a good bare bones example of code that turns a concept into a variety of workable tools to apply the concept in multiple ways.

Think of it like a iterating over an array where you have a "for of" loop. We can employ a different approach (lets say "forEach" for example) to apply the same concept in a different way.

rambda / lodash / underscore / immutable-js

rambda, lodash, underscore, and immutable-js are built with no dependencies that provide many useful utilities to develop both frontend and backend applications.

Something you will notice is that every single one of them are structured very similarly.

This is a good combination of resources to get a good grasp of a modular JavaScript library that serves as utilities.

js-financial-tools

js-financial-tools encapsulates some mathematical utilities to produce functions that cater more to uses in financing. There are no dependencies and is built modularly.