Who is using Konva?

[lavrton]

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]

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. 
3. http://life.tsst.su/floor-schemes?floor=5&porch=6
4. Stack: Konva, jQuery in browser, Rails as backend.

[lavrton]

1. Pixteller - "Newly redesigned web app aims to make social media graphics simple".
2. 
3. The app: https://pixteller.com/. The page where Konva is used: https://pixteller.com/editor
4. React, Konva, react-konva, react-redux

[pgrodrigues]

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. 
3. http://www.csgoboard.com/board
4. AngularJS, Konva.

[vladimir-adtargetme]

Hi Anton

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

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

[norbertpisz]

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

[lavrton]

Hey, were you able to launch it?

[slig]

1. Online jigsaw puzzle
2. 
3. https://www.brainzilla.com/puzzles/jigsaw/
4. Programmed in TypeScript, using Konva and jQuery.

[kirill3333]

Hi, thank you for your library. My example:

1. React component to crop avatar

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

[JourdanClark]

<Snake/>

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:

• Up Arrow or W
• Left Arrow or A
• Down Arrow or S
• Right Arrow or D
• Spacebar or Enter

[mcalus3]

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. 
3. https://mcalus3.github.io/color-wars-web/
4. Game is using also react, redux and is written in typescript.

[badlee]

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]

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

[SilentXYZ]

I'm trying to make program for learning english with Angular/Konva
http://enpuz.ru/online/lessons/hpttr-03-a

[bmoquist]

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

Konva is used:

• Main drag-and-drop wall design editor
• Image editor (cropping images, creating SplitPics, selecting which image to edit)

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]

I use it to draw charts in my work

Angular + Konvajs

[songoffire]

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:

• 

[geniot]

1. Learning App for Roland V-Accordions, piano.

3. https://octavian.app/accordion-button-type/a_thin_rowan_tree/40
4. Angular, PrimeNG, Konva. flex-layout, cacheroutereusestrategy; Spring Boot.

[swimmingkiim]

1. Product description
   -> I built a React image editor like Figma or Canva. Feature List
2. Screenshot
   
3. Direct link to a product (or direct link to the page where konva is used)
   -> https://swimmingkiim.github.io/react-image-editor/
4. Stack (any other libraries you use here?)
   • typescript
   • react
   • redux
   • deeplab & tfjs
   • bootstrap
   • i18next
   • react-hotkeys-hook

[lavrton]

That is a really nice project! Good work!

[swimmingkiim]

Thank you! I hope this project can help others :-)

[sitedemos]

Online Image Tool

Free online tool by angrytools.com that allows image color picker, crop, resize, rotate, apply effects ( greyscale, blur, noise etc ) and generate image code in base64.

https://angrytools.com/img-colorpicker/

• Vanilla JS
• Konva
• picsum for random images

[jez9999]

Mystikaze

My game I've been working on the past few months uses Konva as its main graphics engine. It saved me a lot of time I'd have spent if I had to create my own! 🤣

https://mystikaze.com

It's an online turn-based hex battle strategy game, with elements of Risk, but also various other hex strategy games. It's multiplayer so play with your friends. I want to do an AI one day but they're pretty tough. A year of research into machine learning, maybe?

In terms of my stack, the main technologies used are:

• C# / ASP.NET
• JavaScript / TypeScript
• Vue.js with Vue Router
• Konva
• Howler.js
• SignalR
• SQL Server
• ... and a hex library I whipped up with lots of inspiration from the docs on Red Blob Games!

Oh, and although I'm pretty happy with it so far, I still have a "to do" list of features and improvements the length of a football field so I don't really consider it quite finished yet...

[lavrton]

Added to the main page. Thanks for sharing.

[jez9999]

Cool, thanks!

[Lastik]

Some-charts

https://github.com/Lastik/some-charts

It has a demo page: https://lastik.github.io/some-charts/

Yet another one charting library which I'm currently working on in my spare time, so updating slowly unfortunately. Currently in state of proof of concept, but already has some "engine" and basic functionality which might be useful, including several types of plots (Bars, Markers, Bubble and Box) and several types of axes (Labeled, Numeric, and Date Time).

