[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-shopify-klint":3,"mdc--ql3v8h-key":38,"related-repo-shopify-klint":1166,"related-org-shopify-klint":1176},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":28,"repoUrl":29,"updatedAt":30,"license":31,"forks":32,"topics":33,"repo":34,"sourceUrl":29,"mdContent":37},"klint","build creative sketches with Klint","Build creative-coding sketches and digital art with Klint's immediate-mode Canvas 2D API in React or vanilla JavaScript.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"shopify","Shopify","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fshopify.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":17,"slug":18,"type":15},"Graphics","graphics",{"name":20,"slug":21,"type":15},"Creative","creative",{"name":23,"slug":24,"type":15},"JavaScript","javascript",{"name":26,"slug":27,"type":15},"Design","design",5,"https:\u002F\u002Fgithub.com\u002FShopify\u002FKlint","2026-08-05T05:58:08.811782",null,1,[],{"repoUrl":29,"stars":28,"forks":32,"topics":35,"description":36},[],"Base repository for the Klint component","---\nname: klint\ndescription: Build creative-coding sketches and digital art with Klint's immediate-mode Canvas 2D API in React or vanilla JavaScript.\n---\n\n# Klint\n\nUse Klint for generative art, animated sketches, and interactive Canvas 2D work. Treat it as an immediate-mode creative-coding runtime: update sketch state, then draw the current frame through the enhanced `KlintContext`.\n\n## How to work\n\n1. Install `@shopify\u002Fklint` and inspect its exported TypeScript types when unsure; do not guess p5.js-style names.\n2. Put one-time resource loading in `preload`, initialization in `setup`, and synchronous rendering in `draw`.\n3. Size the parent element—`\u003CKlint>` fills it. Use `K.width` and `K.height` for responsive composition.\n4. Drive animation with `K.time` or `K.deltaTime`, not an additional `requestAnimationFrame`.\n5. Keep optional plugins behind their `@shopify\u002Fklint\u002Fplugins\u002F*` imports and add them only when the artwork needs them.\n\n```tsx\nimport {Klint, type KlintContext} from '@shopify\u002Fklint';\n\nexport function Artwork() {\n  const draw = (K: KlintContext) => {\n    K.background('#101018');\n    const x = K.width \u002F 2 + Math.cos(K.time) * K.width * 0.2;\n    K.fillColor('#ff6b9d');\n    K.circle(x, K.height \u002F 2, 24);\n  };\n\n  return (\n    \u003Cdiv style={{width: '100%', height: '100vh'}}>\n      \u003CKlint draw={draw} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\nFor pointer, keyboard, gesture, window, or image helpers, call their factories during render and pass the bridge to the canvas:\n\n```tsx\nconst {context, KlintMouse} = useKlint();\nconst {mouse} = KlintMouse();\nreturn \u003CKlint context={context} draw={(K) => drawArtwork(K, mouse)} \u002F>;\n```\n\nWithout React, import `createKlint` from `@shopify\u002Fklint\u002Fnative`, await `sketch.ready`, and call `sketch.destroy()` when finished.\n\n## React pitfalls\n\n- **Never call `KlintMouse()`, `KlintImage()`, or another hook factory inside `draw`, a condition, or an event handler.** They use React hooks and must run unconditionally at component render time.\n- Do not call React state setters every frame. Keep fast simulation state in `useStorage`\u002Frefs, read changing component values with `useProps`, and reserve React state for surrounding UI.\n- Keep `draw` synchronous. Load\u002Fdecode assets in `preload` or React effects and cache expensive\u002Fstatic work.\n- Canvas options are initialization settings. Remount `\u003CKlint>` to change them rather than expecting prop updates to rebuild the runtime.\n- React Strict Mode may initialize effects twice in development. Make `preload` and `setup` idempotent, and clean up non-Klint listeners\u002Fresources in a React effect.\n- Coordinates are logical CSS pixels. Do not multiply drawing or pointer coordinates by DPR; Klint manages the backing store.\n- Clear with `background`\u002F`clear` when each frame should replace the previous one; omit or use transparency intentionally for trails.\n",{"data":39,"body":40},{"name":4,"description":6},{"type":41,"children":42},"root",[43,51,66,73,189,809,814,984,1021,1027,1160],{"type":44,"tag":45,"props":46,"children":47},"element","h1",{"id":4},[48],{"type":49,"value":50},"text","Klint",{"type":44,"tag":52,"props":53,"children":54},"p",{},[55,57,64],{"type":49,"value":56},"Use Klint for generative art, animated sketches, and interactive Canvas 2D work. Treat it as an immediate-mode creative-coding runtime: update sketch state, then draw the current frame through the enhanced ",{"type":44,"tag":58,"props":59,"children":61},"code",{"className":60},[],[62],{"type":49,"value":63},"KlintContext",{"type":49,"value":65},".",{"type":44,"tag":67,"props":68,"children":70},"h2",{"id":69},"how-to-work",[71],{"type":49,"value":72},"How to work",{"type":44,"tag":74,"props":75,"children":76},"ol",{},[77,91,119,148,176],{"type":44,"tag":78,"props":79,"children":80},"li",{},[81,83,89],{"type":49,"value":82},"Install ",{"type":44,"tag":58,"props":84,"children":86},{"className":85},[],[87],{"type":49,"value":88},"@shopify\u002Fklint",{"type":49,"value":90}," and inspect its exported TypeScript types when unsure; do not guess p5.js-style names.",{"type":44,"tag":78,"props":92,"children":93},{},[94,96,102,104,110,112,118],{"type":49,"value":95},"Put one-time resource loading in ",{"type":44,"tag":58,"props":97,"children":99},{"className":98},[],[100],{"type":49,"value":101},"preload",{"type":49,"value":103},", initialization in ",{"type":44,"tag":58,"props":105,"children":107},{"className":106},[],[108],{"type":49,"value":109},"setup",{"type":49,"value":111},", and synchronous rendering in ",{"type":44,"tag":58,"props":113,"children":115},{"className":114},[],[116],{"type":49,"value":117},"draw",{"type":49,"value":65},{"type":44,"tag":78,"props":120,"children":121},{},[122,124,130,132,138,140,146],{"type":49,"value":123},"Size the parent element—",{"type":44,"tag":58,"props":125,"children":127},{"className":126},[],[128],{"type":49,"value":129},"\u003CKlint>",{"type":49,"value":131}," fills it. Use ",{"type":44,"tag":58,"props":133,"children":135},{"className":134},[],[136],{"type":49,"value":137},"K.width",{"type":49,"value":139}," and ",{"type":44,"tag":58,"props":141,"children":143},{"className":142},[],[144],{"type":49,"value":145},"K.height",{"type":49,"value":147}," for responsive composition.",{"type":44,"tag":78,"props":149,"children":150},{},[151,153,159,161,167,169,175],{"type":49,"value":152},"Drive animation with ",{"type":44,"tag":58,"props":154,"children":156},{"className":155},[],[157],{"type":49,"value":158},"K.time",{"type":49,"value":160}," or ",{"type":44,"tag":58,"props":162,"children":164},{"className":163},[],[165],{"type":49,"value":166},"K.deltaTime",{"type":49,"value":168},", not an additional ",{"type":44,"tag":58,"props":170,"children":172},{"className":171},[],[173],{"type":49,"value":174},"requestAnimationFrame",{"type":49,"value":65},{"type":44,"tag":78,"props":177,"children":178},{},[179,181,187],{"type":49,"value":180},"Keep optional plugins behind their ",{"type":44,"tag":58,"props":182,"children":184},{"className":183},[],[185],{"type":49,"value":186},"@shopify\u002Fklint\u002Fplugins\u002F*",{"type":49,"value":188}," imports and add them only when the artwork needs them.",{"type":44,"tag":190,"props":191,"children":196},"pre",{"className":192,"code":193,"language":194,"meta":195,"style":195},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {Klint, type KlintContext} from '@shopify\u002Fklint';\n\nexport function Artwork() {\n  const draw = (K: KlintContext) => {\n    K.background('#101018');\n    const x = K.width \u002F 2 + Math.cos(K.time) * K.width * 0.2;\n    K.fillColor('#ff6b9d');\n    K.circle(x, K.height \u002F 2, 24);\n  };\n\n  return (\n    \u003Cdiv style={{width: '100%', height: '100vh'}}>\n      \u003CKlint draw={draw} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n","tsx","",[197],{"type":44,"tag":58,"props":198,"children":199},{"__ignoreMap":195},[200,267,277,308,362,406,521,563,631,640,648,662,738,769,787,800],{"type":44,"tag":201,"props":202,"children":204},"span",{"class":203,"line":32},"line",[205,211,217,222,227,232,237,242,247,252,257,262],{"type":44,"tag":201,"props":206,"children":208},{"style":207},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[209],{"type":49,"value":210},"import",{"type":44,"tag":201,"props":212,"children":214},{"style":213},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[215],{"type":49,"value":216}," {",{"type":44,"tag":201,"props":218,"children":220},{"style":219},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[221],{"type":49,"value":50},{"type":44,"tag":201,"props":223,"children":224},{"style":213},[225],{"type":49,"value":226},",",{"type":44,"tag":201,"props":228,"children":229},{"style":207},[230],{"type":49,"value":231}," type",{"type":44,"tag":201,"props":233,"children":234},{"style":219},[235],{"type":49,"value":236}," KlintContext",{"type":44,"tag":201,"props":238,"children":239},{"style":213},[240],{"type":49,"value":241},"}",{"type":44,"tag":201,"props":243,"children":244},{"style":207},[245],{"type":49,"value":246}," from",{"type":44,"tag":201,"props":248,"children":249},{"style":213},[250],{"type":49,"value":251}," '",{"type":44,"tag":201,"props":253,"children":255},{"style":254},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[256],{"type":49,"value":88},{"type":44,"tag":201,"props":258,"children":259},{"style":213},[260],{"type":49,"value":261},"'",{"type":44,"tag":201,"props":263,"children":264},{"style":213},[265],{"type":49,"value":266},";\n",{"type":44,"tag":201,"props":268,"children":270},{"class":203,"line":269},2,[271],{"type":44,"tag":201,"props":272,"children":274},{"emptyLinePlaceholder":273},true,[275],{"type":49,"value":276},"\n",{"type":44,"tag":201,"props":278,"children":280},{"class":203,"line":279},3,[281,286,292,298,303],{"type":44,"tag":201,"props":282,"children":283},{"style":207},[284],{"type":49,"value":285},"export",{"type":44,"tag":201,"props":287,"children":289},{"style":288},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[290],{"type":49,"value":291}," function",{"type":44,"tag":201,"props":293,"children":295},{"style":294},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[296],{"type":49,"value":297}," Artwork",{"type":44,"tag":201,"props":299,"children":300},{"style":213},[301],{"type":49,"value":302},"()",{"type":44,"tag":201,"props":304,"children":305},{"style":213},[306],{"type":49,"value":307}," {\n",{"type":44,"tag":201,"props":309,"children":311},{"class":203,"line":310},4,[312,317,322,327,332,338,343,348,353,358],{"type":44,"tag":201,"props":313,"children":314},{"style":288},[315],{"type":49,"value":316},"  const",{"type":44,"tag":201,"props":318,"children":319},{"style":219},[320],{"type":49,"value":321}," draw",{"type":44,"tag":201,"props":323,"children":324},{"style":213},[325],{"type":49,"value":326}," =",{"type":44,"tag":201,"props":328,"children":329},{"style":213},[330],{"type":49,"value":331}," (",{"type":44,"tag":201,"props":333,"children":335},{"style":334},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[336],{"type":49,"value":337},"K",{"type":44,"tag":201,"props":339,"children":340},{"style":213},[341],{"type":49,"value":342},":",{"type":44,"tag":201,"props":344,"children":346},{"style":345},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[347],{"type":49,"value":236},{"type":44,"tag":201,"props":349,"children":350},{"style":213},[351],{"type":49,"value":352},")",{"type":44,"tag":201,"props":354,"children":355},{"style":288},[356],{"type":49,"value":357}," =>",{"type":44,"tag":201,"props":359,"children":360},{"style":213},[361],{"type":49,"value":307},{"type":44,"tag":201,"props":363,"children":364},{"class":203,"line":28},[365,370,374,379,385,389,394,398,402],{"type":44,"tag":201,"props":366,"children":367},{"style":219},[368],{"type":49,"value":369},"    K",{"type":44,"tag":201,"props":371,"children":372},{"style":213},[373],{"type":49,"value":65},{"type":44,"tag":201,"props":375,"children":376},{"style":294},[377],{"type":49,"value":378},"background",{"type":44,"tag":201,"props":380,"children":382},{"style":381},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[383],{"type":49,"value":384},"(",{"type":44,"tag":201,"props":386,"children":387},{"style":213},[388],{"type":49,"value":261},{"type":44,"tag":201,"props":390,"children":391},{"style":254},[392],{"type":49,"value":393},"#101018",{"type":44,"tag":201,"props":395,"children":396},{"style":213},[397],{"type":49,"value":261},{"type":44,"tag":201,"props":399,"children":400},{"style":381},[401],{"type":49,"value":352},{"type":44,"tag":201,"props":403,"children":404},{"style":213},[405],{"type":49,"value":266},{"type":44,"tag":201,"props":407,"children":409},{"class":203,"line":408},6,[410,415,420,424,429,433,438,443,449,454,459,463,468,472,476,480,485,490,495,499,503,507,512,517],{"type":44,"tag":201,"props":411,"children":412},{"style":288},[413],{"type":49,"value":414},"    const",{"type":44,"tag":201,"props":416,"children":417},{"style":219},[418],{"type":49,"value":419}," x",{"type":44,"tag":201,"props":421,"children":422},{"style":213},[423],{"type":49,"value":326},{"type":44,"tag":201,"props":425,"children":426},{"style":219},[427],{"type":49,"value":428}," K",{"type":44,"tag":201,"props":430,"children":431},{"style":213},[432],{"type":49,"value":65},{"type":44,"tag":201,"props":434,"children":435},{"style":219},[436],{"type":49,"value":437},"width",{"type":44,"tag":201,"props":439,"children":440},{"style":213},[441],{"type":49,"value":442}," \u002F",{"type":44,"tag":201,"props":444,"children":446},{"style":445},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[447],{"type":49,"value":448}," 2",{"type":44,"tag":201,"props":450,"children":451},{"style":213},[452],{"type":49,"value":453}," +",{"type":44,"tag":201,"props":455,"children":456},{"style":219},[457],{"type":49,"value":458}," Math",{"type":44,"tag":201,"props":460,"children":461},{"style":213},[462],{"type":49,"value":65},{"type":44,"tag":201,"props":464,"children":465},{"style":294},[466],{"type":49,"value":467},"cos",{"type":44,"tag":201,"props":469,"children":470},{"style":381},[471],{"type":49,"value":384},{"type":44,"tag":201,"props":473,"children":474},{"style":219},[475],{"type":49,"value":337},{"type":44,"tag":201,"props":477,"children":478},{"style":213},[479],{"type":49,"value":65},{"type":44,"tag":201,"props":481,"children":482},{"style":219},[483],{"type":49,"value":484},"time",{"type":44,"tag":201,"props":486,"children":487},{"style":381},[488],{"type":49,"value":489},") ",{"type":44,"tag":201,"props":491,"children":492},{"style":213},[493],{"type":49,"value":494},"*",{"type":44,"tag":201,"props":496,"children":497},{"style":219},[498],{"type":49,"value":428},{"type":44,"tag":201,"props":500,"children":501},{"style":213},[502],{"type":49,"value":65},{"type":44,"tag":201,"props":504,"children":505},{"style":219},[506],{"type":49,"value":437},{"type":44,"tag":201,"props":508,"children":509},{"style":213},[510],{"type":49,"value":511}," *",{"type":44,"tag":201,"props":513,"children":514},{"style":445},[515],{"type":49,"value":516}," 0.2",{"type":44,"tag":201,"props":518,"children":519},{"style":213},[520],{"type":49,"value":266},{"type":44,"tag":201,"props":522,"children":524},{"class":203,"line":523},7,[525,529,533,538,542,546,551,555,559],{"type":44,"tag":201,"props":526,"children":527},{"style":219},[528],{"type":49,"value":369},{"type":44,"tag":201,"props":530,"children":531},{"style":213},[532],{"type":49,"value":65},{"type":44,"tag":201,"props":534,"children":535},{"style":294},[536],{"type":49,"value":537},"fillColor",{"type":44,"tag":201,"props":539,"children":540},{"style":381},[541],{"type":49,"value":384},{"type":44,"tag":201,"props":543,"children":544},{"style":213},[545],{"type":49,"value":261},{"type":44,"tag":201,"props":547,"children":548},{"style":254},[549],{"type":49,"value":550},"#ff6b9d",{"type":44,"tag":201,"props":552,"children":553},{"style":213},[554],{"type":49,"value":261},{"type":44,"tag":201,"props":556,"children":557},{"style":381},[558],{"type":49,"value":352},{"type":44,"tag":201,"props":560,"children":561},{"style":213},[562],{"type":49,"value":266},{"type":44,"tag":201,"props":564,"children":566},{"class":203,"line":565},8,[567,571,575,580,584,589,593,597,601,606,610,614,618,623,627],{"type":44,"tag":201,"props":568,"children":569},{"style":219},[570],{"type":49,"value":369},{"type":44,"tag":201,"props":572,"children":573},{"style":213},[574],{"type":49,"value":65},{"type":44,"tag":201,"props":576,"children":577},{"style":294},[578],{"type":49,"value":579},"circle",{"type":44,"tag":201,"props":581,"children":582},{"style":381},[583],{"type":49,"value":384},{"type":44,"tag":201,"props":585,"children":586},{"style":219},[587],{"type":49,"value":588},"x",{"type":44,"tag":201,"props":590,"children":591},{"style":213},[592],{"type":49,"value":226},{"type":44,"tag":201,"props":594,"children":595},{"style":219},[596],{"type":49,"value":428},{"type":44,"tag":201,"props":598,"children":599},{"style":213},[600],{"type":49,"value":65},{"type":44,"tag":201,"props":602,"children":603},{"style":219},[604],{"type":49,"value":605},"height",{"type":44,"tag":201,"props":607,"children":608},{"style":213},[609],{"type":49,"value":442},{"type":44,"tag":201,"props":611,"children":612},{"style":445},[613],{"type":49,"value":448},{"type":44,"tag":201,"props":615,"children":616},{"style":213},[617],{"type":49,"value":226},{"type":44,"tag":201,"props":619,"children":620},{"style":445},[621],{"type":49,"value":622}," 24",{"type":44,"tag":201,"props":624,"children":625},{"style":381},[626],{"type":49,"value":352},{"type":44,"tag":201,"props":628,"children":629},{"style":213},[630],{"type":49,"value":266},{"type":44,"tag":201,"props":632,"children":634},{"class":203,"line":633},9,[635],{"type":44,"tag":201,"props":636,"children":637},{"style":213},[638],{"type":49,"value":639},"  };\n",{"type":44,"tag":201,"props":641,"children":643},{"class":203,"line":642},10,[644],{"type":44,"tag":201,"props":645,"children":646},{"emptyLinePlaceholder":273},[647],{"type":49,"value":276},{"type":44,"tag":201,"props":649,"children":651},{"class":203,"line":650},11,[652,657],{"type":44,"tag":201,"props":653,"children":654},{"style":207},[655],{"type":49,"value":656},"  return",{"type":44,"tag":201,"props":658,"children":659},{"style":381},[660],{"type":49,"value":661}," (\n",{"type":44,"tag":201,"props":663,"children":665},{"class":203,"line":664},12,[666,671,676,681,686,690,694,698,703,707,711,716,720,724,729,733],{"type":44,"tag":201,"props":667,"children":668},{"style":213},[669],{"type":49,"value":670},"    \u003C",{"type":44,"tag":201,"props":672,"children":673},{"style":381},[674],{"type":49,"value":675},"div",{"type":44,"tag":201,"props":677,"children":678},{"style":288},[679],{"type":49,"value":680}," style",{"type":44,"tag":201,"props":682,"children":683},{"style":213},[684],{"type":49,"value":685},"={{",{"type":44,"tag":201,"props":687,"children":688},{"style":381},[689],{"type":49,"value":437},{"type":44,"tag":201,"props":691,"children":692},{"style":213},[693],{"type":49,"value":342},{"type":44,"tag":201,"props":695,"children":696},{"style":213},[697],{"type":49,"value":251},{"type":44,"tag":201,"props":699,"children":700},{"style":254},[701],{"type":49,"value":702},"100%",{"type":44,"tag":201,"props":704,"children":705},{"style":213},[706],{"type":49,"value":261},{"type":44,"tag":201,"props":708,"children":709},{"style":213},[710],{"type":49,"value":226},{"type":44,"tag":201,"props":712,"children":713},{"style":381},[714],{"type":49,"value":715}," height",{"type":44,"tag":201,"props":717,"children":718},{"style":213},[719],{"type":49,"value":342},{"type":44,"tag":201,"props":721,"children":722},{"style":213},[723],{"type":49,"value":251},{"type":44,"tag":201,"props":725,"children":726},{"style":254},[727],{"type":49,"value":728},"100vh",{"type":44,"tag":201,"props":730,"children":731},{"style":213},[732],{"type":49,"value":261},{"type":44,"tag":201,"props":734,"children":735},{"style":213},[736],{"type":49,"value":737},"}}>\n",{"type":44,"tag":201,"props":739,"children":741},{"class":203,"line":740},13,[742,747,751,755,760,764],{"type":44,"tag":201,"props":743,"children":744},{"style":213},[745],{"type":49,"value":746},"      \u003C",{"type":44,"tag":201,"props":748,"children":749},{"style":345},[750],{"type":49,"value":50},{"type":44,"tag":201,"props":752,"children":753},{"style":288},[754],{"type":49,"value":321},{"type":44,"tag":201,"props":756,"children":757},{"style":213},[758],{"type":49,"value":759},"={",{"type":44,"tag":201,"props":761,"children":762},{"style":219},[763],{"type":49,"value":117},{"type":44,"tag":201,"props":765,"children":766},{"style":213},[767],{"type":49,"value":768},"} \u002F>\n",{"type":44,"tag":201,"props":770,"children":772},{"class":203,"line":771},14,[773,778,782],{"type":44,"tag":201,"props":774,"children":775},{"style":213},[776],{"type":49,"value":777},"    \u003C\u002F",{"type":44,"tag":201,"props":779,"children":780},{"style":381},[781],{"type":49,"value":675},{"type":44,"tag":201,"props":783,"children":784},{"style":213},[785],{"type":49,"value":786},">\n",{"type":44,"tag":201,"props":788,"children":790},{"class":203,"line":789},15,[791,796],{"type":44,"tag":201,"props":792,"children":793},{"style":381},[794],{"type":49,"value":795},"  )",{"type":44,"tag":201,"props":797,"children":798},{"style":213},[799],{"type":49,"value":266},{"type":44,"tag":201,"props":801,"children":803},{"class":203,"line":802},16,[804],{"type":44,"tag":201,"props":805,"children":806},{"style":213},[807],{"type":49,"value":808},"}\n",{"type":44,"tag":52,"props":810,"children":811},{},[812],{"type":49,"value":813},"For pointer, keyboard, gesture, window, or image helpers, call their factories during render and pass the bridge to the canvas:",{"type":44,"tag":190,"props":815,"children":817},{"className":192,"code":816,"language":194,"meta":195,"style":195},"const {context, KlintMouse} = useKlint();\nconst {mouse} = KlintMouse();\nreturn \u003CKlint context={context} draw={(K) => drawArtwork(K, mouse)} \u002F>;\n",[818],{"type":44,"tag":58,"props":819,"children":820},{"__ignoreMap":195},[821,868,904],{"type":44,"tag":201,"props":822,"children":823},{"class":203,"line":32},[824,829,833,838,842,847,851,855,860,864],{"type":44,"tag":201,"props":825,"children":826},{"style":288},[827],{"type":49,"value":828},"const",{"type":44,"tag":201,"props":830,"children":831},{"style":213},[832],{"type":49,"value":216},{"type":44,"tag":201,"props":834,"children":835},{"style":219},[836],{"type":49,"value":837},"context",{"type":44,"tag":201,"props":839,"children":840},{"style":213},[841],{"type":49,"value":226},{"type":44,"tag":201,"props":843,"children":844},{"style":219},[845],{"type":49,"value":846}," KlintMouse",{"type":44,"tag":201,"props":848,"children":849},{"style":213},[850],{"type":49,"value":241},{"type":44,"tag":201,"props":852,"children":853},{"style":213},[854],{"type":49,"value":326},{"type":44,"tag":201,"props":856,"children":857},{"style":294},[858],{"type":49,"value":859}," useKlint",{"type":44,"tag":201,"props":861,"children":862},{"style":219},[863],{"type":49,"value":302},{"type":44,"tag":201,"props":865,"children":866},{"style":213},[867],{"type":49,"value":266},{"type":44,"tag":201,"props":869,"children":870},{"class":203,"line":269},[871,875,879,884,888,892,896,900],{"type":44,"tag":201,"props":872,"children":873},{"style":288},[874],{"type":49,"value":828},{"type":44,"tag":201,"props":876,"children":877},{"style":213},[878],{"type":49,"value":216},{"type":44,"tag":201,"props":880,"children":881},{"style":219},[882],{"type":49,"value":883},"mouse",{"type":44,"tag":201,"props":885,"children":886},{"style":213},[887],{"type":49,"value":241},{"type":44,"tag":201,"props":889,"children":890},{"style":213},[891],{"type":49,"value":326},{"type":44,"tag":201,"props":893,"children":894},{"style":294},[895],{"type":49,"value":846},{"type":44,"tag":201,"props":897,"children":898},{"style":219},[899],{"type":49,"value":302},{"type":44,"tag":201,"props":901,"children":902},{"style":213},[903],{"type":49,"value":266},{"type":44,"tag":201,"props":905,"children":906},{"class":203,"line":279},[907,912,917,921,926,930,934,939,943,948,952,956,960,965,970,974,979],{"type":44,"tag":201,"props":908,"children":909},{"style":207},[910],{"type":49,"value":911},"return",{"type":44,"tag":201,"props":913,"children":914},{"style":213},[915],{"type":49,"value":916}," \u003C",{"type":44,"tag":201,"props":918,"children":919},{"style":345},[920],{"type":49,"value":50},{"type":44,"tag":201,"props":922,"children":923},{"style":288},[924],{"type":49,"value":925}," context",{"type":44,"tag":201,"props":927,"children":928},{"style":213},[929],{"type":49,"value":759},{"type":44,"tag":201,"props":931,"children":932},{"style":219},[933],{"type":49,"value":837},{"type":44,"tag":201,"props":935,"children":936},{"style":213},[937],{"type":49,"value":938},"} ",{"type":44,"tag":201,"props":940,"children":941},{"style":288},[942],{"type":49,"value":117},{"type":44,"tag":201,"props":944,"children":945},{"style":213},[946],{"type":49,"value":947},"={(",{"type":44,"tag":201,"props":949,"children":950},{"style":334},[951],{"type":49,"value":337},{"type":44,"tag":201,"props":953,"children":954},{"style":213},[955],{"type":49,"value":352},{"type":44,"tag":201,"props":957,"children":958},{"style":288},[959],{"type":49,"value":357},{"type":44,"tag":201,"props":961,"children":962},{"style":294},[963],{"type":49,"value":964}," drawArtwork",{"type":44,"tag":201,"props":966,"children":967},{"style":219},[968],{"type":49,"value":969},"(K",{"type":44,"tag":201,"props":971,"children":972},{"style":213},[973],{"type":49,"value":226},{"type":44,"tag":201,"props":975,"children":976},{"style":219},[977],{"type":49,"value":978}," mouse)",{"type":44,"tag":201,"props":980,"children":981},{"style":213},[982],{"type":49,"value":983},"} \u002F>;\n",{"type":44,"tag":52,"props":985,"children":986},{},[987,989,995,997,1003,1005,1011,1013,1019],{"type":49,"value":988},"Without React, import ",{"type":44,"tag":58,"props":990,"children":992},{"className":991},[],[993],{"type":49,"value":994},"createKlint",{"type":49,"value":996}," from ",{"type":44,"tag":58,"props":998,"children":1000},{"className":999},[],[1001],{"type":49,"value":1002},"@shopify\u002Fklint\u002Fnative",{"type":49,"value":1004},", await ",{"type":44,"tag":58,"props":1006,"children":1008},{"className":1007},[],[1009],{"type":49,"value":1010},"sketch.ready",{"type":49,"value":1012},", and call ",{"type":44,"tag":58,"props":1014,"children":1016},{"className":1015},[],[1017],{"type":49,"value":1018},"sketch.destroy()",{"type":49,"value":1020}," when finished.",{"type":44,"tag":67,"props":1022,"children":1024},{"id":1023},"react-pitfalls",[1025],{"type":49,"value":1026},"React pitfalls",{"type":44,"tag":1028,"props":1029,"children":1030},"ul",{},[1031,1065,1086,1105,1117,1135,1140],{"type":44,"tag":78,"props":1032,"children":1033},{},[1034,1063],{"type":44,"tag":1035,"props":1036,"children":1037},"strong",{},[1038,1040,1046,1048,1054,1056,1061],{"type":49,"value":1039},"Never call ",{"type":44,"tag":58,"props":1041,"children":1043},{"className":1042},[],[1044],{"type":49,"value":1045},"KlintMouse()",{"type":49,"value":1047},", ",{"type":44,"tag":58,"props":1049,"children":1051},{"className":1050},[],[1052],{"type":49,"value":1053},"KlintImage()",{"type":49,"value":1055},", or another hook factory inside ",{"type":44,"tag":58,"props":1057,"children":1059},{"className":1058},[],[1060],{"type":49,"value":117},{"type":49,"value":1062},", a condition, or an event handler.",{"type":49,"value":1064}," They use React hooks and must run unconditionally at component render time.",{"type":44,"tag":78,"props":1066,"children":1067},{},[1068,1070,1076,1078,1084],{"type":49,"value":1069},"Do not call React state setters every frame. Keep fast simulation state in ",{"type":44,"tag":58,"props":1071,"children":1073},{"className":1072},[],[1074],{"type":49,"value":1075},"useStorage",{"type":49,"value":1077},"\u002Frefs, read changing component values with ",{"type":44,"tag":58,"props":1079,"children":1081},{"className":1080},[],[1082],{"type":49,"value":1083},"useProps",{"type":49,"value":1085},", and reserve React state for surrounding UI.",{"type":44,"tag":78,"props":1087,"children":1088},{},[1089,1091,1096,1098,1103],{"type":49,"value":1090},"Keep ",{"type":44,"tag":58,"props":1092,"children":1094},{"className":1093},[],[1095],{"type":49,"value":117},{"type":49,"value":1097}," synchronous. Load\u002Fdecode assets in ",{"type":44,"tag":58,"props":1099,"children":1101},{"className":1100},[],[1102],{"type":49,"value":101},{"type":49,"value":1104}," or React effects and cache expensive\u002Fstatic work.",{"type":44,"tag":78,"props":1106,"children":1107},{},[1108,1110,1115],{"type":49,"value":1109},"Canvas options are initialization settings. Remount ",{"type":44,"tag":58,"props":1111,"children":1113},{"className":1112},[],[1114],{"type":49,"value":129},{"type":49,"value":1116}," to change them rather than expecting prop updates to rebuild the runtime.",{"type":44,"tag":78,"props":1118,"children":1119},{},[1120,1122,1127,1128,1133],{"type":49,"value":1121},"React Strict Mode may initialize effects twice in development. Make ",{"type":44,"tag":58,"props":1123,"children":1125},{"className":1124},[],[1126],{"type":49,"value":101},{"type":49,"value":139},{"type":44,"tag":58,"props":1129,"children":1131},{"className":1130},[],[1132],{"type":49,"value":109},{"type":49,"value":1134}," idempotent, and clean up non-Klint listeners\u002Fresources in a React effect.",{"type":44,"tag":78,"props":1136,"children":1137},{},[1138],{"type":49,"value":1139},"Coordinates are logical CSS pixels. Do not multiply drawing or pointer coordinates by DPR; Klint manages the backing store.",{"type":44,"tag":78,"props":1141,"children":1142},{},[1143,1145,1150,1152,1158],{"type":49,"value":1144},"Clear with ",{"type":44,"tag":58,"props":1146,"children":1148},{"className":1147},[],[1149],{"type":49,"value":378},{"type":49,"value":1151},"\u002F",{"type":44,"tag":58,"props":1153,"children":1155},{"className":1154},[],[1156],{"type":49,"value":1157},"clear",{"type":49,"value":1159}," when each frame should replace the previous one; omit or use transparency intentionally for trails.",{"type":44,"tag":1161,"props":1162,"children":1163},"style",{},[1164],{"type":49,"value":1165},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1167,"total":32},[1168],{"slug":4,"name":4,"fn":5,"description":6,"org":1169,"tags":1170,"stars":28,"repoUrl":29,"updatedAt":30},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1171,1172,1173,1174,1175],{"name":20,"slug":21,"type":15},{"name":26,"slug":27,"type":15},{"name":17,"slug":18,"type":15},{"name":23,"slug":24,"type":15},{"name":13,"slug":14,"type":15},{"items":1177,"total":1329},[1178,1197,1212,1224,1234,1248,1260,1272,1284,1296,1306,1316],{"slug":1179,"name":1179,"fn":1180,"description":1181,"org":1182,"tags":1183,"stars":1194,"repoUrl":1195,"updatedAt":1196},"shopify-admin","generate Shopify Admin GraphQL queries","Write or explain **Admin GraphQL** queries and mutations for apps and integrations that extend the Shopify admin. Use when the user wants to **understand, design, or generate** the operation itself—even before deciding how to run it. Do **not** choose `admin` first for **app or extension config validation** —use **`use-shopify-cli`**. Do **not** choose `admin` first to **execute** Admin GraphQL **now via Shopify CLI** or for CLI setup\u002Ftroubleshooting on store workflows—use **`use-shopify-cli`** (store auth\u002Fexecute, handle\u002FSKU\u002Flocation lookups, inventory changes).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1184,1187,1190,1193],{"name":1185,"slug":1186,"type":15},"API Development","api-development",{"name":1188,"slug":1189,"type":15},"E-commerce","e-commerce",{"name":1191,"slug":1192,"type":15},"GraphQL","graphql",{"name":9,"slug":8,"type":15},446,"https:\u002F\u002Fgithub.com\u002FShopify\u002FShopify-AI-Toolkit","2026-07-29T05:40:06.767371",{"slug":1198,"name":1198,"fn":1199,"description":1200,"org":1201,"tags":1202,"stars":1194,"repoUrl":1195,"updatedAt":1211},"shopify-app-store-review","review Shopify apps for store compliance","Run a pre-submission compliance check against your Shopify app's codebase. Reviews App Store requirements and surfaces likely issues before you submit for official review.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1203,1206,1207,1210],{"name":1204,"slug":1205,"type":15},"Compliance","compliance",{"name":1188,"slug":1189,"type":15},{"name":1208,"slug":1209,"type":15},"QA","qa",{"name":9,"slug":8,"type":15},"2026-07-29T05:40:08.79575",{"slug":1213,"name":1213,"fn":1214,"description":1215,"org":1216,"tags":1217,"stars":1194,"repoUrl":1195,"updatedAt":1223},"shopify-custom-data","model and store custom Shopify data","MUST be used first when prompts mention Metafields or Metaobjects. Use Metafields and Metaobjects to model and store custom data for your app. Metafields extend built-in Shopify data types like products or customers, Metaobjects are custom data types that can be used to store bespoke data structures. Metafield and Metaobject definitions provide a schema and configuration for values to follow.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1218,1221,1222],{"name":1219,"slug":1220,"type":15},"Data Modeling","data-modeling",{"name":1188,"slug":1189,"type":15},{"name":9,"slug":8,"type":15},"2026-07-29T05:40:04.773144",{"slug":1225,"name":1225,"fn":1226,"description":1227,"org":1228,"tags":1229,"stars":1194,"repoUrl":1195,"updatedAt":1233},"shopify-customer","access Shopify customer account data","The Customer Account API allows customers to access their own data including orders, payment methods, and addresses.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1230,1231,1232],{"name":1185,"slug":1186,"type":15},{"name":1188,"slug":1189,"type":15},{"name":9,"slug":8,"type":15},"2026-07-29T05:40:07.747374",{"slug":1235,"name":1235,"fn":1236,"description":1237,"org":1238,"tags":1239,"stars":1194,"repoUrl":1195,"updatedAt":1247},"shopify-dev","search Shopify developer documentation","Search Shopify developer documentation across all APIs. Use only when no API-specific skill applies.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1240,1243,1246],{"name":1241,"slug":1242,"type":15},"Documentation","documentation",{"name":1244,"slug":1245,"type":15},"Reference","reference",{"name":9,"slug":8,"type":15},"2026-07-29T05:40:23.768244",{"slug":1249,"name":1249,"fn":1250,"description":1251,"org":1252,"tags":1253,"stars":1194,"repoUrl":1195,"updatedAt":1259},"shopify-functions","customize Shopify backend logic","Shopify Functions allow developers to customize the backend logic that powers parts of Shopify. Available APIs: Discount, Cart and Checkout Validation, Cart Transform, Pickup Point Delivery Option Generator, Delivery Customization, Fulfillment Constraints, Local Pickup Delivery Option Generator, Order Routing Location Rule, Payment Customization",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1254,1257,1258],{"name":1255,"slug":1256,"type":15},"Backend","backend",{"name":1188,"slug":1189,"type":15},{"name":9,"slug":8,"type":15},"2026-07-29T05:40:05.772104",{"slug":1261,"name":1261,"fn":1262,"description":1263,"org":1264,"tags":1265,"stars":1194,"repoUrl":1195,"updatedAt":1271},"shopify-hydrogen","build Shopify Hydrogen storefronts","Hydrogen storefront implementation cookbooks. Some of the available recipes are: B2B Commerce, Bundles, Combined Listings, Custom Cart Method, Dynamic Content with Metaobjects, Express Server, Google Tag Manager Integration, Infinite Scroll, Legacy Customer Account Flow, Markets, Partytown + Google Tag Manager, Subscriptions, Third-party API Queries and Caching. MANDATORY: Use this API for ANY Hydrogen storefront question - do NOT use Storefront GraphQL when 'Hydrogen' is mentioned.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1266,1267,1270],{"name":1188,"slug":1189,"type":15},{"name":1268,"slug":1269,"type":15},"Frontend","frontend",{"name":9,"slug":8,"type":15},"2026-07-29T05:40:22.922882",{"slug":1273,"name":1273,"fn":1274,"description":1275,"org":1276,"tags":1277,"stars":1194,"repoUrl":1195,"updatedAt":1283},"shopify-liquid","build Shopify themes with Liquid","Liquid is an open-source templating language created by Shopify. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. Keywords: liquid, theme, shopify-theme, liquid-component, liquid-block, liquid-section, liquid-snippet, liquid-schemas, shopify-theme-schemas",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1278,1279,1280],{"name":1188,"slug":1189,"type":15},{"name":9,"slug":8,"type":15},{"name":1281,"slug":1282,"type":15},"Themes","themes","2026-07-29T05:40:15.216131",{"slug":1285,"name":1285,"fn":1286,"description":1287,"org":1288,"tags":1289,"stars":1194,"repoUrl":1195,"updatedAt":1295},"shopify-onboarding-dev","scaffold Shopify development projects","Get started building on Shopify. Use when a developer asks to build an app, build a theme, create a dev store, set up a partner account, scaffold a project, or get started developing for Shopify. NOT for merchants managing stores.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1290,1291,1294],{"name":1188,"slug":1189,"type":15},{"name":1292,"slug":1293,"type":15},"Onboarding","onboarding",{"name":9,"slug":8,"type":15},"2026-07-29T05:40:10.774529",{"slug":1297,"name":1297,"fn":1298,"description":1299,"org":1300,"tags":1301,"stars":1194,"repoUrl":1195,"updatedAt":1305},"shopify-onboarding-merchant","connect and manage Shopify stores","Set up and connect a Shopify store from your AI assistant. Use when the user wants to start selling online, open a first Shopify store, try Shopify before they have an account, or get merchant-facing next steps after a preview store is created, including how to keep it, save it, or make it real. This is for store owners — not developers. Preview-store creation for brand-new merchants belongs here via `shopify store create preview`; explicit CLI troubleshooting and named-store command execution belong in **`use-shopify-cli`**.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1302,1303,1304],{"name":1188,"slug":1189,"type":15},{"name":1292,"slug":1293,"type":15},{"name":9,"slug":8,"type":15},"2026-07-29T05:40:21.780249",{"slug":1307,"name":1307,"fn":1308,"description":1309,"org":1310,"tags":1311,"stars":1194,"repoUrl":1195,"updatedAt":1315},"shopify-partner","access Shopify Partner Dashboard data","The Partner API lets you programmatically access data about your Partner Dashboard, including your apps, themes, and affiliate referrals.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1312,1313,1314],{"name":1185,"slug":1186,"type":15},{"name":1188,"slug":1189,"type":15},{"name":9,"slug":8,"type":15},"2026-07-29T05:40:20.774076",{"slug":1317,"name":1317,"fn":1318,"description":1319,"org":1320,"tags":1321,"stars":1194,"repoUrl":1195,"updatedAt":1328},"shopify-payments-apps","integrate payment providers with Shopify checkout","The Payments Apps API enables payment providers to integrate their payment solutions with Shopify's checkout.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[1322,1323,1324,1327],{"name":1185,"slug":1186,"type":15},{"name":1188,"slug":1189,"type":15},{"name":1325,"slug":1326,"type":15},"Payments","payments",{"name":9,"slug":8,"type":15},"2026-07-29T05:40:15.753592",26]