search

konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://konvajs.org/
Other
11.32k stars 914 forks source link

Who is using Konva? #256

Closed lavrton closed 3 years ago

lavrton commented 7 years ago

Hello, everyone. ✋ I am going to create a special page on the Konva website with a list of products that are using Konva.

If you are using Konva in your app, please, add a comment on this issue. Any products are welcome: private enterprise apps, startups, games, open-source projects, etc.

Also, please add this information if possible:

  1. Product description
  2. Screenshot
  3. Direct link to a product (or direct link to the page where konva is used)
  4. Stack (any other libraries you use here?)

I may not add any projects to the main list. But it will be still good to have a list here, so other people can check the demos.

dymio commented 7 years ago

Hi Anton.

  1. Website of apartment complex «Цвета Жизни» ("Colours of life") in Abakan city, Russia. This is information website for clients with interactive floor plans made with Konva.
  2. screen shot 2017-08-07 at 02 38 15
  3. http://life.tsst.su/floor-schemes?floor=5&porch=6
  4. Stack: Konva, jQuery in browser, Rails as backend.
lavrton commented 7 years ago
  1. Pixteller - "Newly redesigned web app aims to make social media graphics simple".
  2. screen shot 2017-08-08 at 14 53 37
  3. The app: https://pixteller.com/. The page where Konva is used: https://pixteller.com/editor
  4. React, Konva, react-konva, react-redux
pgrodrigues commented 7 years ago
  1. CSGO Board provides an interactive board for Valve's game Counter-Strike: Global Offensive which allows the user to design strategies and game plans for competitive matches.
  2. image
  3. http://www.csgoboard.com/board
  4. AngularJS, Konva.
vladimir-adtargetme commented 7 years ago

Hi Anton

  1. Banner designer - preview of dynamic banners for RTB platform Adtarget.me before generate sources.

  2. screenshot from 2017-08-23 13-16-22

  3. https://system.adtarget.me/dashboard/creatives/551521c74ba487154fbb01cb/bannertool/#container_id=border
  4. jQuery, Konva, Jcrop
norbertpisz commented 7 years ago

Hi Anton,

  1. SystemPro - tool for create soccer tactics and animations.
  2. -
  3. Startup not released yet :)
  4. JQuery, Konva, Boostrap, ASP .NET Core MVC
slig commented 6 years ago
  1. Online jigsaw puzzle
  2. screenshot of a jigsaw puzzle
  3. https://www.brainzilla.com/puzzles/jigsaw/
  4. Programmed in TypeScript, using Konva and jQuery.
kirill3333 commented 6 years ago

Hi, thank you for your library. My example:

  1. React component to crop avatar

  3. https://github.com/kirill3333/react-avatar

uahic commented 6 years ago

I am using it for robotics navigation visualization in conjunction with angular 4 and RxJs

JourdanClark commented 6 years ago

\

Live Demo

This is a classic game of Snake made using React and Redux! It uses React Konva to easily interact with Canvas elements.

This was made for a 24 hour Hackathon for LambdaSchool. We tied for Best Overall - Student Vote as well as Staff Pick.

You can either use the buttons on the console or the following keys:

demo

mcalus3 commented 6 years ago
  1. I am using react-konva and konva for view layer of my game color-wars. The game is hot-seat multiplayer, arcade, with focus on competition. Konva library performed great even under excessive amount of operations :)
  2. gameplay
  3. https://mcalus3.github.io/color-wars-web/
  4. Game is using also react, redux and is written in typescript.
uahic commented 6 years ago

@mcalus3 @JourdanClark How much effort was it to combine ReactKonva with Redux? I am also having some concepts to do the same for Angular 5 + konva + Redux and possible to replace konva at some point entirely with redux+Canvas

mcalus3 commented 6 years ago

@uahic it wasn't any problem, just follow the component-container architecture. Example from my code: Players component contains multiple PlayerVisual containers, each wrapping PlayerVisual component. No data is given through props, all is taken directly from store.

badlee commented 6 years ago

We had used Konvas in our project Play : https://play.google.com/store/apps/details?id=ga.oshimin.mobile.familys Website : http://myfamilys.ga

adyster commented 5 years ago

I use it on facetache! Description: Add moustaches to photos! Website:https://www.facetache.com/

screen shot 2018-10-17 at 12 25 30 am

