Seam is a community-developed app to code, design, and curate perfect social spaces. This means that we are all building it together! If a feature doesn’t exist on Seam, you can code it yourself and then ship it so that everyone else can use it.

The core piece of sharing on Seam is the miniapp. Miniapps are tiny playgrounds, allowing you to create content. When you’re done, you make a post. For example, the Pixel Art miniapp allows you to become a pixel artist, and then share the final masterpiece as a post. The sharing can either be to decorate your profile page (on desktop), or as a post on your wall.

Miniapps create posts.


Creation

A miniapp is a creative canvas.

A miniapp is a creative canvas.

Miniapps live in the Seam composer so you can use them to create posts.

Miniapps live in the Seam composer so you can use them to create posts.

Consumption (Posts)

Posts decorate your profile, or share with your friends. credit: https://www.seam.so/Aternym

Posts decorate your profile, or share with your friends. credit: https://www.seam.so/Aternym

Untitled

A good rule of thumb for thinking about what makes a good Seam miniapp is: would it create a fun post in my feed? Initial examples of miniapps are the giphy miniapp, which allows you to choose a gif, and several text miniapps, such flashing or scrolling text.

How do Miniapps work?

You can get started making your first Seam miniapp using our Github repository (easier online code editing is coming soon!). There are two views you need to customize for your experience: the renderEditModal, which is the creation view, and the render which is the consumption view.

The Miniapp

The main goal of the miniapp renderEditModal function is to get people to create something, and then store that data to be rendered later as a block. Some miniapps are very simple: the text miniapp just has a field for text input, and when the done button is pressed, it stores the text. Some miniapps are more complicated: the Pixel Art miniapp has an entire canvas for the user to play with, and it stores a data blob of what the canvas should look like.

Seam gives you as the developer a handy data model, the BlockModel, which is a dictionary (key-value store) allowing you to store any string at the key you specify. When you call the done function with your updated model, we take care of storing the data in our servers, and making sure that only that user can come back later and edit it. You don’t have to worry about databases, user authentication or permissions — we take care of all of that.

The Post

The main goal of the post render function is to show the media from the data we stored earlier. The first job is to pull the data out of the model at the keys you setup earlier. For example, for the text miniapp, you’ll find your text from the model.data["text"]. More complicated posts can use more keys to store more data. Finally, you’ll need to render your post view using that data. These are React components, so most Typescript works well here. Simple posts can be rendered with HTML tags like <img>, and more complicated posts can use React packages to pull in more advanced functionality.

What’s next?

Jump into our Seam Miniapp Idea List , read the Building Seam Miniapps tutorial to get starting making them, and unleash your creativity! We’re so excited to see what you make.