<![CDATA[tscircuit: Dev Streams]]>https://blog.tscircuit.com/s/devstreamshttps://substackcdn.com/image/fetch/$s_!-AOr!,w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F36a71573-6616-468e-bca4-830d84fb3572_612x612.pngtscircuit: Dev Streamshttps://blog.tscircuit.com/s/devstreamsSubstackWed, 29 Apr 2026 19:49:01 GMT<![CDATA[Fixing Schematic Crossings & Adding BOM View to Snippets]]>https://blog.tscircuit.com/p/fixing-schematic-crossings-and-addinghttps://blog.tscircuit.com/p/fixing-schematic-crossings-and-addingSun, 17 Nov 2024 00:00:03 GMTSeve tackles two major tasks: fixing incorrect schematic wire crossings and adding a bill of materials view to the snippets interface. After spending 2 hours trying to fix crossing rendering issues (ultimately putting a $50 bounty on the complete fix), he shifts focus to improving the snippets UI. He implements a new dropdown menu system that houses the BOM view, circuit JSON, and error display, using the more modern horizontal ellipsis (⋯) instead of a hamburger menu. The BOM implementation includes clickable JLCPCB part numbers and a clean tabular layout. Throughout the stream, Seve demonstrates his workflow using AI assistance for code generation while maintaining high standards for UX details like consistent spacing, dropdown behavior, and error indication. Notable discussion topics include proper junction rendering, wire crossing edge cases, and the evolution of menu icons in modern web interfaces.

]]><![CDATA[Getting Started with tscircuit Core, Props and Circuit Json]]>https://blog.tscircuit.com/p/getting-started-with-tscircuit-corehttps://blog.tscircuit.com/p/getting-started-with-tscircuit-coreThu, 17 Oct 2024 18:08:11 GMTIn this episode, Seve walks through the process of adding a battery component to TSCircuit. He demonstrates the intricate dance between the Core, Props, and CircuitJSON repositories, showcasing how to properly implement and integrate a new component across all three.

  • 00:00:00 - Introduction and overview of TS Circuit Core.

  • 00:00:35 - Explanation of the task: Adding battery support to TS Circuit.

  • 00:01:20 - Writing tests in TS Circuit Core.

  • 00:02:06 - Snapshot and schematic test creation.

  • 00:03:39 - Choosing component footprints (discussion about Axial and 0805).

  • 00:04:54 - Debugging: Unsupported component type (battery).

  • 00:05:32 - Creating a new battery component file.

  • 00:06:17 - Debugging missing types and switching imports to CircuitJSON.

  • 00:08:00 - Discussion of component definitions and TS Circuit Props.

  • 00:10:12 - Registering the battery component in the JSX intrinsic file.

  • 00:12:58 - Adding and testing schematic snapshot.

  • 00:17:09 - Snapshot test failures and debugging.

  • 00:19:00 - Overview of the TS Circuit Core architecture and render phases.

  • 00:21:00 - Jumping to Props Repo to define battery-related properties.

  • 00:27:12 - Implementing the battery in CircuitJSON.

  • 00:32:05 - Fixing type and barrel export issues.

  • 00:36:10 - Merging PR and handling dependencies.

  • 00:40:07 - Debugging schematic rendering and snapshot tests.

  • 00:50:02 - Conclusion and final comments on snapshot and battery integration.

]]><![CDATA[tscircuit Snippets - Save functionality, navigation improvements, and UI tweaks for the AI chat interface]]>https://blog.tscircuit.com/p/tscircuit-snippets-save-functionalityhttps://blog.tscircuit.com/p/tscircuit-snippets-save-functionalitySun, 06 Oct 2024 03:01:36 GMTSeve focuses on improving the AI-powered circuit design interface for TS Circuit. He implements the save snippet functionality, adds an "Edit with AI" button to the editor, and creates a new snippet link component for consistent styling. Seve also tackles UI challenges like repositioning toast notifications and refining button styles. He discusses the "select an expert" pattern for AI prompts and plans for benchmarking prompt effectiveness. The stream concludes with Seve spending $0.09 on AI usage and contemplating future improvements, including custom keyboard design using the tool.

]]><![CDATA[Build 3d Electronics Models with React - Introduction to jscad-electronics and jscad-fiber]]>https://blog.tscircuit.com/p/build-3d-electronics-models-withhttps://blog.tscircuit.com/p/build-3d-electronics-models-withFri, 04 Oct 2024 06:05:28 GMTIn this deep-dive episode, Seve tackles the implementation of an axial resistor model for the TSCircuit JSCAD Electronics library. Watch as he navigates through multiple repositories, enhancing JSCAD Fiber with new features like extrude-from-slices and rotation support for cylinders. Seve demonstrates real-time problem-solving, from debugging type errors to refining 3D geometries. Highlights include creating a parameterized resistor model that adapts to different pin distances, and a candid discussion on balancing perfection with pragmatic development. This episode offers invaluable insights into open-source contribution workflows and the intricacies of 3D electronic component modeling.

]]><![CDATA[Unboxing the first React Custom Keyboard]]>https://blog.tscircuit.com/p/unboxing-the-first-react-custom-keyboardhttps://blog.tscircuit.com/p/unboxing-the-first-react-custom-keyboardThu, 03 Oct 2024 18:25:50 GMTthis unboxing stream, Seve inspects the custom keyboard PCB he ordered from JLC about a week ago. He discovers several issues with the board, including missing diodes, insufficient copper pads around plated holes for the Arduino Pro, and incorrectly sized holes for the key switches. Seve demonstrates the problems using a close-up camera view and discusses the necessary adjustments for future iterations. Despite the setbacks, he tests fitting keycaps onto switches and explains the components of a mechanical keyboard. This episode highlights the iterative nature of PCB design and manufacture, providing valuable insights for tscircuit enthusiasts following Seve's keyboard project.

]]><![CDATA[3D Component Rendering Marathon: Fixing DIP Packages and Footprint Strings]]>https://blog.tscircuit.com/p/3d-component-rendering-marathon-fixinghttps://blog.tscircuit.com/p/3d-component-rendering-marathon-fixingWed, 02 Oct 2024 22:11:20 GMTIn this marathon 6-hour stream, Seve dives deep into improving 3D component rendering for TS Circuit. He spends a significant portion tackling issues with the DIP (Dual Inline Package) component, meticulously adjusting its geometry and struggling with coordinate system inconsistencies. Seve also extends footprint string support, adding implementations for 0402, 0603, and 0805 components.

