[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73909":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":15,"starSnapshotCount":15,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},73909,"tscircuit","tscircuit\u002Ftscircuit","Create real electronics with Typescript and React","https:\u002F\u002Ftscircuit.com",null,"TypeScript",2242,278,9,20,0,4,21,62,12,84.04,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33],"cad","eda","electronics","engineering","hacktoberfest","kicad","react","typescript","2026-06-12 04:01:12","# tscircuit - React for Circuits\n\nMake electronics using Typescript, React, and AI tools.\n\ntscircuit makes developing electronics like web development. Edit code in your favorite IDE and watch the changes\ncreate electronics in realtime. When you're done, [export your project and manufacture](https:\u002F\u002Fdocs.tscircuit.com\u002Fguides\u002Funderstanding-fabrication-files)!\n\nGet started by running `npm install -g tscircuit`! [(CLI quickstart doc)](https:\u002F\u002Fdocs.tscircuit.com\u002Fintro\u002Fquickstart-cli)\n\n\u003Cdiv>\n\u003Ca href=\"https:\u002F\u002Ftscircuit.com\u002Fjoin\" target=\"_blank\">Discord\u003C\u002Fa>\n·\n\u003Ca href=\"https:\u002F\u002Ftscircuit.com\" target=\"_blank\">Website\u003C\u002Fa>\n·\n\u003Ca href=\"https:\u002F\u002Fdocs.tscircuit.com\" target=\"_blank\">Docs\u003C\u002Fa>\n·\n\u003Ca href=\"https:\u002F\u002Fblog.tscircuit.com\u002F\" target=\"_blank\">Blog\u003C\u002Fa>\n·\n\u003Ca href=\"https:\u002F\u002Ftscircuit.com\u002Fplayground\" target=\"_blank\">Online Playground\u003C\u002Fa>\n·\n\u003Ca href=\"https:\u002F\u002Fdocs.tscircuit.com\u002Fquickstart\" target=\"_blank\">Quick Start\u003C\u002Fa>\n·\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Ftscircuit\u002Fissues\" target=\"_blank\">Issues\u003C\u002Fa>\n·\n\u003Ca href=\"https:\u002F\u002Fx.com\u002Ftscircuit\" target=\"_blank\">Twitter\u003C\u002Fa>\n·\n\u003Ca href=\"https:\u002F\u002Fdocs.tscircuit.com\u002Fllms.txt\">llms.txt\u003C\u002Fa>\n·\n\u003Ca href=\"https:\u002F\u002Fshare.cleanshot.com\u002FXkJKK2ys\">Getting Started Contributor Video\u003C\u002Fa>\n\n\u003C\u002Fdiv>\n\u003Cbr\u002F>\n\n\u003Cdiv style=\"display: flex; gap: 10px\">\n  \u003Ca href=\"https:\u002F\u002Fconsole.algora.io\u002Forg\u002Ftscircuit\u002Fbounties?status=completed\">\n       \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2Ftscircuit%2Fbounties%3Fstatus%3Dcompleted\" alt=\"Rewarded Bounties\">\n   \u003C\u002Fa>\n   \u003Ca href=\"https:\u002F\u002Fconsole.algora.io\u002Forg\u002Ftscircuit\u002Fbounties?status=open\">\n       \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2Ftscircuit%2Fbounties%3Fstatus%3Dopen\" alt=\"Open Bounties\">\n   \u003C\u002Fa>\n  \u003Ca target=\"_blank\" href=\"https:\u002F\u002Ftscircuit.com\u002Fjoin\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDiscord-tscircuit.com\u002Fjoin-%235865F2\" alt=\"Join TSCircuit on Discord\">\u003C\u002Fa>\n  \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Ftscircuit\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Ftscircuit\" alt=\"NPM Version\">\u003C\u002Fa>\n  \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Ftscircuit\u002Fstargazers\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Ftscircuit\u002Ftscircuit\" alt=\"GitHub Stars\">\u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003C\u002Fdiv>\n\n\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fe0fc9f05-691f-422e-816a-1854c4ffc02d\n\n\n\n\n1. [What is tscircuit?](#about-tscircuit)\n2. [Examples](#example-circuits)\n3. [Getting Started](#getting-started)\n4. [Features](#more-features)\n5. [FAQs](#faq)\n6. [Development Sub-Projects \u002F Organization](#development-sub-projects--organization)\n7. [Other Links](#other-links)\n\n---\n\n## What is tscircuit?\n\n`tscircuit` is a library complemented by a registry, package manager, command line tool and AI electronic design suite that makes it easy to create, share, export and manufacture electronic circuits. It uses\n[React Fiber](https:\u002F\u002Fdocs.pmnd.rs\u002Freact-three-fiber\u002Fgetting-started\u002Fintroduction) to render circuits into web pages.\n\nThink 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!)\n\nUsing tscircuit, you can design things like a \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fblog.tscircuit.com\u002Fp\u002Fbattling-jlcs-assembly-interface\" target=\"_blank\">fully functional keyboard!\u003C\u002Fa> Once you've completed your design, you can export it to a manufacturer and order a real, functional circuit board!\n\n## Example Circuits\n\n- [ESP32 Wifi Breakout Board](https:\u002F\u002Ftscircuit.com\u002Fseveibar\u002Fwifi-test-board-1)\n\n```tsx\nconst Circuit = () => (\n  \u003Cboard width=\"50mm\" height=\"50mm\" center_x={0} center_y={0}>\n    \u003CMySubcomponent name=\"U1\" center={[0, 0]} footprint=\"sot236\" \u002F>\n    \u003Cresistor\n      x={2}\n      y={-0.5}\n      name=\"R1\"\n      resistance=\"10ohm\"\n      footprint=\"0805\"\n      pcb_x=\"4mm\"\n      pcb_y=\"-1mm\"\n    \u002F>\n    \u003Cground x={3} y={1} name=\"GND\" \u002F>\n    \u003Ctrace path={[\".U1 > .D0\", \".R1 > .left\"]} \u002F>\n    \u003Ctrace path={[\".R1 > .right\", \".GND > .gnd\"]} \u002F>\n  \u003C\u002Fboard>\n)\n```\n\n![Example Circuit Rendering](.\u002Fdocs\u002Fexample_render.png)\n\n## Getting Started\n\nYou can do everything you need to do with `tscircuit` using the [`tsci`](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Fcli) command line tool.\n\n```bash\nnpm install -g tscircuit\n\ntsci dev\n```\n\n> Open your browser to http:\u002F\u002Flocalhost:3020!\n\n> ![tsci Server Preview](.\u002Fdocs\u002Fexample_preview.png)\n\n## More Features!\n\n- [x] Preview PCBs & Schematics in your browser\n- [x] Use normal Typescript\u002FReact tooling\n- [x] Export Gerbers, Pick'n'Place and BOM for manufacturing\n- [x] Add [registry packages](https:\u002F\u002Ftscircuit.com\u002F) with `tsci add`\n- [x] Publish subpackages to the registry with `tsci push`\n- [x] Simplified, extensible auto-routing for PCBs\n- [x] Import footprints and components from third-party sites \n- [x] Generate footprints from text [using AI](https:\u002F\u002Ftext-to-footprint.tscircuit.com)\n\n## FAQ\n\n### Is tscircuit free?\n\ntscircuit is completely free and MIT-licensed open-source\n\n### How does this work?\n\ntscircuit uses the same thing that React Native and [react-three-fiber](https:\u002F\u002Fdocs.pmnd.rs\u002Freact-three-fiber\u002Fgetting-started\u002Fintroduction) use to render to mobile or 3d to render PCBs and schematics (it's called [React Fiber](https:\u002F\u002Fgithub.com\u002Facdlite\u002Freact-fiber-architecture)!)\n\nYou can render schematics or PCBs in any React project like this:\n\n```tsx\nimport { Schematic } from \"@tscircuit\u002Fschematic-viewer\"\n\nexport const MyApp = () => (\n  \u003Cdiv>Regular web react here!\u003C\u002Fdiv>\n  \u003CSchematic>\n   \u003Cresistor name=\"R1\" resistance=\"10k\" \u002F>\n  \u003C\u002FSchematic>\n)\n```\n\ntscircuit has a bunch of extra tools and exports in the command line, so it's a bit easier to use `tsci dev` to develop circuits (you can always publish and import them later)\n\n### Can I test this in my browser?\n\nYes! There is a [playground tool!](https:\u002F\u002Ftscircuit.com\u002Feditor)\n\n### Do I have to specify the position of every component?\n\nCurrently you should specify `pcbX`\u002F`pcbY` for components (and nest inside `\u003Cgroup \u002F>`s for convenience!)\n\nWe are working on building the equivalent of \"flex\" and \"CSS Grid\" autolayout algorithms\nfor PCBs. Wherever an automatic placement is made, you'll be able to override it.\n\n### Is the auto-routing good?\n\nWe are working towards a state-of-the-art web-based autorouting algorithm. You can follow the\nprogress of our autorouter development on [autorouting.com](https:\u002F\u002Fblog.autorouting.com)\n\n### I found a bug or have an idea for a feature, what should I do?\n\nPlease [create an issue](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Ftscircuit\u002Fissues)!\n\n### How can I follow along?\n\n- [@seveibar](https:\u002F\u002Fx.com\u002Fseveibar) is the main author, he tweets about tscircuit and does [development livestreams](https:\u002F\u002Fwww.twitch.tv\u002Fseveibar)\n- [@tscircuit](https:\u002F\u002Fx.com\u002Ftscircuit) for major tscircuit releases, features and discussions\n- [tscircuit discord](https:\u002F\u002Fdiscord.gg\u002F6X3PYhtj) and [tscircuit campfire](https:\u002F\u002Ftscircuit.com\u002Fcommunity\u002Fjoin-redirect)\n\n---\n\n## Development Sub-Projects \u002F Organization\n\ntscircuit includes a lot of different independently-runnable sub-projects. Here's\na quick guide to navigating all of the sub-projects:\n\n### Core Libraries\n\n| Project                                                                      | Description                                                                                              |\n| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |\n| [tscircuit](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Ftscircuit)                          | The main package, packages up everything into a single version                                           |\n| [@tscircuit\u002Fcore](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Fcore)                         | A typescript-native library for building circuits (no React). Converts typescript into \"the circuit-json format\" |\n| [@tscircuit\u002Fcli](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Fcli)                           | The tscircuit command line tool `tsci` and development environment                                       |\n| [@tscircuit\u002Ftscircuit.com](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Ftscircuit.com)       | The main website, playground and online development environment for tscircuit                            |\n| [@tscircuit\u002Fschematic-viewer](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Fschematic-viewer) | The Schematic renderer                                                                                   |\n| [@tscircuit\u002Fpcb-viewer](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Fpcb-viewer)             | The PCB renderer                                                                                         |\n| [@tscircuit\u002Freact-fiber](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Freact-fiber)           | Bindings from builder to React, React types                                                              |\n| [@tscircuit\u002Frouting](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Frouting)                   | Routing algorithms for schematic and PCB traces                                                          |\n| [@tscircuit\u002Fautolayout](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Fautolayout)             | Layout algorithms for schematics                                                                         |\n| [@tscircuit\u002Ffootprinter](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Ffootprinter)           | DSL for creating footprints                                                                              |\n| [kicad-mod-converter](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Fkicad-mod-converter)      | Convert kicad_mod files to and from JSON                                                                 |\n| [@tscircuit\u002Fkicad-viewer](https:\u002F\u002Fgithub.com\u002Ftscircuit\u002Fkicad-viewer)         | View the KiCad official footprints online                                                                |\n\n## Other Links\n\n- [tscircuit.com](https:\u002F\u002Ftscircuit.com\u002F) - The official tscircuit website, registry and playground\n- [discord](https:\u002F\u002Ftscircuit.com\u002Fcommunity\u002Fjoin-redirect) - Join the community server where all the primary conversations happen\n- [@seveibar](https:\u002F\u002Fx.com\u002Fseveibar) - Twitter for author of tscircuit with dev sessions and upcoming features\n","tscircuit 是一个使用 TypeScript 和 React 创建实际电子电路的项目。它通过将电路设计转化为类似网页开发的体验，使用户能够在熟悉的IDE中编辑代码并实时查看电路变化。核心功能包括利用React Fiber技术在网页上渲染电路图、支持AI工具辅助设计以及提供从设计到制造的全流程解决方案。适用于需要快速原型设计和迭代的电子工程项目，特别是对于熟悉前端开发但对传统EDA工具不太了解的工程师来说，tscircuit 提供了一种更直观简便的方式来探索和实现电路设计想法。",2,"2026-06-11 03:47:51","high_star"]