Our open source tech

We are a company with an open source development model, and we believe working in the open is the best way to deliver higher-quality software. Our culture is built on openness and transparency, and we value your technological independence .

Tech level 1: The foundations

A Web design system description format

Each design system is fully and statically described with structured data, easily writable in JSON or YAML. Each design system can contains UI components, but also styles utilities, themes, CSS variables and examples.

Those descriptions are used by the rendering service, and exposed by the Definition API.

id: card
label: Card
group: Content
slots:
  body:
    label: Card body

A renderable payload format

An universal render API for the Web, based on fully described design systems. Both serializable in JSON and usable using the host languages primitive data types.

We kept it compact (around 12 keywords) and high-level (the keywords are mostly UI concepts, related to the description format: components, styles, theme...).

{
    "@component": "card",
    "@variant": "horizontal",
    "header": "Card title",
    "content": {
      "@element": "p",
      "@content": "Welcome!"
    }
}

A templating language for components

Nothing fancy. We took Jinja, the industry standard, and did some light changes: removal of harmful filters and functions, identifications of slots filters and props filters, and a few additions.

Very easy to learn. Such a limited and focused language was chosen because powerful languages inhibit information reuse .

<div {{ attributes|add_class("slider") }}>
{% for slide in slides %}
    <div class="slider__slide">
    {{ slide }}
    </div>
{% endfor %}
</div>

Tech level 2: Processing and packaging

A prebuilder tool

Prepare a design system written in the native Dilla format to be processed by the build pipeline.

Generate build.rs, tests files, the full artefact definition and the specific JSON schema. Extract static assets & templates.

design_system = DesignSystem(src)
FileSystemManager.
  prepare_target(target)
data = design_system.data
rust_generator = RustGenerator()
rust_generator.
  generate(data, src)

A high performance rendering engine

The service is crawling the payload received from the render API to generate the expected markup, and is built around a custom formatter for MiniJinja.

We chose Rust for its safety, the compactness of the builds, and its support of WebAssembly compilation target.

use minijinja::{
    escape_formatter,
    value::{Value, ValueKind},
    AutoEscape, Environment,
    Error, Output, State,
};
use std::collections::HashMap;

Tech level 3: The next step

Some upcoming magic from our secret laboratory.