<![CDATA[tscircuit]]>https://blog.tscircuit.comhttps://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.pngtscircuithttps://blog.tscircuit.comSubstackWed, 15 Apr 2026 03:38:57 GMT<![CDATA[How to write hard 2D algorithms]]>https://blog.tscircuit.com/p/how-to-write-hard-2d-algorithmshttps://blog.tscircuit.com/p/how-to-write-hard-2d-algorithmsSun, 17 Aug 2025 06:45:48 GMTAs tscircuit grows more people have been interested in contributing to fundamental algorithms for autorouting, packing, graph problems or complex domain-specific spatial problems. I’ve seen people both struggle to understand how to contribute as well as write/vibe sloppy unmaintainable code for algorithms.

The fundamental problem: how you’d intuitively write an algorithm, how AI writes algorithms and how you’re taught in school to write is a terrible approach for new algorithm development.

A snapshot from our autorouter development tool showing the pipeline

How to make an algorithm the wrong way

Here’s how most people would write a new algorithm:

  • Dream up a concept

  • Write/vibe a function that implements the algorithm

  • Console log some simple inputs/outputs to verify correctness

This approach is tragic because it creates algorithms that 1) only the original developer understands (if they can even remember) 2) leads to building goliath fragile functions with no visible intermediary results

PVISA: Pipeline, Visualize, [be] Iterative, Snapshot, Approximate

PVISA is an approach to algorithm building that I noticed would consistently work and be maintainable, even if I vibe-coded parts of the algorithm. It was resilient to stupid mistakes and partial overhauling. It allowed contributors to come in and build alongside me. Let’s go through each part:

  • Pipeline - Always have a top-level Pipeline that moves your data through different sub-algorithms. EVERY COMPLEX ALGORITHM HAS MANY SUB-ALGORITHMS! It is a mistake to think of an algorithm has a single function or a single stage. Every obvious algorithm is already packaged or in a standard library, if there is any complexity to what you’re doing, you need to have a pipeline.

Some snippets from the docs and code for the AutoroutingPipelineSolver, the top-level algorithm for the tscircuit autorouter

  • Visualize - You should visualize EVERY ITERATION of your algorithm. There should be no bug that is not immediately obvious or cannot be pointed to with a visual. When debugging, you should be able to “point to the iteration” that does something you didn’t expect

  • Be Iterative - Any “for loop” that contains complex behavior should be BROKEN. You must design everything to work in iterations where each iteration can be visualized. I love object-oriented classes with a `.step()` function and some state for managing this. At any point, you can call `.visualize()` to get a visualization for your current iteration. IT WILL STRETCH YOUR BRAIN TO REFACTOR TO THIS STYLE (but you must do it to succeed!)

  • Snapshot - You must take snapshots of your algorithms output in a way that is understandable to humans. Humans generally forget/are bad at looking at numbers, so you should use Visual Snapshot Testing (SVG outputs) to allow humans to see the impact of changes in pull requests.

Examples of visual snapshots from an autorouter PR that changed some routing behavior

  • Approximate - Most non-trivial algorithms are hard to implement optimally on the first go. Build your algorithms to tolerate non-optimality, this often means introducing stages just to “improve” the output of prior stages. This is good! For our autorouter, we have stages that “straighten-out” our routes (shown below)

Before/After of the SimplifyPathSolver

Building Algorithms like Web Applications

We created the graphics-debug module (MIT open-source) for the explicit purpose of visualizing 2D algorithms. Input a simple JSON object and get an interactive visualization. Use the objects to produce SVGs for visual snapshot tests.

Just like code that cannot be tested is bad and must be restructured such that it can be tested, code that cannot be visualized is bad and should be restructured.

Develop algorithms with the intent to build a web interface to configure, explore and test it. Never develop algorithms in such a way that intermediary outputs can’t be explored with a web interface!

As you build your algorithm, the visualization will get more and more robust. The web interface will allow more parameters to be configured. You’ll have more filters and configurations to explore deeper and download intermediary outputs.

Use React Cosmos for Building Algorithm Web Apps

We use React Cosmos to quickly create web apps for algorithms. We do this because…

  • It’s nearly zero effort, just create `*.fixture.tsx` files that export a React component and you have a new page (remember, every Graphics Debug object can become interactive with the <InteractiveGraphics /> component from the graphics-debug module!)

  • Cosmos apps can easily be deployed into preview environments with Vercel

  • Claude/ChatGPT algorithm React algorithm visualizations can generally just be downloaded and given the extension .fixture.tsx and they’ll work perfectly!

Cosmos app running, we can select different problems or setups from the sidebar

The Progression of an Algorithm Web App

