The Second Version of Our Vision Api
Alex Moldovan
Alex Moldovan@alexnmoldovan
Posted on September 5, 2019

New Release: Code Generators v0.9

We’re excited to report major progress on the teleportHQ code generation libraries! In this new release, we've added new component and project generators for:  angular,  preact  and  stencil.

Visual representation of our new code generator

Give it a spin at:

For some months before v0.9, we were busy working on the underlying infrastructure and architecture for the ecosystem. First we split the packages on npm with a  lerna monorepo setup  in v0.7. We then worked at providing generic functionalities for component and project generators in v0.8. With these changes, we enable developers to customize, configure and extend existing packages.

With this model behind, we’re happy to announce the new official component generators:

These new packages add up to our  extensive ecosystem  of plugins, component and project generators.


When it comes to enterprise application development and not only, Angular is one of the most popular solutions out there. Angular components are usually made up of 3 separate files: the template HTML, the TypeScript class component and the CSS file. Building Angular components was an interesting task. We ended mixing functionalities we had from the Vue and Stencil component generators. We’re currently working on a solution to have a project generator based on Angular components.


When you don’t need the full power of React, Preact.js comes as a super small (3Kb gzipped lib) alternative for modern web application. Preact works great especially when keeping a minimal bundle size is crucial. Starting from the React plugin system, building Preact components was pretty easy. On top of that, we added a  Preact-based project generator, which starts from the template offered by the 'preact-cli'.


Web Components are great as they offer native support for encapsulation, local state and scoped styling. Stencil.js is one of the most popular solutions for compiling down to web components. Stencil offers a great developer experience with: JSX syntax, TypeScript and scoped CSS.

If you want to experiment with the new generators, head over to the  online REPL  or check out the docs for a  quick local setup  based on the npm packages.

What's next

We have v0.10 on the horizon. This release will expand our ecosystem with the  React Native  component and project generators. We’re also working on adding new publishers for the existing project generators. Finally, we are exploring the generation of component systems based on the UIDL structure.

Our blog’s code is automatically generated from a  teleport project definition. The blog is open-source and you can learn more about how the technology works from our  github repo.

European Union FlagEuropean Union FlagEuropean Union Flag

Competitivi Împreună

Dezvoltarea produsului TIC Unicornspace, instrument de prototipare, design vizual și generator de cod cu aplicabilitate în sectoarele industrii creative, sănătate și tic pentru integrarea pe verticală a solutiilor TIC

Pentru informații detaliate despre celelalte programe cofinanțate de Uniunea Europeană, vă invităm să vizitați

Conținutul acestui material nu reprezintă în mod obligatoriu poziția oficială a Uniunii Europene sau a Guvernului României.

Evo Forge, Calea Motilor nr 84, Cluj-Napoca
Phone: +40 (0)364 101 203