PageSourceSearch

https://zimjs.org/

html zimjs.org collected 2026-09-25 21:25:23 UTC 30,751 bytes, 525 lines download raw bytes

1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title>ZIM JavaScript Canvas Framework - Code Creativity with ZIMjs!</title>
7
8    <!-- for Google -->
9    <meta name="description"
10        content="ZIM - JavaScript Canvas Framework - code colorful apps, games and art with easy-to-learn (and teach) shapes, animations, components and controls using industry standard programming basics - free with a text editor and HTML Browser." />
11    <meta name="keywords"
12        content="zim, zimjs, createjs, javascript framework, NFT, javascript library, learn javascript, learn to code, interactive media, canvas framework, canvas tutorials, canvas components" />
13
14    <!-- for Facebook -->
15    <meta property="og:title" content="ZIM - JavaScript Canvas Framework" />
16    <meta property="og:image" content="https://zimjs.com/vee/promo.jpg" />
17    <meta property="og:url" content="https://zimjs.com/index.html" />
18    <meta property="og:description"
19        content="ZIM - Welcome to the modern world of coding!  A great place to learn and make professional apps, games, puzzles and sites!" />
20
21    <!-- for Twitter -->
22    <meta name="twitter:title" content="ZIM - JavaScript Canvas Framework" />
23    <meta name="twitter:description"
24        content="ZIM - learn and use modern, simple and professional #Code for #Canvas with #JavaScript and #ZIMjs" />
25    <meta name="twitter:image" content="https://zimjs.com/vee/promo.jpg" />
26
27    <link href="/020/index.css" rel="stylesheet" type="text/css" />
28    
28<script>const pageName = "zim_020_home";</script>
28
29
30    
30<script>
31        window.addEventListener("DOMContentLoaded", () => {
32            const newList = [
33                '<a href="https://zimjs.com/020.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/020/banner_zim_020_chart_simple.jpg" style="width:90%; max-width:1200px;" alt="ZIM JavaScript Canvas Framework - Chart Module Pie, Bar, Live Graph, Plot, Word Cloud, Round-Robin Champion Brackets in ZIM 019"></a>',
34                // '<a href="https://zimjs.com/zoom.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/018/zoom_banner.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="ZIM Zoom - meet Dr Abstract and chat about ZIM on a ZOOM call - all are welcome"></a>',
35                // '<a href="https://zimjs.com/018.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/018/ml5_banner.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="Integrated Hand Tracking with ML5 powered by Tensor Flow - pinch interface, body pose, image recognition through machine learning AI"></a>',
36                // '<a href="https://zimjs.com/019.html" class="imageLink"><img src="/019/banner_zim_019_pattern.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="ZIM JavaScript Canvas Framework - Monitor, Glitch, Perspective in ZIM 019"></a>',
37                // '<a href="https://zimjs.com/rive/" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/017/zim_rive_integration.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="ZIM Rive integration for interactive images and animation with Bones StateMachine and more!"></a>',
38                // '<a href="https://zimjs.com/016.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/016/shaders_banner4.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="Shaders on the 2D Canvas with the ZIM JavaScript Canvas Framework - convert from ShaderToy to Fragment and Vertex Shaders on the GPU WebGL GLSL OpenSL"></a>',
39                // '<a href="https://zimjs.com/015.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/015/textureactive_banner.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="TextureActive adds ZIM to three.js for VR interfaces, HUD components, games and puzzles on interactive material meshes"></a>',
40                // '<a href="https://kids.zimjs.org" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/014/kids_banner.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="ZIM Kids - teach kids how to code JavaScript with an online editor!"></a>',
41                // '<a href="https://instagram.com/zim_code_creativity/" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/014/insta_banner.jpg" style="width:90%; max-width:1200px; margin-top:20px;" alt="ZIM on Instagram Social Media news, stories and pictures!"></a>',
42            ];
43            document.getElementById("new").innerHTML = newList[Math.floor(Math.random() * newList.length)];
44        })
45    </script>
45
46    <style>
47        #new {
48            opacity: 80%
49        }
50
51        #new:hover {
52            opacity: 100%
53        }
54    </style>
vendor: 79 bytes, lines 54-56
54
55
56            <script async src="https://www.googletagmanager.com/gtag/js?id=
56G-GSHN2BZVKW
vendor: 21 bytes, lines 56-57
56"></script>
57        
57<script>
vendor: 127 bytes, line 57
57window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '
57UA-184142889-1
vendor: 3 bytes, line 57
57');
57</script>
57          
58              
59        <link href="/020/common.css" rel="stylesheet" type="text/css" />   
60        <link href="/020/secondary.css" rel="stylesheet" type="text/css" />
61               
62        <!-- 
62<script>zns=true;</script>
62 -->
63        
63<script src="https://zimjs.org/cdn/1.5/createjs.js"></script>
63
64        
64<script src="/cdn/019/zim_min.js"></script>
64        
65        
65<script src="/020/header.js"></script>
65
66
67        <meta name="author" content="Dr Abstract" />
68        <meta name="copyright" content="Dr Abstract" />
69        <meta property="og:type" content="article" />
70        <meta name="twitter:card" content="summary_large_image" />
71
72        <!-- for Apple -->
73        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimal-ui" />
74        <meta name="apple-mobile-web-app-capable" content="yes" />
75        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
76
77        <!-- icons -->
78        <link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://zimjs.com/icons/apple-touch-icon-57x57.png" />
79        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://zimjs.com/icons/apple-touch-icon-114x114.png" />
80        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://zimjs.com/icons/apple-touch-icon-72x72.png" />
81        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://zimjs.com/icons/apple-touch-icon-144x144.png" />
82        <link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://zimjs.com/icons/apple-touch-icon-60x60.png" />
83        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://zimjs.com/icons/apple-touch-icon-120x120.png" />
84        <link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://zimjs.com/icons/apple-touch-icon-76x76.png" />
85        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://zimjs.com/icons/apple-touch-icon-152x152.png" />
86        <link rel="apple-touch-icon-precomposed" sizes="180x180" href="https://zimjs.com/icons/apple-touch-icon.png" />
87        <link rel="icon" type="image/png" href="https://zimjs.com/icons/favicon-32x32.png" sizes="32x32" />
88        <link rel="icon" type="image/png" href="https://zimjs.com/icons/android-chrome-192x192.png" sizes="192x192" />
89        <link rel="icon" type="image/png" href="https://zimjs.com/icons/android-chrome-512x512.png" sizes="512x512" />
90        <meta name="application-name" content="ZIM"/>
91        <meta name="msapplication-TileColor" content="#000000" />
92        <meta name="msapplication-TileImage" content="https://zimjs.com/icons/mstile-144x144.png" />
93        <meta name="msapplication-square70x70logo" content="https://zimjs.com/icons/mstile-70x70.png" />
94        <meta name="msapplication-square150x150logo" content="https://zimjs.com/icons/mstile-150x150.png" />
95        <meta name="msapplication-wide310x150logo" content="https://zimjs.com/icons/mstile-310x150.png" />
96        <meta name="msapplication-square310x310logo" content="https://zimjs.com/icons/mstile-310x310.png" />
97
98    </head>       
99    <body>        
100        <header>       
101            <div id="zim"></div>         
102            <div id=zimnav>
103                <h2>Navigation for the ZIM JavaScript Canvas Framework</h2>
104                <a href="https://zimjs.com/about.html">About</a><a href="https://zimjs.com/examples.html">Examples</a><a href="https://zimjs.com/learn.html">Learn</a><a href="https://zimjs.com/editor">Editor</a><a class=linkadjust href="https://zimjs.com/code.html">Code</a><a class=linkadjust href="https://zimjs.com/docs.html">Docs</a><a class=linkadjust href="https://devs.zimjs.com">Devs</a><a class=linkadjust id="goldLink" href="#gold">Gold</a>
105            </div>                          
106        </header>
107
108    <!-- Google tag (gtag.js) event - delayed navigation helper -->
109
110    <!-- 
110<script>
111            // Helper function to delay opening a URL until a gtag event is sent.
112            // Call it in response to an action that should navigate to a URL.
113            function gtagSendEvent(url) {
114
115                var callback = function () {
116                    if (typeof url === 'string') {
117                        window.open(url, '_blank');
118                    }
119                };
120                gtag('event', 'conversion_event_outbound_click', {
121                    'event_callback': callback,
122                    'event_timeout': 2000,
123                    // <event_parameters>
124                });
125                return false;
126            }
127        </script>
127 -->
128
129    
129<script>
130
131
132
133        const features = [
134            ["frame.jpg", "Z_VDVQ6"],
135            ["shapes.jpg", "Z_DPJCY"],
136            ["components.jpg", "Z_5JA8Z"],
137            ["paths.jpg", "Z_9DQMQ"],
138            ["sprites.jpg", "Z_ZCDQN"],
139            ["physics.jpg", "Z_D7N7M"],
140            ["text.jpg", "Z_QXHQK"],
141            ["pen.jpg", "Z_JQGNZ"],
142            ["duo.jpg", "Z_AC8YT"],
143            ["vee.jpg", "Z_3PRDC"],
144            ["style.jpg", "Z_XJFBJ"],
145            ["emitter.jpg", "Z_QXMS4"],
146            ["connectors.jpg", "Z_Q7CMJ"],
147            ["animate.jpg", "Z_88PJC"],
148            ["timeline.jpg", "Z_JMADZ"]
149        ];
150        shuffle(features);
151
152        const pics = [];
153        const ids = [];
154        loop(features, info => {
155            pics.push(info[0]);
156            ids.push(info[1]);
157        });
158        // could have factored above but want to keep the example simple to use
159
160        const frame2 = new Frame("promo", 820, 200, yellow.darken(.1), null, ready, pics, "https://d309knd7es5f10.cloudfront.net/zim/features/");
161        function ready(F2, S2, W2, H2) {
162
163            STYLE = {Arrow: {bgColor: purple, rollBgColor: pink}};
164            const carousel = new Carousel(copy(pics), 1, .2, 0)
165                .center(S2)
166                .cycle(10, 1, true);
167            carousel.tile.tap(() => {
168                zgo("https://zimjs.com/editor/view/" + ids[carousel.selectedIndex]);
169            });
170
171            STYLE = {corner: 0, bgColor: red};
172            if (localStorage) {
173                if (!localStorage.demoCount) localStorage.demoCount = -1;
174                if (++localStorage.demoCount % 30 <= 2) new Tip("Press to see Demo", LEFT, TOP, null, 30, 10, null, S2, 1.3).sca(.8).noMouse().show();
175            }
176            STYLE = {};
177
178        } // end ready2
179
180
181        const content = ["abstraction.jpg", "chic.jpg", "flirt.jpg", "opartica.jpg", "pac.jpg", "splatter.jpg", "truchet.jpg"];
182        const frame3 = new Frame("content", 920, 700, "#ddd", null, ready3, content, "https://d309knd7es5f10.cloudfront.net/zim/chic/");
183        function ready3(F3, S3, W3, H3) {
184
185            STYLE = {Arrow: {bgColor: red, rollBgColor: purple}};
186            const carousel = new Carousel(content, 1, .2, 50)
187                .scaleTo(S3, 90, 100)
188                .center(S3)
189                .cycle(11, 1, true);
190            carousel.tile.tap(() => {
191                zgo("https://zimjs.com/about.html");
192            });
193            STYLE = {};
194
195
196        } // end ready3
197
198
199    </script>
199
200
201
202    <div id="buildfaster" class="holder">
203        <a href=https://zimjs.com/about.html#versions><h4>Build Faster</h4></a>
204    </div>
205
206    <div id="holder">       
207        <a href="projection/"><img id="hero" src="020/whiskers_vibe_code_case_study.jpg" alt="AI Vibe Code Prompt Case Study with ZIM JavaScript Canvas Framework"></a>       
208    </div>
209
210    <!-- style="margin-top: 1vw; margin-bottom: -.5vw;" -->
211
212    <div class="welcome">
213        <h1>ZIM is a JavaScript framework for creating interactive experiences, eLearning apps, games, visual tools, and
214            art with <a href="index.html#codeefficiency">dramatically less code</a> and complexity.</h1>
215    </div>
216
217    <div class="tagline">
218        <img src="https://d309knd7es5f10.cloudfront.net/020/chart.jpg" alt="chart showing ZIM with 2.6 million views in one day"><br>
219        Trusted in production with Millions of app loads every day
220    </div>
221
222
223
224    <div id="whatsnew" class="holder">
225        <a href=https://zimjs.com/about.html#versions><h4>WHAT'S NEW</h4></a>
226    </div>
227
228    <div class="holder" id="new">
229    </div>
230
231    <div id="completecode" class="holder">
232        <a href=https://zimjs.com/editor/zapps> <h4>Complete Code</h4></a>
233    </div>
234
235    <!-- Target component container with ID dialogs -->
236    <div id="dialogs">
237        <!-- COLUMN 1: LEFT COLUMN -->
238        <div class="column-left">
239            <!-- Bubble expands on top -->
240            <div class="speech-bubble bubble-left left-spacer">
241                <div class="bubble-header">Built for the Way People Code Now</div>
242                <div class="bubble-content">
243                    <p>More developers and creators are using AI to assist with code. ZIM is particularly
244                        well suited to this.
245                    </p>
246                    <p>
247                        ZIM's library is filled with conveniences, components and controls already available for
248                        your canvas app, so AI tools generate more accurate code. There is less
249                        hallucination and less manual correction. This saves time and reduces bugs.
250                    </p>
251                    <p>
252
253                        We provide a ready-made ZIM Master Prompt, that you can paste into any AI assistant to
254                        make it fluent in ZIM. Drop it in and start building - or stick to manual - your choice!</p>
255
256                    <p><a class="arrowlink" href="prompt.html">&#9658; MASTER PROMPT</a></p>
257                </div>
258            </div>
259            <!-- Shorter Image locked to the bottom -->
260            <a href="https://antoniocaggiano.ca/about/" class="imagelink" target="antonio"><img src="https://d309knd7es5f10.cloudfront.net/020/pragma_light.png" id="pragma-img" alt="Pragma - ZIM evangelist" class="character-img"></a>
261        </div>
262
263        <!-- COLUMN 2: RIGHT COLUMN -->
264        <div class="column-right">
265            <!-- Shorter Image locked to the top -->           
266            <a href="https://doctorabstract.com" class="imagelink" target="abstract">
267                <img src="https://d309knd7es5f10.cloudfront.net/020/drabstract_light_logo.png" 
268                    alt="Dr Abstract - Founder of ZIM" 
269                    class="character-img"
270                    onmouseover="this.src='https://d309knd7es5f10.cloudfront.net/020/drabstract_light_logo2.png';" 
271                    onmouseout="this.src='https://d309knd7es5f10.cloudfront.net/020/drabstract_light_logo.png';">
272            </a>
273
274            <!-- Bubble expands underneath -->
275            <div class="speech-bubble bubble-right right-spacer">
276
277                <div class="bubble-header">Most Canvas Code is too Complex</div>
278                <div class="bubble-content">
279                    <p>Building interactive HTML5 apps often requires multiple libraries, writing
280                        low-level canvas code, and spending more time on infrastructure rather than on the experience itself.
281                    </p>
282                    <p>
283                        ZIM changes that.
284                    </p>
285                    <p>
286                        It's a complete JavaScript canvas framework with components, animation, interactivity, layout,
287                        and media handling designed so you spend less time reinventing the wheel and more time
288                        building what matters.
289                    </p>
290                    <p>
291                        Plus, we have simplified the code itself so working with ZIM is relaxing!
292                    </p>
293                    <p><a class="arrowlink" href="innovation.html">&#9658; INNOVATION</a></p>
294                </div>
295
296                
297            </div>
298        </div>
299    </div>
300
301
302
303    <div id="featuredemos" class="holder">
304        <a href=https://zimjs.com/editor/zapps> <h4>Feature Demos</h4></a>
305    </div>
306
307    <div class="welcome">
308        <h1>See What ZIM Can Do! Open the demos in the <a href="editor/">ZIM&nbsp;Editor</a> and explore the code.</h1>
309    </div>
310
311    <div id="promo"></div>
312
313
314
315
316    <div id="codeefficiency" class="holder">
317        <a href=https://zimjs.com/zim/comparison.html> <h4>Code Efficiency</h4></a>
318    </div>
319
320    <div class="welcome">
321        <h1>ZIM requires, on average, 63% <a href="https://zimjs.com/zim/comparison.html">less&nbsp;code</a>
322            than&nbsp;its&nbsp;competitors. This means faster development, easier maintenance, and fewer bugs.</h1>
323    </div>
324
325    <div class="holder">
326        <a href="https://zimjs.com/zim/comparison.html" class="imageLink"><img src="https://d309knd7es5f10.cloudfront.net/020/comparison.jpg" id="comparison"
327                alt="Partial Comparison between ZIM and other Frameworks with ZIM at 37% the code the developer codes"></a>
328    </div>
329
330
331    
332
333    <div id="applicationuses" class="holder">
334        <a href=https://zimjs.com/about.html#uses><h4>Application Uses</h4></a>
335    </div>
336
337    <div id=interactivewonders class="welcome">
338        <h1>Make a variety of <a href="examples.html">Interactive Wonders</a> with ZIM!  Select the banners below and expand the MORE link for how.</h1>
339    </div>
340    
341    <main>
342        <a href="art.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/genart_2.jpg"
343                alt="GenArt - generative art and making computer art and visualizations with ZIM JavaScript Canvas Framework"></a>
344        <a href="games.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/gamezaps_6.jpg"
345                alt="Canvas Games with ZIM - 2D games, casual games, arcade games, espape games, minigames, flash games, games of chance, isometric games, physics games, simulations, action and educational games good for e-learning, advergaming and gamification"></a>
346        <a href="apps.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/learnapps_2.jpg"
347                alt="Apps - desktop and mobile apps with JavaScript and Canvas - responsive and adaptive design with ZIM Layout class - swipe pages with ZIM Pages class - gesture control with ZIM Gesture for pinch, pan, and rotate"></a>
348        <a href="uiux.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/uiux_2.jpg"
349                alt="UI UX - ZIM canvas components such as slider, dial, button, label, keyboard, color picker, check box, radio buttons, toggle, pane, window, layer, waiter, progress bar, tabs, pad, loader, text area and accessibility"></a>
350        <a href="data.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/datavis_2.jpg"
351                alt="Data Visualization, charts, graphs on the Canvas with JavaScript and ZIM"></a>
352        <a href="ads.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/admuse_2.jpg"
353                alt="Interactive Advertising, admusements, advergaming engaging brands with the ZIM JavaScript Canvas Framework"></a>
354        <a href="logos.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/logoplay.jpg"
355                alt="Interactive Logo - play with branding to build engagement with the JavaScript Canvas and ZIMjs"></a>
356        <a href="puzzles.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/escapepuzzles.jpg"
357                alt="Escape Puzzles - challenge your curiousity, problem solving and intuition!"></a>
358        <a href="infoactives.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/infoactives_2.jpg"
359                alt="Interactive Infographics - infoactives - with the ZIM JavaScript Canavas Framework"></a>
360        <a href="cards.html"><img src="https://d309knd7es5f10.cloudfront.net/ten/wondercards_2.jpg"
361                alt="Wonder Things - gadgets, widgets, inventions and features that defy description"></a>
362    </main>
363
364
365
366    <div id="designdriven" class="holder">
367        <a href=https://zimjs.com/about.html#vision><h4>Design Driven</h4></a>
368    </div>
369
370    <div class="welcome">
371        <h1>
372          ZIM is built with a visual thinker's workflow in mind. If you design, illustrate, or create, and want to code without the usual frustration, ZIM was made for you.
373        </h1>            
374    </div>
375
376    <div id="content"></div>
377
378
379
380
381    <div id="start" class="holder">
382        <a href=https://zimjs.com/editor><h4>START</h4></a>
383    </div>
384
385     <div id="editor" class="welcome">
386        <h1>Open the <a href="https://zimjs.com/editor/view/Z_9B2FV">ZIM Editor</a> and start with a fully commented working example. No setup and no install.
387             See the <a href="https://zimjs.com/cheatsheet.html">Cheat&nbsp;Sheet</a> for your building blocks!</h1>
388    </div>
389
390    <div class="holder">
391        <a href="https://zimjs.com/editor/view/Z_9B2FV" class="imageLink"><img id="editorpic"
392                src="https://d309knd7es5f10.cloudfront.net/zim/firstSample.jpg"
393                alt="First Example of ZIM - centering and dragging a circle - in ZIM Editor"></a>
394    </div>
395
396    <div class="holder">
397        <a href="https://zimjs.com/cheatsheet" class="imageLink"><img id="cs"
398                src="https://d309knd7es5f10.cloudfront.net/020/cheatsheet.jpg" style="width:50%; max-width:450px;"
399                alt="ZIM Cheat Sheet - start, display objects, methods, events, controls for the JavaScript Canvas"></a>
400    </div>
401
402
403
404
405    <div id="studio" class="holder">
406        <a href=https://zimjs.com/studio><h4>STUDIO</h4></a>
407    </div>
408
409     <div class="welcome">
410        <h1>ZIM also runs on any 3D surface in three.js, meaning your interactive canvas apps work inside 3D environments and VR experiences with <a href="https://zimjs.com/015.html">ZIM&nbsp;TextureActive</a>.</h1>
411    </div>
412
413    <div class="holder">
414        <!-- Thanks  https://www.flaticon.com/authors/dmytro-vyshnevskyi for the VR Icon -->
415        <a href="https://zimjs.com/studio" class="imageLink"><img
416                src="https://d309knd7es5f10.cloudfront.net/020/texture_active_vr_3D_threejs_studio_banner_plus_small2.png" id = "vrpic"
417                alt="ZIM TextureActive Studio - 2D Interactivity in 3D with ZIMjs and threejs"></a>
418    </div>
419
420
421
422
423    <div id="store" class="holder">
424        <a href=https://zimjs.com/store><h4>STORE</h4></a>
425    </div>
426
427    <div class="welcome">
428        <h1>See <a href="mobile.html">ZIM&nbsp;Mobile</a> to make PWA mobile apps in FIVE minutes. Browse examples of ZIM-powered mobile experiences in the <a href="store">Zapp&nbsp;Store</a>.</h1>
429    </div>        
430
431    <div class="holder">
432        <a href="https://zimjs.com/store" class="imageLink"><img 
433                src="https://d309knd7es5f10.cloudfront.net/014/store_banner_s.jpg" id="storepic"            
434                alt="ZIM Zapp Store Mobile Apps with PWA - progressive web apps"></a>
435    </div>
436
437
438
439
440
441    <div id="reviews" class="holder">
442        <a href=https://zimjs.com/about_arc.html#reviews><h4>REVIEWS</h4></a>
443    </div>
444
445    <div class="welcome" id="reviews">
446        <h1>
447            <em>Fun to code, powerful and <span style="white-space: nowrap;">easy to learn - <a
448                href="https://zimjs.com/about_arc.html#reviews">Reviews</a></span></em>
449            <br>
450            <hr>
451            <em>The best choice to <span style="white-space: nowrap;">follow Scratch - <a
452                href="https://kids.zimjs.org">ZIM Kids</a></span></em> 
453            <br>
454            <hr>
455            <em>A quantum leap in speed <span style="white-space: nowrap;">
455and efficiency - <a
456                href="https://devs.zimjs.com">ZIM Devs</a></span></em>
457            <br>
458            <hr>
459            Join us on our <span style="white-space: nowrap;"><a href="https://zimjs.com/forum" target="_blank">Forum</a> or <a
460                href="https://zimjs.com/discord" target="_blank">Discord</a></span>
461        </h1>
462    </div>
463
464
465
466    <div class="holder" id="awards">
467        <img src="https://d309knd7es5f10.cloudfront.net/017/award_s.png" style="width:10%; max-width:80px;"
468            alt="Canadian New Media Awards Programmer of the Year 2002">
469        <img src="https://d309knd7es5f10.cloudfront.net/017/award_s.png"
470            alt="Canadian New Media Awards Eductator of the Year 2008"
471            style="width:10%; max-width:80px; margin-left:50px; margin-right:40px">
472        <img src="https://d309knd7es5f10.cloudfront.net/017/arts_award_sett.png"
473            style="width:20%; max-width:200px; position:relative; top:4px;"
474            alt="Hamilton Arts Awards - Media Arts 2017 & SETT Talk for School Education Transformation Technology">
475        <img src="https://d309knd7es5f10.cloudfront.net/017/codeweek_fosdem_coder_dojo.png"
476            style="margin-left:2vw; width:20%; max-width:150px; opacity:80%; margin-right:10px;"
477            alt="Coder Dojo, FOSDEM, CodeWeek Presenters">
478        <img src="https://d309knd7es5f10.cloudfront.net/017/awards.png"
479            style="margin-left:2.5vw; width:35%; max-width:350px; opacity:90%"
480            alt="Fast, Easy and Effective Code Platform Award, 1st Place Canvas Made Simple, ICT Games Best for Builders Award">
481    </div>
482
483
484
485    <footer id="gold">
486    <div id=zimfooternav>
487        <h2>Navigation for the ZIM JavaScript Canvas Framework</h2>
488        <a id="intro" href="https://zimjs.com/intro.html">Intro</a>
489        <a id="map" href="https://zimjs.com/map.html">Map</a>
490        <a id="tips" href="https://zimjs.com/tips.html">Tips</a>
491        <a id="skool" href="https://zimjs.org/skool.html">Skool</a>
492        <a id="kids" href="https://zimjs.org/kids.html">Kids</a>
493        <a id="vids" href="https://zimjs.com/vids.html" target="_blank">Vids</a>
494        <a id="zap" href="https://zimjs.com/beam">Beam</a>
495        <a id="up" href="javascript:window.scrollTo({top: 0});">Top</a>
496    </div>
497    
498    <h3>ZIM&nbsp;- JavaScript&nbsp;Canvas&nbsp;Framework - Code&nbsp;Creativity!</h3>
499    
500    <div id="socialmedia">
501        <a class="imageLink" href="https://zimjs.com/instagram" target="_blank"><img class="social" src="/014/images/social_instagram.png" alt="ZIM on Instagram - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
502        <a class="imageLink" href="https://zimjs.com/tiktok" target="_blank"><img class="social" src="/014/images/social_tiktok.png" alt="ZIM on TikTok - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
503        <a class="imageLink" href="https://www.facebook.com/zimjs/" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_facebook.png" alt="ZIM on Facebook - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
504        <a class="imageLink" href="https://x.com/Dr_Abstract" target="_blank"><img class="social" src="/014/images/social_x.png" alt="ZIM on X - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
505        <a class="imageLink" href="https://www.youtube.com/c/zimlearn" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_youtube.png" alt="ZIM on YouTube - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
506        <a class="imageLink" href="https://zimjs.com/dev" target="_blank"><img class="social" src="/014/images/social_dev.png" alt="ZIM on Dev.to - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
507        <a class="imageLink" href="https://zimjs.com/medium" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_medium.png" alt="ZIM on Medium - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
508        <a class="imageLink" href="https://www.patreon.com/zimjs" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_patreon.png" alt="ZIM on Patreon - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
509        <a class="imageLink" href="https://codepen.io/zimjs" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_codepen.png" alt="ZIM on CodePen - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
510        <a class="imageLink" href="https://github.com/danzen/zimjs" target="_blank"><img class="social" src="https://d309knd7es5f10.cloudfront.net/vee/social_github.png" alt="ZIM on GitHub - Social Media for ZIMjs JavaScript Canvas Framework " /></a>
511    </div>
512
513<br>
514<a href="https://zimjs.com"><img id=footerlogo src="https://d309knd7es5f10.cloudfront.net/018/zim_javascript_canvas.png" alt="ZIM Code JavaScript for Newbies, Students, Teachers and Professionals" style="margin-bottom:-8px;"></a>
515<br>
516<script>
517  const r=Math.round(Math.random()*1000000);
518  document.write('<img src=/cgi-bin/traffic_plus?company=danzen&page='+pageName+'&r='+r+' width=1 height=1>');
519</script>
519
520
521  <div id=copy>&copy; <span id="copyyear"></span> ZIM - join us <a target=_blank href="https://forum.zimjs.com">FORUM</a> - grow us <a target=_blank href="https://zimjs.com/donate">PATREON</a></div>
522</footer>
523<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"e191cdd5384b48b68d3ffac0d1753c69","r":1,"spa":2}' crossorigin="anonymous"></script>
523
524</body>
525</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.