Date:13/12/2024

Localization, extended props and page-level Ask AI

TeleportHQ's December 2024 release adds Localization, new prop types for components, an Accordion element, a Google Maps element and page-level Ask AI, together with gradient tokens, search, a Functions folder and many editor updates.

Major updates

Localization

Our biggest update this time is Localization. You can now enable any language on your projects, add a language switcher that cycles through those languages, and manage your texts in a very organized way.

Together with AI translate, this feature lets you localize your website in seconds with amazing benefits to traffic, user experience, and SEO.

Code export for projects with localization enabled is only available for Next.js at the moment.

Enabling languages on a project and switching between them with a language switcher

Props extended utility

We have brought a massive update on the ability to create dynamic properties inside components. By opening the Setup Panel inside components you will now be able to create props from there directly. Added support for Boolean, Number, Array, Object and Function props.

This update will unlock a multitude of building capabilities in respect to using components.

Creating props from the Setup Panel inside a component

Accordion element

We've added a new Accordion element under Interactive elements. This one uses just plain HTML to function, so there's no side JS loaded for it!

The Accordion element opening and closing its items

Google Maps element

This new element is a simple iframe wrapper pointing to Google Maps. It should simplify the process of adding maps to your project, and it also comes with support for component props. Changes to the location may require a refresh (page change) as that wasn't caught in this patch, but it will be fixed.

A Google Maps element added to a page

Page-level Ask AI

We’ve added a page-level Ask AI functionality in the form of a new button in the top-left of the canvas. This new functionality will attempt to change all the images, texts, or videos on the page or component you are currently editing.

You can rewrite, translate, or change the tone of texts, and search for new images/videos with a certain theme immediately. Do note that for large pages it might take a while.

The Ask AI button at the top left of the canvas changing a whole page

Render conditionally using Props

We've upgraded the conditional rendering to support multiple operations (<, >, =, !=, etc.), added support for prop conditional rendering, and updated icons and general UX for the feature.

With this feature, you can easily create variants for your components.

Setting a condition on a prop to render a component variant

Updates

Gradient tokens

When creating a token you can now choose if you want it to be a gradient or a regular color token.

Gradients have an easy-to-use interface, so it should be quite easy to pick the colors you want now and create beautiful sections. You can even update theme tokens to gradients if you wish!

Creating a gradient token with the gradient picker

Eye dropper functionality

The Eye Dropper functionality lets you pick a specific color from somewhere on the screen.

You can find it in the regular color picker UI. It is only available in Chromium browsers though.

Picking a color from the screen with the eye dropper in the color picker

Reorganized Project Menu and Advanced features

You can now toggle advanced features on or off from Project Menu -> Advanced Features, directly in the project. No more going into Project Settings required! (though, the options are still there for any who liked the previous location)

We’ve also reorganized and detailed all of the features in the project menu under the Edit, Advanced features, and View menus.

In a future update, videos and tooltips will be added, as well as more options to configure projects to your liking.

The reorganized Project Menu with the Edit, Advanced features and View menus

More control over prop behavior

There is now an option under Project Menu -> Edit to change the behavior of props when duplicating nodes.

It's been quite debated which behavior is better for this case, so why not make everyone happy?

The option for prop behavior when duplicating nodes in the Project Menu

Grid element

We’ve added grids back as elements but this time with support for them in the visual inspector!

A Grid element configured in the visual inspector

Visual inspector improvements

We made a visual update to the Margin/Padding sections to make them more easily recognizable, added Overflow and Ratio fields to the size section, added Fixed, Relative, and Sticky to Position section, and enabled support for Flex, Grid, and Block in the Inner layout sections.

The updated Margin/Padding, size and Position sections of the visual inspector

Bulk style deletion

In the Advanced inspector tab you can now bulk delete all the styles on a media query.

It's only available in the Advanced Inspector for now, but if you enjoy this one we can add it to classes and maybe other places as well. The operation is undoable.

Deleting all styles of a media query at once in the Advanced inspector

Enabled Advanced Inspector for component instances

This gives you a lot more flexibility over component instance styling. You can add custom styles manually in the Advanced panel for each individual instance of a component.

Adding custom styles to a single component instance in the Advanced panel

Search for Pages, Components and Layers

We've finally added the search functionality for pages, components, and layers. Now you'll find pages/comps/layers much more easily. For layers search, you can now easily find nodes linked to a certain class or with some ID, or maybe those elusive Code Embed nodes that can only be seen in the tree view.

Searching for pages, components and layers in the Left panel

New Functions folder

You can now upload JS files to this folder to be run as cloud functions that run post-deployments.

Furthermore, if you need to access an external package in the cloud function, you just need to import them like you normally would and the code generation pipeline will take care of having the package available in package.json.

You can find this folder in the Assets Manager -> Functions.

The Functions folder in the Assets Manager

Icons library update

We’ve added over 100k new icons (including animated ones) for you to play with. You can find them all under Assets Manager -> Icons. Hope you’ll enjoy exploring the new additions!

Browsing the icons library in the Assets Manager

Resize code editor

A nice quality-of-life improvement, you can now resize the code editor of code embeds and code imports to your liking. This also applies to the code previewer & publish tab. Should help improve readability quite a bit!

Resizing the code editor of a code embed

Create and delete CMS pages

We have added the ability to create and delete CMS list and details pages.

You can now create a new CMS page by clicking the "+" button in the Layers view -> New Page -> CMS Pages. From the Layers view, just right click on the page that you want to delete. A contextual menu will appear with the option to delete the page.

Creating a CMS page from the plus button in the Layers view

Improvements & Fixes

  • Browser back and forward buttons will work to cycle through the accessed pages/components
  • Position and zoom on pages and components will be tracked and applied when switching between them
  • Array Mapper is available inside components
  • Added support for Array props in components
  • Added support for Object props in components
  • Added support for Function props in components (limited to React/NextJS exports - working with our publish mechanism)
  • Limits for Array Mappers: you can now define a start and end for array mapper elements if you want to show just a portion of the array.
Share