Flems

As seen on Flems.io

Flems is a static web app - no strings attached - browser code playground. It's great for documentation, examples, presentations, issues and what not.

Getting started

Just load a single file flems.html in a script tag to get started. - why should i load an .html file as a script tag?

<script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script>
<script>
const flems = Flems(document.body, {
    files: [{
        name: 'app.js',
        content: 'm.render(document.body, m("h1", "Hello world"))'
    }],
    links: [{
        name: 'mithril',
        type: 'script',
        url: 'https://unpkg.com/mithril'
    }]
})
</script>

Flems.io of the above

Contents

Content is added to the files and links arrays in options.

.files

The files array should contains objects with the following structure

{
    name        : String, 
    compiler    : String | Function,
    content     : String
}

The following extensions are handled for files (others are ignored)

• .html - Only the first html file is used (others are ignored)
• .js
• .css
• .ts - Will be compiled by typescript
• .ls - Will be compiled by livescript

The following compilers are currently only avaible for js files:

• ts (typescript)
• ls (livescript)
• babel

It is also possible to supply a function that receives the file and returns a promise which resolves to an object with code and map eg.

function compile(file) {
    return new Promise(resolve => {
        return {
            code: file.content.replace(/var /g, 'const '), // Don't do this
            map: null // The JSON for a sourcemap
        }
    })
}

.links

The links array should contain objects with the following structure

{
    name        : String,
    type        : String, // js | css
    url         : String
}

If the url supports CORS, Flems will open files shorther than 200.000 chars in the editor, if not they'll simply be linked to.

Options

Flems is customizable to fit your need. If you don't want the toolbar or don't care for console output you can easily hide that away. The following options with their defaults are available:

{
    middle          : 50,
    selected        : '.js',
    color           : 'rgb(38,50,56)',
    theme           : 'material', // and 'none' or 'default'
    resizeable      : true,
    editable        : true,
    toolbar         : true,
    fileTabs        : true,
    linkTabs        : true,
    shareButton     : true,
    reloadButton    : true,
    console         : true,
    autoReload      : true,
    autoReloadDelay : 400,
    autoHeight      : false
}

Methods

There are a few methods exposed to control the Flems runtime:

.reload()

Reloads the runtime page

.focus()

Set focus in the editor for the currently selected file

.redraw()

Call this if you have changed the size of the container or changed eg. display: none to display: block

Bundling Flems

Bundling Flems doesn't really make sense. Flems uses an iframe as a runtime that needs to be pointed at a URL containing specific code. This is currently done by using the included script both as the required module Flems and as the html file src for the iframe. If for some reason you'd still want to bundle Flems, be aware you'll either need to make the same setup or point to a Flems specific runtime.html file resulting in the same amount of requires. Feel free to create an issue if you need some pointers for doing that.

Tools used to build Flems

Mithril

Mithril is one of few Javascript frameworks that embraces Javascript - the good parts, it's a small package of [8kb] with everything required to make your web app work.

BSS

BSS is a css-in-js framework taking components to the extreme. No more defining intermediate class names for no reason, just focus on building your components using the javascript and the css properties you know. - The perfect companion for mithril.

Wright

Wright is a developmet environment taking away the hassle of setting up a dev server and running a live reload environment. It even hot reloads JS functions and CSS with no specific app modifications needed.

CodeMirror

CodeMirror powers the editor in Flems, and ensures it works great on any device.

Rollup

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

Html script tag

To allow you to use Flems with only a single file to be required the javascript and the html for the iframe runtime has been merged into a single file disguised as flems.html. It works by having the javascript code contained in html comments and the html code contained in javascript comments. In that way if loaded like javascript the html is ignored and when loaded as html the javascript part is ignored.

Thanks

The mithril community has been an amazing help and source for feedback - Thanks to all of you!