The stream showcases the challenges of integrating multiple libraries, with Seve navigating between JS-CAD, Three.js, and custom React reconcilers. He encounters and fixes numerous rotation and positioning bugs across different component types. Viewers get an inside look at the iterative process of tweaking 3D models, including a detailed session on crafting the curved leads for the DIP package using expanded SVG strokes.

Seve also touches on project maintenance, updating dependencies, fixing CI/CD pipelines, and improving documentation. The stream concludes with a payoff as Seve finally gets to see the fruits of his labor - newly rendered 3D components in the TS Circuit snippets interface.

Throughout, Seve shares insights on open-source development, AI-assisted coding, and the intricacies of building a complex electronics design tool in TypeScript and React.

]]><![CDATA[Learn how to contribute to tscircuit's footprint]]>https://blog.tscircuit.com/p/learn-how-to-contribute-to-tscircuitshttps://blog.tscircuit.com/p/learn-how-to-contribute-to-tscircuitsTue, 01 Oct 2024 05:00:58 GMTthis dev stream, Seve dives deep into the footprinter repository by implementing the axial footprint. He walks through the entire process, from setting up the test file to creating the footprint function using Zod for type definitions. Seve demonstrates how to use the KiCad viewer for reference, debugs issues with plated holes rendering, and adds a basic silkscreen line. He also touches on updating dependencies, using Git effectively, and the importance of comprehensive testing. Throughout the stream, Seve shares insights on contributing to open-source projects, including tips on creating pull requests and the significance of proper documentation. This episode is particularly useful for contributors looking to understand the FootPrinter codebase and workflow.

]]><![CDATA[How to contribute to Schematic Symbols]]>https://blog.tscircuit.com/p/how-to-contribute-to-schematic-symbolshttps://blog.tscircuit.com/p/how-to-contribute-to-schematic-symbolsMon, 30 Sep 2024 06:08:36 GMTIn this episode, Seve guides viewers through creating a photodiode symbol for the Schematic Symbols project. He covers the entire process, from selecting an issue on GitHub to submitting a pull request. Key topics include:

  1. Choosing and researching a symbol (photodiode) from the issues list

  2. Creating and editing the SVG file in Inkscape

  3. Generating TypeScript files using 'bun run generate'

  4. Adjusting text positioning and anchors in both horizontal and vertical orientations

  5. Fixing rendering issues in the vertical layout

  6. Best practices for symbol design and text placement

  7. Committing changes and creating a pull request with the 'fixes' keyword

