Copy template to a text file on your computer, save as code.html and view in Browser.
older | more | convert | pizzazz | codepen<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ZIM - Code Creativity</title> <!-- zimjs.com - JavaScript Canvas Framework --> <script type="module"> import zim from "https://zimjs.org/cdn/017/zim"; // See Docs under Frame for FIT, FILL, FULL, and TAG new Frame(FIT, 1024, 768, light, dark, ready); function ready() { // given F (Frame), S (Stage), W (width), H (height) // put code here new Circle(100, purple) .center() .drag(); } // end ready </script> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> <body></body> </html>
Copy template to a text file on your computer, save as code.html and view in Browser.
newer | more | convert | pizzazz | codepen<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ZIM - Code Creativity</title> <!-- zimjs.com - JavaScript Canvas Framework --> <script src="https://zimjs.org/cdn/1.4.1/createjs.js"></script> <script src="https://zimjs.org/cdn/017/zim_min.js"></script> <script> // See Docs under Frame for FIT, FILL, FULL, and TAG const frame = new Frame(FIT, 1024, 768, light, dark); frame.on("ready", () => { const stage = frame.stage; let stageW = frame.width; let stageH = frame.height; // put your code here new Circle(100, purple) .center() .drag(); }); // end ready </script> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> <body></body> </html>
Copy template to a text file on your computer, save as code.html and view in Browser.
newer | older | more | convert | codepen<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ZIM - Code Creativity</title> <!-- zimjs.com - JavaScript Canvas Framework --> <script type="module"> import zim from "https://zimjs.org/cdn/017/zim_pizzazz"; // See Docs under Frame for FIT, FILL, FULL, and TAG new Frame(FIT, 1024, 768, light, dark, ready); function ready() { // given F (Frame), S (Stage), W (width), H (height) // put code here // for more shapes, icons and patterns see // https://zimjs.com/docs.html?item=pizzazz makePattern("slants", series(fog, mist), 10, 50, 40).center(); new Button({ backing:makeShape("cloud", black), rollBacking:makeShape("cloud", white), icon:makeIcon("home", white), rollIcon:makeIcon("home", black) }).center().tap(()=>{zgo("https://zimjs.com")}); } // end ready </script> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> <body></body> </html>
Copy template to a text file on your computer, save as code.html and view in Browser.
newer | older | more | pizzazz | codepen<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ZIM - Code Creativity</title> <!-- zimjs.com - JavaScript Canvas Framework --> <script type="module"> import zim from "https://zimjs.org/cdn/017/zim"; // See Docs under Frame for FIT, FILL, FULL, and TAG new Frame(FIT, 1024, 768, light, dark, ready); function ready(frame, stage, stageW, stageH) { // given F (Frame), S (Stage), W (width), H (height) // but we have also collected frame, stage, stageW, stageH // these are the variables we used in older versions of the template // put code here new Circle(100, purple) .center() .drag(); } // end ready </script> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> <body></body> </html>
Use ZIM Sprites for INTERACTIVE ANIMATION see info page!

ZIM is perfect for INTERACTIVE NFTS here we show you how!

Make MOBILE APPS with the ZIM PWA TOOL called Zapps!

Visit ZIM SHIM to use ZIM in Adobe Animate with CreateJS!

Explore ZIM on CODEPEN and get TEMPLATES and more!

Use ZIM ACCESSIBILITY for Screen Readers - see the DOCS

The ZIM CDN (Content Delivery Network) holds links to code files stored on the cloud with CloudFlare
Import ES6 MODULES or use SCRIPT TAGS
ZIM can be used without the Internet. Download the OFFLINE ZIP example.
Make sure to unzip the ZIP file once it is downloaded.
ZIM is available on ZIM on NPM along with the helper modules
@zimjs/physics | @zimjs/game | @zimjs/three | @zimjs/socket | @zimjs/cam | @zimjs/pizzazz

Here are ZIM TEMPLATES for Svelte, React, Angular and VUE.
VIDEOS- ZIM Explore! 86. NPM - Canvas, Vue, Svelte, React and Angular
- ZIM Explore! 87. NPM - 3D, Physics and more in Svelte
DATA
ZIM LEARN has tutorials and the DOCS are interlinked with ZIM BITS



See GUIDES on Medium and POSTS on DEV with Dr Abstract!


ZIM TIPS and ZIM BUBBLING have the latest based on DARK PAPERS



CODE ZERO shows starter videos and SHERIDAN has PostGrad learning


SLACK and DISCORD have community and support worth GIT HUB stars!



ZIM Tools! DISTILL, ZAPPS, WONDER, ASSET LIST, DOCTOR and CHAT BOT






Experiment with EMITTER, THRESHOLD, EASE, SLICER and TIMELINE Tools





ZIM BEAM to share code, ZIM EDITOR to test code and include EMOJIS and ASSETS!




Type code in an EDITOR with CODE HINTS and optional TYPESCRIPT!



Make Mobile apps with PWAs and Native Apps with CAPACITOR!


Try ZIM MVC or NPM or make a CUSTOM library!



Use ADOBE ANIMATE for custom shapes and TEXTURE PACKER for Sprites!


CREATEJS powers ZIM and both use JAVASCRIPT



ZIM SOCKET for Multiuser and ZIM GAME with Leader and ISOMETRIC Boards



ZIM TEN PHYSICS with integrated Physics!


ZIM PHYSICS for Box2D with SOUP of course!


ZIM THREE with TEXTUREACTIVE for ZIM in three.js

ZIM PIZZAZZ for BACKINGS, ICONS, PATTERNS and PATHS




ZIM CAM for Webcam motion and ZIM BASE for database queries!

