{"id":23413564,"url":"https://github.com/zumerlab/zumly","last_synced_at":"2025-08-10T13:09:07.012Z","repository":{"id":45408136,"uuid":"278962601","full_name":"zumerlab/zumly","owner":"zumerlab","description":"Zumly is a JS library for building zooming user interfaces","archived":false,"fork":false,"pushed_at":"2025-04-27T17:27:27.000Z","size":1703,"stargazers_count":87,"open_issues_count":6,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-09T00:49:53.716Z","etag":null,"topics":["javascript-library","ui","user-interface","zoomable","zooming","zui"],"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/zumerlab.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2020-07-12T00:14:36.000Z","updated_at":"2025-08-07T14:39:04.000Z","dependencies_parsed_at":"2025-05-07T13:32:07.719Z","dependency_job_id":"b33ae01c-e6e9-4ef2-9453-99feb7e3674d","html_url":"https://github.com/zumerlab/zumly","commit_stats":null,"previous_names":["zumly/zumly"],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/zumerlab/zumly","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Fzumly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Fzumly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Fzumly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Fzumly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zumerlab","download_url":"https://codeload.github.com/zumerlab/zumly/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zumerlab%2Fzumly/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269674775,"owners_count":24457430,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["javascript-library","ui","user-interface","zoomable","zooming","zui"],"created_at":"2024-12-22T19:38:10.129Z","updated_at":"2025-08-10T13:09:06.957Z","avatar_url":"https://github.com/zumerlab.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://zumly.org\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/zumly/website/gh-pages/images/logo-zumly.png\" width=\"200\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Zumly is a Javascript library for building zooming user interfaces. Create zooming experiences using web standards.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/zumly\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/zumly.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Status\n\nZumly is being developed from strach (again :)). The code in this repo is outdated. \n\n\n## Overview\n\nZumly is a frontend library for creating zoomable user interfaces ([ZUI](https://en.wikipedia.org/wiki/Zooming_user_interface)). Instead of hyperlinks and windows, Zumly uses zooming as a metaphor for browsing through information. This way it offers an infinite virtual canvas in which elements can be zoomed themselves to reveal further details. \n\nTo be more flexible Zumly is primarily focused on zooming transitions without caring about visual design. Most CSS frameworks or custom designs work with Zumly.\n\n## Installation\n\n### NPM\n```sh\nnpm install zumly\n\n# or\n\nyarn add zumly\n```\n\n### Content delivery networks (CDN)\nInclude https://unpkg.com/zumly in your project in a `\u003cscript\u003e` tag. \n\n\n### Direct download\n\nDownload Zumly files from [unpkg.com](https://unpkg.com/zumly/). Files are in `dist` folder.\n\n\n## Setup\n\n\n### ES6 modules\n\n1. Add CSS inside `\u003chead\u003e` tag: \n```html\n\n\u003clink rel=\"stylesheet\" href=\"zumly/dist/zumly.css\"\u003e\n\n\u003c!-- Or \"https://unpkg.com/zumly@0.9.11/dist/zumly.css\" --\u003e\n\n```\n\n2. Add Zumly as ES6 module: \n```html\n\u003cscript type=\"module\"\u003e\n  import Zumly from \"zumly/dist/zumly.mjs\"\n\n  // Or \"https://unpkg.com/zumly@0.9.11/dist/zumly.mjs\"\n\u003c/script\u003e\n```\n\n### UMD modules\n\n1. Add Zumly CSS Styles inside `\u003chead\u003e` tag: \n```html\n\n\u003clink rel=\"stylesheet\" href=\"zumly/dist/zumly.css\"\u003e\n\n\u003c!-- Or \"https://unpkg.com/zumly@0.9.11/dist/zumly.css\" --\u003e\n\n```\n\n2. Add Zumly as UMD module: \n```html\n\n\u003cscript src=\"zumly/dist/zumly.umd.js\"\u003e\u003c/script\u003e\n\n// Or \"https://unpkg.com/zumly\"\n\n```\n\n\n## Hello World\n\n1. Create a container for your Zumly app with `.zumly-canvas`: \n\n```html\n\n\u003cdiv class=\"example zumly-canvas\"\u003e\u003c/div\u003e\n\n```\n\n2. Inside `script` tag write this code:\n\n```js\n// Some views\nconst hello = `\n\u003cdiv class=\"z-view\"\u003e\nH E L L O \u003cbr\u003e\nW \u003cspan class=\"zoom-me\" data-to=\"world\"\u003eO\u003c/span\u003e R L D!\n\u003c/div\u003e\n`;\n\nconst world = `\n\u003cdiv class=\"z-view\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/zumly/website/gh-pages/images/world.png\"/\u003e\n\u003c/div\u003e\n`;\n\n// Zumly instance\nconst app = new Zumly({\n  mount: '.example',\n  initialView: 'hello',\n  views: {\n    hello,\n    world\n  }\n})\n\napp.init()\n\n```\n\n- See this example live at [codePen](https://codepen.io/zumly/pen/gOPQovd)\n\n### Zumly options\n\n1. The Zumly instance:\n\n```js\nconst app = new Zumly({\n  // Mount DOM Element. String. Required\n  mount: '.className',\n  // First rendered view name. String. Required\n  initialView: 'viewName',\n  // Store all views. Object. Required\n  views: {\n    view1,\n    view2,\n    . . .\n  }, \n  // Customize transitions. Object. Optional\n  transitions: {\n    // Effects for background views. Array. ['blur', 'sepia', 'saturate']\n    effects: ['sepia'],\n    // How new injected view is adapted. String. Default 'width'\n    cover: 'height',\n    // Transition duration. String. Default '1s'\n    duration: '1300ms' ,\n    // Transition ease. String. Default 'ease-in-out'\n    ease: 'cubic-bezier(0.25,0.1,0.25,1)'\n  },\n  // Activate debug notifications. Boolean. Default false\n  debug: true\n})\n// Initialize instance\napp.init()\n```\n\n2. Options for each zoomable element:\n\n- Add `z-view` class in you view container:\n\n```html\n\n\u003cdiv class=\"z-view\"\u003e\u003c/div\u003e\n\n```\n\n- Add `zoom-me` class to an HTML element to make it zoomable and add `data-to` attribute with the name of the target view\n\n```html\n\n\u003cdiv class=\"zoom-me\" data-to=\"anotherView\"\u003eZoom me!\u003c/div\u003e\n\n```\n\n- Each zooming transition can be customized by adding some `data-` attributes:\n\n```html\n\n\u003cdiv class=\"zoom-me\" data-to=\"anotherView\" data-with-duration=\"2s\" data-with-ease=\"ease-in\"\u003e\n  Zoom me!\n\u003c/div\u003e\n\n```\n\n## Development \n\n### Developer environment requirements\n\nTo run this project, you will need:\n\n- Node.js \u003e= v10.5.0\n\n### Dev mode\n\nWhen developing you can run:\n\n```sh\nnpm run dev\n\n# or\n\nyarn dev\n```\n\nThis will regenerate the build files each time a source file is changed and serve on http://localhost:9090\n\n### Running tests\n\n```sh\nnpm run test\n\n# or\n\nyarn test\n```\n\n### Building\n\n```sh\nnpm run build\n\n# or\n\nyarn build\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n### Status: beta\n\nZumly is on early stages of development.\n\n### Roadmap\n\n- Allow different template engines. Currently Zumly only accepts string literal templates.\n- Add lateral navigation for same zoom level elements.\n- Add a navegation widget.\n- Add programmatic navigation.\n- Add preseted navigation.\n- Add router. [#3](https://github.com/zumly/zumly/issues/3)\n- Allow recalculate zoom position on resize events.\n\n\n## Stay in touch\n\n- [Telegram group](https://t.me/ZumlyCommunity)\n\n## Original idea\n\nZumly is a new approach based on another library I made, [Zircle UI](https://github.com/zircleUI/zircleUI)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzumerlab%2Fzumly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzumerlab%2Fzumly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzumerlab%2Fzumly/lists"}