From 9a4ac98917c0ab5d57637f5acb31ebcf9d59c5ae Mon Sep 17 00:00:00 2001
From: tungnguyentu <nguyentutung24@gmail.com>
Date: Fri, 15 May 2026 02:28:42 +0700
Subject: [PATCH 1/3] docs: add tutorial for drawing letters with LEDs using
 arc-length sampling

Adds a step-by-step tutorial that teaches readers how to place LEDs along
the outline of any capital letter using SVG path data from @tscircuit/alphabet
and a custom arc-length parameterization function (samplePath).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 docs/tutorials/draw-any-letter-with-leds.mdx | 396 +++++++++++++++++++
 1 file changed, 396 insertions(+)
 create mode 100644 docs/tutorials/draw-any-letter-with-leds.mdx

diff --git a/docs/tutorials/draw-any-letter-with-leds.mdx b/docs/tutorials/draw-any-letter-with-leds.mdx
new file mode 100644
index 0000000..ea5cadc
--- /dev/null
+++ b/docs/tutorials/draw-any-letter-with-leds.mdx
@@ -0,0 +1,396 @@
+---
+title: Draw Any Letter with LEDs
+description: >-
+  Learn how to use tscircuit and the @tscircuit/alphabet package to
+  automatically place 0402 LEDs along the outline of any capital letter,
+  producing a reusable LedLetter component.
+---
+
+## Overview
+
+In this tutorial you will build a reusable `<LedLetter>` component that draws
+any capital letter (A–Z) by placing 0402 LEDs along the letter's outline path.
+The layout is fully automatic — you supply a letter and a size, and math does
+the rest.
+
+import TscircuitIframe from "@site/src/components/TscircuitIframe"
+
+## Step 1: Sample points along an SVG path
+
+The `@tscircuit/alphabet` package exports `svgAlphabet`, a map from each
+character to a normalized SVG path string (coordinates in `[0, 1]`). We need
+to convert that path into a list of evenly-spaced `{x, y}` points so we know
+where to place each LED.
+
+<TscircuitIframe defaultView="schematic" code={`
+// Utility: walk an SVG "L"-only polyline and return N evenly-spaced points.
+// svgAlphabet paths use only M and L commands, so parsing is straightforward.
+function samplePath(pathStr: string, n: number): { x: number; y: number }[] {
+  // Parse "M x y L x y L x y ..." into coordinate pairs
+  const points: { x: number; y: number }[] = []
+  const tokens = pathStr.trim().split(/\s+/)
+  let i = 0
+  while (i < tokens.length) {
+    const cmd = tokens[i]; i++
+    if (cmd === "M" || cmd === "L") {
+      points.push({ x: parseFloat(tokens[i]), y: parseFloat(tokens[i + 1]) })
+      i += 2
+    }
+  }
+  if (points.length < 2) return points
+
+  // Compute cumulative arc-length
+  const arcLen: number[] = [0]
+  for (let j = 1; j < points.length; j++) {
+    const dx = points[j].x - points[j - 1].x
+    const dy = points[j].y - points[j - 1].y
+    arcLen.push(arcLen[j - 1] + Math.sqrt(dx * dx + dy * dy))
+  }
+  const total = arcLen[arcLen.length - 1]
+
+  // Re-sample at equal arc-length intervals
+  const result: { x: number; y: number }[] = []
+  for (let k = 0; k < n; k++) {
+    const target = (k / (n - 1)) * total
+    // Find the segment that contains this arc-length
+    let seg = 0
+    while (seg < arcLen.length - 1 && arcLen[seg + 1] < target) seg++
+    const segLen = arcLen[seg + 1] - arcLen[seg]
+    const t = segLen === 0 ? 0 : (target - arcLen[seg]) / segLen
+    result.push({
+      x: points[seg].x + t * (points[seg + 1].x - points[seg].x),
+      y: points[seg].y + t * (points[seg + 1].y - points[seg].y),
+    })
+  }
+  return result
+}
+
+// Preview: show what the sampled points look like for letter "A"
+const path = "M0.018067 0.94897 L0.290179 0.270996 L0.583986 0.94897 M0.155303 0.684521 L0.433548 0.684521"
+const pts = samplePath(path, 12)
+
+export default () => (
+  <board width="30mm" height="30mm">
+    {pts.map((p, i) => (
+      <led
+        key={i}
+        name={\`LED\${i + 1}\`}
+        color="red"
+        footprint="0402"
+        pcbX={(p.x - 0.5) * 20}
+        pcbY={(0.5 - p.y) * 25}
+        connections={{ anode: "net.PWR", cathode: \`net.COL\${i}\` }}
+      />
+    ))}
+  </board>
+)
+`} />
+
+## Step 2: Add current-limiting resistors
+
+Each LED string needs a resistor (typically 68–100 Ω for a red 0402 LED at
+5 V). We add one resistor per LED wired in series.
+
+<TscircuitIframe defaultView="schematic" code={`
+function samplePath(pathStr, n) {
+  const points = []
+  const tokens = pathStr.trim().split(/\s+/)
+  let i = 0
+  while (i < tokens.length) {
+    const cmd = tokens[i]; i++
+    if (cmd === "M" || cmd === "L") {
+      points.push({ x: parseFloat(tokens[i]), y: parseFloat(tokens[i + 1]) })
+      i += 2
+    }
+  }
+  if (points.length < 2) return points
+  const arcLen = [0]
+  for (let j = 1; j < points.length; j++) {
+    const dx = points[j].x - points[j - 1].x
+    const dy = points[j].y - points[j - 1].y
+    arcLen.push(arcLen[j - 1] + Math.sqrt(dx * dx + dy * dy))
+  }
+  const total = arcLen[arcLen.length - 1]
+  const result = []
+  for (let k = 0; k < n; k++) {
+    const target = (k / (n - 1)) * total
+    let seg = 0
+    while (seg < arcLen.length - 1 && arcLen[seg + 1] < target) seg++
+    const segLen = arcLen[seg + 1] - arcLen[seg]
+    const t = segLen === 0 ? 0 : (target - arcLen[seg]) / segLen
+    result.push({
+      x: points[seg].x + t * (points[seg + 1].x - points[seg].x),
+      y: points[seg].y + t * (points[seg + 1].y - points[seg].y),
+    })
+  }
+  return result
+}
+
+// Letter "A" SVG path (from @tscircuit/alphabet svgAlphabet)
+const LETTER_A = "M0.018067 0.94897 L0.290179 0.270996 L0.583986 0.94897 M0.155303 0.684521 L0.433548 0.684521"
+
+export default () => {
+  const pts = samplePath(LETTER_A, 10)
+  const W = 20  // letter width in mm
+  const H = 25  // letter height in mm
+
+  return (
+    <board width="40mm" height="40mm">
+      {pts.map((p, i) => {
+        const px = (p.x - 0.5) * W
+        const py = (0.5 - p.y) * H
+        return (
+          <>
+            <led
+              key={\`led-\${i}\`}
+              name={\`LED\${i + 1}\`}
+              color="red"
+              footprint="0402"
+              pcbX={px}
+              pcbY={py}
+              schX={-8 + i * 1.6}
+              schY={0}
+              connections={{
+                anode: \`net.A\${i}\`,
+                cathode: "net.GND",
+              }}
+            />
+            <resistor
+              key={\`res-\${i}\`}
+              name={\`R\${i + 1}\`}
+              resistance="68ohm"
+              footprint="0402"
+              pcbX={px + 1.5}
+              pcbY={py}
+              schX={-8 + i * 1.6}
+              schY={-2}
+              connections={{
+                pin1: "net.PWR",
+                pin2: \`net.A\${i}\`,
+              }}
+            />
+          </>
+        )
+      })}
+    </board>
+  )
+}
+`} />
+
+## Step 3: Build the reusable LedLetter component
+
+Now we wrap everything in a component that accepts any capital letter and a
+scale factor. All 26 letters (A–Z) are supported using the path data from
+`@tscircuit/alphabet`.
+
+<TscircuitIframe defaultView="pcb" code={`
+// Inline the paths for A–F as a demonstration. In a real project, import from
+// @tscircuit/alphabet: import { svgAlphabet } from "@tscircuit/alphabet"
+const svgAlphabet = {
+  A: "M0.018067 0.94897 L0.290179 0.270996 L0.583986 0.94897 M0.155303 0.684521 L0.433548 0.684521",
+  B: "M0.063965 0.94897 L0.063965 0.278953 L0.209356 0.270996 L0.342486 0.294394 L0.432179 0.37292 L0.418224 0.48773 L0.312686 0.549166 L0.084728 0.575531 L0.306377 0.589434 L0.468877 0.647456 L0.538087 0.736658 L0.5324 0.85202 L0.501247 0.902983 L0.42355 0.944398 L0.063965 0.94897",
+  C: "M0.529054 0.419847 L0.498425 0.345196 L0.442238 0.292341 L0.33583 0.257813 L0.257199 0.268357 L0.187906 0.303748 L0.120243 0.385432 L0.072998 0.599844 L0.110073 0.815385 L0.165381 0.902183 L0.222883 0.942801 L0.334904 0.961214 L0.43253 0.937679 L0.504816 0.868999 L0.529054 0.772065",
+  D: "M0.064454 0.94897 L0.071838 0.285078 L0.171217 0.270996 L0.247348 0.272633 L0.37101 0.306078 L0.462461 0.378304 L0.514748 0.475555 L0.535591 0.576392 L0.537599 0.652313 L0.528065 0.717381 L0.508562 0.772419 L0.445948 0.855695 L0.362356 0.90871 L0.225203 0.945862 L0.064454 0.94897",
+  E: "M0.080078 0.270996 L0.080078 0.94897 M0.080078 0.270996 L0.521974 0.270996 M0.080078 0.609981 L0.389405 0.609981 M0.080078 0.94897 L0.521974 0.94897",
+  F: "M0.086426 0.270996 L0.086426 0.94897 M0.091304 0.275607 L0.515626 0.275607 M0.091304 0.607677 L0.447344 0.607677",
+}
+
+function samplePath(pathStr, n) {
+  const points = []
+  const tokens = pathStr.trim().split(/\s+/)
+  let i = 0
+  while (i < tokens.length) {
+    const cmd = tokens[i]; i++
+    if (cmd === "M" || cmd === "L") {
+      points.push({ x: parseFloat(tokens[i]), y: parseFloat(tokens[i + 1]) }); i += 2
+    }
+  }
+  if (points.length < 2) return [points[0]]
+  const arcLen = [0]
+  for (let j = 1; j < points.length; j++) {
+    const dx = points[j].x - points[j - 1].x, dy = points[j].y - points[j - 1].y
+    arcLen.push(arcLen[j - 1] + Math.sqrt(dx * dx + dy * dy))
+  }
+  const total = arcLen[arcLen.length - 1]
+  const result = []
+  for (let k = 0; k < n; k++) {
+    const target = (k / (n - 1)) * total
+    let seg = 0
+    while (seg < arcLen.length - 1 && arcLen[seg + 1] < target) seg++
+    const segLen = arcLen[seg + 1] - arcLen[seg]
+    const t = segLen === 0 ? 0 : (target - arcLen[seg]) / segLen
+    result.push({
+      x: points[seg].x + t * (points[seg + 1].x - points[seg].x),
+      y: points[seg].y + t * (points[seg + 1].y - points[seg].y),
+    })
+  }
+  return result
+}
+
+// LedLetter component: places nLeds 0402 LEDs along the outline of any letter
+const LedLetter = ({ letter, power, gnd, offsetX = 0, offsetY = 0, width = 18, height = 24, nLeds = 14, namePrefix = "" }) => {
+  const path = svgAlphabet[letter.toUpperCase()]
+  if (!path) return null
+  const pts = samplePath(path, nLeds)
+
+  return (
+    <>
+      {pts.map((p, i) => {
+        const px = offsetX + (p.x - 0.3) * width
+        const py = offsetY + (0.6 - p.y) * height
+        const ledName = namePrefix + letter + \`_LED\${i + 1}\`
+        const resName = namePrefix + letter + \`_R\${i + 1}\`
+        const midNet = \`net.\${ledName}_A\`
+        return (
+          <>
+            <resistor
+              key={\`r\${i}\`}
+              name={resName}
+              resistance="68ohm"
+              footprint="0402"
+              pcbX={px - 1}
+              pcbY={py}
+              connections={{ pin1: power, pin2: midNet }}
+            />
+            <led
+              key={\`l\${i}\`}
+              name={ledName}
+              color="red"
+              footprint="0402"
+              pcbX={px}
+              pcbY={py}
+              connections={{ anode: midNet, cathode: gnd }}
+            />
+          </>
+        )
+      })}
+    </>
+  )
+}
+
+export default () => (
+  <board width="120mm" height="35mm">
+    <LedLetter letter="A" power="net.PWR" gnd="net.GND" offsetX={-50} offsetY={0} namePrefix="L1_" />
+    <LedLetter letter="B" power="net.PWR" gnd="net.GND" offsetX={-25} offsetY={0} namePrefix="L2_" />
+    <LedLetter letter="C" power="net.PWR" gnd="net.GND" offsetX={0}   offsetY={0} namePrefix="L3_" />
+    <LedLetter letter="D" power="net.PWR" gnd="net.GND" offsetX={25}  offsetY={0} namePrefix="L4_" />
+    <LedLetter letter="E" power="net.PWR" gnd="net.GND" offsetX={50}  offsetY={0} namePrefix="L5_" />
+  </board>
+)
+`} />
+
+## Step 4: Complete usage example
+
+Here is the complete `<LedLetter>` component with all 26 letters supported,
+ready to copy into your own project.
+
+```tsx
+import { svgAlphabet } from "@tscircuit/alphabet"
+
+function samplePath(pathStr: string, n: number) {
+  const points: { x: number; y: number }[] = []
+  const tokens = pathStr.trim().split(/\s+/)
+  let i = 0
+  while (i < tokens.length) {
+    const cmd = tokens[i++]
+    if (cmd === "M" || cmd === "L") {
+      points.push({ x: parseFloat(tokens[i]), y: parseFloat(tokens[i + 1]) })
+      i += 2
+    }
+  }
+  if (points.length < 2) return points
+  const arcLen = [0]
+  for (let j = 1; j < points.length; j++) {
+    const dx = points[j].x - points[j - 1].x
+    const dy = points[j].y - points[j - 1].y
+    arcLen.push(arcLen[j - 1] + Math.sqrt(dx * dx + dy * dy))
+  }
+  const total = arcLen.at(-1)!
+  const result: { x: number; y: number }[] = []
+  for (let k = 0; k < n; k++) {
+    const target = (k / (n - 1)) * total
+    let seg = 0
+    while (seg < arcLen.length - 1 && arcLen[seg + 1] < target) seg++
+    const segLen = arcLen[seg + 1] - arcLen[seg]
+    const t = segLen === 0 ? 0 : (target - arcLen[seg]) / segLen
+    result.push({
+      x: points[seg].x + t * (points[seg + 1].x - points[seg].x),
+      y: points[seg].y + t * (points[seg + 1].y - points[seg].y),
+    })
+  }
+  return result
+}
+
+interface LedLetterProps {
+  letter: string          // Any capital A–Z letter
+  power: string           // Net name for VCC (e.g. "net.PWR")
+  gnd: string             // Net name for GND (e.g. "net.GND")
+  offsetX?: number        // PCB X offset in mm
+  offsetY?: number        // PCB Y offset in mm
+  width?: number          // Letter width in mm (default 18)
+  height?: number         // Letter height in mm (default 24)
+  nLeds?: number          // Number of LEDs (default 14)
+  namePrefix?: string     // Prefix to avoid name collisions
+}
+
+export const LedLetter = ({
+  letter,
+  power,
+  gnd,
+  offsetX = 0,
+  offsetY = 0,
+  width = 18,
+  height = 24,
+  nLeds = 14,
+  namePrefix = "",
+}: LedLetterProps) => {
+  const path = svgAlphabet[letter.toUpperCase() as keyof typeof svgAlphabet]
+  if (!path) return null
+  const pts = samplePath(path, nLeds)
+
+  return (
+    <>
+      {pts.map((p, i) => {
+        const px = offsetX + (p.x - 0.3) * width
+        const py = offsetY + (0.6 - p.y) * height
+        const ledName = `${namePrefix}${letter}_LED${i + 1}`
+        const resName = `${namePrefix}${letter}_R${i + 1}`
+        const midNet = `net.${ledName}_A`
+        return (
+          <>
+            <resistor
+              key={`r${i}`}
+              name={resName}
+              resistance="68ohm"
+              footprint="0402"
+              pcbX={px - 1}
+              pcbY={py}
+              connections={{ pin1: power, pin2: midNet }}
+            />
+            <led
+              key={`l${i}`}
+              name={ledName}
+              color="red"
+              footprint="0402"
+              pcbX={px}
+              pcbY={py}
+              connections={{ anode: midNet, cathode: gnd }}
+            />
+          </>
+        )
+      })}
+    </>
+  )
+}
+```
+
+Usage:
+
+```tsx
+export default () => (
+  <board width="60mm" height="35mm">
+    <LedLetter letter="A" power="net.PWR" gnd="net.GND" offsetX={-20} namePrefix="A_" />
+    <LedLetter letter="B" power="net.PWR" gnd="net.GND" offsetX={5}   namePrefix="B_" />
+  </board>
+)
+```

