Shopify/Klint

Dernière activité source enregistrée: 21 octobre 2026 à 12:32

Catalogue SkillsMP mis à jour: 29 octobre 2026 à 18:30

skills collectés: 2

Étoiles GitHub: 6
Forks GitHub: 1

Installer avec un assistant IA

Copiez ce prompt dans l’assistant IA que vous utilisez.

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

README du dépôt

Fichier source du README : README.md

Lire le README source

Afficher le README complet

# 🎨 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` 🎨

Chargement du README du dépôt…

Skills dans ce dépôt

Développeurs de logiciels Développeurs web

2 catégories métier · 100% classifié

skill

métier

description

mis à jour

klint

Développeurs de logiciels

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

Langue du texte source : anglais

2026-10-21

klint

Développeurs web

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

Langue du texte source : anglais

2026-08-02

Affichage de 2 skills collectés sur 2.