[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73737":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":27,"discoverSource":28},73737,"qrframe","zhengkyl\u002Fqrframe","zhengkyl","code-based qr code designer","https:\u002F\u002Fqrframe.kylezhe.ng",null,"TypeScript",3366,109,6,2,0,4,58.52,"MIT License",false,"main",true,[],"2026-06-12 04:01:10","# qrframe\n\ncode-based qr code generator\n\nBlatantly inspired by [QRBTF](https:\u002F\u002Fqrbtf.com) and [Anthony Fu's QR Toolkit](https:\u002F\u002Fqrcode.antfu.me).\n\n[Here's a post I wrote about crafting QR codes](https:\u002F\u002Fkylezhe.ng\u002Fposts\u002Fcrafting_qr_codes) that goes into deeper detail about how they work and ways to make them pretty.\n\n## Examples\n\n> [!CAUTION]\n> These example QR codes may not be reliably scannable! Results may vary drastically based on device and scanner!\n\nThis project is a tool to create designs! These are only examples!\n\n\u003Ctable>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Cth colspan=\"3\">Creative possibilities\u003C\u002Fth>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fquantum.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fmondrian.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fwood.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Ftile.png\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fdots.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Flayers1.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fneon.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fcamo.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fmatrix.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fglass.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fchildhood.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Flayers2.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Cth colspan=\"3\">Import external libs, fetch external files, etc \u003C\u002Fth>\n    \u003C\u002Ftr>\n    \u003Ctd>\n      \u003Cimg src=\".\u002Fexamples\u002Fdrawing1.png\"\u002F>\n    \u003C\u002Ftd>\n    \u003Ctd>\n      \u003Cimg src=\".\u002Fexamples\u002Fdrawing2.png\"\u002F>\n    \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fhalftone.png\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n    \u003Ctr>\n      \u003Cth colspan=\"3\">Styles copied from \u003Ca href=\"https:\u002F\u002Fqrbtf.com\">QRBTF\u003C\u002Fa>\u003C\u002Fth>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fblocks.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fbubbles.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Falien.svg\" width=\"300\"\u002F>\n      \u003C\u002Ftd>\n    \u003Ctr>\n      \u003Cth colspan=\"3\">Boring options are available\u003C\u002Fth>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fboring1.png\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fboring2.png\"\u002F>\n      \u003C\u002Ftd>\n      \u003Ctd>\n        \u003Cimg src=\".\u002Fexamples\u002Fboring3.png\"\u002F>\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n## Create\u002Fmodify designs with code\n\n![code and parameter editor ui](.\u002Fexamples\u002Fui2.png)\n\n## Features\n\n- Customize data:\n\n  - encoding mode, version, error tolerance, mask pattern\n  - powered by [`fuqr`](https:\u002F\u002Fgithub.com\u002Fzhengkyl\u002Ffuqr), my own Rust library imported as WASM. (i use windows, btw)\n\n- Customize appearance:\n  - Choose any preset, customize or even create a new one from scratch via code editor.\n  - Define arbitrary UI parameters in code\n  - Supports SVG and PNG\n  - All code runs _directly_ in browser in a web worker with no restrictions.\n    - There is no sandbox, whitelist, blacklist, or anything besides a 5s timeout to stop infinite loops.\n    - Generated SVGs are not sanitized. This is an impossible task and attempting it breaks perfectly fine SVGs, makes debugging harder, and adds latency to previewing changes.\n    - These should be non-issues, but even if you copy-and-paste and run malware there's no secrets to leak.\n\n\n## Creating a preset\n\nA preset must export `paramsSchema` and either `renderSVG` or `renderCanvas`\n\n## `paramsSchema`\n\nThis schema defines the UI components whose values are passed into `renderSVG` or `renderCanvas` via the `params` object.\n\nAll properties besides `type` are optional, except\n\n- type `select` must have a nonempty options array\n- type `array` must have a valid `props` value.\n\nIn this example, `default` is set explicitly to the implicit default value.\n\n```js\nexport const paramsSchema = {\n  Example1: {\n    type: \"number\",\n    min: 0,\n    max: 10,\n    step: 0.1,\n    default: 0,\n  },\n  Example2: {\n    type: \"boolean\",\n    default: false,\n  },\n  Example3: {\n    type: \"color\",\n    default: \"#000000\", \u002F\u002F css color string (hex\u002Frgba\u002Fhsla)\n  },\n  Example4: {\n    type: \"select\",\n    options: [\"I'm feeling\", 22],\n    default: \"I'm feeling\", \u002F\u002F first option\n  },\n  Example5: {\n    type: \"file\",\n    accept: \".jpeg, .jpg, .png\",\n    default: null,\n  },\n  Example6: {\n    type: \"array\",\n    props: {\n      type: \"number\", \u002F\u002F any type except \"array\"\n      \u002F\u002F corresponding props\n    },\n    resizable: true,\n    defaultLength: 5, \u002F\u002F overridden by default\n    default: [], \u002F\u002F overrides defaultLength\n  },\n};\n```\n\n## `renderSVG` and `renderCanvas`\n\n```ts\ntype renderSVG = (qr: Qr, params: Params) => string;\n\ntype renderCanvas = (qr: Qr, params: Params, canvas: OffscreenCanvas) => void;\n```\n\n`params` is an object with all the keys of `paramsSchema` paired with the value from their respective input component.\n\n`qr` contains the final QR code in `matrix`. This represents a square where one side is `version * 4 + 17` wide, and modules (aka pixels) are stored from the left to right, top to bottom.\n\n```ts\ntype Qr = {\n  matrix: Uint8Array; \u002F\u002F see below\n  version: number; \u002F\u002F 1- 40\n  mask: number; \u002F\u002F 0 - 7,\n  ecl: number; \u002F\u002F 0 - 3, Low, Medium, Quartile, High\n  mode: number; \u002F\u002F 0 - 2, Numeric, Alphanumeric, Byte\n};\n\n\u002F\u002F bit flags for each u8 in matrix\nconst Module = {\n  ON: 1 \u003C\u003C 0,\n  DATA: 1 \u003C\u003C 1,\n  FINDER: 1 \u003C\u003C 2,\n  ALIGNMENT: 1 \u003C\u003C 3,\n  TIMING: 1 \u003C\u003C 4,\n  FORMAT: 1 \u003C\u003C 5,\n  VERSION: 1 \u003C\u003C 6,\n  MODIFIER: 1 \u003C\u003C 7,\n};\n```\n\n`MODIFIER` is set for Finder and Alignment centers, Format and Version copy.\n","qrframe 是一个基于代码的二维码设计工具。它允许用户通过编写代码来自定义二维码的数据和外观，支持设置编码模式、版本、错误容忍度、掩码模式等参数，并提供了丰富的预设样式供选择或自定义。项目使用 TypeScript 编写，并集成了作者自己开发的 Rust 库 fuqr 作为 WASM 模块来处理核心逻辑。适用于需要个性化二维码生成的场景，如营销活动、个人名片或任何希望增加视觉吸引力的地方。","2026-06-11 03:47:10","high_star"]