{"id":22328622,"url":"https://github.com/qrailibs/cwml","last_synced_at":"2026-04-10T21:06:09.476Z","repository":{"id":110318779,"uuid":"336480810","full_name":"qrailibs/CWML","owner":"qrailibs","description":"CWML is JS library that extends your HTML and adds support for custom-defined tags/components.","archived":false,"fork":false,"pushed_at":"2021-12-30T07:45:04.000Z","size":134,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T08:15:59.720Z","etag":null,"topics":["css","css-framework","css-grid","custom-markup","dynamic-html","framework","html","js","js-framework","library","markup-language","reactive"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qrailibs.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}},"created_at":"2021-02-06T07:26:26.000Z","updated_at":"2023-09-27T19:56:35.000Z","dependencies_parsed_at":"2023-04-06T04:00:57.434Z","dependency_job_id":null,"html_url":"https://github.com/qrailibs/CWML","commit_stats":null,"previous_names":["qrai/cwml","qrailibs/cwml"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qrailibs%2FCWML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qrailibs%2FCWML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qrailibs%2FCWML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qrailibs%2FCWML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qrailibs","download_url":"https://codeload.github.com/qrailibs/CWML/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245600621,"owners_count":20642330,"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":["css","css-framework","css-grid","custom-markup","dynamic-html","framework","html","js","js-framework","library","markup-language","reactive"],"created_at":"2024-12-04T03:13:07.396Z","updated_at":"2026-04-10T21:06:09.442Z","avatar_url":"https://github.com/qrailibs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![CWML](https://via.placeholder.com/800x500/232424/0afc77?text=CWML)\n\nCWML is brand-new JavaScript micro-framework to extend HTML and add support for defining custom reactive tags. Micro-framework takes only 3kb and doesn't requires any compilation.\n\n**CWML 2.0 is here - [CWML2](https://github.com/qrai/CWML2)**\n\n# Installation\n1. Copy code of src/cwml.min.js\n2. Create file cwml.min.js in your project dist folder\n3. Write `\u003cscript src=\"dist/cwml.min.js\"\u003e\u003c/script\u003e` in your .html page\n\n# How to use\nIf you need to basically **register new tag** for your HTML page:\n```html\n\u003cmy-tag\u003eHello World Tag!\u003c/my-tag\u003e\n\n\u003cscript src=\"dist/cwml.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    cwml.init();\n    cwml.registerTag(\n        $tag = 'my-tag'\n    );\n\u003c/script\u003e\n```\n**NOTE: place your \u0026lt;script\u0026gt; tag at bottom of the \u0026lt;body\u0026gt;**\n\nIf you need to **add support of custom attributes to your tag**:\n```html\n\u003cmy-tag my-attribute=\"some value\"\u003eHello World Tag!\u003c/my-tag\u003e\n\n\u003cscript src=\"dist/cwml.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    cwml.init();\n    cwml.registerTag(\n        $tag = 'my-tag',\n        $attrs = {\n            'my-attribute': function(el,oldVal,newVal) {\n                console.log('my-attribute was changed to ' + newVal + '!');\n            }\n        }\n    );\n\u003c/script\u003e\n```\n\nAlso **you can add event-handling to your tag**.\nEvent will be handled for every instance of your tag, you can get handled instance by `el` argument. \nYou can handle every html event and also cwml events:\n- `__init__` event (When tag  was initialized/registered)\n- `__added__` event (When tag element was added to document)\n- `__removed__` event (When tag element was removed from document)\n- `__adopted__` event (When tag element was moved/adopted by another element in document)\n\nExample of `click` event handling:\n```html\n\u003cmy-tag\u003eHello World Tag!\u003c/my-tag\u003e\n\n\u003cscript src=\"dist/cwml.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    cwml.init();\n    cwml.registerTag(\n        $tag = 'my-tag',\n        $attrs = {},\n        $events = {\n            click: function(el) {\n                console.log('my-tag was clicked!');\n            }\n        },\n    );\n\u003c/script\u003e\n```\n\nIf you need to **define style of the element** you can use `$props` to set css properties of the tag. Example:\n```html\n\u003cmy-tag\u003eHello World Tag!\u003c/my-tag\u003e\n\n\u003cscript src=\"dist/cwml.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    cwml.init();\n    cwml.registerTag(\n        $tag = 'my-tag',\n        $attrs = {},\n        $events = {},\n        $props = {\n            'color': 'red',\n            'background-color': 'black'\n        }\n    );\n\u003c/script\u003e\n```\n\nAlso **you can define inner HTML of your tag** aka **template of the tag**. That template of tag is defined by specifying `$content` attribute. You can receive attributes of element with `{name-of-attribute}` and initial inner with `{inner}`. Example:\nExample:\n```html\n\u003cmy-tag my-attribute=\"some value\"\u003eMy initial inner\u003c/my-tag\u003e\n\n\u003cscript src=\"dist/cwml.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    cwml.init();\n    cwml.registerTag(\n        $tag = 'my-tag',\n        $attrs = {}, // we dont have to specify attributes if we dont need to observe them\n        $events = {},\n        $props = {},\n        $content = `\n            \u003ch1\u003e{inner} (Attribute value:{my-attribute})\u003c/h1\u003e\n        `\n    );\n\u003c/script\u003e\n```\n\nContent of custom tag works fine and `my-attribute` value assigned. But what if we wil change `my-attribute` dynamicly? - Content will not update. That's because our tag isn't reactive, but **you can make it reactive**! Example:\n```html\n\u003cmy-tag my-attribute=\"some value\"\u003eMy initial inner\u003c/my-tag\u003e\n\n\u003cscript src=\"dist/cwml.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    cwml.init();\n    cwml.registerTag(\n        $tag = 'my-tag',\n        $attrs = ['my-attribute'], // specify attributes, they will be observed\n        $events = {},\n        $props = {},\n        $content = `\n            \u003ch1\u003e{inner} (Attribute value:{my-attribute})\u003c/h1\u003e\n        `\n    );\n\u003c/script\u003e\n```\n\nAlso CWML allows you to register attributes for existing HTML tags, example:\n```html\n\u003ch1 my-attribute=\"some value\"\u003eSome header\u003c/h1\u003e\n\n\u003cscript src=\"dist/cwml.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    cwml.init();\n    cwml.registerAttr(\n        $query = 'h1', // what elements will support that tag (css-like query)\n        $attr = 'my-attribute',\n        $callback = function(el,newVal) {\n            console.log('my-attribute value was changed to ' + newVal);\n        },\n    );\n\u003c/script\u003e\n```\n\n# Browsers Support\n\n| Feature     | Chrome | Firefox | Safari | Opera | Edge | IE | Android WebView |\n|-------------|--------|---------|--------|-------|------|----|-----------------|\n| Custom tags | v66+   | v63+    | v10.1+ | v53+  | v79+ | -  | v66+            |\n\n### Global support: 94.1%\nBut you can use web-components polyfill also.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqrailibs%2Fcwml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqrailibs%2Fcwml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqrailibs%2Fcwml/lists"}