60 lines
1.9 KiB
Plaintext
60 lines
1.9 KiB
Plaintext
|
---
|
||
|
|
title: Create a new block
|
||
|
|
icon: screwdriver-wrench
|
||
|
|
---
|
||
|
|
|
||
|
|
<Frame style={{ maxWidth: '400px' }}>
|
||
|
|
<img
|
||
|
|
src="/images/contribute/forging-robot.png"
|
||
|
|
alt="A blue robot forging a new block"
|
||
|
|
/>
|
||
|
|
</Frame>
|
||
|
|
|
||
|
|
Creating a new block on Typebot is pretty easy and straightforward using our in-house framework [The Forge](../the-forge/overview).
|
||
|
|
|
||
|
|
1. [Install the project locally](./local-installation)
|
||
|
|
2. Create a new branch:
|
||
|
|
|
||
|
|
```sh
|
||
|
|
git checkout -b MY_BRANCH_NAME
|
||
|
|
```
|
||
|
|
|
||
|
|
3. Create your new block using the [Forge CLI](../the-forge/overview#forge-cli):
|
||
|
|
|
||
|
|
```sh
|
||
|
|
pnpm run create-new-block
|
||
|
|
```
|
||
|
|
|
||
|
|
4. The files should be generated in `packages/forge/blocks/YOUR_BLOCK_NAME`
|
||
|
|
5. Add the block SVG logo in `packages/forge/blocks/YOUR_BLOCK_NAME/logo.tsx`
|
||
|
|
6. Right away you should be able to [run the application](./local-installation#running-the-project-locally) and see your newly created logo in the sidebar of the editor.
|
||
|
|
7. Create a new action in the `packages/forge/blocks/YOUR_BLOCK_NAME/actions` folder. See [Action](../the-forge/action) for more information.
|
||
|
|
8. List this action in the `actions` array in `packages/forge/blocks/YOUR_BLOCK_NAME/index.tsx`
|
||
|
|
9. To go further, check out the [Forge documentation](../the-forge/overview).
|
||
|
|
|
||
|
|
Make sure to check out other blocks implementations in the [packages/forge/blocks](https://github.com/baptisteArno/typebot.io/tree/main/packages/forge/blocks) folder.
|
||
|
|
|
||
|
|
## Live tutorials
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
position: 'relative',
|
||
|
|
paddingBottom: '64.63195691202873%',
|
||
|
|
height: 0,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<iframe
|
||
|
|
src="https://www.loom.com/embed/c49ced0c2c394751b860458b7eb904a4?sid=58e36bc9-f715-434c-b85c-e5acf6c96454"
|
||
|
|
allowFullScreen
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
}}
|
||
|
|
></iframe>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
Make sure to join our [Discord community](https://typebot.io/discord) to participate to these weekly office hours.
|