Release notes
December 2024July 2024February 2024
September 2023
May 2023
January 2023
November 2022October 2022September 2021August 2021May 2021March 2021August 2020July 2020June 2020May 2020April 2020
September 2023
May 2023
January 2023
November 2022October 2022September 2021August 2021May 2021March 2021August 2020July 2020June 2020May 2020April 2020
December 13, 2024
v5.0.0Major 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.
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.
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.
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.
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!
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!
GoogIe 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.
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.
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.
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.
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.
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.
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!
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!
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.
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.
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.
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.
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?
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?
Grid element
We’ve added grids back as elements but this time with support for them in the visual inspector!
We’ve added grids back as elements but this time with support for them 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Icons library update
We’ve added over 100k new icons for you to play with You can find them all under Assets Manager -> Icons. Hope you’ll enjoy exploring the new additions!
We’ve added over 100k new icons for you to play with You can find them all under Assets Manager -> Icons. Hope you’ll enjoy exploring the new additions!
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!
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!
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.
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.
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.
Future releases
- The TeleportHQ AI Copilot will simplify implementing advanced TeleportHQ features that typically require deep technical expertise. For example, Copilot will automatically generate a function to fetch data from any source and connect it directly to a UI component in your project.
- Organizing components and pages in folders.
- Version control for projects. Create snapshots of your project and revert to them if needed.
- Built-in Form support.
- Built-in Authentication support.
- Enabling Events and State Definitions on pages.
- Global state management. This will be a big one in terms of building more complex applications.
- Component Marketplace. Share your components with the world and use them.
- Right to left layout support.
- Tables, Modal, Chart interactive Element.
Built in TeleportHQ