new Rectangle(50, 50, green).center().drag(); // for a centered draggable rectangle!

new MotionController(new Emitter().center(), "mousemove"); // for a particle emitter following the mouse

const squiggle = new Squiggle().loc(100, 100); // wavy line with Bezier handles
new Circle(20, pink).addTo().animate({path:squiggle}, 1); // animate along a squiggle

new Button(200, 70, "TRY ME")
  .pos(30,30,RIGHT,BOTTOM) 
  .tap(()=>{zgo("https://zimjs.com");}); // go to URL
  

// ZIM - JavaScript Canvas Framework - https://zimjs.com - code creativity
import zim from "zimjs";

// make ZIM global - if this is not used then would use zim.Frame() and zim.Circle()
zimplify();

// or make all globals except need to use zim.Blob and zim.Window
// these are two classes that have occassionally conflicted with other libraries
// zimplify(["Blob", "Window"]);

// 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

// ZIM - JavaScript Canvas Framework - https://zimjs.com - code creativity
import {Frame, Circle} from "zimjs";

// 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 setup>  
  import { onMounted, onBeforeUnmount } from "vue";
  import zim from "zimjs";

  let frame;
  onMounted(() => {
    frame = new zim.Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new zim.Circle(50, red).center().drag();
      }
    });
  });

  onBeforeUnmount(() => {
    frame.dispose();
  });  
</script>

<template>
  <div id="zim"></div>
</template>

<style>
</style>

<script setup>  
  import { onMounted, onBeforeUnmount } from "vue";
  import zim from "zimjs";

  zim.zimplify(); // make zim commands global

  let frame;
  onMounted(() => {
    frame = new Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new Circle(50, red).center().drag();
      }
    });
  });

  onBeforeUnmount(() => {
    frame.dispose();
  });  
</script>

<template>
  <div id="zim"></div>
</template>

<style>
</style>

<script lang="ts">  
  import { onMount, onDestroy } from "svelte";
  import zim from "zimjs";

  let frame: Frame;
  onMount(() => {
    frame = new zim.Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new zim.Circle(50, red).center().drag();
      }
    });
    function ready() {
      // put code here
      new zim.Circle(50, red).center().drag();
    }
  });

  onDestroy(() => {
    frame.dispose();
  });
</script>

<main>
  <div id="zim">
</main>

<style>
</style>

<script>  
  import { onMount, onDestroy } from "svelte";
  import zim from "zimjs";

  zim.zimplify(); // make zim commands global
  
  let frame;
  onMount(() => {
    frame = new Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new Circle(50, red).center().drag();
      }
    });
  });

  onDestroy(() => {
    frame.dispose();
  });
</script>

<main>
  <div id="zim">
</main>

<style>
</style>

import { Component, ReactNode, StrictMode } from "react";
import "./App.css";
import zim from "zimjs";

class ZimFrame extends Component {
  frame: zim.Frame | undefined;

  componentDidMount(): void {
      this.frame = new zim.Frame({
        scaling: "zim",
        width: 500,
        height: 400,
        color:light,
        ready: () => {
            // put code here
            new zim.Circle(50, red).center().drag();
        }
      });
  }
  componentWillUnmount(): void {
      this.frame?.dispose();
  }
  render(): ReactNode {
      return null;
  }
}

function App() {
  return (
      <>
      <div>
          {/* Move StrictMove from the root to here */}
          <StrictMode>
          <div id='zim'></div>
          </StrictMode>
          {/* Include ZIM code outside StrictMode */}
          <ZimFrame />
      </div>
      </>
  )
}
export default App;

import { Component, ReactNode, StrictMode } from "react";
import "./App.css";
import zim from "zimjs";

zim.zimplify(); // make zim commands global

class ZimFrame extends Component {
  frame: Frame | undefined;

  componentDidMount(): void {
      this.frame = new Frame({
        scaling: "zim",
        width: 500,
        height: 400,
        color:light,
        ready: () => {
            // put code here
            new Circle(50, red).center().drag();
        }
      });
  }
  componentWillUnmount(): void {
      this.frame?.dispose();
  }
  render(): ReactNode {
      return null;
  }
}

function App() {
  return (
      <>
      <div>
          {/* Move StrictMove from the root to here */}
          <StrictMode>
          <div id='zim'></div>
          </StrictMode>
          {/* Include ZIM code outside StrictMode */}
          <ZimFrame />
      </div>
      </>
  )
}
export default App;

import { AfterContentInit, Component, OnDestroy } from '@angular/core';
import { Frame, Circle } from 'zimjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy, AfterContentInit {
  frame: Frame | undefined;
  ngOnDestroy(): void {
    this.frame?.dispose();
  }

  ngAfterContentInit(): void {
    this.frame = new Frame({
      scaling: FIT,
      width: 600,
      height: 300,
      ready: () => {
        new Circle(50, red).center().drag();
      },
    });
  }

  title = 'ZIM in Angular';
}