<commit_before>layout: index
subtitle: HTML5 2d canvas library
description: Konva is 2d Canvas JavaScript framework for drawings shapes, animations, node nesting, layering, filtering, event handling, drag and drop and much more.
comments: false
---
.intro-wrap
  .outer
        h2.intro-features Features
        
        .features
          .feature
            img(src="/assets/features/undraw_abstract_x68e.svg")
            h3.desc Object Oriented API with support of many shapes
          .feature
            img(src="/assets/features/undraw_file_sync_ot38.svg")
            h3.desc Support for desktop and mobile devices

          .feature
            img(src="/assets/features/undraw_animating_1rgh.svg")
            h3.desc Animations and tweens

          .feature
            img(src="/assets/features/undraw_fitting_pieces_cli3.svg")
            h3.desc Node nesting, grouping and event bubbling

          .feature
            img(src="/assets/features/undraw_image_viewer_wxce.svg")
            h3.desc Hight quality exports into data URLs, image data, or image objects

          .feature
            img(src="/assets/features/undraw_options_2fvi.svg")
            h3.desc Nice read-to-use filters
        
          .feature
            img(src="/assets/features/undraw_voice_interface_eckp.svg")
            h3.desc Native integration with web frameworks such as React and Vue

          .feature
            img(src="/assets/features/undraw_drag_5i9w.svg")
            h3.desc Built-in Drag&drop support

        h2.intro-features Demo
        
        iframe(src='/downloads/code/main-demo.html',style='width:100%; height:600px; box-shadow: 0 0 10px grey; border-radius: 4px; overflow:hidden;')

        h2.intro-features Who is using Konva?


        .grid-container
          .grid-item
            a(href="https://polotno.dev/?utm_source=konvajs", target="_blank")
              .preview(style='background-image: url(/assets/users/polotno.jpg);')
              .description
                h5.name Polotno
                p SDK for making design editors for the web

          .grid-item
            a(href="https://smmplanner.com/home/sc", target="_blank")
              .preview(style='background-image: url(/assets/users/smmplanner.jpg);')
              .description
                h5.name SMMplanner
                p Constructor for creating Instagram Stories as part of the scheduled posting

          .grid-item
            a(href="https://rowsncolumns.app/", target="_blank")
              .preview(style='background-image: url(/assets/users/grid.jpg);')
              .description
                h5.name SpreadSheet Grid
                p Excel-like DataGrid component for React JS

          .grid-item
            a(href="http://windowcc.com/", target="_blank")
              .preview(style='background-image: url(/assets/users/windoor.jpg);')
              .description
                h5.name Windoor craft
                p Tool for designing window and door with drag and drop

          .grid-item.small
            a(href="https://pixteller.com", target="_blank")
              .preview(style='background-image: url(/assets/users/pixteller.jpg);')
              .description
                h5.name Pixteller
                p A design tool to create or customize any image in seconds

          .grid-item.small
            a(href="https://getpaddee.com", target="_blank")
              .preview(style='background-image: url(/assets/users/paddee.jpg);')
              .description
                h5.name Paddee
                p Marketplace and online editor for photo booth templates



          .grid-item.small
            a(href="https://shelly.dev/", target="_blank")
              .preview(style='background-image: url(/assets/users/shelly.jpg);')
              .description
                h5.name Shelly
                p A programming language for drawing

          .grid-item.small
            a(href="https://yokanban.io/", target="_blank")
              .preview(style='background-image: url(/assets/users/yokanban.jpg);')
              .description
                h5.name yokanban.io
                p A new Kanban tool

          .grid-item.small
            a(href="https://boardos.online", target="_blank")
              .preview(style='background-image: url(/assets/users/boardos.jpg);')
              .description
                h5.name BoardOS
                p Online whiteboard collaboration system

          .grid-item.small
            a(href="https://app.vokal.co/editor", target="_blank")
              .preview(style='background-image: url(/assets/users/vokal.jpg);')
              .description
                h5.name Vokal<commit_msg>chore: rename yokanban to taggle<commit_after>layout: index