The web app for an algorithm usually sucks at first, only exposing the most basic operations: the visualization and the step function. Over time, you add additional debugging and visualizations to help with understanding. Here are three algorithms in different stages of development:

Very early stage. Has one button for stepping through the algorithm and a visualization. This algorithm is for packing boxes.

This is our MatchPack algorithm. You can see it’s a little bit further along, with a table for each stage of the pipeline and the ability download the input of different stages (to debug or to build new test cases)

Our autorouter, with tables for each stage and options for animating, changing the renderer, timing, and options for adjusting the cache

The Solver Interface

In tscircuit code, “Solver” always means a class with the following methods:

  • `step()` - Iterate the algorithm just once

  • `solve()` - Step until the algorithm has been solved or fails

  • `visualize()` - Get a graphics-debug object for the current iteration that can be converted to an SVG or given as a prop to <InteractiveGraphics />

  • `.solved` / `.failed` / `.iterations` to track the algorithms progress

This is all you need to build any algorithm! This is a tried and true pattern that has allowed me to build massive algorithms! Don’t skip the visualize(), and don’t have single-step solvers (always iterate and write good visualizations for each iteration). Everything is 100x easier when you use this pattern!

Nesting Algorithms without breaking the rules

You will NEED to nest algorithms. This is critical for orchestrating a large algorithm. Sometimes when you’re iterating, you’re just calling the `.step()` function of a subsolver! Often your `visualize()` function will just be returning the result of a sub-solver, and that’s totally ok!

A step function that calls another solver

Sometimes your visualize function will just call the sub-solver’s visualize function! This is good!

Use Claude.ai for Prototyping, then Claude Code to integrate

Claude.ai (the website chat for Claude) is fantastic for creating quick visualizations and implementation prototypes of sub-algorithms. You can then copy these visualizations into a fixture file and ask Claude Code to integrate into your codebase. This allows you to build up the algorithm bit-by-bit!

Example interactive visualization built by Claude for an LED matrix gravity algorithm

Another prototype built with Claude.ai, this time I passed in the types of the objects from the project so that the algorithm would have some extra understanding of the input problem and output something that was easier for Claude Code to integrate.

Want to help us build algorithms?

tscircuit is MIT open-source and we’re currently working on many autorouting, auto-layout and packing algorithms. Join our discord to learn more!

]]><![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[KiCad Compatibility and PCB Manufacturing: Tscircuit's September Surge]]>https://blog.tscircuit.com/p/kicad-compatibility-and-pcb-manufacturinghttps://blog.tscircuit.com/p/kicad-compatibility-and-pcb-manufacturingMon, 07 Oct 2024 06:10:50 GMTIn this month's tscircuit development stream, Seve dives deep into the project's September 2024 contributions. We'll examine Embershop18's groundbreaking work on KiCad compatibility, allowing seamless conversion of tscircuit designs to KiCad format. Then, we'll explore Shibbo Software Dev's game-changing implementation of streamlined PCB manufacturing exports for JLC and PCBWay. Seve will break down the technical details of these updates, discuss their impact on tscircuit's accessibility, and showcase how these features bridge the gap between beginner-friendly design and professional-grade manufacturing. Don't miss this in-depth look at tscircuit's evolving ecosystem and the brilliant minds shaping its future.

]]><![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[Build Electronics with Typescript & React for Hacktoberfest 2024]]>https://blog.tscircuit.com/p/build-electronics-with-typescripthttps://blog.tscircuit.com/p/build-electronics-with-typescriptMon, 30 Sep 2024 06:31:38 GMTAre you ready to dive into the exciting world of open-source development? Look no further than tscircuit, one of the best projects to get started with for Hacktoberfest 2024!

tscircuit is a lanuage

tscircuit offers a unique opportunity to learn Typescript and React while exploring the fascinating realm of electronics. Don't worry if you're new to electronics – no prior experience is necessary! If you’re experienced with Typescript, we’ve got some stuff for you too!

What is tscircuit?

Think of tscircuit as "React for Electronics." It allows you to design real-world electronic circuits using Typescript and React. This is what tscircuit code looks like, instead of creating web element like “div”, you create circuit elements like “chip”, “resistor” or “capacitor”, then instead of rendering a website, we render a 3d circuit (that you can actually order!)

With tscircuit, we've even designed a fully functional keyboard! The best part? Once you've completed your design, you can export it to a manufacturer and bring your circuit to life in the real world. How cool is that?

Why We're Participating in Hacktoberfest

tscircuit is a fully MIT open-source project. We love the spirit of open-source and Hacktoberfest because we work completely in the open and share everything we do (we even do livestream development). Also:

Hacktoberfest Rewards

We’re offering some rewards to contributors during hacktoberfest, the hacktoberfest rewards are separate from our Contributor Program where you can get sponsored to work on tscircuit, but any contribution counts towards both!

