From f3a0f56440fd397e3e04cf71a40e340b1aa1c224 Mon Sep 17 00:00:00 2001 From: AnasSarkiz Date: Thu, 2 Jul 2026 16:58:48 +0200 Subject: [PATCH 1/3] Introduce QR Code Silkscreen Documentation with 3D and PCB Example using --- docs/footprints/silkscreengraphic.mdx | 46 +++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/docs/footprints/silkscreengraphic.mdx b/docs/footprints/silkscreengraphic.mdx index 2fb04505..b3bef18f 100644 --- a/docs/footprints/silkscreengraphic.mdx +++ b/docs/footprints/silkscreengraphic.mdx @@ -44,6 +44,49 @@ export default () => ( `} /> +## QR Code Example + +You can also use `` to place a QR code on the PCB +silkscreen. Keep the QR code as a simple, single-color SVG with solid modules +and a quiet zone around the outside. The quiet zone should stay empty so a +camera can separate the QR code from nearby text, traces, pads, and vias. + +This example creates a QR code for `https://tscircuit.com`, converts the +SVG to a data URL, and places it on the top silkscreen layer. + +\` + + \`\` + + \`\` + +const docsQrUrl = \`data:image/svg+xml,\${encodeURIComponent(docsQrSvg)}\` + +export default () => ( + + + + +) +`} +/> + ## Props | Property | Type | Required | Default | Description | @@ -65,3 +108,6 @@ export default () => ( best for PCB silkscreen. - For remote assets, make sure the image URL is available when the circuit is built. Inline data URLs or static-file imports make examples easier to share. +- For QR codes, use at least about 12-15 mm of board space for simple URLs, keep + the quiet zone clear, and test the generated PCB preview with a phone camera + before ordering. From d811de23800cfdfb5517337ff7d6c39a0d6b4b8e Mon Sep 17 00:00:00 2001 From: AnasSarkiz Date: Thu, 2 Jul 2026 20:19:30 +0200 Subject: [PATCH 2/3] using qrcode-svg --- docs/footprints/silkscreengraphic.mdx | 43 ++++++++++++++++----------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/docs/footprints/silkscreengraphic.mdx b/docs/footprints/silkscreengraphic.mdx index b3bef18f..4bcdfaea 100644 --- a/docs/footprints/silkscreengraphic.mdx +++ b/docs/footprints/silkscreengraphic.mdx @@ -46,40 +46,49 @@ export default () => ( ## QR Code Example -You can also use `` to place a QR code on the PCB -silkscreen. Keep the QR code as a simple, single-color SVG with solid modules -and a quiet zone around the outside. The quiet zone should stay empty so a -camera can separate the QR code from nearby text, traces, pads, and vias. +You can use `` to add a scannable QR code to your PCB +silkscreen. This is useful for linking a board to a project page, assembly +guide, datasheet, or support URL. -This example creates a QR code for `https://tscircuit.com`, converts the -SVG to a data URL, and places it on the top silkscreen layer. +For best results, generate the QR code as a simple, single-color SVG and leave a +clear quiet zone around it. Keeping nearby text, traces, pads, and vias away +from the QR code makes it easier for a camera to scan. + +The example below uses `qrcode-svg` to generate a QR code for +`https://tscircuit.com`, converts it to a data URL, and places it on the top +silkscreen layer. Install the package before using this pattern in your own +project: `bun add qrcode-svg`. \` + - \`\` + - \`\` +import QRCode from "qrcode-svg" + +const qr = new QRCode({ + content: "https://tscircuit.com", + padding: 4, + join: true, + container: "svg-viewbox", +}) -const docsQrUrl = \`data:image/svg+xml,\${encodeURIComponent(docsQrSvg)}\` +const qrImageUrl = "data:image/svg+xml;base64," + btoa(qr.svg()) export default () => ( From 6f6bfefb3272db478409e6d9410baec3ef443fc7 Mon Sep 17 00:00:00 2001 From: AnasSarkiz Date: Mon, 6 Jul 2026 19:26:00 +0200 Subject: [PATCH 3/3] Add another option to create the QRCode Monkey --- docs/footprints/silkscreengraphic.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/footprints/silkscreengraphic.mdx b/docs/footprints/silkscreengraphic.mdx index 4bcdfaea..2550cbf8 100644 --- a/docs/footprints/silkscreengraphic.mdx +++ b/docs/footprints/silkscreengraphic.mdx @@ -59,6 +59,11 @@ The example below uses `qrcode-svg` to generate a QR code for silkscreen layer. Install the package before using this pattern in your own project: `bun add qrcode-svg`. +Another option is to create the QR SVG with a generator such as +[QRCode Monkey](https://www.qrcode-monkey.com/). Paste the link you want to +encode, download the SVG, then pass it to `` as an imported +file, static asset URL, or data URL. +