Cards at Rest, Cards in Motion
Last time, we described our vision of a Web 3.0 made up of cards: universal composable experience objects representing content data that can function alone or combine with other objects directly. These cards can can be linked, addressed, referenced, embedded, saved, anywhere.
In Cardstack, as you interact with different card-based systems, you’re collecting a library of cards, representing all the things you’ve seen, like a camera roll on a smartphone. This allows you to reuse information and quickly access previous work.
But cards aren’t just reference material: they’re powerful building blocks for the Web. We’ve designed cards to be carriers of truth that can assemble with other cards, from multiple participants, to create larger experiences that can be shared and reused. That’s how we get from today’s centralized Web, ruled by overlords, to a Web that reflects the passion of many people working together.
Here’s a quick intro to some of the organization and movement principles that create order in the Cardstack Ecosystem.
Deck: Gather Cards
When building a card-based system, like a website or an application, you’ll start by creating a Card Deck. A Deck has a clear owner and in this sense is a “local” source of truth.
You build a Deck by importing data into your instance of Cardstack. As you do so, Cardstack’s Deck data model can suggest content types for your data, and give you templates for cards, or “card types,” that can represent your content. You can reuse card types, download them, or build your own.
This is a breakthrough in the way we think about website composition, combining the power of manual line-by-line coding, with the ease of something like simple drag-and-drop.
The first Deck we’ve built is called cardstack/deck, a private GitHub repository soon to be open-sourced. So far we’ve built 27 card types representing what would be the official website for the Cardstack community, and in each one of those 27 cards we have templates and JavaScript JSON:API.
Card Space: Arrange Cards
A Card Space is the real estate where cards from Decks are arranged. When a card is in a Space, it is “at rest” — behaving like an embedded widget.
A Space can be built from cards in a single Deck, or include cards from multiple Decks, including Decks with different owners. Spaces themselves can be minimized and act as cards. That means you can embed Spaces within Spaces, Spaces within cards, cards within Spaces. The general idea is that a Space is designed to represent a collective truth, built from content owned by one or more participants.
Spaces can be public, private or somewhere in between. To use a loose Web 2.0 analogy, if the Facebook web app is the “Deck,” then a Facebook profile, or the News Feed, would be examples of “Spaces”: where contributions from multiple parties come together to form a shared understanding.
Cardstack represents an evolution from Web 2.0 because cards are not tied to their Spaces, and Spaces do not change the ownership of cards. Cards that exist in Spaces can simultaneously exist in other Spaces — and still belong to their Decks and their owners. This is why we refer to cards as carriers of truth: their original integrity and ownership is not compromised as they move through the Web and perform different roles within different spaces.
Card Flow: Move Cards
How do cards get from one place to another?
If a card is “in motion,” for example, being submitted for review or getting shared with others, it enters what we call Card Flow: a state of moving in and out of Decks and Spaces. The Cardstack Framework comes with out-of-the-box tools to conduct Card Flow in a way that’ll be familiar to anyone who has used a messenger app, or a workplace collaboration tool like Slack.
If a card exists in your library, or in a Deck or a Space you control, you can use Card Flow to submit it for review, place it in another Space, share it with a friend, and so on.
Card Flow is powered by Git. This is hidden from the user: the goal of Card Flow UI is to make collaboration as easy and accessible as possible. But beneath the surface, you are merging, proposing and committing changes using a powerful distributed version control system developers use every day. In short: making open-source contributions.
4 Edges: Edit Cards
Your Card Deck, Card Space, and Card Flow let you generate, arrange and move cards. Now, let’s say you want to edit cards directly.
4 Edges gives you card editing tools, with panels you can pull in or retract from the perimeter of the card, similar to Adobe Photoshop.
Each edge provides a different capability: on your left edge you have all your different networks that are feeding in information; on the right you have your configuration panel, where you can tweak every element of the card; on the bottom you have your libraries; and on the top you have environments (where are you going to publish your work, etc.)
All 4 Edges are shared across all card-based applications, so that once you learn how to use the properties panel for one type of card, it’s the same whether you’re configuring a piece of content, a data source or configuring your wallet.
Card Physics in Action
If a card is an individual carrier of truth, then Deck, Space, Flow, and 4 Edges are states of organization and customization that work together to create a universe where cards can assemble into shared understandings. Our design system’s composability allows these understandings to be take on just about any form.
We are currently developing the next use case of the Cardstack Framework: a media registry that uses 4 Edges principles combined with Card Space, Card Flow to build a blockchain-backed platform that gives publishers, industry professionals, and artists a way to collaborate on metadata and come to consensus on ownership rights.
Card Space allows users to switch between local and collective views of song files, metadata, user profiles, agreements, and so on. Card Flow enables version-controlled collaboration: an artist’s manager submits a license, changes are suggested by lawyers, the final contract is approved or rejected by the label, before payment is fairly allocated to contributors.
These same principles can be used in a variety of use cases. For example:
Decentralized organizations — First-gen decentralized autonomous organizations (DAOs) are theoretically interesting, but are hardly usable for day-to-day work. Cardstack’s design system maps to the underlying concepts of DAOs: letting you use Decks, Spaces, and Flow to assemble content and value shared by multiple parties into an interaction space that does not belong just to one individual.
Collaborative community editing —Imagine an emergent syndication network where content creators retain ownership and value can be shared via on-chain attribution. In this case, content creators could author drafts in a private Card Deck, and submit them using Card Flow. Inside Flow, multiple users could edit, collaborate and chat, before publishing content to a public Space. Content still lives in creators’ Decks as it gets viewed, syndicated and embedded to new Spaces. If both ownership and distribution is verified on-chain, then rewards can be automatically distributed to the creators.
Trading non-fungible tokens—CryptoKitties was just the beginning. Tokenized assets and NFTs have the potential to transform the way we exchange value and information, and Card UI maps precisely to what users need to organize, use, and trade their assets while maintaining clarity around ownership. Card-based design enables experiences to be built around NFTs: from something as simple as a gallery to show off your collectibles, to networks where NFTs have utility.
I’ll expand on these ideas in an upcoming article — and talk about where we are in developing the Framework.
Learn More
- From Speculation to Utility by Chris Tse
- Growing a Healthy Software Ecosystem by Lead Developer Ed Faulkner
- How the Cardstack Framework Powers Decentralized Applications
- The Cardstack White Paper
- https://cardstack.com/
Chris Tse (@christse) is a technologist and designer. In 2014 he founded Cardstack, where he leads a team of open-source contributors to build the experience layer of Web 3.0. He previously co-founded two startups that pioneered use cases for distributed ledger technology, and has more than a decade of experience leading R&D and innovation teams for Fortune 500 companies.