Seve also touches on potential improvements for the volt meter symbol and discusses the importance of readability in rotated components. This episode provides an in-depth look at contributing to the schematic symbols project for experienced TSCircuit developers.

]]><![CDATA[Battling Winter(spec) Blues: Fake API Adventures]]>https://blog.tscircuit.com/p/battling-winterspec-blues-fake-apihttps://blog.tscircuit.com/p/battling-winterspec-blues-fake-apiThu, 26 Sep 2024 15:09:23 GMTIn this dev stream, Seve dives deep into setting up a fake API for the TS Circuit snippet server. He grapples with Winterspec configuration, debugs TypeScript errors, and implements stateful middleware for the Vite development server. Highlights include fixing common params in Winterspec, adapting the Vite config to use plugins instead of proxies, and redesigning the snippet schema to better handle owner and name properties. Seve also touches on future plans for TS Circuit, including daily circuit designs and potential lab streams. Despite some "in the weeds" moments, Seve makes significant progress in getting the fake API functional, setting the stage for implementing save functionality and additional pages in future streams

]]><![CDATA[Launching snippets.tscircuit.com: Browser-Based Circuit Design with React]]>https://blog.tscircuit.com/p/launching-snippetstscircuitcom-browserhttps://blog.tscircuit.com/p/launching-snippetstscircuitcom-browserWed, 25 Sep 2024 19:25:02 GMTIn this marathon 4.5-hour stream, Seve builds and deploys snippets.tscircuit.com, a browser-based playground for creating circuits using React and TS Circuit. He implements in-browser TSX compilation, 2D/3D circuit rendering, and URL-based snippet sharing. Along the way, Seve encounters and resolves tricky minification bugs related to component naming in production builds. He also explores potential integrations with Valtown and discusses the challenges of server-side rendering for dynamic content. The stream culminates in a successful deployment, demonstrating the creation and sharing of circuit snippets entirely in the browser

]]><![CDATA[Battling JLC's Assembly Interface: Ordering the First TS Circuit Keyboard]]>https://blog.tscircuit.com/p/battling-jlcs-assembly-interfacehttps://blog.tscircuit.com/p/battling-jlcs-assembly-interfaceTue, 24 Sep 2024 03:34:15 GMTIn this stream, Seve finally orders the first custom 9-key keyboard designed with TS Circuit. He tackles several challenges, including fixing a bug in the merge_routes function to properly add vias during layer changes. Despite successful auto-routing, Seve encounters issues with JLC PCB's assembly interface, forcing him to manually adjust component placements. He explores alternatives like PCB Way before ultimately succeeding with JLC using KiCad-exported Gerbers. The stream concludes with Seve placing a $62 order for two assembled PCBs and discussing future improvements for TS Circuit's output compatibility with manufacturers

]]><![CDATA[Bun FFI Benchmarking: Optimizing tscircuit's Auto-Router]]>https://blog.tscircuit.com/p/bun-ffi-benchmarking-optimizing-tscircuitshttps://blog.tscircuit.com/p/bun-ffi-benchmarking-optimizing-tscircuitsWed, 18 Sep 2024 21:41:26 GMTIn this dev stream, Seve dives into Bun's newly released Foreign Function Interface (FFI) to see if it can optimize tscircuit's auto-routing algorithms. He focuses on porting the getObstacleAt function to C and benchmarks its performance against pure JavaScript implementations in both Bun and Node.js (V8). Seve encounters several challenges, including type issues with Bun's FFI, C compilation flags, and unexpected optimization behaviors. He also explores different methods of passing data between JavaScript and C, and discusses the intricacies of accurate performance measurement. Despite initial expectations, the results show that the C implementation doesn't significantly outperform the JavaScript versions, leading to insights about V8's optimization capabilities and the complexities of cross-language optimization.

]]><![CDATA[KiCad Integration: Parsing and Exporting Kicad PCB to and from Circuit JSON]]>https://blog.tscircuit.com/p/kicad-integration-parsing-and-exportinghttps://blog.tscircuit.com/p/kicad-integration-parsing-and-exportingTue, 17 Sep 2024 04:22:21 GMTIn this 2-hour coding session, Seve tackles the challenge of integrating KiCad file formats with TS Circuit. He starts by using ChatGPT's 01 preview to generate an initial KiCad PCB parser, then iteratively debugs and refines the code to convert between CircuitJSON and KiCad's S-expression format. Key highlights include:

  • Implementing KiCad PCB to CircuitJSON conversion

  • Debugging pad and footprint positioning issues

  • Adding layer mapping and support for SMT pads

  • Creating a CircuitJSON to KiCad PCB exporter

  • Discussing future plans for design rule checks and error visualization

