{"id":18876615,"url":"https://github.com/vanjs-org/mini-van","last_synced_at":"2025-04-04T14:02:49.489Z","repository":{"id":163114863,"uuid":"637647353","full_name":"vanjs-org/mini-van","owner":"vanjs-org","description":"Mini-Van: A minimalist template engine for DOM generation and manipulation, working for both client-side and server-side rendering (SSR)","archived":false,"fork":false,"pushed_at":"2025-01-26T19:19:11.000Z","size":312,"stargazers_count":115,"open_issues_count":2,"forks_count":6,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-28T13:03:55.968Z","etag":null,"topics":["compose","deno","deno-module","dom","dom-manipulation","grab-n-go","html-template","lightweight-framework","lightweight-javascript-library","minimalist","server-side-rendering","ssr","template-engine","ultrathin","vanilla-javascript","vanilla-js","vanillajs"],"latest_commit_sha":null,"homepage":"https://vanjs.org/minivan","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/vanjs-org.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-08T05:47:18.000Z","updated_at":"2025-03-27T11:30:36.000Z","dependencies_parsed_at":"2023-11-17T07:48:51.066Z","dependency_job_id":"6f85c278-564e-4d99-96ed-dd5c13971aed","html_url":"https://github.com/vanjs-org/mini-van","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanjs-org%2Fmini-van","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanjs-org%2Fmini-van/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanjs-org%2Fmini-van/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanjs-org%2Fmini-van/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vanjs-org","download_url":"https://codeload.github.com/vanjs-org/mini-van/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247182694,"owners_count":20897436,"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":["compose","deno","deno-module","dom","dom-manipulation","grab-n-go","html-template","lightweight-framework","lightweight-javascript-library","minimalist","server-side-rendering","ssr","template-engine","ultrathin","vanilla-javascript","vanilla-js","vanillajs"],"created_at":"2024-11-08T06:14:27.086Z","updated_at":"2025-04-04T14:02:49.438Z","avatar_url":"https://github.com/vanjs-org.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **Mini-Van**: A Minimalist Template Engine for Client/Server-side Rendering without JSX\n\n**Mini-Van** is an ***ultra-lightweight*** template engine for DOM composition and manipulation. With only 0.7kB in the minified bundle size (0.5kB gzipped), **Mini-Van** enables you to build comprehensive UI with elegant and expressive vanilla JavaScript code:\n\n```javascript\n// Reusable components can be just pure vanilla JavaScript functions.\n// Here we capitalize the first letter to follow React conventions.\nconst Hello = () =\u003e div(\n  p(\"👋Hello\"),\n  ul(\n    li(\"🗺️World\"),\n    li(a({href: \"https://vanjs.org/\"}, \"🍦VanJS\")),\n  ),\n)\n\nvan.add(document.body, Hello())\n// Alternatively, you can write:\n// document.body.appendChild(Hello())\n```\n\n[Try on jsfiddle](https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/minivan/hello)\n\nYou can convert any HTML snippet into **Mini-Van** code with our online [converter](https://vanjs.org/convert).\n\n**Mini-Van** is the slimmed-down version of [**VanJS**](https://vanjs.org), which aims to provide an ***ultra-lightweight***, ***zero-dependency***, and ***unopinionated*** Reactive UI framework based on pure vanilla JavaScript and DOM. Compared to **VanJS**, **Mini-Van** further reduces the gzipped minified bundle size to 0.5kB and (_more importantly_) can be used on the server-side as a [template engine](https://en.wikipedia.org/wiki/Web_template_system).\n\n## Server-Side: NPM Integration\n\n**Mini-Van** can be used on the server side as a template engine to render dynamic web content for HTTP servers. An NPM package was published here: [www.npmjs.com/package/mini-van-plate](https://www.npmjs.com/package/mini-van-plate). Thus it can be used in [Node.js](https://nodejs.org/) or [Bun](https://bun.sh/).\n\nThere are 2 modes for server-side integration: `van-plate` mode (based on text templating, thus doesn't need the DOM dependency), and `mini-van` mode (based on DOM, thus needs the DOM dependency).\n\n### Install\n\n```shell\nnpm install mini-van-plate\n```\n\n### `van-plate` mode\n\nIn `van-plate` mode, HTML content is generated purely through text templating. It can be easily integrated with your HTTP server to render dynamic web content. See the sample code below:\n\n```javascript\nimport http from \"node:http\"\nimport van from \"mini-van-plate/van-plate\"\n\nconst {a, body, li, p, ul} = van.tags\n\nconst hostname = '127.0.0.1'\nconst port = 8080\n\nconsole.log(\"Testing DOM rendering...\")\n// Expecting `\u003ca href=\"https://vanjs.org/\"\u003e🍦VanJS\u003c/a\u003e` printed in the console\nconsole.log(a({href: \"https://vanjs.org/\"}, \"🍦VanJS\").render())\n\nconst server = http.createServer((req, res) =\u003e {\n  res.statusCode = 200\n  res.setHeader('Content-Type', 'text/html; charset=utf-8')\n  res.end(van.html(\n    body(\n      p(\"Your user-agent is: \", req.headers[\"user-agent\"] ?? \"Unknown\"),\n      p(\"👋Hello\"),\n      ul(\n        li(\"🗺️World\"),\n        li(a({href: \"https://vanjs.org/\"}, \"🍦VanJS\")),\n      ),\n    ),\n  ))\n})\n\nserver.listen(port, hostname, () =\u003e\n  console.log(`Server running at http://${hostname}:${port}/`))\n```\n\nPreview via [CodeSandbox](https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/node-examples/van-plate-server?file=%2Fvan-plate-server.mjs%3A1%2C1).\n\nAs illustrated in the example, `render` method can be called on the object returned from the [`tag function`](https://vanjs.org/tutorial#api-tags) to generate a `string` that can be used for serving.\n\n`van.html` is a helper function defined in `van-plate.js` that is equivalent to:\n\n```javascript\n(...args) =\u003e \"\u003c!DOCTYPE html\u003e\" + tags.html(...args).render()\n```\n\n### `mini-van` mode\n\nThe behavior in `mini-van` mode is similar to the behavior in browser context. i.e.: DOM objects will be created by [`tag functions`](https://vanjs.org/tutorial#api-tags). As Node.js doesn't have the built-in support for DOM objects, you need to provide a 3rd-party `Document` object before integrating with **Mini-Van** in this mode.\n\nThere are multiple 3rd-party options for the `Document` object. In the example below, we will demonstrate the integration with the help of [`jsdom`](https://www.npmjs.com/package/jsdom).\n\nNote that, mini-van mode doesn't work in Bun yet due to the integration issue with `jsdom`.\n\nFirst, install `jsdom`:\n\n```shell\nnpm install jsdom\n```\n\nSample code:\n\n```javascript\nimport http from \"node:http\"\nimport jsdom from \"jsdom\"\nimport van from \"mini-van-plate\"\n\nconst dom = new jsdom.JSDOM(\"\")\nconst {html, tags} = van.vanWithDoc(dom.window.document)\nconst {a, body, li, p, ul} = tags\n\nconst hostname = '127.0.0.1'\nconst port = 8080\n\nconsole.log(\"Testing DOM rendering...\")\nconst anchorDom = a({href: \"https://vanjs.org/\"}, \"🍦VanJS\")\n// anchorDom is an HTMLAnchorElement\n// Expecting `\u003ca href=\"https://vanjs.org/\"\u003e🍦VanJS\u003c/a\u003e` printed in the console\nconsole.log(anchorDom.outerHTML)\n\nconst server = http.createServer((req, res) =\u003e {\n  res.statusCode = 200\n  res.setHeader('Content-Type', 'text/html; charset=utf-8')\n  res.end(html(\n    body(\n      p(\"Your user-agent is: \", req.headers[\"user-agent\"] ?? \"Unknown\"),\n      p(\"👋Hello\"),\n      ul(\n        li(\"🗺️World\"),\n        li(a({href: \"https://vanjs.org/\"}, \"🍦VanJS\")),\n      ),\n    ),\n  ))\n})\n\nserver.listen(port, hostname, () =\u003e\n  console.log(`Server running at http://${hostname}:${port}/`))\n```\n\nPreview via [CodeSandbox](https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/node-examples/mini-van-server?file=%2Fmini-van-server.mjs%3A1%2C1).\n\nSimilar to `van-plate` mode, we have a helper function `html` defined in `mini-van.js` which is equivalent to:\n\n```javascript\n(...args) =\u003e \"\u003c!DOCTYPE html\u003e\" + tags.html(...args).outerHTML\n```\n\n## Server-Side: Deno Integration\n\nSimilarly, **Mini-Van** can work with Deno as well, in both `van-plate` mode and `mini-van` mode. A Deno module was published here: [deno.land/x/minivan](https://deno.land/x/minivan).\n\n### `van-plate` mode\n\nSample code:\n\n_Requires Deno `1.35` or later._\n\n```typescript\nimport van from \"https://deno.land/x/minivan@0.6.3/src/van-plate.js\"\n\nconst {a, body, li, p, ul} = van.tags\n\nconst port = 8080\n\nconsole.log(\"Testing DOM rendering...\")\n// Expecting `\u003ca href=\"https://vanjs.org/\"\u003e🍦VanJS\u003c/a\u003e` printed in the console\nconsole.log(a({href: \"https://vanjs.org/\"}, \"🍦VanJS\").render())\n\nconsole.log(`HTTP webserver running. Access it at: http://localhost:${port}/`)\nDeno.serve({port}, req =\u003e new Response(\n  van.html(\n    body(\n      p(\"Your user-agent is: \", req.headers.get(\"user-agent\") ?? \"Unknown\"),\n      p(\"👋Hello\"),\n      ul(\n        li(\"🗺️World\"),\n        li(a({href: \"https://vanjs.org/\"}, \"🍦VanJS\")),\n      ),\n    ),\n  ),\n  {\n    status: 200,\n    headers: {\"content-type\": \"text/html; charset=utf-8\"},\n  },\n))\n```\n\nPreview via [CodeSandbox](https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/deno-examples/van-plate-server?file=%2Fvan-plate-server.ts%3A1%2C1).\n\n### `mini-van` mode\n\nLikewise, `mini-van` mode needs a 3rd-party DOM library to provide the `Document` object. We will show an example with the integration of [deno-dom](https://deno.com/manual@v1.28.1/advanced/jsx_dom/deno_dom).\n\nSample code:\n\n_Requires Deno `1.35` or later._\n\n```typescript\nimport { DOMParser } from \"https://deno.land/x/deno_dom@v0.1.38/deno-dom-wasm.ts\"\nimport van from \"https://deno.land/x/minivan@0.6.3/src/mini-van.js\"\n\nconst document = new DOMParser().parseFromString(\"\", \"text/html\")!\nconst {tags, html} = van.vanWithDoc(document)\nconst {a, body, li, p, ul} = tags\n\nconst port = 8080\n\nconsole.log(\"Testing DOM rendering...\")\nconst anchorDom = a({href: \"https://vanjs.org/\"}, \"🍦VanJS\")\n// anchorDom is an HTMLAnchorElement\n// Expecting `\u003ca href=\"https://vanjs.org/\"\u003e🍦VanJS\u003c/a\u003e` printed in the console\nconsole.log(anchorDom.outerHTML)\n\nconsole.log(`HTTP webserver running. Access it at: http://localhost:${port}/`)\nDeno.serve({port}, req =\u003e new Response(\n  html(\n    body(\n      p(\"Your user-agent is: \", req.headers.get(\"user-agent\") ?? \"Unknown\"),\n      p(\"👋Hello\"),\n      ul(\n        li(\"🗺️World\"),\n        li(a({href: \"https://vanjs.org/\"}, \"🍦VanJS\")),\n      ),\n    ),\n  ),\n  {\n    status: 200,\n    headers: {\"content-type\": \"text/html; charset=utf-8\"},\n  },\n))\n```\n\nPreview via [CodeSandbox](https://codesandbox.io/p/sandbox/github/vanjs-org/vanjs-org.github.io/tree/master/sitegen/deno-examples/mini-van-server?file=%2Fmini-van-server.ts%3A1%2C1).\n\n## Client-Side: Getting Started\n\nTo get started on the client side, add the line below to your script:\n\n```javascript\nimport van from \"https://cdn.jsdelivr.net/gh/vanjs-org/mini-van/public/mini-van-0.6.3.min.js\"\n```\n\nTo code without ES6 modules, add the following line to your HTML file instead:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/vanjs-org/mini-van/public/mini-van-0.6.3.nomodule.min.js\"\u003e\u003c/script\u003e\n```\n\nAlternative, you can download the files ([`mini-van-0.6.3.min.js`](https://vanjs.org/autodownload?file=mini-van-0.6.3.min.js), [`mini-van-0.6.3.nomodule.min.js`](https://vanjs.org/autodownload?file=mini-van-0.6.3.nomodule.min.js)) and serve them locally.\n\nYou can find all relevant **Mini-Van** files in this [Download Table](https://vanjs.org/minivan#download-table).\n\n## API Reference\n\n**Mini-Van** exposes the same set of APIs as **VanJS** for DOM composition and manipulation. Thus for API reference, you can refer to [DOM Composition and Manipulation](https://vanjs.org/tutorial#dom) section of **VanJS** tutorial. Note that: state and state binding are not supported in **Mini-Van**.\n\n## Support \u0026 Feedback\n\n🙏 **VanJS** aims to build a better world by reducing the entry barrier of UI programming, with no intention or plan on commercialization whatsoever. If you find **VanJS** interesting, or could be useful for you some day, please consider starring the project. It takes just one seconds but your support means the world to us and helps spread **VanJS** to a wider audience.\n\nWe're looking for the 1.0 milestone (commitment to API stability) soon, your precious feedback will be greatly appreciated. You can submit your feedback by [creating issues](https://github.com/vanjs-org/mini-van/issues/new).\n\nContact us: [tao@vanjs.org](mailto:tao@vanjs.org)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanjs-org%2Fmini-van","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvanjs-org%2Fmini-van","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanjs-org%2Fmini-van/lists"}