TeleportHQ

Generate web pages using text and image prompts, edit results visually, use prompts again to update and improve the layout, instantly deploy your website

Comment

Inspiration

Our story starts in 2017, driven by the desire to reimagine how we interact with technology. We envisioned a future where interfaces could be created effortlessly, either through your voice or simple gestures. This dream was born from the frustration of repetitive design tasks and the realization that automation could empower creativity. Over the years, this vision evolved into TeleportHQ, a platform designed to transform how developers and designers collaborate and build digital products.

In 2017 we daydreamed of a conversational experience for creating websites. Our first attempt has been with IBM Watson but the technology was not ready yet.

In 2018 we've build our own image-to-text engine. In 2020 we've built our own GPT engine Our final vision is a voice and hands interaction in an AR environment

What it does

TeleportHQ is a collaborative front-end platform that enables teams to design, prototype, and generate production-ready code for web applications in real time. It bridges the gap between design and development by allowing seamless transitions from visual components to clean, reusable code. With features like responsive design controls, code generation, and component libraries, TeleportHQ empowers teams to focus on creativity while automating repetitive coding tasks.

How we built it

TeleportHQ was built with a combination of cutting-edge web technologies and a deep understanding of the design-to-development workflow. Our platform is powered by an internal representation we call UIDL. This structure is parsed by our open-source code-generators which output code in 10 different formats. On top of it we have a collaborative visual-editing experience.

Challenges we ran into

Building web UIs has become an increasingly complex task. Beyond the pure UI design, there are numerous additional layers to consider: interactions, local states, global states, animations, data fetching, component management, and many other aspects. To address this complexity, we had to model all these elements into our UIDL.

Today, we export code into 10 different frameworks, which brings its own set of challenges. Ensuring the code looks identical when using frameworks like Next.js or plain HTML is no small feat. Our biggest challenge lies in maintaining functional parity across all frameworks.

Accomplishments that we're proud of

Over the past six years, we’ve dedicated ourselves to developing our platform and open-source code generators. Today, we stand as the only open-source code-generation solution capable of achieving this. We envision our approach evolving into a framework-agnostic, universal meta UI description language—one that can withstand framework updates and seamlessly adapt to emerging technologies.

What we learned

Overall, this journey has been a humbling lesson in understanding the complexities of building performant UIs. It required us to dive deep into every aspect of the process. However, one challenge that remains unsolved—and one we hope to address with AI in the near future—is the ability to create UIs that are not only highly functional but also truly aesthetic.

What's next for TeleportHQ

Our goal is to remove the need for technical expertise in creating highly complex and visually appealing UIs, enabling everyone to build software at the speed of thought.

Share this project:

Updates