Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 47 additions & 24 deletions docs/guides/importing-modules-and-chips/importing-from-jlcpcb.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,54 @@ import YouTubeEmbed from '../../../src/components/YouTubeEmbed';

## Overview

JLCPCB has a massive component catalog of 3d models and footprints.
JLCPCB maintains a massive component catalog with 3D models and footprints for thousands of parts. You can import these components directly into your tscircuit projects using several methods.

## Web Import
## Import Using Editor Locally

The easiest way to import JLCPCB components is using the editor's built-in import dialog when running `tsci dev`. This provides a modern search interface with real-time stock information.


<figure>
<img src="/img/runframe-cli-setup.png" />
<figcaption>Run `tsci dev` to start the development server</figcaption>
</figure>

<figure>
<img src="/img/runframe-import-dialog.png" />
<figcaption>In the tsci dev environment, navigate to "File -> Import"</figcaption>
</figure>

<figure>
<img src="/img/runframe-jlcpcb-search.png" />
<figcaption>Go to the JLCPCB Parts tab and search by part number (e.g., 'C5100227') or keyword (e.g., 'ESP32')</figcaption>
</figure>

<figure>
<img src="/img/runframe-jlcpcb-results.png" />
<figcaption>Select component and click Import</figcaption>
</figure>

<YouTubeEmbed youtubeId="tFCGAa81KUs" />

After importing, you can use the component in your circuit like this:

### Example Usage

```tsx
import { ComponentName } from "@tsci/imported-component"

export default () => (
<board width="10mm" height="10mm">
<ComponentName />
</board>
)
```

:::tip Tip
Using File > Import from the editor locally is recommended
:::

## Import Using Web UI

You can import JLCPCB components on [tscircuit.com](https://tscircuit.com). After
importing the snippet, it'll be given a package name like `@tsci/YOUR_NAME.CHIP_NAME`
Expand Down Expand Up @@ -53,25 +98,3 @@ export default () => (
</board>
)
```


## CLI Import

To import JLCPCB components using the tsci dev environment, follow these steps:

1. Run `tsci dev` to start the development server
2. In the tsci dev environment, navigate to "File -> Import"

<YouTubeEmbed youtubeId="tFCGAa81KUs" />

After importing, you can use the component in your circuit like this:

```tsx
import { ComponentName } from "@tsci/imported-component"

export default () => (
<board width="10mm" height="10mm">
<ComponentName />
</board>
)
```
Binary file added static/img/runframe-cli-setup.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/runframe-import-dialog.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/runframe-jlcpcb-results.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/runframe-jlcpcb-search.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.