Today we’re introducing the Component Interchange Format (CIF) — an open specification for describing UI components in a way that’s independent of any rendering framework.
What is CIF?
CIF is a JSON-based schema that captures everything about a component:
- Structure and layout
- Props and their types
- Design tokens
- Variants and responsive behavior
- Composition patterns (slots)
Why Another Format?
Existing component formats are tightly coupled to their rendering frameworks. A React component can’t run in Vue. A Svelte component can’t run in Angular. CIF sits above all of these — it describes what a component is, not how it renders.
{
"name": "Button",
"version": "1.0.0",
"props": {
"variant": {
"type": "enum",
"values": ["primary", "secondary"]
}
}
}From this single definition, Servly generates native React, Vue, Svelte, Angular, or Solid components — each using framework-native patterns and idioms.
Get Involved
CIF is an open specification. We welcome feedback, contributions, and adoption: