- ×Show All
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.
- 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.
- 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.
USE THE PLATFORM
Do you want to be a supporter? Contact firstname.lastname@example.org.