Shopify/Klint

Shopify 资料

最近记录的来源活动: 2026年10月5日 07:08

SkillsMP 收录数据更新: 2026年10月17日 00:09

已收集 skills: 2

GitHub 星标: 6
GitHub Forks: 1

仓库 README

仓库 README 来源：README.md

查看 README 源文件

展开完整 README

# 🎨 Klint Klint is a modern 2D canvas library for React, inspired by p5.js and Processing. It makes creative coding in React intuitive and powerful, perfect for generative art, data visualization, interactive graphics, and creative web experiences. ## ✨ Features - 🎯 **React-first**: Built specifically for React with hooks and component patterns - 🎨 **Creative coding**: p5.js-like API with modern JavaScript/TypeScript - 🚀 **Performance**: Direct canvas access with minimal overhead - 🛠️ **Developer friendly**: Full TypeScript support and great tooling - 🔧 **Extensible**: Plugin system and easy customization ## 🚀 Quick Start ### Install Klint ```bash npm install @shopify/klint ``` ### Basic Usage ```jsx import { useKlint, Klint } from '@shopify/klint'; function MySketch() { const { context } = useKlint(); const draw = (K) => { K.background('#000'); K.fillColor('#ff6b6b'); K.circle(K.width/2, K.height/2, 50); }; return <Klint context={context} draw={draw} />; } ``` ## 🎮 Try the Editor Want to experiment with Klint interactively? Create a live editor environment: ```bash npx @shopify/klint create-editor my-klint-project cd my-klint-project npm install npm run dev ``` This creates a Monaco-based editor with live preview - perfect for learning and prototyping! ## 📚 Documentation - **[Getting Started Guide](https://shopify.github.io/Klint/docs/getting-started/quick-start)** - Learn the basics - **[API Reference](https://shopify.github.io/Klint/docs/reference/api-reference)** - Complete function reference - **[Examples](https://shopify.github.io/Klint/experiments)** - See Klint in action - **[Lifecycle](https://shopify.github.io/Klint/docs/core-concepts/lifecycle)** - Understand initialization and drawing ## 🌟 Examples ### Animated Circle ```jsx function AnimatedCircle() { const { context } = useKlint(); const draw = (K) => { K.background('rgba(0, 0, 0, 0.1)'); K.fillColor('#4ecdc4'); const x = K.width/2 + Math.cos(K.frame * 0.02) * 100; const y = K.height/2 + Math.sin(K.frame * 0.02) * 100; K.circle(x, y, 20); }; return <Klint context={context} draw={draw} />; } ``` ### Interactive Drawing ```jsx function InteractiveDrawing() { const { context, KlintMouse } = useKlint(); const { mouse } = KlintMouse(); const draw = (K) => { if (mouse.isPressed) { K.fillColor('red'); K.circle(mouse.x, mouse.y, 10); } }; return <Klint context={context} draw={draw} />; } ``` ## Vanilla JavaScript (no React) Use the tree-shakeable native entry directly: ```js import { createKlint } from '@shopify/klint/native'; const sketch = createKlint({ container: '#app', draw(K) { K.background('white'); K.circle(K.width / 2, K.height / 2, 40); }, }); await sketch.ready; ``` ## 🛠️ Development **For contributors** who want to work on Klint itself: ```bash git clone https://github.com/Shopify/klint.git cd klint npm install npm run build ``` See [CONTRIBUTING.md](./CONTRIBUTING.md) for development guidelines. ## 📄 License MIT --- **Ready to create?** Start with `npx @shopify/klint create-editor my-project` 🎨

正在加载仓库 README…

这个仓库中的 skills

网页开发工程师软件开发工程师

2 个职业分类 · 已分类 100%

skill

职业分类

描述

更新

klint

软件开发工程师

Build creative-coding sketches and digital art with Klint's immediate-mode Canvas 2D API in React or vanilla JavaScript.

原文语言：英语

2026-10-05

klint

网页开发工程师

Build creative-coding sketches and digital art with Klint's immediate-mode Canvas 2D API in React or vanilla JavaScript.

原文语言：英语

2026-08-02

已展示 2 / 2 个已收集 Skill。

用 AI 助手安装

复制这段 Prompt，发给你正在使用的 AI 助手。

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/Shopify/Klint.