SilentXYZ commented 5 years ago

I'm trying to make program for learning english with Angular/Konva http://enpuz.ru/online/lessons/hpttr-03-a screenshot from 2019-02-04 16-04-25

bmoquist commented 5 years ago

Kuruko - "Create Custom Wall Art with High-Quality Mounted Photo Prints"

Konva is used:

Kuruko Screenshot for Konva Kuruko Screenshot for Konva 2

Main: https://www.kuruko.com Konva-based Editor: https://www.kuruko.com/design

Stack: React, Redux, Konva, React-Konva, Semantic UI React, Express, Postgres

bluehymn commented 4 years ago

I use it to draw charts in my work

Angular + Konvajs

TIM截图20191213094829

TIM截图20191213094914

TIM截图20191213094940

songoffire commented 4 years ago

ScriptureMark

DESCRIPTION: A free tool that allows users to interact with Bible text on a canvas with a variety of text layout and markup tools. LINK: https://www.blueletterbible.org/smark IMAGE:

externuz commented 4 years ago

Description

Constructor for creating Instagram Stories as part of the scheduled posting service SMMplanner

Direct link

https://smmplanner.com/home/sc (registration required)

Stack

React, react-konva, typescript

Screenshots

scr1 scr2
jprevo commented 4 years ago

  1. Let's Role allows people from everywhere to play TableTop RPG in a virtual environment

  2. letsrole2

  3. https://lets-role.com

  4. TypeScript, InversifyJS, three.js

wikywin commented 4 years ago

Description tool for designing window and door with drag and drop

Direct link windoor craft (facebook and google account are supported)

Video demo youtube channel

Stack Vue, konva, typescript

Screenshots

WX20200606-085942@2x WX20200606-085829@2x WX20200606-085846@2x WX20200606-085913@2x
rmdort commented 4 years ago

SpreadSheet Grid

https://rowsncolumns.app

Product description

An Excel-like DataGrid component built using Konva and React. Allows users to declarative render grids, cells without sacrificing performance. Some of the popular features are

  1. Frozen Rows and Columns
  2. Custom Cell Renderers and Editors
  3. Custom formatting and Validation
  4. Formula support (coming soon)
  5. Dark Mode
  6. Custom fonts, styling
  7. Data validation
  8. Render Konva components as overlays or as cell

Screenshot

screenshot-1 screenshot-12

Direct link to a product (or direct link to the page where konva is used)

https://rowsncolumns.app

Stack (any other libraries you use here?)

  1. React
  2. React Konva
owendwyer commented 4 years ago

Hi, thanks so much for making Konva. It's really easy to use and suits my needs perfectly.

Online Picture Dictionary

A simple vocabulary viewer that shows images, text and plays audio.

opdome com

opdome.com

Stack Konva Howler

frizurd commented 3 years ago

Description Create podcast video snippets for social media. Use the editor to customize existing templates or create one from scratch.

Direct link https://app.vokal.co/editor (requires registration, Facebook and Google are supported)

Stack Konva, Vue, Nuxt

Screenshots

Screenshot 2020-11-18 at 17 59 23 screenshot app editor
gherkins commented 3 years ago

https://e-cards.shop/de/cards/create/2/1

Online shop for business ecards (DE).
Built with Symfony, React & Konva

Bildschirmfoto 2021-02-22 um 07 59 22
sarvarunajvm commented 3 years ago

I use it on facetache! Description: Add moustaches to photos! Website:https://www.facetache.com/

screen shot 2018-10-17 at 12 25 30 am

can you please share the snip that you are using to rotate the element

lavrton commented 3 years ago

💥 Big update!

Hey, @pgrodrigues @slig @kirill3333 @mcalus3 @bmoquist @songoffire @jprevo @owendwyer @frizurd @gherkins I just added your projects to the main konva webpage: https://konvajs.org/

I hope to add new cool projects in the future. Let me know if any information is missed or should be updated.

slig commented 3 years ago

Fantastic! Thanks for the project and for the link!

songoffire commented 3 years ago

That's Awesome!

Thank you so much for all your hard work maintaining and growing KonvaJS Anton!

On Tue, Mar 2, 2021 at 10:06 AM Tiago Serafim notifications@github.com wrote:

Fantastic! Thanks for the project and for the link!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/konvajs/konva/issues/256#issuecomment-789102767, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACGZAJ3AEYFJFKZMDL3AD4LTBUSKTANCNFSM4DV2VHZQ .

