{"id":13470686,"url":"https://github.com/porsager/flems","last_synced_at":"2025-04-12T16:38:17.891Z","repository":{"id":25512803,"uuid":"104206646","full_name":"porsager/flems","owner":"porsager","description":"A single file web playground and sandbox","archived":false,"fork":false,"pushed_at":"2023-11-03T06:47:23.000Z","size":2824,"stargazers_count":509,"open_issues_count":25,"forks_count":89,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-04-03T18:12:49.591Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/porsager.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-20T11:26:47.000Z","updated_at":"2025-03-27T23:21:46.000Z","dependencies_parsed_at":"2023-02-18T12:19:31.004Z","dependency_job_id":"360338de-da31-470a-98d3-a24c95ec2e52","html_url":"https://github.com/porsager/flems","commit_stats":{"total_commits":290,"total_committers":6,"mean_commits":"48.333333333333336","dds":0.03448275862068961,"last_synced_commit":"e6ae0509d3345e3d8b6ade5e3f0c8ceafec452f8"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/porsager%2Fflems","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/porsager%2Fflems/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/porsager%2Fflems/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/porsager%2Fflems/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/porsager","download_url":"https://codeload.github.com/porsager/flems/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248597730,"owners_count":21130933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T16:00:34.007Z","updated_at":"2025-04-12T16:38:17.864Z","avatar_url":"https://github.com/porsager.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized","others"],"sub_categories":["Uncategorized"],"readme":"# Flems \n\n\u003e As seen on [Flems.io](https://flems.io)\n\nFlems is a static web app - no strings attached - browser code playground.\nIt's great for documentation, examples, presentations, issues and what not.\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://flems.io\"\u003e\n        \u003cimg src=\"https://a.flems.io/intro.gif\" alt=\"Flems example\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## Getting started\nJust load a single file [`flems.html`](https://flems.io/flems.html) in a script tag to get started. - [why should i load an .html file as a script tag?](#html-script-tag)\n\n``` html\n\u003cscript src=\"https://flems.io/flems.html\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nconst flems = Flems(document.body, {\n    files: [{\n        name: 'app.js',\n        content: 'm.render(document.body, m(\"h1\", \"Hello world\"))'\n    }],\n    links: [{\n        name: 'mithril',\n        type: 'script',\n        url: 'https://unpkg.com/mithril'\n    }]\n})\n\u003c/script\u003e\n```\n\n[Flems.io of the above](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8WAIwA+ADp0ABNIAqWMmGlLpAMRi5lZGRohapggPSjJdQUjIA3FUgC8E0prCOzxy1bcAHM7L1aVZQgGMAoAT2l9ACNkJGQVGSRuWABXZj4GeDJeSPhYDALDIx9DMFgAJzIveGkwctgHEBx4LzBUIyMSZwxszu72KEdpeDCvCEbEAA94IwArBisQiqr4IdgsBnLIeEaU+BIAWgAOV2Myyuq3c5WxaSlZWQB3HSTHjH8wAAou-TBCaWA9wewPIlFQ0loQOB0OkjGY4IA5AwvF4MLMwAjCFCYQ8eHwIHxEbgMOUCXFyp8JFIqfAkql0vAMFFuEgwljqRI8JSmiJHP9HAAJaBQbjSR7ccpQJCOACUVLoMoR2OBAF8ALpYmQ4qA6ADWbQhgK1OIecIgRLI8CwlSgmOVOJGY0R6LtxpN0hSksRzVa7SMKToXl1AHMMDxcEZcJbrRQlW7VWrsSq5eYjNdLpxIDAENk6FR0CJUAAmAAsIBVhHoTBY6DRVGIeP48FY5crIDNrDDYHrXF4TdYon+XgBQNwm2DOgO8G4XnBAGYAAxeSYAbiBU3gBwYOuDdHBsAJiHKa61JD7BxITHC4LADDzB0glRIJ5V1LoAGIfgEjbIx+UJ3u0hFkukzSCWIEnrIWAQGQwY4OC4EQUCzKTA+GyvOCC7SFhwHLtI-5RAwnwLoQJEkRgc4AKwpiq5ZqiqQA)\n\n## Contents\n\nContent is added to the `files` and `links` arrays in options. \n\n## `.files`\nThe files array should contains objects with the following structure\n```js\n{\n    name        : String, \n    compiler    : String | Function,\n    content     : String\n}\n```\nThe following extensions are handled for files (others are ignored)\n- `.html` - Only the first html file is used (others are ignored)\n- `.js`\n- `.css`\n- `.ts` - Will be compiled by typescript\n- `.ls` - Will be compiled by livescript\n\nThe following compilers are currently only avaible for js files:\n- `ts` (typescript)\n- `ls` (livescript)\n- `babel`\n\nIt 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.\n```js\nfunction compile(file) {\n    return Promise.resolve({\n        code: file.content.replace(/var /g, 'const '), // Don't do this\n        map: null // The JSON for a sourcemap\n    })\n}\n```\n\n## `.links`\nThe links array should contain objects with the following structure\n```js\n{\n    name        : String,\n    type        : String, // js | css\n    url         : String\n}\n```\nIf the url supports CORS, Flems will open files shorther than 200.000 chars in the editor, if not they'll simply be linked to.\n\n## Options\n\nFlems 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:\n\n```js\n{\n    middle          : 50,\n    selected        : '.js',\n    color           : 'rgb(38,50,56)',\n    theme           : 'material', // and 'none' or 'default'\n    resizeable      : true,\n    editable        : true,\n    toolbar         : true,\n    fileTabs        : true,\n    linkTabs        : true,\n    shareButton     : true,\n    reloadButton    : true,\n    console         : true,\n    autoReload      : true,\n    autoReloadDelay : 400,\n    autoHeight      : false\n}\n```\n\n## Methods\n\nThere are a few methods exposed to control the Flems runtime:\n\n### `.reload()`\nReloads the runtime page\n\n### `.focus()`\nSet focus in the editor for the currently selected file\n\n### `.redraw()`\nCall this if you have changed the size of the container or changed eg. `display: none` to `display: block`\n\n## Bundling Flems\n\nBundling 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](https://github.com/porsager/flems/issues) if you need some pointers for doing that.\n\n## Tools used to build Flems\n\n### [Mithril](https://mithril.js.org)\nMithril 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.\n\n### [BSS](https://github.com/porsager/bss)\nBSS 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.\n\n### [Wright](https://github.com/porsager/wright)\nWright 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.\n\n### [CodeMirror](https://codemirror.net/)\nCodeMirror powers the editor in Flems, and ensures it works great on any device.\n\n### [Rollup](https://rollupjs.org/)\nRollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.\n\n## Html script tag\n\nTo 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](https://github.com/porsager/flems/blob/master/scripts/standalone.js) 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.\n\n## Thanks\n\nThe [mithril community](https://gitter.im/mithriljs/mithril.js) has been an amazing help and source for feedback - Thanks to all of you!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fporsager%2Fflems","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fporsager%2Fflems","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fporsager%2Fflems/lists"}