Seve demonstrates real-time problem-solving, leveraging AI tools, and shares insights on naming conventions, type safety, and maintaining backwards compatibility. The stream concludes with a successfully imported circuit in KiCad and plans for further refinement of the integration.

]]><![CDATA[Debugging Auto-Routing in TSCircuit: Implementing Debug SVGs for Algorithm Visualization]]>https://blog.tscircuit.com/p/debugging-auto-routing-in-tscircuit-955https://blog.tscircuit.com/p/debugging-auto-routing-in-tscircuit-955Wed, 11 Sep 2024 18:06:23 GMTIn this developer stream, Seve guides contributors through critical improvements to the TSCircuit project, focusing on enhancing the auto-routing algorithm's debugging capabilities. Key highlights include:

  1. Implementing fabrication note paths and text in Circuit to SVG, improving visualization of debug information.

  2. Refactoring Circuit to SVG to handle element ordering, ensuring proper layering of components.

  3. Fixing issues with path closing in fabrication notes and silkscreen elements.

  4. Creating a debug SVG function to visualize each step of the auto-routing algorithm, providing invaluable insights for debugging and optimization.

  5. Addressing the challenge of routing traces in a custom 9-key keyboard design, showcasing real-world application of the improvements.

  6. Discussion on maintaining code stability across multiple repositories while rapidly iterating on features.

This stream is perfect for TSCircuit contributors looking to understand the intricacies of the project's visualization and debugging tools, as well as the auto-routing algorithm's inner workings. Seve demonstrates practical problem-solving, refactoring techniques, and the importance of visualization in complex algorithm development.

]]><![CDATA[Debugging Auto-Routing in TSCircuit: Fabrication Notes & SVG Visualization]]>https://blog.tscircuit.com/p/debugging-auto-routing-in-tscircuithttps://blog.tscircuit.com/p/debugging-auto-routing-in-tscircuitWed, 11 Sep 2024 04:01:01 GMTIn this deep dive into TSCircuit development, Seve tackles several intricate issues related to the auto-routing algorithm and component implementation. The video covers:

  1. Fixing a bug causing duplicate traces in the auto-router output

  2. Implementing fabrication note text and path components in TS-Circuit Core

  3. Creating tests for the new fabrication note components

  4. Exploring the auto-routing dataset viewer with debug mode enabled

  5. Analyzing the I-Jump A* algorithm's behavior in complex routing scenarios

  6. Identifying and reproducing a specific auto-routing issue where traces get too close to obstacles

  7. Discussing potential improvements to the goal-passing problem in the auto-router

Seve demonstrates advanced debugging techniques, including using the auto-routing dataset viewer to step through algorithm iterations and visualize routing decisions. He also touches on the challenges of developing interdependent modules in the TSCircuit ecosystem.

This video is particularly useful for contributors looking to understand the intricacies of the auto-routing algorithm, implement new components in TS-Circuit Core, and improve debugging workflows for complex PCB design scenarios.

]]><![CDATA[Multi-Layer PCB Routing in TSCircuit: Fixing Circuit-to-SVG & Auto-Routing Algorithms]]>https://blog.tscircuit.com/p/multi-layer-pcb-routing-in-tscircuithttps://blog.tscircuit.com/p/multi-layer-pcb-routing-in-tscircuitMon, 09 Sep 2024 22:47:53 GMTIn this extensive development stream, Seve guides contributors through a complex implementation of multi-layer PCB routing in TSCircuit. The video covers:

  1. Debugging and fixing the Circuit-to-SVG library to properly render traces on different layers with correct colors

  2. Refactoring the auto-routing data set to support layer-specific obstacles

  3. Implementing layer information in the I-Jump A* algorithm for multi-layer routing

  4. Testing and verifying the new multi-layer routing capabilities

