ZIM is an open-source, free JavaScript Framework for the HTML Canvas. You code in a text editor and view the code in a Browser.
You can make games, apps, puzzles, visualizations and art. Take a SITE TOUR through the following sections:
- ABOUT what is ZIM, reviews, etc.
- EXAMPLES sample projects
- LEARN tutorials, vids and lessons
- EDITOR code online and make Zapps!
- CODE ZIM template and tools
- DOCS the classes and commands
- DEV a site especally for developers
- GOLD BARS links to special sections
Join our friendly ZIM FORUM or DISCORD to ask questions, showcase, and get announcements.
ZIM is powered by the wonderful CreateJS. When you have used ZIM for a while, we hope that you might support us on PATREON - come see the rewards and help get ZIM to the people!
Our vision at ZIM is CODE CREATIVITY. We look at this two ways:
See the DOCS for all features and the CODE section for special treats! While ZIM has many features, ZIM DISTILL minifies the code for only the features used.
- One-line Drag and Drop
- Multitouch Pan, Pinch and Rotate
- Multiple Types of Hit Tests
- Styles for all Objects (Like CSS)
- Retina Crisp Vectors!
- TextureActive three.js Integration
- for 3D and VR
- Animation, Sequences and Damping
- Timeline Tool
- Shaders with OpenGL
- Voice Recognition & Talk
- Integrated Physics made Easy!
- Labels, Buttons, Panes and Tabs
- Editable text right on the Canvas
- Windows and Wrapable Text
- Shapes, Sliders and Steppers
- Waiters, ProgressBars and ColorPickers
- Indicators, Dials and Pads
- Keyboards, Loaders and TextAreas
- Lists, Organizers and Toggles
- Wrapper, Beads and RadialMenu
- Live Transformation Tools
- Sound and AudioSprite Support
- Synth wrapper for Web Audio
- Cam and Motion Cursors
- Scalable Template Framework
- Accessibility for Screen Readers
- ES6 Modules and Typescript
- Chaining and Configuration Objects
- Easy Asset Loading
- Custom Font Preloading and Support
- Image packing and sorting
- Page and Layout Control
- Mobile Optimization
- Swipes and HotSpots
- Guides, Grids and Outlines
- Parallax, Scroll and Tiling
- Dynamic Sprite and Scrollers
- GamePad and Motion Controllers
- Particle Emitter and SoundWave
- Bind, Wire and Base for Data
- 3D and Physics Support Libraries
- Multiuser and Asynchronous Calls
- Editable Bezier Blobs & Squiggles
- Pen and Path Animation
- Variable Speed Animation
- Emojis, Animated GIFs, QR Codes
- Regular Parameters or Config Object
- Dynamic parameters
- WebGL Support
- Import SVG as Bitmap or ZIM Shapes
- Isometric Board and game features
- NPM support and MVC template
- ZIMON any object to string
- ZIM SHIM for Adobe Animate
- ZIM Skool and ZIM Kids!
- Supports Rive animations
- AI Chat Bot
Please see the WHY ZIM video and the EXAMPLES section for more:
- Desktop and Mobile Apps and Sites
- E-learning Applications
- Games and Puzzles
- Collages and Generative Art
- 2D Interactivity in 3D & VR
- Simulations and Visualizations
- Interactive Logos
- Animated Infographics
- Interactive NFTs
- Gadgets and Tools
- Product Configurators
- Comic and Drawing Apps
- Teaching and Learning Code
- Mouse and Scroll Parallax
- Sliding Sites
- Interfaces and Components
- Fullscreen or Embedded
Also see When to Use a JavaScript Canvas Library or Framework article by Dr Abstract in Medium.
ZIM 017 introduces an AI Chat Bot and Rive Integration for interactive graphics. Also, automatically make a Blob the shape of an image and add physics! Concave Physics is now supported. See UPDATES for details and help ZIM reach the people with a DONATION if you have the means!
ZIM 016 brings Shader() OpenGL GLSL to the 2D Canvas! There is a new FORUM that will replace Slack. We also present an Emitter Configurator along with Speech Recognition and Talk plus a dozen more features!
ZIM 015 now has TextureActive() to add animated and interactive textures in 3D and VR with three.js! This is great for interfaces, animations, games and puzzles right on any texture for any mesh material. Press the T key to toggle between three.js and ZIM. We also have a new Timeline(), continuous List() and Carousel() and more!
ZIM 014 moves to a three number release format and includes the ZIM Store for fun mobile app demos published as PWAs with the ZIM Zapp tool. Additions to the ZIM Editor include integrated login with the Zapp Store, file promo pages and search. A Code Hint package is now available for VS Code and other editors. See UPDATES for details.
ZIM ZIM (13) launched with sub version 00, 01 and 02 including:
- A new Frame() template with F S W H
- The ZIM Z is now the new ZIM logo
- Pic(), Vid(), Aud() and SVG() assets!
- Pixel() - for native speed pixel effects
- ES6 Modules with new import template
- ESLint with a thousand minor updates
- Recordable Connectors with dropArray
- The ZIM Editor to code ZIM in the browser
- Pack() for sets of pictures or DisplayObjects
- Loop() has a new interval mode
- Pen() has smooth pull parameter
- Theme() lets you alter ZIM default colors
- NumPad() can be used with the Keyboard
- Marva made us a Carousel() - cheers!
- Button() has down states
ZIM NFT (12) included a collectable NFT on the Tezos Blockchain and demonstrations of how ZIM can be used to make interactive NFTs. Additions were an editable canvas TextInput, Squiggle and Blob editing updates, a Dialog in the Game module, a new Cam module and more!
ZIM CAT (11) featured a new member of the ZIM Family, OwMe the cat! ZIM now defaults to seconds and has a Zapps tool to make mobile apps in five minutes, a Synth, a Line, a Poly, a Page, a Book, Generator for Processing/P5js like functionality, custom easing, an effects system, label letters, a site for devs, a Lab, a site map, a Flipper, Connectors and more!
ZIM TEN (10) brought integrated physics, Retina crisp vectors, Wrapper, Beads, RadialMenu, List with accordion, SVG support, Bind, DPad, Marquee, Shape Animation, ZIMON, hitTestPath, Board with isometrics, NPM support, MVC and Adobe SHIM! This was a powerful prolific time as detailed in the ZIM TEN updates!
ZIM NIO (9) featured dynamic animation and dragging along a path. ZIM OCT (8) introduced STYLE for CSS-like styles on the components. ZIM HEP (7) added ZIM Skool, TypeScript support and documented Helper modules for Physics, 3D, Gaming and Pizzazz! ZIM SIX (6) added Canvas Accessibility for screen readers on desktop and mobile. ZIM VEE (5) added ZIM VEE objects for dynamic parameters as well as renamed modules and GPU support. Sites for ZIM 5-8 all looked the same.
ZIM 4TH (4) gave us the ZIM 4TH methods for ZIM display objects. ZIM TRI (3) gave us THREE meta functions: Async, Wonder and Distill. ZIM DUO (2) gave us the ZIM DUO technique of passing regular parameters or a single configuration object. ZIM ONE (1) gave us ZIM!
Here is an Interactive Timeline of the ZIM Versions. Also see UPDATES.
Here are a few comments people have left about ZIM - comments are always welcome!
Thanks to ZIM, development time was quite short and a very smooth ride along a quick learning curve!
The ZIM videos helped three of our devepelopers learn ZIM and in one hour they made complicated things to complete our mission! ZIM support is so great! It takes one day (max) to get an answer or bug fix. We have made about a hundred apps and I am now teaching ZIM to others.
Very impressed with all the material ZIM puts out and the concise code.
ZIM deserves to be known by people of all ages and expertise interested in unlocking creativity in the Digital Interactive Media era. ZIM provides a zen way to build beautiful, yet, sophisticated Web interface applications. Not only does ZIM help us "write less and do more", but ZIM comes with 1. incredibly rich and clear documentation, 2. more than 100 diverse and well categorized examples, 3. a series of video captures to learn and enjoy ZIM programming at your own pace, and on the top of it all, 4. a friendly Slack community to share ideas, needs, issues, requests and receive support from ZIM friends and Dr Abstract himself. Please give ZIM a try and let's enjoy the ride together! I am a real fan and soon you will be too!
I've been really impressed with ZIM. It's fun to code with, powerful and easy to learn!
Ha... it's not easy to do responsive HTML5 Canvas. But we did it. Thanks to the great javascript framework of ZIM. The ZIM support is really super. When I find a little issue in the great framework it is fixed in one day. But it doesn't stop there. Dr. Abstract provides tips and solutions. The YouTube channel will blow your mind. You can learn to be a professional Canvas-developer. I like to complain (I'm dutch). But ZIM makes that really impossible. That's the only con!
I've never seen such perfect documentation on a JS library before!
ZIM is the very best place to go for educators transitioning from Flash to Canvas. Incredible framework, excellent documentation! Loving your work! The orient to path squiggle is just brilliant. Thanks for continually improving ZIM. Superb!
Hey, ZIM is the most awesome library for making kids apps in JS that I think EXISTS!!! Thank you!!!
Awesome to see VR added! I didn't expect that at all but will add cool factor!
Oh man....I am LOVING the outlines....LOVE LOVE LOVE it.
This is SOOOOOOOOOOOOOOO COOL!
I LOVE LOVE LOVE the zim framework.
This is very cool.. @DrAbstract, you added my requested feature with lightning speed!
Loving working with ZIM! Just finished going thru ZIM BITS 64 - Draw and Animate Lines... very cool stuff!
Shana B:
ZIM is fabulous - excellent support, comprehensive learning tools, and an overall jazzy and inspiring aesthetic make coding fun.
Eilon Keret:
Best framework for making canvas apps.
nikluz:
Absolutely love the youtube channel and I'm looking forward to learning some more. I discovered ZIM just last night and it's perfect for a project I have in mind
Paul Robert:
I just discovered ZIM, and I agree that it is a fantastic canvas JS framework.
Dima Nikolaev:
So great a tool. Such huge potential for the whole web - I see a bunch of apps, sites based on this tool in my head - which will help all people! Dan, it's a God Tool )) I think it's The Evolution step in the web. I am your fan from now ))
Fabio Cannioto:
Thank you ZIM. I currently develop with your great creation!!!
Vishwas Gagrani:
Love using and learning ZIM. One of my favorite API for canvas based html5 apps and games.
FOUNDER - watch a short SYNOPS on ZIM founder, Dr Abstract (Dan Zen) - Canadian New Media Awards Programmer and Educator of the Year. Please visit his MUSEUM of Interactive Works - the front page of which is built in ZIM. He is also a Hamilton Arts Awards media arts winner for his work in ZIM including apps and visualizations. See Your Guide to Inventor Dan Zen by Dr Abstract on Medium.
Dan Zen teaches in the Interactive Media post-grad program at Sheridan College in Canada. He gives talks and workshops on code and creativity - send him an EMAIL.
ARTIST - Antonio Caggiano has illustrated and animated the Dr. Abstract and Pragma characters for ZIM. He is at the renowned Sheridan School of Animation and currently working on the Big Hero 6 show in Belgium.
FRIENDS - The ZIM team would like to thank all the coders, supporters and people making the environment in which we work! (click for links)
PHILOSOPHY - a logical model of life is called a Philosophy.
We have broken down life into Classes, Objects, Methods, Properties and Events with Object Oriented Programming (OOP). Programming basics of Variables give us memory, Conditionals give us logic and Randomness gives us odds for emotions to allow us to recreate life with Simulations, Games and Artificial Intelligence.
This philosophical view is called NODISM and we are NODISTS when we code and part of the NODIST COLONY! The Node Globes (radial hierarchies) above represent fragments of HTML. See Your Guide to the Philosophy of Nodism by Dr Abstract on Medium.
CREATIVITY FRAMEWORK - Please watch the INTRO VIDEO to the CREATIVITY FRAMEWORK where we see easy definitions and diagrams describing how code and indeed life is organized! See Your Guide to the Mechanics of Creativity by Dr Abstract on Medium and The Nodist Colony on Virtual Reality AltSpace.
ZIM is made in Hamilton, Ontario, Canada and has been used in many countries like:
