Microlink Cards:
Under the hood

April 6, 2021 ()

Even some knew about this service almost one year ago , has been officially today.
During this time, Microlink Cards has been refined until reaching its final form, taking some engineering decisions under the hood.
There are some decisions worth to mention, specially when you're building things at scale.

The online editor

Microlink Cards claims to use an online code editor.
How real is that? A code editor can be huge and hard to embed in a web application.
Well, Microlink Cards is using which is a core component used by , meaning you will have the same code editor features, like autocomplete, among others.
Although Monaco Editor is lighter than it may seem, it has to load asynchronously to prevent blocking the rendering step in a web browser.
We found a very well React wrapper that handles the setup process in a simple way.
We combined it with for rendering the code in a live preview mode, giving you the instant code change experience and making it possible to load React components inside the embedded code editor. How crazy is that?

State without database

We wanted to avoid any database interaction since it will introduce a failure point and extra cost in terms of money and maintenance.
If you don't have a database, you don't need to maintain it.
Every time you do a code or data change, it will be encoded on the query parameters, generating a unique URL to retrieve the state.
https://cards.microlink.io/editor?color=white&bg=black
That's great for data, but what about code? can we encode all the editor code inside the query parameters?
Well, you can do it, but that will produce so long URLs:
https://cards.microlink.io/editor?code=%3C%3E%0A++%3CBox%0A++++as%3D%27header%27%0A++++sx%3D%7B%7B%0A++++++position%3A+%27absolute%27%2C…
We didn't find an official but looks like it could be around 2,000 characters. Also, we are not particularly interested in long URLs, they look terrible.
In order to minimize the size of the URLs, we apply a compression algorithm, being one of the best for JSON payloads.
import createMsgpack from 'msgpack5'
import URLSafeBase64 from 'urlsafe-base64'

const msgpack = createMsgpack()

export const marshall = (value) => URLSafeBase64.encode(msgpack.encode(value))

export const unmarshall = (value) => msgpack.decode(URLSafeBase64.decode(value))
MessagePack will take the query parameters object as input, generating a compressed buffer representation as output.
It's important to note that MessagePack will produce a buffer of binary data as output and it isn't safe to encode it directly as part of the URL payload.
Instead, it should be encoded into in order to retrieve the state with no data mutations.
The Base64 representation will increase the size ~33%, but even with that, MessagePack is still worth it.

The image generation

Lastly, Microlink Cards is part of the ecosystem.
Microlink's mission is to provide cloud-based browsers, ready to be used for end-users to enable any browser flow, such as taking a screenshot, getting full HTML, generating PDF, and more.
Here it is the inception: Microlink Cards is a product built using Microlink.
You can see Microlink Cards as a free canvas to draw any image composition that generates a unique URL.
That URL is provided to enabling feature to produce an image as output, distributed over .

Join the community

All of these improvements or features are community driven: We listen to your feedback and act accordingly.
Whether you are are building a product and you need fancy previews, you’re an indie hacker or simply you like frontend stuff, come with us 🙂.