frizurd commented 3 years ago

💥 Big update!

Hey, @pgrodrigues @slig @kirill3333 @mcalus3 @bmoquist @songoffire @jprevo @owendwyer @frizurd @gherkins I just added your projects to the main konva webpage: https://konvajs.org/

I hope to add new cool projects in the future. Let me know if any information is missed or should be updated.

That's so awesome! Thank you so much for featuring vokal.co and creating, maintaining, and making Konva more awesome! 🥺🎉

LetsRoleRPG commented 3 years ago

Thank you for featuring Let's Role and for this amazing framework ❤️

adamw commented 3 years ago

Shelly: a programming language for drawing. Website: https://shelly.dev Stack: TypeScript + React + Konva + Monaco (editor)

Screenshot 2021-02-26 at 09 50 52
mwhnrt commented 3 years ago

  1. We created yokanban.io, a new Kanban tool that combines the best of digital and physical kanban boards.

  2. image

  3. https://app.yokanban.io

  4. We use konva and react-konva for all the canvas stuff, which made it easy to get started without to much canvas knowledge. Apart from that, we use react, easy-peasy, next.js, chakra-ui, fastify, mongoDB and, sure, some other cool libs.

Cheers to @lavrton

superliwei commented 3 years ago

BoardOS

Online whiteboard collaboration system

Website

https://boardos.online

Preview

https://boardos.online/preview/3.jpg

Stack

Vue,Konva

lavrton commented 3 years ago

@adamw @mwehnert @superliwei I added your projects to the main page: https://konvajs.org/

P.S. For anyone reading this, remember to check this page: https://konvajs.org/docs/donate.html

superliwei commented 3 years ago

@lavrton awesome! thanks a lot!

sta1216 commented 3 years ago

1.It's a quantity takeoff product base on the BIM model. The user can simply access it via the browser，instead of the traditional desktop application. 2.SaaS Site: https://service.spdcost.com/ 3.Vue, Echarts, written by typescript 4. image column slab

metaflow commented 3 years ago
  1. Recoils practice for Apex Legends
  2. ezgif-7-a8136dc6c40e
  3. https://apexlegendsrecoils.online/
  4. Konva + howler for sound playback.

Thanks for the great lib!

TimAstier commented 3 years ago

Thanks for this amazing library! I'm developing a web-based roguelike game using react.

I was using react to render and update the map as the player moves around, and even if the project is still small, I could already feel it was becoming laggy. This week I switched the game rendering from DOM elements to react-konva and the result was fantastic :)

peter1123581321 commented 3 years ago

  1. Genetic.garden is a website that helps you to arrange your vegetables in your garden beds with the help of a genetic algorithm.

  2. geneticgarden

  3. https://genetic.garden

  4. Konva, Chart.js, Bootstrap

jamestomasino commented 3 years ago

Oh this is a creative way to share sites using konva! I wrote a crochet pattern generator with it last year called Stitchy.

  1. Stitchy is a crochet pattern generator. It's here to help you convert an image into a rectangular pattern of knots. Choose your pattern size and the number of colors you'd like to use, then upload the image you want to use as a pattern. You can resize, move, and rotate the image. When it's just right, click “Render” and generate your pattern.
  2. stitchy
  3. Website - Source
  4. Konva, nearest-color, ColorThief
AshreneRoy commented 3 years ago

1. Blackboard

React based Chrome extension to draw and annotate over live web pages, and capture full page screenshots

2. Preview

ss-1

ss

3. Links

Chrome extension: https://chrome.google.com/webstore/detail/blackboard/mjpaeljbciakgnigdligmdihfhnpbfla Repo: https://github.com/AshreneRoy/blackboard

Stack

React-Konva, Styled components

weiameili commented 3 years ago

1. Pensela: The Swiss Army Knife of Screen Annotation Tools

An app to that allows you to draw and add text on your screen

2. Screenshots

image image

3. Github Repo

https://github.com/weiameili/Pensela

4. Stack

Konva, Jquery, Electron

Albert-cord commented 3 years ago

1. A built-in print designer for PaaS system

description: I use it to draw graphics in the main view area of the designer, include the sheet subset table

2. Screenshots

image

3. Stack

konva, react-konva, React, TypeScript