For Hacktoberfest, we’re giving away hats and hoodies1, here are the requirements for each:

Image
the tscircuit hat: symbolizes grit, determination, a willingness to use React for literally anything

  • tscircuit Hoodie

    • The hoodie symbolizes you are a tscircuit rockstar contributor, thank you for your contributions!

    • at least 20 contributions in 5 different repos, at least 5 major contributions

    • We’re still designing it! But it’s going to be awesome!!!

Live Development and Code Reviews

Throughout October our lead maintainer Sev will go over and merge pull requests live on Twitch, Twitter and Youtube! He'll also be doing some live development sessions!

Want to know when our big release happens?

How you can contribute

I’m going to walk you through contributing to each project. I’ve organized the projects from Easy to Hard based on how difficult it’s been to get someone their first contribution. Generally if you’ve worked in a big Typescript codebase, the Hard issues should be no problem for you, but if you’re new to Typescript/React you should start on the Easy issues.

Help us build the largest library of schematic symbols!

Difficulty: ⭐ (easy) · Issues · Repo

tscircuit is creating the largest dataset of permissively-open schematic symbols, and we need your help to make them!

Schematic Symbols are the LIFE BLOOD of electronic design software! Help us make more!!

Medium: Glue chips to circuit boards with footprinter!

Difficulty: ⭐⭐ (medium) · Issues · Repo

Write a program that generates these pad patterns for soldering chips!

3d Modeling Chips with React with jscad-electronics

Difficulty: ⭐⭐ (medium) · Issues · Repo

Building 3d chips in React? Where do I sign up?!

Help build our tscircuit command line and web dev tool!

Difficulty: ⭐⭐+ (medium-hard) · Issues · Repo

Video coming soon! Take a look at the issues/message on discord if you need help!

Build real circuits! Help us make tutorials for getting started with tscircuit! ⭐⭐⭐

Difficulty: ⭐⭐⭐ (hard) · Issues · Repo

Video not required!

Video coming soon!

Improve the website for sharing code snippets with a built-in editor!

Difficulty: ⭐⭐⭐ (hard) · Issues · Repo

Video coming soon!

tscircuit core 🚀

Difficulty: ⭐⭐⭐ · Repo · Issues

This is the core of tscircuit, where all the magic happens. This is where technical stuff like layout, autorouting, generation of Circuit JSON and interpreting the React into classes happens.

Typescript File Format Converters

Difficulty: ⭐⭐⭐⭐ (hardcore) · Repo (kicad-converter) · Repo (circuit-json-to-gerber)

Want to go above and beyond? Make a dent in tscircuit so big that you could see it from space? Improve our file format converters! This requires good Typescript knowledge and learning other file formats used in electronics design. In short: It’s hardcore

FAQ

  • I want to work on frontend code! Where can I do that?

    • There are two major frontend projects in tscircuit, the Dev Tool (note: the repo is called “cli” but it actually has the most frontend code!) and the Snippets Website

  • I know Python, can I write Python here?

    • No! But you can learn Typescript!

  • How hard is it to contribute?

    • Some issues are easy, you don’t even need to know how to code! Other issues will require familiarity with Typescript and some dedicated time.

  • How does tscircuit work?

  • Will I get paid if I contribute to tscircuit?

    • You may be able to get sponsored if you’re eligible for the tscircuit Contributor Program (note: Github Sponsors must be enabled on your github profile, you must have at least 4 contributions, see the attached doc for more details)

  • How can I find an issue?

    • First, pick a project based on your skill level. Watch the video for the project above to understand how to get started. Then look for the tag “good first issue” on the issues page for that project.

    • I almost always recommend starting with the schematic-symbols project, it has the most issues and is the easiest to get started with. If you’re looking for more of a challenge, try jscad-electronics, footprinter the command line/dev server, or the snippets website

  • Where learn how to develop, run projects etc?

    • Usually the project will have a README that helps you run it, but almost every project works the same way where you just run “bun install” then “bun test” or “bun start”. You can install bun here

    • Check out our development live streams, they’re really helpful because you can see how Sev (the lead maintainer) works in real time!

    • If you run into bugs, you should ask an AI such as Claude or ChatGPT, they’re really good at coding and can help you with almost any question instantly!

Ready to Get Started?

We hope this introduction has sparked your interest in becoming a tscircuit contributor! Remember, we're always here to help in our Discord community and on Github Discussions. Let's make Hacktoberfest 2024 an amazing journey of learning and collaboration!

Happy hacking!

Subscribe now

1

We currently can only ship to the U.S. but we are working on shipping internationally. Stay tuned on the discord to hear when international shipping is available.

]]><![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.

]]>