{"id":18040492,"url":"https://github.com/lowlighter/mizu","last_synced_at":"2025-04-12T21:27:48.965Z","repository":{"id":260223140,"uuid":"869262108","full_name":"lowlighter/mizu","owner":"lowlighter","description":"🌊 Lightweight, intuitive, and customizable JS library that makes building powerful web apps a breeze!","archived":false,"fork":false,"pushed_at":"2024-12-20T23:19:57.000Z","size":2814,"stargazers_count":284,"open_issues_count":9,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T01:09:04.446Z","etag":null,"topics":["csr","customizable","deno","html","minimal","reactive","ssg","ssr","template-engine","typescript"],"latest_commit_sha":null,"homepage":"https://mizu.sh/","language":"TypeScript","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/lowlighter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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},"funding":{"github":"lowlighter"}},"created_at":"2024-10-08T02:11:28.000Z","updated_at":"2025-04-02T00:05:53.000Z","dependencies_parsed_at":"2024-12-16T03:18:22.192Z","dependency_job_id":"b50abec2-ffee-4320-97c7-16fb32e7c7e0","html_url":"https://github.com/lowlighter/mizu","commit_stats":null,"previous_names":["lowlighter/mizu"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowlighter%2Fmizu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowlighter%2Fmizu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowlighter%2Fmizu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lowlighter%2Fmizu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lowlighter","download_url":"https://codeload.github.com/lowlighter/mizu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248633806,"owners_count":21136916,"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":["csr","customizable","deno","html","minimal","reactive","ssg","ssr","template-engine","typescript"],"created_at":"2024-10-30T15:04:03.901Z","updated_at":"2025-04-12T21:27:48.938Z","avatar_url":"https://github.com/lowlighter.png","language":"TypeScript","funding_links":["https://github.com/sponsors/lowlighter"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://mizu.sh\"\u003e\u003cimg src=\"https://mizu.sh/minu.png\" width=\"400\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://mizu.sh\"\u003e\n    \u003cimg height=\"28\" src=\"https://img.shields.io/badge/%F0%9F%93%9A-Documentation-black?labelColor=black\" alt=\"Documentation\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://mizu.sh/playground\"\u003e\n    \u003cimg height=\"28\" src=\"https://img.shields.io/badge/%F0%9F%A7%AA-Playground-black?labelColor=black\" alt=\"Playground\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://mizu.sh/build\"\u003e\n    \u003cimg height=\"28\" src=\"https://img.shields.io/badge/%F0%9F%94%A7-Custom%20builder-black?labelColor=black\" alt=\"Custom builder\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://jsr.io/@mizu\"\u003e\n    \u003cimg height=\"28\" src=\"https://img.shields.io/jsr/v/%40mizu/render?logo=jsr\u0026label=jsr.io\u0026labelColor=black\u0026color=black\" alt=\"jsr.io\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://mizu.sh/playground\"\u003e\u003cimg src=\"https://mizu.sh/demo_browser.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003c!-- @mizu/www/html/mizu/usage.html --\u003e\n\n# Usage\n\n## Client-side\n\nSet up _**mizu.js**_ in your browser environment using one of two methods:\n\n- Immediately Invoked Function Expression (IIFE)\n- EcmaScript Module (ESM)\n\n\u003e [!NOTE]\n\u003e\n\u003e On the client-side...\n\u003e\n\u003e - **Rendering is explicit**, requiring the `*mizu` attribute to enable _**mizu.js**_ on a subtree.\n\u003e - **Reactivity is enabled**, so changes to contexts will trigger a re-render.\n\n### IIFE _( `.js`)_\n\nThis setup automatically starts rendering the page once the script is loaded. It's the simplest way to get started but limited to the default configuration.\n\n```html\n\u003cscript src=\"https://mizu.sh/client.js\" defer\u003e\u003c/script\u003e\n```\n\n### ESM _( `.mjs`)_\n\nThis setup requires you to import and start _**mizu.js**_ manually, allowing customization of the rendering process, such as setting the initial context and loading additional directives.\n\n```html\n\u003cscript type=\"module\"\u003e\n  import Mizu from \"https://mizu.sh/client.mjs\"\n  await Mizu.render(document.body, { context: { foo: \"🌊 Yaa, mizu!\" } })\n\u003c/script\u003e\n```\n\n## Server-side\n\nTo set up _**mizu.js**_ in a server environment, install it locally. _**mizu.js**_ packages are hosted on ![jsr.io/@mizu](https://jsr.io/@mizu).\n\n\u003e [!NOTE]\n\u003e\n\u003e On the server side...\n\u003e\n\u003e - **Rendering is implicit**, so the `*mizu` attribute is not required.\n\u003e - **Reactivity is disabled**, meaning changes to contexts are not tracked and will not trigger a re-render.\n\n### Deno\n\nDeno supports the `jsr:` specifier natively, allowing you to import _**mizu.js**_ directly.\n\n```ts\nimport Mizu from \"jsr:@mizu/render/server\"\nawait Mizu.render(`\u003cdiv *text=\"foo\"\u003e\u003c/div\u003e`, { context: { foo: \"🌊 Yaa, mizu!\" } })\n```\n\nAlternatively, add it to your project using the Deno CLI.\n\n```bash\ndeno add jsr:@mizu/render\n```\n\n### Other runtimes (NodeJS, Bun, etc.)\n\nAdd _**mizu.js**_ to your project using the JSR npm compatibility layer.\n\n```bash\n# NodeJS\nnpx jsr add @mizu/render\n```\n\n```bash\n# Bun\nbunx jsr add @mizu/render\n```\n\nOnce installed, use it in your project.\n\n```ts\nimport Mizu from \"@mizu/render/server\"\nawait Mizu.render(`\u003cdiv *text=\"foo\"\u003e\u003c/div\u003e`, { context: { foo: \"🌊 Yaa, mizu!\" } })\n```\n\n\u003c!-- @mizu/www/html/mizu/usage.html --\u003e\n\n# 📜 License\n\n```\nMIT License\n\nCopyright (c) 2024 Simon Lecoq\n```\n\n[`💕 Support mizu.js develoment`](https://github.com/sponsors/lowlighter)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flowlighter%2Fmizu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flowlighter%2Fmizu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flowlighter%2Fmizu/lists"}