subtitle: HTML5 2d canvas library
description: Konva is 2d Canvas JavaScript framework for drawings shapes, animations, node nesting, layering, filtering, event handling, drag and drop and much more.
comments: false
---
.intro-wrap
  .outer
        h2.intro-features Features
        
        .features
          .feature
            img(src="/assets/features/undraw_abstract_x68e.svg")
            h3.desc Object Oriented API with support of many shapes
          .feature
            img(src="/assets/features/undraw_file_sync_ot38.svg")
            h3.desc Support for desktop and mobile devices

          .feature
            img(src="/assets/features/undraw_animating_1rgh.svg")
            h3.desc Animations and tweens

          .feature
            img(src="/assets/features/undraw_fitting_pieces_cli3.svg")
            h3.desc Node nesting, grouping and event bubbling

          .feature
            img(src="/assets/features/undraw_image_viewer_wxce.svg")
            h3.desc Hight quality exports into data URLs, image data, or image objects

          .feature
            img(src="/assets/features/undraw_options_2fvi.svg")
            h3.desc Nice read-to-use filters
        
          .feature
            img(src="/assets/features/undraw_voice_interface_eckp.svg")
            h3.desc Native integration with web frameworks such as React and Vue

          .feature
            img(src="/assets/features/undraw_drag_5i9w.svg")
            h3.desc Built-in Drag&drop support

        h2.intro-features Demo
        
        iframe(src='/downloads/code/main-demo.html',style='width:100%; height:600px; box-shadow: 0 0 10px grey; border-radius: 4px; overflow:hidden;')

        h2.intro-features Who is using Konva?


        .grid-container
          .grid-item
            a(href="https://polotno.dev/?utm_source=konvajs", target="_blank")
              .preview(style='background-image: url(/assets/users/polotno.jpg);')
              .description
                h5.name Polotno
                p SDK for making design editors for the web

          .grid-item
            a(href="https://smmplanner.com/home/sc", target="_blank")
              .preview(style='background-image: url(/assets/users/smmplanner.jpg);')
              .description
                h5.name SMMplanner
                p Constructor for creating Instagram Stories as part of the scheduled posting

          .grid-item
            a(href="https://rowsncolumns.app/", target="_blank")
              .preview(style='background-image: url(/assets/users/grid.jpg);')
              .description
                h5.name SpreadSheet Grid
                p Excel-like DataGrid component for React JS

          .grid-item
            a(href="http://windowcc.com/", target="_blank")
              .preview(style='background-image: url(/assets/users/windoor.jpg);')
              .description
                h5.name Windoor craft
                p Tool for designing window and door with drag and drop

          .grid-item.small
            a(href="https://pixteller.com", target="_blank")
              .preview(style='background-image: url(/assets/users/pixteller.jpg);')
              .description
                h5.name Pixteller
                p A design tool to create or customize any image in seconds

          .grid-item.small
            a(href="https://getpaddee.com", target="_blank")
              .preview(style='background-image: url(/assets/users/paddee.jpg);')
              .description
                h5.name Paddee
                p Marketplace and online editor for photo booth templates



          .grid-item.small
            a(href="https://shelly.dev/", target="_blank")
              .preview(style='background-image: url(/assets/users/shelly.jpg);')
              .description
                h5.name Shelly
                p A programming language for drawing

          .grid-item.small
            a(href="https://taggle.so.io/", target="_blank")
              .preview(style='background-image: url(/assets/users/yokanban.jpg);')
              .description
                h5.name Taggle.so
                p A modern project management whiteboard that inspires flow and communication

          .grid-item.small
            a(href="https://boardos.online", target="_blank")
              .preview(style='background-image: url(/assets/users/boardos.jpg);')
              .description
                h5.name BoardOS
                p Online whiteboard collaboration system

          .grid-item.small
            a(href="https://app.vokal.co/editor", target="_blank")
              .preview(style='background-image: url(/assets/users/vokal.jpg);')
              .description
                h5.name Vokal
{'fraction_non_alphanumeric': 0.10357894736842105, 'fraction_numerical': 0.009263157894736843, 'mean_word_length': 1.8159454653230587, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 18, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5958335', 'n_tokens_mistral': 2639, 'n_tokens_neox': 2493, 'n_words': 583}