{"id":23896512,"url":"https://github.com/brecert/ytl","last_synced_at":"2025-07-19T04:33:41.481Z","repository":{"id":113036537,"uuid":"593818622","full_name":"brecert/ytl","owner":"brecert","description":"a small htm like dsl for writing markup in javascript","archived":false,"fork":false,"pushed_at":"2023-01-27T22:35:42.000Z","size":33,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-29T04:16:33.258Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brecert.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-26T22:44:02.000Z","updated_at":"2023-07-18T14:59:12.000Z","dependencies_parsed_at":"2023-06-06T15:45:41.627Z","dependency_job_id":null,"html_url":"https://github.com/brecert/ytl","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/brecert/ytl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brecert%2Fytl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brecert%2Fytl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brecert%2Fytl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brecert%2Fytl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brecert","download_url":"https://codeload.github.com/brecert/ytl/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brecert%2Fytl/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265888941,"owners_count":23844533,"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":"2025-01-04T16:53:00.408Z","updated_at":"2025-07-19T04:33:41.470Z","avatar_url":"https://github.com/brecert.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ytl\n\n`ytl` is a small `htm` like dsl for writing markup in javascript.\n\nIt uses javascript's [tagged templates] to to allow for interpolation of values.\n\n## Syntax\n\nThe syntax is fairly simple, and is meant to be easier to type than htm.\n\n```slim\n// this is a comment\n// nodes\ndiv {}\n\n// you can have multiple root nodes\n// attributes can be interpolated into for both the key and value\n// attributes with no values are possible\ndiv key=\"value\" ${key}=${value} draggable {}\n\n// strings can be used as a value for keys as well\ndiv \"this is a key\"=\"foo\" {}\n\n// nodes can contain children\n// strings can be used as a value\nlabel {\n  img {}\n  \"hello world\"\n  input {}\n}\n\n// attributes can be spread\ndiv ...${props} {}\n\n// children can be spread as well\ndiv {\n  ...${children}\n}\n\n// components are possible\n// where `Button` is a component reference\n${Button} type=\"submit\" {}\n```\n\n## Features\n\n- no transpiler or build step necessary\n- \u003c **450 bytes** (brotli compressed)\n\n## Usage\n\nSince `ytl` is a generic library, we need to tell it what to \"compile\" our templates to.\nYou can bind `ytl` to any function of the form `h(type, props, ...children)` _([hyperscript])_.\nThis function can return anything - `ytl` never looks at the return value.\n\nHere's an example `h()` function that returns tree nodes:\n\n```js\nfunction h(type, props, ...children) {\n  return { type, props, children };\n}\n```\n\nTo use our custom `h()` function, we need to create our own `ytml` tag function by binding `ytl` to our `h()` function:\n\n```js\nimport ytl from '@brecert/ytl';\nconst ytml = ytl.bind(h);\n```\n\nNow we have an `ytml()` template tag that can be used to produce objects in the format we created above.\n\nHere's the whole thing for clarity:\n\n```js\nimport ytl from '@brecert/ytl';\nfunction h(type, props, ...children) {\n  return { type, props, children };\n}\nconst ytml = ytl.bind(h);\nconsole.log( ytml`h1 id=hello { \"Hello world!\" }` );\n// [{\n//   type: 'h1',\n//   props: { id: 'hello' },\n//   children: ['Hello world!']\n// }]\n```\n\n## Credits\n\nMany thanks to [htm]. This project is heavily based on it, including this readme.\n\n[htm]: https://github.com/developit/htm\n[hyperscript]: https://github.com/hyperhype/hyperscript\n[tagged templates]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrecert%2Fytl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrecert%2Fytl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrecert%2Fytl/lists"}