Quick Setup

The quickest way to get started with our ecosystem is to try out one of our pre-configured component generators.

Install one of the following:

npm install @teleporthq/teleport-component-generator-react
npm install @teleporthq/teleport-component-generator-vue

or using yarn:

yarn add @teleporthq/teleport-component-generator-react
yarn add @teleporthq/teleport-component-generator-vue

For generating a component, you have to start from a component UIDL:

{
  "name": "My First Component",
  "node": {
    "type": "element",
    "content": {
      "elementType": "text",
      "children": [
        {
          "type": "static",
          "content": "Hello World!"
        }
      ]
    }
  }
}

TIP

You can play with the UIDL structure on the online REPL (opens new window)

To use the pre-configured component generators you have to create your generator instance and call the generateComponent async function:

import { createReactComponentGenerator } from '@teleporthq/teleport-component-generator-react'

const uidl = { ... } // your sample here
const generator = createReactComponentGenerator();
const { files } = await generator.generateComponent(uidl)
console.log(files[0].content)

The console output will be something like:

import React from 'react'

const MyFirstComponent = (props) => {
  return <span>Hello World!</span>
}

export default MyFirstComponent

For the Vue generator, just switch the package:

import { createVueComponentGenerator } from '@teleporthq/teleport-component-generator-vue'

const uidl = { ... } // your sample here
const generator = createVueComponentGenerator();
const { files } = await generator.generateComponent(uidl)
console.log(files[0].content)

The console output will be something like:

<template>
  <span>Hello World!</span>
</template>

<script>
export default {
  name: 'MyFirstComponent',
}
</script>