Key technical aspects covered include:

  • Modifying SVG generation to support layer-specific rendering

  • Refactoring obstacle definitions in the auto-routing algorithm

  • Updating the Simple Route JSON format to include layer information

  • Implementing layer-aware obstacle avoidance in the I-Jump A* algorithm

  • Debugging cross-repo dependencies and fixing build processes

This video is ideal for contributors familiar with TSCircuit's codebase and looking to understand the intricacies of implementing multi-layer PCB routing. It showcases real-time problem-solving and the iterative nature of complex feature implementation across multiple interconnected libraries.

]]><![CDATA[Implementing Hover Highlights and Trace Hints in tscircuit: Core Module Refactoring]]>https://blog.tscircuit.com/p/implementing-hover-highlights-andhttps://blog.tscircuit.com/p/implementing-hover-highlights-andMon, 09 Sep 2024 05:00:28 GMTIn this in-depth development stream, Seve guides contributors through significant improvements to the tscircuit project, focusing on two main areas:

  1. Hover Highlights Implementation:

  • Refactoring the PCB drawing object to include mouse interaction properties

  • Creating a new render phase for inserting trace hints

  • Implementing color manipulation for highlighted elements using the color library

  • Discussing the importance of net list generation for connected element highlighting

  1. Trace Hints Rendering:

  • Fixing the issue of trace hints not being drawn in the edit traces view

  • Refactoring the core module to create trace hint classes from manual trace hints props

  • Adjusting render phases to ensure proper order of operations (port matching, trace hint insertion)

  • Adding PCB trace hints to the soup and ensuring correct ID assignment

Throughout the stream, Seve demonstrates best practices for:

  • Writing and updating tests to verify new functionality

  • Managing artifacts and improving code organization

  • Local development workflows using yalc for testing changes before PR merges

  • Addressing TypeScript challenges and improving type safety

This video is ideal for contributors looking to understand the intricacies of tscircuit's rendering pipeline and those interested in advanced React and TypeScript development techniques in the context of electronic design automation.

]]><![CDATA[Building a 9-Key Macro Keypad: Debugging Diodes and Traces]]>https://blog.tscircuit.com/p/building-a-9-key-macro-keypad-debugginghttps://blog.tscircuit.com/p/building-a-9-key-macro-keypad-debuggingFri, 06 Sep 2024 17:08:12 GMTwe dive deep into the intricacies of building a 9-key macro keypad using the TS Circuit Core library. This stream focuses on debugging and implementing crucial components of our keyboard design.

Key highlights of this session include:

  1. Fixing rendering issues with diodes and ensuring they appear correctly in our PCB layout.

  2. Implementing a new 'Key' component that combines the switch shaft and diode.

  3. Exploring the correct placement and rotation of diodes in relation to the switches.

  4. Debugging trace connections between switches and diodes.

  5. Addressing various bugs in the TS Circuit Core library, including issues with component rendering and port identification.

Throughout the stream, we encounter and solve multiple challenges, demonstrating the iterative nature of hardware development. We also discuss best practices for issue tracking, commit messages, and project organization.

]]><![CDATA[Debugging Deep: Fixing Port Initialization in TS Circuit]]>https://blog.tscircuit.com/p/debugging-deep-fixing-port-initializationhttps://blog.tscircuit.com/p/debugging-deep-fixing-port-initializationThu, 05 Sep 2024 00:21:22 GMTIn this advanced development session, we dive deep into the internals of TS Circuit to fix critical issues with port initialization and footprint components. Watch as we:

  1. Refactor the 'project' concept to 'root/root circuit' for better clarity

  2. Implement a new 'initialize ports from children' render phase

  3. Debug and fix footprint port initialization problems

  4. Tackle the challenges of defining pins as React children

  5. Resolve conflicts in port addition and initialization

  6. Refactor code to prevent port mutations and improve stability

]]>