smol-lib

a library for quickly creating web components
zero dependencies - just javascript

View Smol Example Website

---

Another damn library? Why?

Simply just... because. I like to create fun and helpful things - plus there seemed like a slight gap for a web-based, no-build, no-dependencies, no-nothing, prototyping library (at least for me); So here we are.

---

Is it performant?

Probably not... Performance wasn't something I was overly aiming for - it's usable, and works well for smaller prototypes and apps but I wouldn't go off making a full-scale app with it... But then maybe?

---

How do I use it?

yarn add smol-lib
or https://cdn.jsdelivr.net/npm/smol-lib@latest
or copy /lib/index.js into your project.

// via - package import
import { createComponent } from 'smol-lib';

createComponent('my-component', () => {
    return ({ render }) => render`
    <p class="my-component">
        Hello from my component!
    </p>
    `;
}, `
	@keyframes rainbow {
    	0% {
      	color: hsl(0, 100%, 50%);
      }
      
      33% {
      	color: hsl(100, 100%, 50%);
      }
      
      77% {
      	color: hsl(300, 100%, 50%);
      }
      
      100% {
      	color: hsl(360, 100%, 50%);
      }
    }
	
    .my-component {
        animation: rainbow 1s infinite;
    }
`);
}

// via - CDN (https://cdn.jsdelivr.net/npm/smol-lib@latest)
<script type="module" src="https://cdn.jsdelivr.net/npm/smol-lib@latest" onload="onload()"></script>

<script>
    function onload() {
        smol.createComponent('my-component', () => {
        return ({ render }) => render`
        <p class="my-component">
            Hello from my component!
        </p>
        `;
    }, `
        @keyframes rainbow {
            0% {
            color: hsl(0, 100%, 50%);
        }
        
        33% {
            color: hsl(100, 100%, 50%);
        }
        
        77% {
            color: hsl(300, 100%, 50%);
        }
        
        100% {
            color: hsl(360, 100%, 50%);
        }
        }
        
        .my-component {
            animation: rainbow 1s infinite;
        }
    `);
    }
</script>

---

Are there docs?

No docs as of yet, which obviously is not helpful.
However I am working on an example site/app that will have the docs on it... it's in development (no ETA) but you can check it out at
smol-library.web.app
(source code in /example)

---