Component props on the canvas, AI sections and themes

TeleportHQ's July 2024 release lets you edit component props directly on the canvas, adds link props, and introduces a Sections tab, themes, a redesigned AI website creation flow and AI editing for images and text.

Updates#

Component prop editing directly in the canvas#

We've completely reworked component instance editing to make it easier and more intuitive.

You can now simply click on an element that is bound to a dynamic value and make your edits directly on the canvas. When selecting a component element you will also still be able to make the edits in the props in the Right panel as well.

When selecting a component directly, in the Right panel you will notice all of the props with their respective styling as well.

Creating link props#

Link props can now be created and added to elements in component instances.

Adding a link prop to an element inside of a component will make the element in all of the component instances linkable. You can then use the same component in different situations and have the element with the Link prop link to different places. (ex: If you have two instances, the link in instance A can go to a different page and the link in instance B can scroll to a part of the page.)

To add a link prop, double click to start editing the component, select the element you want to link from, click the link icon and use the Create prop icon. When returning to page editing, select the element and a new Link icon will appear.

Additionally when creating a link you will also have the option to have the link Open in a new tab or not.

Scroll to links to component instances#

Components will now appear automatically in the Scroll-to section when adding links.

Prior to this change you were not able to add an ID to components without the need to detach from the main component. Now whenever a component is created it will automatically appear in the scroll-to section of the link window.

Replace images and videos with AI#

Images and videos can now be easily replaced with the Ask AI feature.

Select an image and whether it’s in a component instance or not, you can click on the Ask AI button and give the AI a prompt. You can hit the Enter key multiple times to make the AI give you alternatives faster. This makes finding the right image much faster and precise.

Rich text now available as a component prop#

Rich text can now be added to components and used as props.

The rich text elements can then be further edited either directly in the canvas or in the Right panel. This is a first iteration of rich text editing, with further enhancements to come later down the line.

New AI website creation flow#

The AI website creation flow has been completely redesigned.

While the previous version of the website builder used a static template to generate identical websites, the latest version uses a series of interchangeable hand crafted sections to websites that are much more unique and in tone with the prompt used at the start of the creation flow.

New website sections and Sections tab#

The new sections that are used by the AI website builder can also be found in a new Sections tab and added manually in any project. The new Sections tab can be found in the Left panel, just below the Elements tab.

Additionally when selecting a section or component in a project you have the option to Add a new section below or Replace section, which will automatically take you to the Sections tab.

New page creation flow and page templates#

Together with the new website creation flow we have also added a way to generate new pages faster.

To facilitate this we have created 5 new categories of pages each with several page variants that you can choose from. Each of these page variants is created using the brand new website sections. When creating a new page you can also choose to have AI generated text.

This greatly improves the experience of creating a full website with multiple pages.

Themes and theme editing#

All of the sections found in the New sections tab which are also used in the Ai Website Builder can be quickly restyled using Themes.

Clicking outside of the canvas will take you to the Design tab in the Right panel. In the color tab you will find a dropdown menu from which you can select a new theme with different colors and fonts. Almost all of the new themes also have a Dark mode which can be activated using a switch.

All of the themes can also be further customized by using the Edit icon right next to the theme. These options make it a lot easier to customize AI generated websites or websites created using our sections.

AI text editing options#

Text elements can easily be edited in TeleportHQ using AI.

When selecting any text element in a project you will have the Ask AI option right above it. Using this you can give the AI a prompt for the change or you can use one of the pre established options to make the text shorter, longer or change the tone of the text.

The power of AI at your fingertips. No more need to go back and forth between TeleportHQ and another AI text generation tool.

Improvements & Fixes#

• Added option to view and navigate to instances of any component
• Added a new Wireframe button in Top bar to improve editing visibility
• Rearranged the Code and Export buttons into a new Code window