Many people ask how to make cool miniapps like the ones that already live inside the Seam editor. The answer is React components. It is simple to learn and anyone can do it. You don't need to already be a programmer, and you can use the examples of other blocks that already exist to get started.

We've made it easy to make a new miniapp, and then publish it live so that anyone else in the world can use your new creation, too. We're all building this together!

You can find the Block SDK on Github, or read on to learn how to create your first Seam block.

https://www.loom.com/share/661a15d8dbcf47929f7d4fdcdc8b6194?sid=6d1ea29f-8984-491d-9bd7-463cb4322dd3

Installation

Let's go to the miniapp SDK and clone that into our local repository.

git clone <https://github.com/seam-xyz/Block-SDK.git>
cd Block-SDK

Once we've cloned it, we'll do yarn install to grab all of our local dependencies.

yarn install

And then finally after that, we have a really handy script called Seam Magic. Running the Seam Magic script will get you set up with everything you need to create your first blocks.

./seam-magic.sh

Just three questions to answer about your new masterpiece.

https://s3.amazonaws.com/charm.public/user-content/83721963-d517-4a06-8270-e0906873d71c/480677c4-6de0-42d0-9abd-f0ebc7b95cf9/Screen-Shot-2023-04-17-at-5.01.27-PM.png

Deciding what your block will be called is how users will see your block show up inside of the Seam editor. Choose a name that has spaces that will be obvious at first glance what your block does.

https://s3.amazonaws.com/charm.public/user-content/83721963-d517-4a06-8270-e0906873d71c/8ae6267d-7a44-42d0-b9ab-579186a67821/Screen-Shot-2023-04-17-at-5.02.19-PM.png

Next, the 1word description title of our block, used in the code generation to create a new block file for you to write into.

Finally, the description for the block, which you can also see above how it will look inside the Seam editor.

https://s3.amazonaws.com/charm.public/user-content/83721963-d517-4a06-8270-e0906873d71c/50aebe77-ad00-4dad-8c96-506324f930b5/Screen-Shot-2023-04-17-at-5.07.14-PM.png

Writing Our New Block

As an example, I'll be making a Feelings block. This block is a way for users to add their feelings to their profile, like early Facebook. When the script finishes, you'll have an empty block file that looks like this: