The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Fast & Robust Front-End Micro-framework based on modern standards
    Filed under  › 

    • 🔾41%Overall
    • 795
    • 13 days
    • 🕩53
    • 👥9

    hello, slim.js

    Build Status

    Chat on gitter

    Hello, slim.js

    Declarative Web Components

    Slim is an ultra fast, native and elegant library for Web Components development

    Slim.js is a lightning fast library for development of native Web Components and Custom Elements based on modern standards. No black magic involved, no useless dependencies.

    It uses ES6+DOM native API to boosts up HTML elements with superpowers.

    It is extensible: You can add your own directives (HTML-compilant) for DOM manipulation.

    It is pluggable: You can add plugins that are activated during different hooks in component's lifecycle.

    Is this another framework?

    Nope. It's a very thin code layer (~3k) that adds framework-like power to your custom elements, using only the browser's native capabilities — as defined by W3C standards.

    Here's what you get:

    • Automatic rendering using templates.
    • One-way data binding, derived from templates. No need to declare which properties are what.
    • It can be extended: anyone can add custom plugins or directives.
    • It feels like a framework (in a good way), but without the limits of a classic framework. It works everywhere, you pick your own framework.
    • It's as small as 3.4 KBytes (gzipped) and the built-in directives are OPTIONAL!
    • Single file for core functionality, and you're good to go.
    • No dependencies, everything is based on native browsers' API. Choose your own tools.
    • (Optional) Decorators for ES7/Next syntax, via Babel included.
    • Works with mixins from other component libraries, such as Polymer, out of the box.


    • ES6
    • Web Components V1
    • No transpiling or compilation required

    No Setup required. It just works.

    • Add Slim.js to your project and you're good to go!


    The official website is built with Slim.js (with source maps). Check out the source code, see it for yourself.

    Version 4+ Changes and Migration

    • Package files supports ES6 native modules - i.e. import / exports.
    • For no-modules approach, every file has a filename.nomodule.js
    • Directives are in separate files, to reduce core package size. For using directives:
    import 'slim-js/directives/repeat.js'
    import 'slim-js/directives/if.js'
    import 'slim-js/directives/switch-case.js'
    // Or if you need them all
    import 'slim-js/directives/all.js'
    • For the no-module approach place in your HTML:
    <script src="slim-js/Slim.nomodule.js"></script>
    <script src="slim-js/directives/all.nomodule.js"></script>

    or alternatively use the ES6 native modules in your browser:

    <script type="module" src="slim-js/Slim.js"></script>
    <script type="module" src="slim-js/directives/..."></script>

    Contibutors are welcome.


    Do you want to be a supporter? Contact

    Show All