{"id":18535559,"url":"https://github.com/beforesemicolon/markup","last_synced_at":"2025-10-14T11:39:25.315Z","repository":{"id":207495596,"uuid":"664112188","full_name":"beforesemicolon/markup","owner":"beforesemicolon","description":"Reactive HTML Templating System","archived":false,"fork":false,"pushed_at":"2025-08-26T06:05:20.000Z","size":2798,"stargazers_count":44,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-14T11:39:22.888Z","etag":null,"topics":["html","html-templating","markup","template-literals","templating","typescript-library","web-development-tools"],"latest_commit_sha":null,"homepage":"https://markup.beforesemicolon.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beforesemicolon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["beforesemicolon"]}},"created_at":"2023-07-09T00:21:51.000Z","updated_at":"2025-10-08T23:18:53.000Z","dependencies_parsed_at":"2023-12-24T22:31:24.837Z","dependency_job_id":"25e05717-1244-4bbc-bfbe-ade3e5fa4d8a","html_url":"https://github.com/beforesemicolon/markup","commit_stats":{"total_commits":269,"total_committers":2,"mean_commits":134.5,"dds":0.01115241635687736,"last_synced_commit":"4f42f5c6830848d2bdee9791065986e21ff7c192"},"previous_names":["beforesemicolon/html"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/beforesemicolon/markup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fmarkup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fmarkup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fmarkup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fmarkup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beforesemicolon","download_url":"https://codeload.github.com/beforesemicolon/markup/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fmarkup/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279019061,"owners_count":26086517,"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-10-14T02:00:06.444Z","response_time":60,"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":["html","html-templating","markup","template-literals","templating","typescript-library","web-development-tools"],"created_at":"2024-11-06T19:25:22.012Z","updated_at":"2025-10-14T11:39:25.267Z","avatar_url":"https://github.com/beforesemicolon.png","language":"TypeScript","funding_links":["https://github.com/sponsors/beforesemicolon"],"categories":[],"sub_categories":[],"readme":"# Markup\n\nReactive HTML Templating System\n\n[![Static Badge](https://img.shields.io/badge/Website-blue)](https://markup.beforesemicolon.com)\n[![MD Docs](https://img.shields.io/badge/MD_docs-blue)](https://github.com/beforesemicolon/markup/blob/main/docs/index.md)\n[![npm](https://img.shields.io/npm/v/%40beforesemicolon%2Fmarkup)](https://www.npmjs.com/package/@beforesemicolon/markup)\n![npm](https://img.shields.io/npm/l/%40beforesemicolon%2Fmarkup)\n[![Test](https://github.com/beforesemicolon/html/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/beforesemicolon/html/actions/workflows/test.yml)\n\nMarkup is a JavaScript reactive templating system built to simplify how you build Web user interfaces using web standards with minimal enhancements to the native web APIs as possible.\n\nIt consists of 3 main APIs with additional utilities to simplify things even further:\n\n-   `html`: A JavaScript tagged function that allows you to represent the DOM using template literal string;\n-   `state`: A simple state tracking API that allows you to define reactive data as you wish;\n-   `effect`: A straight forward way to define things that need to happen when certain states change;\n\n### Motivation\n\nJavaScript, Web Standards and APIs give you everything you need to build any web project you want. What is often painful to deal with is the DOM and reactivity, especially as the project gets bigger or require multiple people collaboration.\n\nMarkup was created to give you all the reactivity you need while making it simple to define your HTML in JavaScript without introducing a new syntax, or requiring a build, or a big library you need to ship to the client.\n\nFrom this:\n\n```javascript\nlet count = 0\n\n// tedious DOM definition and manipulation\nconst p = document.createElement('p')\np.textContent = `count: ${count}`\n\nconst btn = document.createElement('button')\nbtn.type = 'button'\nbtn.textContent = 'count up'\n\n// limiting event driven\nbtn.addEventListener('onclick', () =\u003e {\n    count += 1\n    p.textContent = `count: ${count}`\n\n    if (count \u003e 10) {\n        alert('You counted passed 10!')\n    }\n})\n\ndocument.body.append(p, btn)\n```\n\nTo this:\n\n```javascript\n// reactive data\nconst [count, updateCount] = state(0)\n\n// data driven\neffect(() =\u003e {\n    if (count() \u003e 10) {\n        alert('You counted passed 10!')\n    }\n})\n\nconst countUp = () =\u003e {\n    updateCount((prev) =\u003e prev + 1)\n}\n\n// reactive DOM/templates\nhtml`\n    \u003cp\u003ecount: ${count}\u003c/p\u003e\n    \u003cbutton type=\"button\" onclick=\"${countUp}\"\u003ecount up\u003c/button\u003e\n`.render(document.body)\n```\n\n### How does it work?\n\nMarkup uses [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) and [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) to do everything.\n\n-   **Functions**: JavaScript functions are perfect for lazy evaluations which makes it perfect for reactivity. Markup uses functions everywhere, from internals, defining state, effects, utilities, etc.\n-   **Template Literals**: The template literal is used to represent HTML in JavaScript and to avoid to reinvent the wheel. Everything else is enforced by web standards.\n\nLiterally everything else is how you know it to be in plain HTML, CSS and JavaScript.\n\nWe believe in a simple way to build the web without the jargon of a framework, complex project setups, new syntax, all to spit out HTML, CSS and JavaScript at the end.\n\n#### Examples\n\nThis is a simple example of a button, but you can check:\n\n-   [A Modular Todo App](https://stackblitz.com/edit/web-platform-lvonxr?file=app.js)\n-   [A Simple Counter App](https://stackblitz.com/edit/web-platform-adqrrf?file=app.js)\n-   [A Simple Time App](https://stackblitz.com/edit/web-platform-bwoxex?file=button.js)\n\n## Install\n\n```\nnpm install @beforesemicolon/markup\n```\n\nor\n\n```\nyarn add @beforesemicolon/markup\n```\n\n## Use directly in the Browser\n\nThis library requires no build or parsing. The CDN package is one digit killobyte in size, tiny!\n\n```html\n\u003c!-- Grab the latest version --\u003e\n\u003cscript src=\"https://unpkg.com/@beforesemicolon/markup/dist/client.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Or a specific version --\u003e\n\u003cscript src=\"https://unpkg.com/@beforesemicolon/markup@0.3.0/dist/client.js\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\n```html\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n    const { html, state, effect } = BFS.MARKUP\n\n    html`\u003ch1\u003eHello World\u003c/h1\u003e`.render(document.getElementById('app'))\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeforesemicolon%2Fmarkup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeforesemicolon%2Fmarkup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeforesemicolon%2Fmarkup/lists"}