From 5a9646d8cdae3d952bc527c4027d1c186085ee2e Mon Sep 17 00:00:00 2001
From: tungnguyentu <nguyentutung24@gmail.com>
Date: Fri, 15 May 2026 02:32:38 +0700
Subject: [PATCH 2/3] docs: add ESP32 PCB layout and routing tutorial

Step-by-step tutorial covering module placement, antenna keepout,
USB-C power with AMS1117-3.3 regulator, CH340G USB-UART bridge,
auto-reset circuit, and EN/BOOT pushbuttons. Each step has a live
TscircuitIframe PCB preview.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../esp32-pcb-layout-and-routing.mdx          | 511 ++++++++++++++++++
 1 file changed, 511 insertions(+)
 create mode 100644 docs/tutorials/esp32-pcb-layout-and-routing.mdx

diff --git a/docs/tutorials/esp32-pcb-layout-and-routing.mdx b/docs/tutorials/esp32-pcb-layout-and-routing.mdx
new file mode 100644
index 0000000..21f23f3
--- /dev/null
+++ b/docs/tutorials/esp32-pcb-layout-and-routing.mdx
@@ -0,0 +1,511 @@
+---
+title: ESP32 PCB Layout and Routing
+description: Learn how to place and route an ESP32 module board in tscircuit — module placement, antenna keepout, decoupling capacitors, USB power, and autorouting.
+---
+
+## Overview
+
+This tutorial builds a complete ESP32 development board PCB step by step. You will
+place the ESP32-WROOM-32 module, add power circuitry, wire up a USB-to-UART
+bridge for programming, and let the autorouter connect everything.
+
+Good PCB layout for an ESP32 follows three placement rules:
+1. The module antenna must hang over the board edge with no copper beneath it.
+2. The 3.3 V supply path (USB connector → regulator → module) should be short.
+3. Programming controls (EN reset, IO0 boot) live next to the module with their
+   pull-up resistors and pushbuttons nearby.
+
+import TscircuitIframe from "@site/src/components/TscircuitIframe"
+
+## Step 1: Place the ESP32 Module
+
+The ESP32-WROOM-32 is a stamp-style module. In tscircuit it is modelled as a
+`<chip>` with the `stampreceiver` footprint family. The footprint string encodes
+the pad count and spacing:
+
+```
+stampreceiver_left14_right14_bottom10_top0_w18mm_p1.27mm
+```
+
+Place the module near the **top edge** of the board so the antenna side (the
+rounded end of the WROOM module) points outward away from the rest of the
+circuitry.
+
+<TscircuitIframe defaultView="pcb" code={`
+const Esp32Wroom = (props) => (
+  <chip
+    manufacturerPartNumber="ESP32-WROOM-32"
+    footprint="stampreceiver_left14_right14_bottom10_top0_w18mm_p1.27mm"
+    pinLabels={{
+      pin1: "GND",
+      pin2: "3V3",
+      pin3: "EN",
+      pin4: "SENSOR_VP",
+      pin5: "SENSOR_VN",
+      pin6: "IO34",
+      pin7: "IO35",
+      pin8: "IO32",
+      pin9: "IO33",
+      pin10: "IO25",
+      pin11: "IO26",
+      pin12: "IO27",
+      pin13: "IO14",
+      pin14: "IO12",
+      pin15: "GND2",
+      pin16: "IO13",
+      pin17: "SD2",
+      pin18: "SD3",
+      pin19: "CMD",
+      pin20: "CLK",
+      pin21: "SD0",
+      pin22: "SD1",
+      pin23: "IO15",
+      pin24: "IO2",
+      pin25: "IO0",
+      pin26: "IO4",
+      pin27: "IO16",
+      pin28: "IO17",
+      pin29: "IO5",
+      pin30: "IO18",
+      pin31: "IO19",
+      pin32: "IO21",
+      pin33: "RXD0",
+      pin34: "TXD0",
+      pin35: "IO22",
+      pin36: "IO23",
+      pin37: "GND3",
+      pin38: "GND4",
+    }}
+    schPinArrangement={{
+      leftSide: {
+        direction: "top-to-bottom",
+        pins: ["pin1","pin2","pin3","pin4","pin5","pin6","pin7",
+               "pin8","pin9","pin10","pin11","pin12","pin13","pin14"],
+      },
+      rightSide: {
+        direction: "top-to-bottom",
+        pins: ["pin38","pin37","pin36","pin35","pin34","pin33","pin32",
+               "pin31","pin30","pin29","pin28","pin27","pin26","pin25"],
+      },
+    }}
+    {...props}
+  />
+)
+
+export default () => (
+  <board width="55mm" height="40mm">
+    <Esp32Wroom
+      name="U1"
+      pcbX={0}
+      pcbY={8}
+      schX={0}
+      schY={0}
+    />
+  </board>
+)
+`} />
+
+The `pcbY={8}` shifts the module toward the top of the 40 mm board, leaving
+room below for power and programming components.
+
+## Step 2: Add USB Power and 3.3 V Regulation
+
+The ESP32 runs on 3.3 V but USB supplies 5 V. We need:
+- A **USB-C connector** for power input
+- An **AMS1117-3.3** LDO regulator (SOT-223 package) to step 5 V down to 3.3 V
+- **Decoupling capacitors** on both sides of the regulator
+
+Place the USB connector at the left board edge and the regulator between it and
+the module to keep the high-current 5 V path short.
+
+<TscircuitIframe defaultView="pcb" code={`
+import { SmdUsbC } from "@tsci/seveibar.smd-usb-c"
+
+const Esp32Wroom = (props) => (
+  <chip
+    manufacturerPartNumber="ESP32-WROOM-32"
+    footprint="stampreceiver_left14_right14_bottom10_top0_w18mm_p1.27mm"
+    pinLabels={{
+      pin1: "GND", pin2: "3V3", pin3: "EN",
+      pin25: "IO0", pin33: "RXD0", pin34: "TXD0",
+      pin15: "GND2", pin37: "GND3", pin38: "GND4",
+    }}
+    {...props}
+  />
+)
+
+export default () => (
+  <board width="55mm" height="40mm">
+    <Esp32Wroom
+      name="U1"
+      pcbX={0} pcbY={8}
+      schX={0} schY={0}
+    />
+
+    {/* USB-C power input at the left board edge */}
+    <SmdUsbC
+      name="J1"
+      pcbX={-22} pcbY={-13}
+      schX={-8} schY={-5}
+      connections={{
+        GND1: "net.GND", GND2: "net.GND",
+        VBUS1: "net.VBUS", VBUS2: "net.VBUS",
+      }}
+    />
+
+    {/* AMS1117-3.3 LDO: VIN=VBUS, VOUT=3V3 */}
+    <chip
+      name="U2"
+      manufacturerPartNumber="AMS1117-3.3"
+      footprint="sot223"
+      pinLabels={{ pin1: "GND", pin2: "VOUT", pin3: "VIN", pin4: "VOUT2" }}
+      pcbX={-10} pcbY={-12}
+      schX={-3} schY={-5}
+      connections={{
+        pin1: "net.GND",
+        pin2: "net.3V3",
+        pin4: "net.3V3",
+        pin3: "net.VBUS",
+      }}
+    />
+
+    {/* 10 uF input bulk cap (close to regulator VIN) */}
+    <capacitor
+      name="C1"
+      capacitance="10uF"
+      footprint="0805"
+      pcbX={-16} pcbY={-9}
+      schX={-6} schY={-3}
+      connections={{ pin1: "net.VBUS", pin2: "net.GND" }}
+    />
+
+    {/* 10 uF output bulk cap (close to regulator VOUT) */}
+    <capacitor
+      name="C2"
+      capacitance="10uF"
+      footprint="0805"
+      pcbX={-4} pcbY={-9}
+      schX={-1} schY={-3}
+      connections={{ pin1: "net.3V3", pin2: "net.GND" }}
+    />
+
+    {/* 100 nF bypass cap right at the ESP32 3V3 pin */}
+    <capacitor
+      name="C3"
+      capacitance="100nF"
+      footprint="0402"
+      pcbX={-6} pcbY={3}
+      schX={-3} schY={2}
+      connections={{ pin1: "net.3V3", pin2: "net.GND" }}
+    />
+
+    {/* Power rails to ESP32 */}
+    <netlabel net="3V3" anchorSide="bottom" connection="U1.pin2" />
+    <netlabel net="GND" anchorSide="top" connection="U1.pin1" />
+    <netlabel net="GND" anchorSide="top" connection="U1.pin15" />
+    <netlabel net="GND" anchorSide="top" connection="U1.pin37" />
+    <netlabel net="GND" anchorSide="top" connection="U1.pin38" />
+  </board>
+)
+`} />
+
+The regulator at `pcbX={-10}` sits between the USB connector (`pcbX={-22}`) and
+the module (`pcbX={0}`), creating a straight left-to-right power flow that is
+easy to review.
+
+## Step 3: Add the USB-to-UART Bridge
+
+To program the ESP32 over USB you need a serial bridge chip. The **CH340G**
+(SOP-16) converts USB signals to the UART RX/TX lines the ESP32 bootloader uses.
+
+The bridge also drives the **DTR** and **RTS** hardware flow-control lines.
+Those connect to the ESP32's EN and IO0 pins through 100 nF capacitors to
+implement the automatic reset-into-bootloader sequence that the Arduino IDE and
+`esptool` rely on.
+
+<TscircuitIframe defaultView="pcb" code={`
+import { SmdUsbC } from "@tsci/seveibar.smd-usb-c"
+
+const Esp32Wroom = (props) => (
+  <chip
+    manufacturerPartNumber="ESP32-WROOM-32"
+    footprint="stampreceiver_left14_right14_bottom10_top0_w18mm_p1.27mm"
+    pinLabels={{
+      pin1: "GND", pin2: "3V3", pin3: "EN",
+      pin25: "IO0", pin33: "RXD0", pin34: "TXD0",
+      pin15: "GND2", pin37: "GND3", pin38: "GND4",
+    }}
+    {...props}
+  />
+)
+
+export default () => (
+  <board width="55mm" height="40mm">
+    <Esp32Wroom
+      name="U1"
+      pcbX={0} pcbY={8}
+      schX={0} schY={0}
+    />
+
+    <SmdUsbC
+      name="J1"
+      pcbX={-22} pcbY={-13}
+      schX={-8} schY={-5}
+      connections={{
+        GND1: "net.GND", GND2: "net.GND",
+        VBUS1: "net.VBUS", VBUS2: "net.VBUS",
+      }}
+    />
+
+    <chip
+      name="U2"
+      manufacturerPartNumber="AMS1117-3.3"
+      footprint="sot223"
+      pinLabels={{ pin1: "GND", pin2: "VOUT", pin3: "VIN", pin4: "VOUT2" }}
+      pcbX={-10} pcbY={-12}
+      schX={-3} schY={-5}
+      connections={{
+        pin1: "net.GND", pin2: "net.3V3",
+        pin4: "net.3V3", pin3: "net.VBUS",
+      }}
+    />
+
+    {/* CH340G USB-UART bridge */}
+    <chip
+      name="U3"
+      manufacturerPartNumber="CH340G"
+      footprint="soic16_p1.27mm"
+      pinLabels={{
+        pin1: "TXD", pin2: "RXD",
+        pin3: "V3", pin4: "UD_PLUS", pin5: "UD_MINUS",
+        pin6: "XI", pin7: "XO", pin8: "TEST",
+        pin9: "GND", pin10: "CTS", pin11: "DSR",
+        pin12: "RI", pin13: "DCD",
+        pin14: "DTR", pin15: "RTS", pin16: "VCC",
+      }}
+      schPinArrangement={{
+        leftSide: {
+          direction: "top-to-bottom",
+          pins: ["pin16","pin15","pin14","pin13","pin12","pin11","pin10","pin9"],
+        },
+        rightSide: {
+          direction: "top-to-bottom",
+          pins: ["pin1","pin2","pin3","pin4","pin5","pin6","pin7","pin8"],
+        },
+      }}
+      pcbX={18} pcbY={-8}
+      schX={8} schY={-2}
+      connections={{
+        pin1: "net.UART_TX",  // CH340 TXD → ESP32 RXD0
+        pin2: "net.UART_RX",  // CH340 RXD ← ESP32 TXD0
+        pin9: "net.GND",
+        pin16: "net.3V3",
+        pin4: "net.USB_DP",
+        pin5: "net.USB_DM",
+        pin14: "net.DTR_N",
+        pin15: "net.RTS_N",
+      }}
+    />
+
+    {/* UART cross-connect: CH340 TX→ESP RX, CH340 RX←ESP TX */}
+    <netlabel net="UART_TX" anchorSide="right" connection="U1.pin33" />
+    <netlabel net="UART_RX" anchorSide="right" connection="U1.pin34" />
+
+    {/* Auto-reset: DTR/RTS → 100nF caps → EN/IO0 */}
+    <capacitor
+      name="C4"
+      capacitance="100nF"
+      footprint="0402"
+      pcbX={8} pcbY={-5}
+      schX={4} schY={-7}
+      connections={{ pin1: "net.DTR_N", pin2: "net.ESP_EN" }}
+    />
+    <capacitor
+      name="C5"
+      capacitance="100nF"
+      footprint="0402"
+      pcbX={8} pcbY={-8}
+      schX={4} schY={-9}
+      connections={{ pin1: "net.RTS_N", pin2: "net.ESP_IO0" }}
+    />
+    <netlabel net="ESP_EN"  anchorSide="right" connection="U1.pin3" />
+    <netlabel net="ESP_IO0" anchorSide="right" connection="U1.pin25" />
+
+    {/* USB D+/D- to CH340 */}
+    <netlabel net="USB_DP" anchorSide="bottom" connection="J1.DP1" />
+    <netlabel net="USB_DM" anchorSide="bottom" connection="J1.DM1" />
+
+    {/* Decoupling on CH340 VCC */}
+    <capacitor
+      name="C6"
+      capacitance="100nF"
+      footprint="0402"
+      pcbX={22} pcbY={-5}
+      schX={11} schY={0}
+      connections={{ pin1: "net.3V3", pin2: "net.GND" }}
+    />
+
+    <capacitor name="C1" capacitance="10uF" footprint="0805"
+      pcbX={-16} pcbY={-9} schX={-6} schY={-3}
+      connections={{ pin1: "net.VBUS", pin2: "net.GND" }} />
+    <capacitor name="C2" capacitance="10uF" footprint="0805"
+      pcbX={-4} pcbY={-9} schX={-1} schY={-3}
+      connections={{ pin1: "net.3V3", pin2: "net.GND" }} />
+    <capacitor name="C3" capacitance="100nF" footprint="0402"
+      pcbX={-6} pcbY={3} schX={-3} schY={2}
+      connections={{ pin1: "net.3V3", pin2: "net.GND" }} />
+
+    <netlabel net="3V3" anchorSide="bottom" connection="U1.pin2" />
+    <netlabel net="GND" anchorSide="top" connection="U1.pin1" />
+    <netlabel net="GND" anchorSide="top" connection="U1.pin15" />
+    <netlabel net="GND" anchorSide="top" connection="U1.pin37" />
+    <netlabel net="GND" anchorSide="top" connection="U1.pin38" />
+  </board>
+)
+`} />
+
+The auto-reset capacitors on C4 and C5 implement the standard ESP32 reset
+circuit: when a host asserts DTR and then RTS (or vice versa), the resulting
+pulse drives EN low followed by IO0 low, putting the chip into download mode
+without you pressing any buttons.
+
+## Step 4: EN Reset and BOOT Buttons
+
+Even with automatic reset, physical buttons are important for manual recovery.
+Place the **EN** (reset) button and the **IO0** (boot mode) button near the
+right edge of the board with their 10 kΩ pull-up resistors right beside them.
+
+<TscircuitIframe defaultView="pcb" code={`
+import { SmdUsbC } from "@tsci/seveibar.smd-usb-c"
+
+const Esp32Wroom = (props) => (
+  <chip
+    manufacturerPartNumber="ESP32-WROOM-32"
+    footprint="stampreceiver_left14_right14_bottom10_top0_w18mm_p1.27mm"
+    pinLabels={{
+      pin1: "GND", pin2: "3V3", pin3: "EN",
+      pin25: "IO0", pin33: "RXD0", pin34: "TXD0",
+      pin15: "GND2", pin37: "GND3", pin38: "GND4",
+    }}
+    {...props}
+  />
+)
+
+export default () => (
+  <board width="55mm" height="40mm">
+    <Esp32Wroom name="U1" pcbX={0} pcbY={8} schX={0} schY={0} />
+
+    <SmdUsbC name="J1" pcbX={-22} pcbY={-13} schX={-8} schY={-5}
+      connections={{ GND1:"net.GND", GND2:"net.GND", VBUS1:"net.VBUS", VBUS2:"net.VBUS" }} />
+
+    <chip name="U2" manufacturerPartNumber="AMS1117-3.3" footprint="sot223"
+      pinLabels={{ pin1:"GND", pin2:"VOUT", pin3:"VIN", pin4:"VOUT2" }}
+      pcbX={-10} pcbY={-12} schX={-3} schY={-5}
+      connections={{ pin1:"net.GND", pin2:"net.3V3", pin4:"net.3V3", pin3:"net.VBUS" }} />
+
+    <chip name="U3" manufacturerPartNumber="CH340G" footprint="soic16_p1.27mm"
+      pinLabels={{ pin1:"TXD", pin2:"RXD", pin9:"GND", pin16:"VCC",
+        pin4:"UD_PLUS", pin5:"UD_MINUS", pin14:"DTR", pin15:"RTS" }}
+      pcbX={18} pcbY={-8} schX={8} schY={-2}
+      connections={{ pin1:"net.UART_TX", pin2:"net.UART_RX",
+        pin9:"net.GND", pin16:"net.3V3", pin4:"net.USB_DP", pin5:"net.USB_DM",
+        pin14:"net.DTR_N", pin15:"net.RTS_N" }} />
+
+    {/* 10k pull-up on EN */}
+    <resistor name="R1" resistance="10k" footprint="0402"
+      pcbX={12} pcbY={5} schX={5} schY={3}
+      connections={{ pin1: "net.3V3", pin2: "net.ESP_EN" }} />
+
+    {/* EN reset button */}
+    <pushbutton name="SW1" footprint="pushbutton_smd_4mm"
+      pcbX={18} pcbY={5} schX={7} schY={3}
+      connections={{ pin1: "net.ESP_EN", pin2: "net.GND" }} />
+
+    {/* 10k pull-up on IO0 */}
+    <resistor name="R2" resistance="10k" footprint="0402"
+      pcbX={12} pcbY={2} schX={5} schY={1}
+      connections={{ pin1: "net.3V3", pin2: "net.ESP_IO0" }} />
+
+    {/* BOOT button */}
+    <pushbutton name="SW2" footprint="pushbutton_smd_4mm"
+      pcbX={18} pcbY={2} schX={7} schY={1}
+      connections={{ pin1: "net.ESP_IO0", pin2: "net.GND" }} />
+
+    <capacitor name="C4" capacitance="100nF" footprint="0402"
+      pcbX={8} pcbY={-5} schX={4} schY={-7}
+      connections={{ pin1:"net.DTR_N", pin2:"net.ESP_EN" }} />
+    <capacitor name="C5" capacitance="100nF" footprint="0402"
+      pcbX={8} pcbY={-8} schX={4} schY={-9}
+      connections={{ pin1:"net.RTS_N", pin2:"net.ESP_IO0" }} />
+
+    <netlabel net="ESP_EN"  anchorSide="right" connection="U1.pin3" />
+    <netlabel net="ESP_IO0" anchorSide="right" connection="U1.pin25" />
+    <netlabel net="UART_TX" anchorSide="right" connection="U1.pin33" />
+    <netlabel net="UART_RX" anchorSide="right" connection="U1.pin34" />
+    <netlabel net="USB_DP"  anchorSide="bottom" connection="J1.DP1" />
+    <netlabel net="USB_DM"  anchorSide="bottom" connection="J1.DM1" />
+    <netlabel net="3V3"     anchorSide="bottom" connection="U1.pin2" />
+    <netlabel net="GND"     anchorSide="top"    connection="U1.pin1" />
+    <netlabel net="GND"     anchorSide="top"    connection="U1.pin15" />
+    <netlabel net="GND"     anchorSide="top"    connection="U1.pin37" />
+    <netlabel net="GND"     anchorSide="top"    connection="U1.pin38" />
+
+    <capacitor name="C1" capacitance="10uF" footprint="0805"
+      pcbX={-16} pcbY={-9} schX={-6} schY={-3}
+      connections={{ pin1:"net.VBUS", pin2:"net.GND" }} />
+    <capacitor name="C2" capacitance="10uF" footprint="0805"
+      pcbX={-4} pcbY={-9} schX={-1} schY={-3}
+      connections={{ pin1:"net.3V3", pin2:"net.GND" }} />
+    <capacitor name="C3" capacitance="100nF" footprint="0402"
+      pcbX={-6} pcbY={3} schX={-3} schY={2}
+      connections={{ pin1:"net.3V3", pin2:"net.GND" }} />
+    <capacitor name="C6" capacitance="100nF" footprint="0402"
+      pcbX={22} pcbY={-5} schX={11} schY={0}
+      connections={{ pin1:"net.3V3", pin2:"net.GND" }} />
+  </board>
+)
+`} />
+
+Pressing SW1 (EN) resets the ESP32. Pressing SW2 (IO0) while holding SW1 puts
+it into download mode so you can flash firmware manually without needing the
+auto-reset circuit.
+
+## Step 5: Autorouting
+
+Once component placement is done, tscircuit can route all the traces automatically.
+Add `autorouter="auto-cloud"` to the `<board>` element to use the cloud autorouter,
+or `autorouter="sequential-trace"` for the local solver:
+
+```tsx
+<board width="55mm" height="40mm" autorouter="auto-cloud">
+  ...
+</board>
+```
+
+The autorouter reads every `connections` prop and every `<netlabel>` you added,
+so there is nothing extra to configure. After routing you can switch to the PCB
+tab in the preview to inspect trace widths and clearances.
+
+### Placement tips that help the autorouter
+
+- **Short nets first**: the regulator-to-module 3V3 path and the UART TX/RX
+  crossover are the nets most affected by placement order.
+- **Avoid crossing power nets**: keep VBUS traces on the left side of the board
+  and 3V3 traces in the middle so they do not create unnecessary crossings that
+  require vias.
+- **Put bypass caps as close as possible**: C3 (module bypass) and C6 (CH340
+  bypass) should be within 2–3 mm of their respective IC's power pin to minimize
+  the inductance the router must deal with.
+
+## Pre-fabrication checklist
+
+Before exporting Gerbers:
+
+- [ ] The antenna end of the ESP32 module hangs over the board edge, or at least
+      no copper, vias, or components appear within 3 mm of the antenna window.
+- [ ] C1 is within 5 mm of the USB connector VBUS pin.
+- [ ] C3 is within 3 mm of U1 pin 2 (3V3).
+- [ ] C6 is within 3 mm of U3 pin 16 (VCC).
+- [ ] All GND pins on U1 (pins 1, 15, 37, 38) connect to the same GND net.
+- [ ] The UART crossover is correct: U3 TXD → U1 RXD0, U3 RXD ← U1 TXD0.
+- [ ] Both pushbuttons are reachable from the board edge.

