Pushbutton LED Circuit

​

Overview

In this tutorial, we’ll create a simple USB-powered LED circuit using the tscircuit snippets editor. When completed, you’ll have a circuit that lights up an LED when a button is pressed.

​

Creating the Circuit

Open snippets.tscircuit.com and create a new snippet.

First, we’ll import our required components using module imports:

• @tsci/seveibar.red-led
• @tsci/seveibar.push-button
• @tsci/seveibar.smd-usb-c

Let’s build our circuit by connecting the components. Each component is positioned using schX and schY for schematic placement, pcbY and pcbX for PCB layout. The traces use the format .ComponentName > .pinName.

This is the code used in the example:

import { useRedLed } from "@tsci/seveibar.red-led"
import { usePushButton } from "@tsci/seveibar.push-button"
import { useUsbC } from "@tsci/seveibar.smd-usb-c"

export default () => {
  const USBC = useUsbC("USBC")
  const Button = usePushButton("SW1")
  const Led = useRedLed("LED")
  return (
    <board width="12mm" height="30mm">
      <USBC GND="net.GND" pcbY={-10} VBUS="net.VBUS" />
      <Led neg="net.GND" pcbY={12} schX={-10} schY={0} schRotation={"90deg"}/>
      <Button pcbY={0} pin2=".R1 > .pos" pin3="net.VBUS" schX={-4} schY={0}/>
      <resistor name="R1" footprint="0603" resistance="1k" pcbY={7} schX={-7} schY={-2} schRotation={90} supplierPartNumbers={{
        jlcpcb: ["C22548"]
      }} />
      <trace from=".R1 > .neg" to={Led.pos} />
    </board>
  )
}

Click “Run” to see your circuit. You can switch between different views:

Switch to the PCB view to see the physical layout:

And check the 3D view to preview the final board:

​

Understanding the Circuit

Let’s break down the key parts:

1. USB-C Power: The <USBC /> component provides power (VBUS) and ground (GND)
2. Button: The <Button /> connects VBUS to the LED circuit when pressed
3. Current Limiting: The 1kΩ resistor protects the LED from too much current
4. LED: Lights up when the button completes the circuit

​

Exporting Your Design

You can export your design in various formats:

• Gerber files for PCB manufacturing
• KiCad format for further editing
• STEP files for mechanical design

Click the “Export” button and choose your desired format.

​

Next Steps

Try modifying the design:

• Change the LED color by using a different LED component
• Adjust the board dimensions
• Add more buttons or LEDs
• Import different components using the @ picker

Remember to save your snippet if you want to share it or use it in other projects!