Skip to main content

Getting Started

Welcome to Zint documentation!

Let's get started by launching your first React component in Zint's terminal.

Install Zint​

Zint consists of 3 main parts.

  • the Zint MacOS application : This is the application itself that you will launch and use, which contains the terminal and the engine to load React components

  • the zint binary : This is the 'zint' command that you can invoke by typing 'zint' on the terminal. You need to install it on the machines where you execute your commands. You will probably need one for your mac, but you can also deploy it on linux machines, to use over SSH.

  • Some React components (micro-frontends) packaged for zint for the display. We provide a few starter ones, and there is a chapter on how to build your own here

All these can be found on Zint website's Download page along with instructions to install.​

Using Zint​

The typical usage of zint will be to pipe some command and pipe it's stdout to zint <Component name>

some command --generating data | zint $COMPONENT_NAME

Example : Let's display an SVG file from the terminal!​

tip

if no component name is specified, Zint will create an iframe and try to guess the mime type of the data.

We'll get Zint's logo from the web and display it : 

curl -s https://www.zint.app/assets/images/zinticon1024.svg | zint # "zint" is equivalent to "zint iframe"

and this should appear:

a Zint logo appears, too big to fit inside the window

Let's do a pipeline now!​

It appears that the logo has a 1024x1024 size, which is too big to fit in our window. Let's use a pipeline and sed to replace the size by 250px before displaying it, and while we're at it, let's change its color too:

curl -s 'https://www.zint.app/assets/images/zinticon1024.svg' \
| sed -e 's/"1024px"/"250px"/g' -e 's/#38B2AC/#ff0000/g' \
| zint

and here we go:

Zint logo has been reduced to 250px

note

We successfully combined the flexibility of the UNIX pipeline to get and process the data we wanted, with the capabilities of the web browser to display it! This is what Zint is all about.

Important notice!​

warning

You may have noticed the -s option in curl, which stands for silent and will tell curl not to display its download progress. This is because the data is transmitted from zint (the binary) to Zint (the application) through the terminal itself (by printing invisible escape codes). In order not to interfere with those codes, it's important that zint is the sole writer to the terminal. indeed, if other data is written to the terminal it might corrupt the data received by the application.

Zint will try to mitigate this issue in the future (for example with data redundancy and repair mechanisms) as good as possible but there is no definitive fix for this limitation, so this is something to keep in mind.

Great! We already know how to display files from almost all formats that a browser can display!

Let's now move on to interactive UIs with the basic tutorials.