{"id":13534293,"url":"https://github.com/danzen/zimjs","last_synced_at":"2025-05-15T01:07:28.671Z","repository":{"id":23733815,"uuid":"27107313","full_name":"danzen/zimjs","owner":"danzen","description":"ZIM JavaScript Canvas Framework - Code Creativity! Interactive Media For All.","archived":false,"fork":false,"pushed_at":"2025-05-04T15:48:08.000Z","size":12204,"stargazers_count":545,"open_issues_count":2,"forks_count":48,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-05-04T15:53:57.099Z","etag":null,"topics":["canvas","canvas-framework","creativity","javascript","learn-to-code","learning","teaching","zim","zimjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danzen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","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,"zenodo":null},"funding":{"github":["danzen"],"patreon":"zimjs","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2014-11-25T03:28:27.000Z","updated_at":"2025-05-04T15:48:11.000Z","dependencies_parsed_at":"2023-01-13T23:46:33.908Z","dependency_job_id":"79b7feec-43c7-456d-bb6e-ab5e5cc1cf6a","html_url":"https://github.com/danzen/zimjs","commit_stats":{"total_commits":386,"total_committers":3,"mean_commits":"128.66666666666666","dds":0.007772020725388629,"last_synced_commit":"9eaa42e456ba4089fe5349308d223cf9a333083a"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danzen%2Fzimjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danzen%2Fzimjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danzen%2Fzimjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danzen%2Fzimjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danzen","download_url":"https://codeload.github.com/danzen/zimjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254254041,"owners_count":22039792,"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":["canvas","canvas-framework","creativity","javascript","learn-to-code","learning","teaching","zim","zimjs"],"created_at":"2024-08-01T07:01:29.881Z","updated_at":"2025-05-15T01:07:23.639Z","avatar_url":"https://github.com/danzen.png","language":"JavaScript","readme":"# ZIM \nJavaScript Canvas Framework - Code Creativity!\u003cbr\u003e\nhttps://zimjs.com\n\nA consistent, complete, simple and colorful Canvas Framework that provides quick visual results.  ZIM is great for learning to code but also powerful for professionals to make games, apps, art and more for desktop and mobile!\n\nPlease see the About section for why we use ZIM to make Interactive Media.\u003cbr\u003e\nhttps://zimjs.com/about.html\n\n## Examples\n\n![zim](https://github.com/danzen/zimjs/assets/380281/af5c1e20-9f74-4b60-81f8-4ca1052ef16a)\n\nZIM is great for games, puzzles, art, visualizations, interfaces and more!  See:\u003cbr\u003e\nhttps://zimjs.com/examples.html\u003cbr\u003e\n\nCoding in ZIM looks like this:\n\n```javascript\nnew Rectangle(50, 50, green).center().drag(); // for a centered draggable rectangle!\n\nnew MotionController(new Emitter().center(), \"mousemove\"); // for a particle emitter following the mouse\n\nconst squiggle = new Squiggle().loc(100, 100); // wavy line with Bezier handles\nnew Circle(20, pink).addTo().animate({path:squiggle}, 1); // animate along a squiggle\n\nnew Button(200, 70, \"TRY ME\")\n  .pos(30,30,RIGHT,BOTTOM) \n  .tap(()=\u003e{zgo(\"https://zimjs.com\");}); // go to URL\n  \n```\n\n\u003cbr\u003e\n\n![zim2](https://github.com/danzen/zimjs/assets/380281/f318c755-7dd2-43ed-8bf0-ead77ec40b23)\n\n\n![npm](https://img.shields.io/npm/v/zimjs.svg) \n![GitHub](https://img.shields.io/badge/license-MIT-green.svg)\n[![Discord](https://img.shields.io/discord/782972112646307881)](https://discord.com/invite/KczUuFkZdk)\n[![Discourse](https://img.shields.io/badge/discourse-forum-brightgreen.svg)](https://forum.zimjs.com)\n\n## Getting Started\n\nCopy the template on the Code page into an editor like VS Code and view results in any Browser.\u003cbr\u003e\nhttps://zimjs.com/code.html\u003cbr\u003e\n\n\u003ci\u003eThis uses ES6 Modules or Script tags from our CDN at https://zimjs.org/cdn\u003cbr\u003e\nAlternatively, see the NPM instructions in the section down below.\u003c/i\u003e\u003cbr\u003e\n\nZIM EDITOR - an online editor with lots of examples, file saving and sharing\u003cbr\u003e\nhttps://zimjs.com/editor\n\nZIM INTRO - sample code with comments\u003cbr\u003e\nhttps://zimjs.com/intro.html\n\nZIM BASICS - video series on YouTube\u003cbr\u003e\nhttps://www.youtube.com/watch?v=G4K0PwtwXRQ\u0026list=PLCIzupgRt1pYPy1ufRjssbGuPKMviuFvB\n\nZIM CODEPEN TOPIC\u003cbr\u003e\nhttps://codepen.io/topic/zim/\n\nZIM LEARN has many code and video tutorials including:\u003cbr\u003e\nZIM Bits - 64 common techniques, ZIM Capture, What IZ tutorials, ZIM Badges, Code Zero and more!\u003cbr\u003e\nhttps://zimjs.com/learn.html \n\nZIM SKOOL is great for learning with 8 full lessons including in Browser code examples.\u003cbr\u003e\nhttps://zimjs.com/skool.html and for kids https://zimjs.com/kids.html - like Magic!\n\nLEARN JAVASCRIPT WITH CREATIVE CODING\u003cbr\u003e\nhttps://zimjs.com/learnjavascript.html\n\nZIM TIPS has a listing of the elegant ways we code in ZIM\u003cbr\u003e\nhttps://zimjs.com/tips.html\n\nZIM DOCS has all the Classes and Functions broken down by module - expand the topics\u003cbr\u003e \nto see descriptions, examples, methods, properties, events, source, bits, vids, demos and more!\u003cbr\u003e\nhttps://zimjs.com/docs.html\n\n## NPM\nHere is ZIM on NPM: https://www.npmjs.com/package/zimjs\u003cbr\u003e\nThere are additional helper modules matching the CDN helper modules:\u003cbr\u003e\n\u003ca href=https://www.npmjs.com/package/@zimjs/physics\u003e@zimjs/physics\u003c/a\u003e | \n\u003ca href=https://www.npmjs.com/package/@zimjs/game\u003e@zimjs/game\u003c/a\u003e | \n\u003ca href=https://www.npmjs.com/package/@zimjs/three\u003e@zimjs/three\u003c/a\u003e | \n\u003ca href=https://www.npmjs.com/package/@zimjs/socket\u003e@zimjs/socket\u003c/a\u003e | \n\u003ca href=https://www.npmjs.com/package/@zimjs/cam\u003e@zimjs/cam\u003c/a\u003e | \n\u003ca href=https://www.npmjs.com/package/@zimjs/pizzazz\u003e@zimjs/pizzazz\u003c/a\u003e\n\u003cbr\u003e\u003cbr\u003e\nThese steps describe setting up ZIM with Vite and NPM for vanilla JavaScript or TypeScript.\u003cbr\u003e\nThere are also templates for VUE, Svelte, React and Angular further down.\n\nA. SETUP\u003cbr\u003e\n- Open a folder in an IDE such as VS Code (The project folder will be made inside this folder)\n- Open a terminal - see Terminal in the menu - or CTRL SHIFT `\n- Check to see if you have node - type: \u003cpre\u003enode - v\n- If not then install from https://nodejs.org\n- Run Vite - type: \u003cpre\u003enpm create vite\u003c/pre\u003e \n- If this needs to install, press y for yes\n- Give the project a name - it will make a directory\n- Select a framework - use arrow to see all options\n- Eg. choose Vanilla \n- Select a variant\n- Eg. choose JavaScript \n- Change to your project folder - type: \u003cpre\u003ecd yourProject\u003c/pre\u003e\n- Get the ZIM package and dependencies - type: \u003cpre\u003enpm i zimjs\u003c/pre\u003e\n\nB. TEMPLATE\u003cbr\u003e\n- replace the code in main.js with the template:\n```javascript\n// ZIM - JavaScript Canvas Framework - https://zimjs.com - code creativity\nimport zim from \"zimjs\";\n\n// make ZIM global - if this is not used then would use zim.Frame() and zim.Circle()\nzimplify();\n\n// or make all globals except need to use zim.Blob and zim.Window\n// these are two classes that have occassionally conflicted with other libraries\n// zimplify([\"Blob\", \"Window\"]);\n\n// See Docs under Frame for FIT, FILL, FULL, and TAG\nnew Frame(FIT, 1024, 768, light, dark, ready);\nfunction ready() {\n    \n    // given F (Frame), S (Stage), W (width), H (height)\n    // put code here\n    \n    new Circle(100, purple)\n        .center()\n        .drag();\n        \n} // end ready\n```\n- or with TypeScript - replace the src/main.ts code with:\n```javascript\n// ZIM - JavaScript Canvas Framework - https://zimjs.com - code creativity\nimport {Frame, Circle} from \"zimjs\";\n\n// See Docs under Frame for FIT, FILL, FULL, and TAG\nnew Frame(FIT, 1024, 768, light, dark, ready);\nfunction ready() {\n    \n    // given F (Frame), S (Stage), W (width), H (height)\n    // put code here\n    \n    new Circle(100, purple)\n        .center()\n        .drag();\n        \n} // end ready\n```\n- In the index.html file, optionally replace the Vite icon with:\n```html\n\u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"57x57\" href=\"https://zimjs.com/icons/apple-touch-icon-57x57.png\" /\u003e\n\u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"114x114\" href=\"https://zimjs.com/icons/apple-touch-icon-114x114.png\" /\u003e\n\u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"72x72\" href=\"https://zimjs.com/icons/apple-touch-icon-72x72.png\" /\u003e\n\u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"144x144\" href=\"https://zimjs.com/icons/apple-touch-icon-144x144.png\" /\u003e\n\u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"60x60\" href=\"https://zimjs.com/icons/apple-touch-icon-60x60.png\" /\u003e\n\u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"120x120\" href=\"https://zimjs.com/icons/apple-touch-icon-120x120.png\" /\u003e\n\u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"76x76\" href=\"https://zimjs.com/icons/apple-touch-icon-76x76.png\" /\u003e\n\u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"152x152\" href=\"https://zimjs.com/icons/apple-touch-icon-152x152.png\" /\u003e\n\u003clink rel=\"apple-touch-icon-precomposed\" sizes=\"180x180\" href=\"https://zimjs.com/icons/apple-touch-icon.png\" /\u003e\n\u003clink rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"https://zimjs.com/icons/favicon-32x32.png\" /\u003e\n\u003clink rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"https://zimjs.com/icons/android-chrome-192x192.png\" /\u003e\n\u003clink rel=\"icon\" type=\"image/png\" sizes=\"512x512\" href=\"https://zimjs.com/icons/android-chrome-512x512.png\" /\u003e\n```\n- Replace the title with your app title\n\nC. DEVELOPMENT \n- Start a Dev server - type: \u003cpre\u003enpm run dev\u003c/pre\u003e\n- Alt-click the Local link in the terminal \n- This opens up a browser to see the file with the purple circle\n- Make edits to your ZIM app\n  - See https://zimjs.com/learn for how to use ZIM \n  - See https://zimjs.com/docs for reference to commands\n- When done developing use CTRL C to exit the dev terminal\n\nD. DEPLOYMENT\n- Bundle the files for distribution - type:\u003cpre\u003enpm run build\u003c/pre\u003e \n- This makes a dist/ folder with the minified code \n- Currently, Vite puts the js code in /assets/ \n- Which means to run it in a browser, it needs to be in the root \n- Or you can remove the / and use assets/ to run relatively\n- like with \"open in default browser\" extension locally\n- For local images and sounds see https://zimjs.com/tips.html#IMAGES \n\nE. NOTICE \n- ZIM is a front-end framework at https://zimjs.com\n- We make so much without npm at all... \n- You can avoid all of the above by going to https://zimjs.com/code \n- pressing the copy button and pasting into an empty html file\n- Then view the html file in a browser\n- This takes 1 minute and kids can do it\n- You can also use ZIM online at https://zimjs.com/editor\n\nF. OTHER FRAMEWORKS \n- See the sections below for using ZIM with other frameworks\n- The setup is the same as above but the app code is as follows\n\n## VUE, SVELTE, REACT, ANGULAR\n\n![html_JavaScript_Frameworks](https://github.com/danzen/zimjs/assets/380281/318f3b45-8a27-45f4-886c-62706e0f2b93)\n\nZIM can be used in other frameworks. Thank you \u003ca href=https://github.com/yoanhg421\u003e@yoanhg421\u003c/a\u003e for the setup\u003cbr\u003e\nSee https://github.com/danzen/zimjs-templates for full files.\u003cbr\u003e\nFollow the SETUP instructions above and then adjust the code as follows:\u003cbr\u003e\n### VUE - with zim namespace\n```javascript\n\u003cscript setup\u003e  \n  import { onMounted, onBeforeUnmount } from \"vue\";\n  import zim from \"zimjs\";\n\n  let frame;\n  onMounted(() =\u003e {\n    frame = new zim.Frame({\n      scaling: \"zim\",\n      width: 500,\n      height: 400,\n      color:light,\n      ready: () =\u003e {\n          // put code here\n          new zim.Circle(50, red).center().drag();\n      }\n    });\n  });\n\n  onBeforeUnmount(() =\u003e {\n    frame.dispose();\n  });  \n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv id=\"zim\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n\u003c/style\u003e\n```\n### VUE - without zim namespace \n```javascript\n\u003cscript setup\u003e  \n  import { onMounted, onBeforeUnmount } from \"vue\";\n  import zim from \"zimjs\";\n\n  zim.zimplify(); // make zim commands global\n\n  let frame;\n  onMounted(() =\u003e {\n    frame = new Frame({\n      scaling: \"zim\",\n      width: 500,\n      height: 400,\n      color:light,\n      ready: () =\u003e {\n          // put code here\n          new Circle(50, red).center().drag();\n      }\n    });\n  });\n\n  onBeforeUnmount(() =\u003e {\n    frame.dispose();\n  });  \n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv id=\"zim\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n\u003c/style\u003e\n```\n### SVELTE - with zim namespace and Typescript\n```javascript\n\u003cscript lang=\"ts\"\u003e  \n  import { onMount, onDestroy } from \"svelte\";\n  import zim from \"zimjs\";\n\n  let frame: Frame;\n  onMount(() =\u003e {\n    frame = new zim.Frame({\n      scaling: \"zim\",\n      width: 500,\n      height: 400,\n      color:light,\n      ready: () =\u003e {\n          // put code here\n          new zim.Circle(50, red).center().drag();\n      }\n    });\n    function ready() {\n      // put code here\n      new zim.Circle(50, red).center().drag();\n    }\n  });\n\n  onDestroy(() =\u003e {\n    frame.dispose();\n  });\n\u003c/script\u003e\n\n\u003cmain\u003e\n  \u003cdiv id=\"zim\"\u003e\n\u003c/main\u003e\n\n\u003cstyle\u003e\n\u003c/style\u003e\n```\n### SVELTE - without zim namespace and no Typescript\n```javascript\n\u003cscript\u003e  \n  import { onMount, onDestroy } from \"svelte\";\n  import zim from \"zimjs\";\n\n  zim.zimplify(); // make zim commands global\n  \n  let frame;\n  onMount(() =\u003e {\n    frame = new Frame({\n      scaling: \"zim\",\n      width: 500,\n      height: 400,\n      color:light,\n      ready: () =\u003e {\n          // put code here\n          new Circle(50, red).center().drag();\n      }\n    });\n  });\n\n  onDestroy(() =\u003e {\n    frame.dispose();\n  });\n\u003c/script\u003e\n\n\u003cmain\u003e\n  \u003cdiv id=\"zim\"\u003e\n\u003c/main\u003e\n\n\u003cstyle\u003e\n\u003c/style\u003e\n```\n### REACT - with zim namespace\n```javascript\nimport { Component, ReactNode, StrictMode } from \"react\";\nimport \"./App.css\";\nimport zim from \"zimjs\";\n\nclass ZimFrame extends Component {\n  frame: zim.Frame | undefined;\n\n  componentDidMount(): void {\n      this.frame = new zim.Frame({\n        scaling: \"zim\",\n        width: 500,\n        height: 400,\n        color:light,\n        ready: () =\u003e {\n            // put code here\n            new zim.Circle(50, red).center().drag();\n        }\n      });\n  }\n  componentWillUnmount(): void {\n      this.frame?.dispose();\n  }\n  render(): ReactNode {\n      return null;\n  }\n}\n\nfunction App() {\n  return (\n      \u003c\u003e\n      \u003cdiv\u003e\n          {/* Move StrictMove from the root to here */}\n          \u003cStrictMode\u003e\n          \u003cdiv id='zim'\u003e\u003c/div\u003e\n          \u003c/StrictMode\u003e\n          {/* Include ZIM code outside StrictMode */}\n          \u003cZimFrame /\u003e\n      \u003c/div\u003e\n      \u003c/\u003e\n  )\n}\nexport default App;\n```\n### REACT - without zim namespace\n```javascript\nimport { Component, ReactNode, StrictMode } from \"react\";\nimport \"./App.css\";\nimport zim from \"zimjs\";\n\nzim.zimplify(); // make zim commands global\n\nclass ZimFrame extends Component {\n  frame: Frame | undefined;\n\n  componentDidMount(): void {\n      this.frame = new Frame({\n        scaling: \"zim\",\n        width: 500,\n        height: 400,\n        color:light,\n        ready: () =\u003e {\n            // put code here\n            new Circle(50, red).center().drag();\n        }\n      });\n  }\n  componentWillUnmount(): void {\n      this.frame?.dispose();\n  }\n  render(): ReactNode {\n      return null;\n  }\n}\n\nfunction App() {\n  return (\n      \u003c\u003e\n      \u003cdiv\u003e\n          {/* Move StrictMove from the root to here */}\n          \u003cStrictMode\u003e\n          \u003cdiv id='zim'\u003e\u003c/div\u003e\n          \u003c/StrictMode\u003e\n          {/* Include ZIM code outside StrictMode */}\n          \u003cZimFrame /\u003e\n      \u003c/div\u003e\n      \u003c/\u003e\n  )\n}\nexport default App;\n```\n### ANGULAR - with zim namespace and TypeScript (always)\n```javascript\nimport { AfterContentInit, Component, OnDestroy } from '@angular/core';\nimport { Frame, Circle } from 'zimjs';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent implements OnDestroy, AfterContentInit {\n  frame: Frame | undefined;\n  ngOnDestroy(): void {\n    this.frame?.dispose();\n  }\n\n  ngAfterContentInit(): void {\n    this.frame = new Frame({\n      scaling: FIT,\n      width: 600,\n      height: 300,\n      ready: () =\u003e {\n        new Circle(50, red).center().drag();\n      },\n    });\n  }\n\n  title = 'ZIM in Angular';\n}\n```\n\n## Issues \u0026 Community\nYou are welcome to add issues here but we tend to use our Forum for issues and support\u003cbr\u003e\nWe would love to see you there!\u003cbr\u003e\nhttps://forum.zimjs.com\u003cbr\u003e \n\u003cbr\u003e\nYou are welcome to join us on Discord as well\u003cbr\u003e\nhttps://zimjs.com/discord\u003cbr\u003e\n\u003cbr\u003e\nAn easy view of updates can be found here:\u003cbr\u003e\nhttps://zimjs.com/updates.html\n\n## Dependencies\nZIM is powered by the robust CreateJS Library and adds many conveniences, components and controls.\u003cbr\u003e\nCheers to Grant, Lanny and the CreateJS Team!\u003cbr\u003e\nhttps://createjs.com - here is the \u003ca href=https://github.com/danzen/createjs\u003eZIM version of CreateJS\u003c/a\u003e \n \n## Authors\n* **Dr Abstract (Inventor Dan Zen)**\u003cbr\u003e\nCanadian New Media Awards Programmer of the Year\u003cbr\u003e\nCanadian New Media Awards Educator of the Year\u003cbr\u003e\nhttps://zimjs.com/interactivemedia\u003cbr\u003e\nHamilton Arts Awards for Media Arts\u003cbr\u003e\nhttps://danzen.com - Museum of Interactive Works\n\n## License\nThis project is licensed under the MIT License - see the [LICENSE.txt](LICENSE.txt) file for details\n\n## Acknowledgments\n* Thanks to the folks here and in forums with reports, requests and enthusiasm!\n* Thanks Sheridan College and the Interactive Media Post Grad Program for the testing grounds!\n* Thanks to family for keeping me active in the \"real world\"\n* Thanks for giving us a STAR on GitHub!\n","funding_links":["https://github.com/sponsors/danzen","https://patreon.com/zimjs"],"categories":["Libraries"],"sub_categories":["JavaScript"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanzen%2Fzimjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanzen%2Fzimjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanzen%2Fzimjs/lists"}