Vextra Core

A powerful design tool core library that provides complete design document data processing, rendering, and editing capabilities.

Project Overview

Vextra Core (@kcdesign/data) is a high-performance design tool core library developed by KCai Technology, providing underlying data structures and processing capabilities for modern design tools. The library supports import and export of various design formats, including complete graphic rendering and more.

Key Features

🎨 Multi-format Support

• Figma - Complete Figma document import and export
• Sketch - Support for Sketch document parsing and conversion
• SVG - Vector graphics import and export
• Image Formats - PNG, JPG and other export formats

🧩 Rich Graphics Types

• Vector graphics: paths, polygons, ellipses, stars
• Text processing: rich text, font styles, layout
• Symbol system: components, instances, variables
• Layout components: auto layout, constraint systems

🎯 Complete Style System

• Fills: solid colors, gradients, image fills
• Strokes: various stroke styles, dashed lines, cap styles
• Effects: shadows, blur, filter effects
• Transforms: rotation, scaling, skew transforms

🚀 High-Performance Architecture

• Developed with TypeScript, providing complete type support
• Modular design, supports on-demand imports
• Efficient data structures and algorithms
• Supports both browser and Node.js environments

Installation

npm install @kcaitech/vextra-core

Quick Start

Import Design Files

import { IO } from '@kcaitech/vextra-core';
// Import Figma file
const document = await IO.importFigma(figmaData);

For more examples, see examples directory

Development Guide

Requirements

• Node.js >= 18
• TypeScript >= 5.0

Development Mode

# Install dependencies
npm install

# Development mode (with source debugging)
npm run dev

# Build production version
npm run build

# Run tests
npm run test

# Code linting
npm run eslint

Schema Code Generation

The project uses JSON Schema to define data structures. When modifying data structures:

1. Modify JSON Schema files in the src/schema/ directory
2. Run npm run schema to generate new TypeScript type definitions

Project Structure

src/
├── basic/          # Basic utilities and data structures
├── data/           # Core data models
├── creator/        # Object creation module
├── io/             # Import/export module
├── render/         # Rendering engine
├── dataview/       # Data view layer
└── schema/         # Data structure definitions

License

This project is licensed under the AGPL-3.0 License.

Contact Us

• Website: https://kcaitech.com