Design Tools Showcase

Overview

Pikaso is a seamless, fully-typed HTML5 canvas library built on top of Konva. It provides higher-level APIs that significantly reduce boilerplate while maintaining full TypeScript support and access to the underlying Konva primitives.

✅ Built on Konva — familiar mental model

✅ Fully typed TypeScript API

✅ Built-in undo/redo history management

✅ Higher-level shape, selection and export APIs

Interactive Examples

1. Basic Shapes

Rectangle, circle, and polygon with colors and shadows

Hover over the blue rectangle to see color change

2. Draggable Elements

Drag the circle to move it around the canvas

3. Rotation & Animation

Click the polygon to rotate it with a smooth tween animation

Click the polygon to rotate +45° with animation

4. Text Rendering

Pikaso supports text rendering with styling options. Edit the text below:

First Text:

Second Text:

5. Transform with Handles (Rotate & Resize)

Click on a shape to select it, then use the handles to rotate and resize

Click on a shape to select it

6. Layer Management (Undo / Redo)

Pikaso has built-in undo/redo history. Use the buttons to step through changes.

Layer Order (bottom to top):

7. Export Canvas (Multiple Sizes)

Export the canvas at different resolutions for preview and print

Preview export is at 1x scale (web quality), Print export is at 3x scale (high resolution)

8. Export Canvas as JSON

Dump the full canvas state to JSON, including shapes and image URLs

Pikaso serializes all shapes, including image source URLs, into a structured JSON format

Evaluation Summary

Usability

★★★★★

Higher-level API removes boilerplate. TypeScript definitions are excellent and comprehensive.

Performance

★★★★☆

Inherits Konva's canvas performance. Slight overhead from the abstraction layer, minimal in practice.

Features