It rethinks some ideas of an old WPF library Interactive Data Display by Microsoft. That's why I've mentioned it in the License file even though it doesn't use any of its source code. I've worked with this awesome team long time ago so wanted to reanimate the ideas and concepts being put into this library.

Stack:
jquery, konva, moment, color

Future Plans:

• Test coverage and Documentation
• Adding tooltips functionality
• More types of plots, e.g. Line Plot, Color Map and etc.
• Adding React and Angular wrappers
• Google Maps integration.

Screens:

[lavrton]

Thanks for sharing your work! I just added it into the main page.

[some-code-developer]

Some code

Some code is a workflow automation software which makes the lives of developers easier. It is very easy to extend and it is free for personal use.

Website
https://www.some-code.com/

Workflow example
https://portal.some-code.com/workflow/edit/000.000

Stack

• konva
• react
• dnd-kit
• monacoeditor
• draft-js

SDK
https://github.com/some-code-developer/sdk

[mvienna]

Hello! I’m working on a project using PHP and Vue with the Konva library. I’m interested in how to transform a regular text element in Konva into a Rich Text Editor similar to what’s implemented using Draft.js for React. Could you share code snippets or provide recommendations on this topic?

[atomicpunk1]

LogicSim

Hi, and thank you for this amazing library.

1. LogicSim is a logical circuit simulator website that is able to simulate combinational and sequential logic circuits. Currently supported for desktops only.

3. https://jakubito11.github.io/logicsim/
4. Konva

[jtCodes]

Hello everyone!

1. Lyrictor is a high-performance, high-precision lyric video editor accessible on any browser

3. https://lyrictor.vercel.app 4. Built with: - React + Typescript - React Spectrum - zustand - Konva.js - react-use-audio-player (howler.js)

Source code here if anything piqued your interest: https://github.com/jtCodes/lyrictor

[hamidb80]

ReMS - a graph based knowledge management

Rec.0009.mp4

frontend stack:

• Nim (a language that converts to JS)
• Karax (Single page application framework for Nim)
• Konva (canvas framework)

[mohsensd1373]

سلام خسته نباشید
تشکر می کنم بابت کار خلاقانه شما

[hamidb80]

سلام - ممنونم مهندس - سال جدید مبارک باشه ان شا الله

[Stebbet]

Hey! I designed and developed a site for designing and simulating finite-state machines!
You can access it at https://www.statemachine.live

Using the Django Stack with Konva and jQuery in the browser.
Hope you enjoy, and thanks for the excellent library @lavrton.

[uc-mobileapps]

I've designed an UML activity diagram editor with KonvaJs for use with a web-application. The software makes artificial intelligence accessible to a wider audience by simplifying things for people without too much technological background. It is made with Spring Boot and Vaadin flow together with a custom typescript-based component that does the UML and editing capabilities with KonvaJs on the client side.
The app can be used to fetch mail and automatically send replies with support for mail templates, variables and an integration with the OpenAI api or Llama2 via Gpt4all and also supports bulk text processing and sentiment detection. Besides the simple usage for beginners, Python scripts are also supported for custom needs. You can run it with a docker compose script available on the website; https://uc-mobileapps.com/cocosplate.

I've been grateful for the useful konva examples and the nice tips by the community in your discord channel and be happy if you add this too. Keep up the good work!

[praghus]

Plextus - Open source pixel art editor designed to make tiled maps and tilesets. In addition to the usual tile placement, it also allows you to draw directly on map and edit the tiles. Is fully compatible with Tiled map editor and allows you to export your finished project to .tmx format.

Konva, Material-UI, React, Redux, Redux-Saga, TypeScript

• Showcase
• GitHub

[sh730]

Thank you for this amazing library.

1. eBook Publishing Platform

3. https://www.adjustbook.com/

4. TypeScript, Konva

[sh730]

Thank you for this amazing library.

1. Touch Typing Practice Online

3. https://typing-lesson.com/

4. TypeScript, Konva

[ayuechuan]

https://github.com/ayuechuan/konva-calendar/tree/main