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:

• 

[orrybaram]

Tango

Product description

Create process or product documentation on-demand. Build your team knowledge base effortlessly. Train teammates and customers faster.

Screenshot

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

https://tango.us

Stack (any other libraries you use here?)

Next.js, React, Typescript, Pintura, Tailwind, Apollo

[colinfwren]

Reciprocal.dev

Product Description

Create interactive user journey maps to build a greater shared understanding within the full team, allowing your team to build a higher quality product quicker for your customers.

Screenshot

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

Landing page: https://reciprocal.dev

Konva is used in the map screens but these require an account to access

Stack (any other libraries you use here?)

• React
• react-colorful
• react-select

[lavrton]

Nice product. I saw your several good dev blog posts.

[colinfwren]

Thanks, if you want to repurpose any of those posts into examples for the Konva docs feel free to. Most of them have sandboxes with the code on them now too.

[laogui]

@colinfwren It's a pity that reciprocal.dev is closed. It was a very amazing project. I learned a lot from your articles, but I have some tricky problems that I can't solve, such as how to make a polyline with two nodes. I still hope you can continue. Share technical articles about konva.

[mateusfbsoares]

WebSoccerMonitor

1. I am using react-konva to build an open-source monitor (visualizer) of soccer matches played by autonomous robots from RoboCup competition leagues. Right now, you can replay past games, and I'm working towards making it able to show matches happening in real time. The aim is to have more complex features such as Voronoi and Deulanoy diagrams, heatmaps and other real-time analysis in the future.

2. 
   still image: https://user-images.githubusercontent.com/43099047/135880851-7176efd9-30b2-4bf1-8f14-1da349bbbd4e.jpg

3. WebSite: https://robocin.com.br/WebSoccerMonitor & GitHub repository:https://github.com/robocin/WebSoccerMonitor

4. The monitor window is built with React-Konva and the controls are made with React. I'm also using tailwindcss for styling. On the backend I'm running flask.

I spent weeks searching and testing other libraries and using React-Konva was no doubt the best decision I made. Thank you for this awesome software!

[gosquiggle]

Squiggle

Product description

Squiggle combines creative play and strategy games with video calling to help children and young people connect with their friends and family in a safe, fun and engaging way, wherever they may be in the world.

Squiggle is free to play for up to 30 minutes. Paid tiers are available which unlock more features and extend the time limit.

Initially created during the UK’s first lockdown in 2020 to help my children keep in touch with their grandparents, it has since been played all over the world through only word-of-mouth.

Screenshots

Wordsearches

Colouring

Chess

Direct link to product

This is the main marketing site: https://www.squiggle.io/

If you click on the Play for free now button you'll be taken through to the Angular app where Konva is used for the real-time canvas.

You can play it for free. No need to sign up.

Stack

• Angular
• simple-peer

Thanks @lavrton!

[mohsensd1373]

king_IE
wordprees free image maker






https://wordpress.org/plugins/king-ie/

[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?

[jakubito11]

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.