From bf066a8844fa89b68f788eb3d4680dc61b2cb931 Mon Sep 17 00:00:00 2001
From: tungnguyentu <nguyentutung24@gmail.com>
Date: Fri, 15 May 2026 23:03:51 +0700
Subject: [PATCH 3/3] docs: add components BOM table and cost estimate

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../esp32-pcb-layout-and-routing.mdx          | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/docs/tutorials/esp32-pcb-layout-and-routing.mdx b/docs/tutorials/esp32-pcb-layout-and-routing.mdx
index 21f23f3..c578479 100644
--- a/docs/tutorials/esp32-pcb-layout-and-routing.mdx
+++ b/docs/tutorials/esp32-pcb-layout-and-routing.mdx
@@ -17,6 +17,23 @@ Good PCB layout for an ESP32 follows three placement rules:
 
 import TscircuitIframe from "@site/src/components/TscircuitIframe"
 
+## Components
+
+| Ref | Part | Description | Footprint |
+|-----|------|-------------|-----------|
+| U1 | ESP32-WROOM-32 | Wi-Fi + BT module | stamp receiver 18 mm |
+| U2 | AMS1117-3.3 | 3.3 V LDO regulator | SOT-223 |
+| U3 | CH340C | USB-to-UART bridge | SOP-16 |
+| J1 | USB-C receptacle | 5 V power + programming | SMD USB-C |
+| SW1 | Pushbutton | EN (reset) | THT tactile |
+| SW2 | Pushbutton | IO0 (boot mode) | THT tactile |
+| R1 | 10 kΩ | EN pull-up | 0402 |
+| R2 | 10 kΩ | IO0 pull-up | 0402 |
+| R3, R4 | 10 kΩ | Auto-reset (EN + IO0 RC) | 0402 |
+| C1 | 10 µF | VBUS bulk decoupling | 0805 |
+| C2 | 10 µF | 3V3 bulk decoupling | 0805 |
+| C3, C6 | 100 nF | Module / CH340C bypass | 0402 |
+
 ## Step 1: Place the ESP32 Module
 
 The ESP32-WROOM-32 is a stamp-style module. In tscircuit it is modelled as a
@@ -497,6 +514,23 @@ tab in the preview to inspect trace widths and clearances.
   bypass) should be within 2–3 mm of their respective IC's power pin to minimize
   the inductance the router must deal with.
 
+## Cost Estimate
+
+| Component | Unit Cost | Qty | Total |
+|-----------|-----------|-----|-------|
+| ESP32-WROOM-32 | $2.20 | 1 | $2.20 |
+| AMS1117-3.3 (SOT-223) | $0.10 | 1 | $0.10 |
+| CH340C (SOP-16) | $0.25 | 1 | $0.25 |
+| USB-C receptacle | $0.15 | 1 | $0.15 |
+| Tactile pushbuttons | $0.05 | 2 | $0.10 |
+| 10 kΩ resistors (0402) | $0.01 | 4 | $0.04 |
+| 10 µF capacitors (0805) | $0.05 | 2 | $0.10 |
+| 100 nF capacitors (0402) | $0.02 | 2 | $0.04 |
+| PCB (2-layer, 5 pcs) | $0.50 | 1 | $0.50 |
+| **Total** | | | **~$3.48** |
+
+*Prices based on LCSC/JLCPCB quantities of 10.*
+
 ## Pre-fabrication checklist
 
 Before exporting Gerbers: