{"id":15601213,"url":"https://github.com/hacknlove/filar","last_synced_at":"2025-11-20T00:02:57.548Z","repository":{"id":77995986,"uuid":"588681368","full_name":"hacknlove/filar","owner":"hacknlove","description":null,"archived":false,"fork":false,"pushed_at":"2023-04-27T18:09:33.000Z","size":375,"stargazers_count":2,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T07:34:20.297Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hacknlove.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-01-13T18:13:42.000Z","updated_at":"2024-04-25T02:56:22.000Z","dependencies_parsed_at":"2024-11-11T04:29:19.929Z","dependency_job_id":"45dd2dfe-89e4-447d-8fbd-3a20d3ecc41f","html_url":"https://github.com/hacknlove/filar","commit_stats":{"total_commits":103,"total_committers":1,"mean_commits":103.0,"dds":0.0,"last_synced_commit":"398eec57efe02115fcc4a1520def9dc2653c0ebd"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/hacknlove/filar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacknlove%2Ffilar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacknlove%2Ffilar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacknlove%2Ffilar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacknlove%2Ffilar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hacknlove","download_url":"https://codeload.github.com/hacknlove/filar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacknlove%2Ffilar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285348528,"owners_count":27156475,"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","status":"online","status_checked_at":"2025-11-19T02:00:05.673Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-10-03T02:19:56.077Z","updated_at":"2025-11-20T00:02:57.454Z","avatar_url":"https://github.com/hacknlove.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Filar\n\nFilar is an HTML framework specifically designed to minimize the reliance on JavaScript, making web development more accessible to the common folk.\n\n## Documentation\n\n[filar/docs](https://github.com/hacknlove/filar/tree/master/docs)\n\n## Why?\n\nThe Web is broken, if we attend to its original ideas and goals.\n\nBack in time, html was designed to be a markup language, not a programming language. It was designed so anybody can write a web, not only JavaScript programmers.\n\nBut we, javascript programmers, in our intent to continuously improve our productivity and development experiencie, have made the web a place where only we can write it.\n\nWe completely forgot the development expecience of the common folk that cannot write JavaScript, or at most, can write a little bit of it.\n\nI remember when I was a kid, I was able to write a web page with just HTML, CSS, and a bit of JavaScript.\n\nI think JavaScript frameworks are great. They allow us, developers, to write very complex web applications with low effort, but for the common folk, they are too much.\n\nFor these people, I decided to create Filar, to bring them back the simplicity of the web.\n\n## How?\n\nFilar translates the development experience of a JavaScript framework to a HTML framework:\n\nTo list a few:\n\n- Reusable components\n- Dynamic Routing\n- Reactive state\n- Modular CSS\n\n## Quick Examples\n\n### Components\n\nAny file with the `.se.html` extension is a Server Element.\n\n**/components/Hello.se.html**\n\n```html\n\u003cdiv\u003e\n  \u003ch1\u003eHello, {{name}}!\u003c/h1\u003e\n\u003c/div\u003e\n```\n\n**/pages/index.html**\n\n```html\n\u003cHello name=\"'World'\" /\u003e\n```\n\n**Output**\n\n```html\n\u003cdiv\u003e\n  \u003ch1\u003eHello, World!\u003c/h1\u003e\n\u003c/div\u003e\n```\n\nNo JavaScript required at all.\n\n### Routing\n\nIt follows the Filesystem routing pattern.\n\n**/blog/[id].html**\n\n```html\n\u003cSSR\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eThis is a blog {{params.id}}\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/SSR\u003e\n```\n\n**Output**\n\n**http://localhost:3000/blog/1**\n\n```html\n\u003cdiv\u003e\n  \u003ch1\u003eThis is a blog 1\u003c/h1\u003e\n\u003c/div\u003e\n```\n\n**Note**\nThe context from the request is only available in the SSR components.\n\n### Reactive state\n\nYou can declare reactive islands, whose state can be used by all its children.\n\n**/pages/index.html**\n\n```html\n\u003cdiv id=\"foo\" -- likes=\"0\" dislikes=\"0\"\u003e\n  \u003ch1\u003eLikes: {(likes)} Dislikes: {(dislikes)}\u003c/h1\u003e\n  \u003cbutton onclick=\"foo.state.likes++\"\u003eLike\u003c/button\u003e\n  \u003cbutton onclick=\"foo.state.dislikes++\"\u003eDislike\u003c/button\u003e\n\u003c/div\u003e\n```\n\nThe built-in `Island` Server Element makes its parent element reactive, and initializes the state.\n\n**Output**\n\n```html\n\u003cscript type=\"module\" src=\"/[hash].mjs\"\u003e\u003c/script\u003e\n...\n\u003cdiv id=\"foo\"\u003e\n  \u003ch1\u003eLikes: 0 Dislikes: 0\u003c/h1\u003e\n  \u003cbutton onclick=\"foo.state.likes++\"\u003eLike\u003c/button\u003e\n  \u003cbutton onclick=\"foo.state.dislikes++\"\u003eDislike\u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Modular CSS\n\nJust drop your CSS or (SCSS) files anywhere in the project, and they will be automatically loaded.\n\n```html\n\u003cSassStyle /\u003e\n```\n\nYou can set a directory and a pattern to SassStyle to load only the files you want.\n\n```html\n\u003cSassStyle cwd=\"components\" pattern=\"*.scss\" /\u003e\n```\n\n**Output**\n\n```html\n\u003chead\u003e\n  ...\n  \u003clink rel=\"stylesheet\" href=\"[hash].css\" type=\"text/css\" /\u003e\n\u003c/head\u003e\n```\n\nAdd the attribute `embedded` to embed the CSS in the page.\n\n```html\n\u003cSassStyle embedded /\u003e\n```\n\n**Output**\n\n```html\n\u003chead\u003e\n  ...\n  \u003cstyle\u003e\n    /* your scss files combines, compiled and minimified here */\n  \u003c/style\u003e\n\u003c/head\u003e\n```\n\nNotice that styles are hoisted to the head of the page.\n\n## Live Examples\n\n### The Masterful Speaker's Journey\n\n- Source: https://github.com/hacknlove/tmsj/\n- Live: https://tmsj.hacknlove.org/\n\nIt's a learning game for public speaking.\n\n## Status\n\nFilar is still being prototyped, and you should not use it in production.\n\nYou can play with it, and contribute with code or ideas.\n\n## Roadmap\n\n- [ ] Client Elements\n- [ ] Server directives\n- [ ] API endpoints\n- [ ] Builder for dynamic sites\n- [ ] More examples\n- [ ] Tutorials\n- [ ] Deploy static site GitHub pages\n- [ ] Deploy static site to Cloudflare\n- [ ] Deploy dynamic site to Cloudflare\n\n## Requests and Suggestions\n\nPlease use GitHub issues to request features, give feedback and suggestions, and to report bugs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacknlove%2Ffilar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhacknlove%2Ffilar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacknlove%2Ffilar/lists"}