Welcome to our docs site!

You'll find here all the necessary information about our universal format for describing user interfaces (UIDL) and about our open-source code generators (opens new window). They are the underlying infrastructure on top of which we're constructing our ecosystem of automated user interface building tools.

The teleportHQ (opens new window) ecosystem is an open source project that provides code generation capabilities for a wide range of tools and platforms.

The main areas of this documentation are:

• Guides - where you will find some quick examples of how to use our technology
• UIDL - the standard representation we propose for modern UIs
• Component Generators - find out more about the internals of the code generation process
• Project Generators - check out the way in which projects are put together and deployed
• Community - the space for friends, contributors and people interested to join the ride
• Team - find out more about the company behind the project

UIDL

All user interfaces serve the same purpose: allow for an interaction between a human and a machine.

Functionally speaking, the vocabulary of human-machine interaction is well defined. No matter the medium or the technology used behind it, a user interface will likely be built with a dozen atomic visual elements such as: titles, paragraphs, inputs, images, videos, links, buttons, etc., and a couple of meaningful compositions of these elements such as lists, tables, forms and menus.

However, over time the number of channels has increased dramatically (web, mobile, tablets, tv, AR/VR) and the number of technologies used for each of those channels as well. This has resulted in an increased human time cost of building a user interface and distributing it to each channel while providing no extra value for the end user.

This is why we have decided to search for a solution which would allow us to focus more on the what and worry less about the how.

Like others before us, we decided to work on a universal format that could describe all the possible scenarios for a given user interface. This format allows us to:

• generate the same user interface with various tools and frameworks
• transition from one code output to another without effort
• enable efficient and advanced programmatic manipulation

We have named our universal format "User Interface Definition Language" (UIDL). It is represented by a human-readable JSON document, a format supported natively by many programming languages.

WARNING

The UIDL format is intended to be an intermediary format between creation tools and the teleport code generators. While the JSON format is editable and writable by humans, this is not the intended use.

Although at the beginning the role of the UIDL seemed to be limited to describing the UI elements and their relationship, we are now confident that we can use it also to describe user interactions, flows, events, and more complicated UI patterns based on component architectures and dynamic data driven applications.

For more details, jump to the UIDL section of the docs.

Code Generators

The web platform did not embrace visual editors as the standard way of building UIs. However, we believe code generation is the future and we're dedicating a lot of effort in engineering scalable, extensible and reusable code generation tools.

The teleport code generators output modern code in files linked together by with the ES Modules standard. The philosophy of code generation revolves around the idea of splitting the interface into components, a common approach of structuring modern interfaces.

For more details, jump to the generators section of the docs.

REPL

We developed a small REPL online tool (opens new window), where you can play around with various examples of UIDLs and check the generated code in different flavors.

Get Involved 💕

This is an open invitation to the entire community to join us in exploring the future of building interfaces!

Keep in mind that there's a lot of work in progress, and many things still need to be done. Our roadmap is public and you can follow it on the Github repo (opens new window).

We're also super interested in listening to your feedback and suggestions. Please feel free to get in touch with us on Twitter (opens new window) or over email. Even better, if you are in love with the topic, you could join our wonderful group of OSS contributors and build magic with us!