Skip to content
teleportHQ's User Interface Definition Language (UIDL) and libraries demoed through our official blog
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Alt text

Official blog.

Build Status code style: prettier


Our blog is built with teleportHQ's User Interface Definition Language (UIDL) and libraries. In this technology demo, we're generating Next.js code.

Getting started

git clone
cd blog
npm i
npm run build
npm run dev

NOTE: our blog is an app which is mounted on thanks to the awesome Now platform. Therefore, locally only urls built after /blog will be working.


The purpose of this repo is to demonstrate how a teleport project (plain JavaScript object or JSON file respecting teleportHQ's UIDL) can be transformed in real-time in a chosen target code.

Project Structure

  • src/index.ts: main file in which we're building a teleport project definition, generating the code, and saving the files to disk, in the dist folder
  • src/data/target.ts: a configuration object (common to) and injected in all pages
  • src/data: list of all the project elements, components and pages, wrapped into functions

How it works

When you run npm run dev we chain 2 operations:

  • on every file change in src folder, we transpile in memory and run all our TypeScript code width ts-node. At this stage, all the code of our Next.js project is generated in the dist folder
  • then we run npm run dev in dist folder. This will start Next.js default server and you can see your project on http://localhost:3000

Teleport Project Definition

At every change, you can see the resulting teleport project definition file here: http://localhost:3000/static/blog/teleport.json

You can’t perform that action at this time.