{"id":15628095,"url":"https://github.com/giuseppeg/xm","last_synced_at":"2025-09-26T15:04:50.164Z","repository":{"id":56687068,"uuid":"287533078","full_name":"giuseppeg/xm","owner":"giuseppeg","description":"₪ extensible HTML","archived":false,"fork":false,"pushed_at":"2020-11-29T17:07:25.000Z","size":133,"stargazers_count":327,"open_issues_count":7,"forks_count":9,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-02T08:08:53.381Z","etag":null,"topics":["html","markdown","markdown-to-html","posthtml"],"latest_commit_sha":null,"homepage":"https://giuseppeg.github.io/xm","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/giuseppeg.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}},"created_at":"2020-08-14T12:56:10.000Z","updated_at":"2024-12-29T13:14:05.000Z","dependencies_parsed_at":"2022-08-15T23:20:27.063Z","dependency_job_id":null,"html_url":"https://github.com/giuseppeg/xm","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fxm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fxm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fxm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giuseppeg%2Fxm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/giuseppeg","download_url":"https://codeload.github.com/giuseppeg/xm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018060,"owners_count":21034048,"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":["html","markdown","markdown-to-html","posthtml"],"created_at":"2024-10-03T10:20:49.964Z","updated_at":"2025-09-26T15:04:45.142Z","avatar_url":"https://github.com/giuseppeg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ₪ xm - extensible HTML\n\nxm is a tiny compiler for HTML that adds\n\n- `\u003cimport\u003e` tag to inline external HTML files\n- `\u003cslot\u003e` and `\u003cfill\u003e` tags to define slots and fill them with content\n- `\u003cmarkdown\u003e` tag to portal into Markdown\n\n\u003cp id=\"screenshot-1\" align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/711311/90286174-9de82c80-de75-11ea-89b2-b8e0fd6c7078.png\" width=\"50%\" alt=\"screenshot of an html template with slots\"\u003e\n\u003c/p\u003e\n\u003cp id=\"screenshot-2\" align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/711311/93567765-7530e680-f98f-11ea-85ce-b25dba7e47f9.png\" width=\"100%\" alt=\"screenshot of an html page that imports the previous example and fills the slots\"\u003e\n\u003c/p\u003e\n\nxm CLI comes with a **dev mode** that compiles and serves built HTML.\n\nFurthermore xm is built on top of [posthtml-cli](https://posthtml.org/#/cli) and therefore it is [extensible](https://posthtml.org/#/cli?id=options).\n\nAre you using xm? Share your site's URL [here](https://github.com/giuseppeg/xm/issues/2).\n\n## Install\n\n```\nnpm i -g xm\n```\n\n### Usage\n\n```\nUsage: xm \u003ccommand\u003e [options]\n\nCommands:\n\n  dev     Compiles HTML files on change and serves the root folder\n  build   Compiles the HTML files once\n  help    Displays help\n\nOptions:\n\n  --root       Folder to compile (default ./)\n  --output     Output (destination) folder. This is necessary only when using xm build\n  --htmlOnly   Compile and copy only the built HTML files\n```\n\n#### `\u003cimport\u003e` element\n\nAllows to inline (import) HTML files into the current one.\n\n```html\n\u003cimport src=\"file.html\" /\u003e\n```\n\nPaths are relative.\n\n```html\n\u003c!-- src/folder/index.html --\u003e\n\n\u003cimport src=\"file.html\" /\u003e\n\u003c!-- file.html -\u003e src/folder/file.html --\u003e\n```\n\nYou can prefix paths with `/` to make them absolute i.e. relative to the `--root` value.\n\n```\n$ xm build --root ./src\n# \u003cimport src=\"file.html\" /\u003e\n# -\u003e ./src/file.html\n```\n\n#### Importing markdown files\n\nxm supports importing `.md` (markdown) files too. When importing such files the front matter declarations are converted to `fill` elements.\n\n```html\n\u003cstyle\u003e\n  /* theme */\n\u003c/style\u003e\n\u003cimport src=\"README.md\" /\u003e\n```\n\n💡 This feature can be used to generate styled docs sites for your open source project!\n\nIf you create a reusable theme for README-like files we encourage you to use the following naming convention:\n\n```\nxm-theme-\u003ctheme-name\u003e\n```\n\nShare your site or theme URL [here](https://github.com/giuseppeg/xm/issues/2).\n\n#### `\u003cslot\u003e` and `\u003cfill\u003e` elements\n\nHTML files can define `slot` elements with an attribute `name`. slots can be filled when importing HTML files using the `fill` tag.\n\n```html\n\u003c!-- base.html --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003ctitle\u003e\u003cslot name=\"title\"\u003e\u003c/slot\u003e\u003c/title\u003e\n\u003cmain\u003e\n  \u003cslot name=\"main\"\u003e\u003c/slot\u003e\n\u003c/main\u003e\n\n\u003c!-- about.html --\u003e\n\n\u003cimport src=\"base.html\"\u003e\n  \u003cfill name=\"title\"\u003eAbout\u003c/fill\u003e\n  \u003cfill name=\"main\"\u003e\n    \u003ch1\u003eAbout\u003c/h1\u003e\n    \u003cp\u003ewelcome\u003c/p\u003e\n  \u003c/fill\u003e\n\u003c/import\u003e\n\u003cfooter\u003eUnique to this page\u003c/footer\u003e\n\n\u003c!-- about.html (compiled with xm) --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003ctitle\u003eAbout\u003c/title\u003e\n\u003cmain\u003e\n  \u003ch1\u003eAbout\u003c/h1\u003e\n  \u003cp\u003ewelcome\u003c/p\u003e\n\u003c/main\u003e\n\u003cfooter\u003eUnique to this page\u003c/footer\u003e\n```\n\nYou can also define a special unnamed `slot` that will be filled with the `import` children that are not `fill` tags:\n\n```html\n\u003c!-- base.html --\u003e\n\n\u003cslot\u003e\u003c/slot\u003e\n\u003cfooter\u003e\u003cslot name=\"footer\"\u003e\u003c/slot\u003e\u003c/footer\u003e\n\n\u003c!-- about.html --\u003e\n\n\u003cimport src=\"base.html\"\u003e\n  \u003cfill name=\"footer\"\u003egood bye\u003c/fill\u003e\n  hello\n  \u003cp\u003efriend\u003c/p\u003e\n\u003c/import\u003e\n\n\u003c!-- about.html (compiled with xm) --\u003e\n\nhello\n\u003cp\u003efriend\u003c/p\u003e\n\u003cfooter\u003egood bye\u003c/footer\u003e\n```\n\n#### Credits\n\n- [Ivan Demidov](https://github.com/scrum) for helping me out with PRs and PostHTML\n- [askucher](https://github.com/askucher) for transferring ownership of the `xm` package\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiuseppeg%2Fxm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiuseppeg%2Fxm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiuseppeg%2Fxm/lists"}