An in-browser module loader configured to get external dependencies directly from CDN. Includes babel/typescript. For quick prototyping, code sharing, teaching/learning - a super simple web dev environment without node/webpack/etc.

Angular, React, Vue, Bootstrap, Handlebars, jQuery are included. Plus all packages from cdnjs.com and all of NPM (via unpkg.com). Most front-end libraries should work out of the box - just use import/require(). If a popular library does not load, tell us and we'll try to solve it with some library-specific config.

Use latest language features or JSX and the code will be transpiled in-browser via babel or typescript (if required). To make it fast the transpiler will start in a worker thread and only process the modified code. Unless you change many files at once or open the project for the first time, the transpiling should be barely noticeable as it runs in parallel with loading and initializing the UI framework.

No need for a build process or even a web server. Just use static files, open in a browser and hit refresh :-). Or run Browsersync in watch mode for auto-reload.

ATTENTION! This is all good for dev environment only. Before going to production, you still need to setup webpack/rollup/eslint/karma/whatever and run a proper build. It is not a good idea to transpile your code in-browser in production (unless it is only required for a small number of older browsers - but we are not there yet :-).

There is nothing to install, just include a link to getlibs script on CDN -

<script src="https://unpkg.com/getlibs"></script>

Organize your code as separate modules and call System.import() to load the app.

<script>
    System.import('./main.js');
</script>

Or use <script type="x-module">...</script> to put everything into index.html

var compile = require('lodash/template'),
    template = require('./hello.tpl'),
    data = require('./hello.json'),
    render = compile(template);

document.getElementById('app').innerHTML = render(data);

[Full Source]   [Open in browser]  

import React from 'react';
import ReactDOM from 'react-dom';
const msg = 'Hello World!';

ReactDOM.render(<h1>{msg}</h1>, document.getElementById('app'));

[Full Source]   [Open in browser]  

import {Component} from '@angular/core';

@Component({
    selector: '#app',
    templateUrl: './app.component.html'
})

export class AppComponent {
    msg = 'Hello World!';
}

[Full Source]   [Open in browser]  

You will get cross origin errors if you open the examples in chrome directly from the filesystem. To allow file access in chrome lauch it with --allow-file-access-from-files flag (more info).

getlibs is based on SystemJS module loader. Instead of typical setup where it looks for external packages in node_modules directory, getlibs is configured to load libraries directly from NPM (via unpkg.com) or cdnjs.com, if available.

SystemJS is a module loader developed by Guy Bedford.

getlibs is a bundle of SystemJS with a custom config - maintained by ActiveWidgets.