Introduction

Milda is a visual editor where you design your own design system and generate a real, multi-platform component library from it. This is the documentation for the Milda ecosystem itself — what the pieces are, how they fit together, and how to ship with them.

#The idea in one sentence

Milda is a compiler with a visual front-end. You author components and design tokens in the Studio; everything you author is captured in a platform-neutral intermediate representation — the IR; and generators turn that IR into real code, starting with a React component library.

Because the source of truth is the IR rather than any one framework's code, the same design system can target multiple platforms without being rewritten by hand. The editor never asks you to write the IR — the GUI produces it.

#The pipeline

Every part of the product maps onto a classic three-stage compiler. This framing drives the whole architecture:

• Front-end — the visual editor. You compose components and tune foundations. Authors never hand-write the IR.
• IR — the canonical model. A platform-neutral description of your design system: components, structure, contracts, foundations. The single, durable source of truth.
• Back-ends — generators. Turn the IR into real output. React first; other targets build on the same model.

Read How Milda works for the pipeline in depth.

#What ships first

The first release is deliberately narrow: design in the editor, generate a React component library that is a drop-in replacement for your current components, and install it from a private registry — no eject, no hand-editing generated code. That “drop-in” bar is the sharpest proof the model works.

#The pieces

#These docs are alive

The illustrations throughout this site aren't screenshots. Many are the real Studio components, imported from the editor package and running right on the page — you can try them. See the Foundations editor and the editor runtime for live, interactive examples.

New here? Start with the Quick start.