What is quid?

Quid is a tool for prototyping User Interfaces with a strong focus on real-time feedback. It allows exploring UI composition via componentization, atomic design & reuse.

It is based on a minimalistic textual language (a DSL or Domain Specific Language) to describe the essential parts of your User Interfaces discarding style & accessory aspects to focus only on interaction and contracts.

To get a quick idea of what you can build with it you can watch this short video (6 minutes).

Use Cases

Quid is been used mainly for:

  • User Interface prototyping
  • Forms design
  • Web Components Composition
  • User Interface code generation
  • Dynamically rendering quid models

How to use it

  1. Learn by changing the examples provided.
  2. Use the editor to create your UI definition. Check the language syntax, component catalog, and keyboard shortcuts.
  3. See your changes in real-time on the Preview Tab. Any errors will be shown inline.
  4. Explore the catalog to look for building bricks.
  5. Check your component structure and dependencies in the Dependencies Tab.
  6. Generate specific code to execute your design as Web Components.

Quid Syntax

Quid syntax has been designed to be minimalistic and reduce accidental complexity as much as possible. The language is indentation-based. Indentation is used represent composition.

For example:

group A
label Hello

will be rendered to:

while an indented version has a different meaning:

group A
  label Hello

and will be rendered to:

TIP: You can easily change indentation using code selection using mouse or Shift + , , , or . And then Tab for increase indentation or Shift + Tab to reduce indentation.

In Quid you can define components and views as top-level designs.

  • A component is a reusable User Interface piece. component Clock
  • On the contrary, a view is a final user interface piece (like a page) and it is built by composition using basic components or user-defined components. view UserLogin


Inside a component or view, you can add components from the catalog. You can type something like:

component Clock

Note that indentation is important here to denote label and textbox are defined inside Clock.

Presentation elements in Quid can have an optional name (anonymous controls). To add a name just place it after the control type as follows:

component Clock
    label l1
    textbox t1


Controls can have properties. To discover what properties are available for each type of control:

  • you can use the Component Catalog,
  • or use the code completion when editing pressing Control + Space (or + Space in Mac)
Sample property:

component Clock
    label l1
      text = "My label"


Controls can define events too. Subscribing to an event can be done in this way:

component Clock
  button b1
    click() => onClick()
  fun onClick()
    // button pressed

You can explore the available events in the Catalog or use code completion.

Properties declaration

Components and views can declare properties using the syntax:

component Clock
  property hour: int
  property minutes: int

Event declaration

Components and views can declare also events using the syntax:

component Clock
  event alarm(reason: string)


The Editor pane (on the left part) allows you to explore and change the UI definitions.

  • Code completion is available using the keyboard shortcut: Control + Space (or + Space for Mac).
  • Cut, copy, & paste are avaible using its standard keyboard shortcuts: Control + X / C / P.
  • Can select all text with Control + A (or + A for Mac).

The Import button allows you import quid models from text files. In the same way, the Export button will provide a text file version of the current UI definition for further use.


The Preview Pane (first tab on the right side) allows you to see the UI design. Changes done in the editor are propagated in real-time.

The IU rendering is contextual: it is based on the current component having the focus. Try to move the Editor cursor to a different top-level component to see the preview reflecting the context change.

The Preview Pane is also interactive. You can press buttons and edit fields. If events or side effects are defined, they will reflect on the rendering.


The Catalog Pane (second tab on the right side) contains a quick reference for available controls.

The one defined by you will be included here also with the primitive ones.

The catalog allows you to filter controls and once selected presents: the properties, types, events, and documentation related to the selected component.

TIP: You can drag & drop a component from the catalog's list to the Editor. (it will be inserted at the latest cursor position).


The Dependencies Pane (third tab on the right side) shows a quick dependency graph for the selected component.

This pane is also contextual: it is based on the current component having the focus. Moving the Editor cursor into a different top-level component will refresh the Dependency Pane.


The Generation Pane (fourth tab on the right side) provides tools for code generation.

The UI specification can be converted to concrete source code in a given programming language and concrete framework.

This is still a work in progress feature, but you can start to see how it will look like with the following target platform as output:

  • Native Web Components

After selecting a platform for code generation, you can explore the output files inline or download a zip with the full source code.



Planned top features for Quid include:

  • Import components into the catalog from 3rd party components.
  • Refine code generation for detailed Web Component implementation.
  • Add more target platforms like Angular Elements, Polymer, etc.

Ideas are welcomed!


Quid is under active development by Metadev.

We would love to have your feedback about it. Let us know if:

  • Find it useful?
  • Have a different use case?
  • Requesting features?
  • Any bug found?
  • Documentation incomplete?

Help us to make it better & tell us.