foxyjs

A simple and powerful Javascript HTML5 SVG library.

Features

Out of the box interactions such as scale, move, rotate, skew, group…
Built in shapes, controls, animations, image filters, gradients, patterns, brushes…
JPG, PNG, JSON and CANVAS , PDF , DFX , AI(adobe illustrator)

Supported Browsers/Environments

Context	Supported Version	Notes
Firefox	✔️	modern version (tbd)
Safari	✔️	version >= 10.1
Opera	✔️	chromium based
Chrome	✔️	modern version (tbd)
Edge	✔️	chromium based
Edge Legacy	❌
IE11	❌
Node.js	✔️	Node.js installation

Installation

$ npm install foxyjs --save
// or
$ yarn add foxyjs

Browser

See browser modules for using es6 imports in the browser or use a dedicated bundler.

Quick Start

import { Stage, SVGStar } from "foxyjs";

Plain HTML

<div id="container" width="100vw" height="100vh"></div>
<script>
  const container = document.getElementById("container");
  const stage = new Stage(container);
  const star = new SVGStar({
    x: 100,
    y: 100,
    rx: 60,
    ry: 60,
    fill: "red",
  });
  stage.addGraph(star);
  stage.selectedElements.set(star);
  stage.toggleTool("transform-tool");
</script>

ReactJS

import React, { useRef } from "react";
import { Stage, SVGStar } from "foxyjs";

class App extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
  }

  componentDidMount() {
    const board = document.querySelector("#board");
    const stage = new Stage(board);
    const star = new SVGStar({
      x: 100,
      y: 100,
      rx: 60,
      ry: 60,
      fill: "red",
    });
    stage.addGraph(star);
    stage.selectedElements.set(star);
    stage.toggleTool("transform-tool");
  }

  render = () => {
    return (
      <div className="App">
        <div id="board"></div>
      </div>
    );
  };
}

export default App;

Vue2

<template>
  <div id="container"></div>
</template>;

import { Stage, SVGStar } from "foxyjs";

mounted(() => {
  const container = document.getElementById("container");
  const stage = new Stage(container);
  const star = new SVGStar({
    x: 100,
    y: 100,
    rx: 60,
    ry: 60,
    fill: "red",
  });
  stage.addGraph(star);
  stage.selectedElements.set(star);
  stage.toggleTool("transform-tool");
});

Vue3

<template>
  <div id="container"></div>
</template>;

import { computed, onMounted, ref } from "vue";
import { Stage, SVGStar } from "foxyjs";

onMounted(() => {
  const container = document.getElementById("container");
  const stage = new Stage(container);
  const star = new SVGStar({
    x: 100,
    y: 100,
    rx: 60,
    ry: 60,
    fill: "red",
  });
  stage.addGraph(star);
  stage.selectedElements.set(star);
  stage.toggleTool("transform-tool");
});

GitHub

View Github