Skip to content

React.js library for building editors like Keynote, Powerpoint or Canva based on SVG

License

Notifications You must be signed in to change notification settings

krebbl/react-svg-canvas

Repository files navigation

React.js library for building editors like Keynote, Powerpoint or Canva based on SVG

This is a react.js library for building WYSIWYG editors based on SVG.

Basic Usage

Clone the repo : git clone https://github.com/krebbl/react-svg-canvas.

Common Tasks

  • Developing - npm start - Runs the development server at localhost:8080 and use Hot Module Replacement. You can override the default host and port through env (HOST, PORT).
  • Creating a version - npm version <x.y.z> - Updates /dist and package.json with the new version and create a version tag to Git.
  • Publishing a version - npm publish - Pushes a new version to npm and updates the project site.

Testing

The test setup is based on Jest. Code coverage report is generated to coverage/. The coverage information is also uploaded to codecov.io after a successful Travis build.

  • Running tests once - npm test
  • Running tests continuously - npm run test:watch
  • Running individual tests - npm test -- - Works with test:watch too.
  • Linting - npm run test:lint - Runs ESLint.

Documentation Site

The boilerplate includes a GitHub Pages specific portion for setting up a documentation site for the component. The main commands handle with the details for you. Sometimes you might want to generate and deploy it by hand, or just investigate the generated bundle.

  • Building - npm run gh-pages - Builds the documentation into ./gh-pages directory.
  • Deploying - npm run deploy-gh-pages - Deploys the contents of ./gh-pages to the gh-pages branch. GitHub will pick this up automatically. Your site will be available through *.github.io/`.
  • Generating stats - npm run stats - Generates stats that can be passed to webpack analyse tool. This is useful for investigating what the build consists of.

Roadmap

Main goal: Simplify the process of visualizing ideas, plans and information

  • Implement basic elements with tests
  • Implement demo editor
  • TODO: ...
  • Build extendable editor like Atom which allows developers to create their own plugins

Highlighting Demo for the Site

var a = 5;
var b = 10;

// just trying out code highlighting feature here
console.log(a + b);

License

react-svg-canvas is available under MIT. See LICENSE for more details.

About

React.js library for building editors like Keynote, Powerpoint or Canva based on SVG

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published